Spaces:
Running
Running
File size: 2,855 Bytes
769b231 7761e86 6a97837 7761e86 aff722f 7761e86 769b231 7761e86 769b231 3166a69 2fc7537 769b231 2fc7537 1bc8e6d 769b231 2fc7537 769b231 1bc8e6d a43263a 769b231 84a0793 2fc7537 a077f4c 84a0793 2fc7537 1bc8e6d 72df2dd a077f4c 769b231 2fc7537 1bc8e6d 7761e86 769b231 1bc8e6d 2fc7537 7761e86 1bc8e6d 7761e86 769b231 7761e86 769b231 1bc8e6d 2fc7537 1bc8e6d 502b5d6 1bc8e6d c29b7f4 72df2dd 2fc7537 c29b7f4 41130ec a077f4c 7761e86 1bc8e6d c29b7f4 769b231 2fc7537 1bc8e6d 2fc7537 769b231 aff722f 1bc8e6d aff722f 1bc8e6d aff722f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
/* Styling dasar untuk body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #4CAF50; /* Background hijau */
color: white;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
overflow-y: auto; /* Membolehkan scroll */
}
/* Container utama dengan bentuk melengkung */
.container {
width: 100%;
max-width: 800px;
background-color: #ffffff;
border-radius: 30px; /* Membuat sudut melengkung */
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
/* Styling untuk header */
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
font-size: 32px;
color: #4CAF50; /* Hijau untuk header */
margin: 10px 0;
}
header p {
color: #777;
font-size: 16px;
}
/* Styling untuk label dan input */
.currency-labels {
margin-bottom: 15px;
}
.currency-labels label {
font-size: 16px;
color: #333;
display: block;
}
/* Kotak input dan select (dropdown) */
input, select {
padding: 15px;
width: 100%;
max-width: 380px; /* Lebar kotak input lebih lebar */
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ddd;
background-color: #f5f5f5;
color: #333;
}
/* Tombol swap dengan model baru */
button#swap-btn {
background-color: #4CAF50; /* Hijau untuk tombol swap */
border: none;
padding: 12px;
color: white;
cursor: pointer;
font-size: 20px;
border-radius: 50%;
margin: 10px auto;
display: block;
width: 50px;
height: 50px;
}
button#swap-btn:hover {
background-color: #45a049;
}
/* Styling dropdown agar lebih modern */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 30px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16%3E%3Cpath d="M3.646 5.646a.5.5 0 0 1 .708 0L8 9.293l3.646-3.647a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E');
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 12px;
}
/* Tombol Convert */
button#convert-btn {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
button#convert-btn:hover {
background-color: #45a049;
}
/* Styling footer */
footer {
text-align: center;
margin-top: 20px;
font-size: 0.9em;
color: #777;
}
footer a {
color: #4CAF50;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
#result {
margin-top: 20px;
font-size: 1.5em;
color: #333;
}
|