File size: 2,091 Bytes
f41e6b3 1b86b44 f41e6b3 05d1a10 1b86b44 f41e6b3 05d1a10 f41e6b3 08fa787 f41e6b3 05d1a10 f41e6b3 2a60bf4 f41e6b3 13c110b f41e6b3 25aafa1 f41e6b3 21e3f46 f41e6b3 4fbca64 21e3f46 f41e6b3 1b86b44 2a60bf4 f41e6b3 2a60bf4 f41e6b3 21e3f46 2a60bf4 f41e6b3 08fa787 f41e6b3 08fa787 2a60bf4 f41e6b3 f5a5d03 f41e6b3 2a60bf4 f41e6b3 2a60bf4 f41e6b3 08fa787 f41e6b3 91bbfc3 f41e6b3 2a60bf4 f41e6b3 25aafa1 e4c33bc 1b86b44 08fa787 f41e6b3 e4c33bc | 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 | /* General */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #001d57; /* Latar belakang biru gelap */
}
.container {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
}
/* Header */
header h1 {
text-align: center;
margin-bottom: 20px;
color: #001d57;
font-size: 22px;
font-weight: bold;
}
/* Form Groups */
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: bold;
}
input, select {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
transition: border-color 0.3s ease;
}
input:focus, select:focus {
border-color: #87cefa;
outline: none;
}
/* Swap Button */
.swap-group {
text-align: center;
margin: 15px 0;
}
#swapButton {
background-color: #87CEFA; /* Biru Langit */
border: none;
border-radius: 50%;
padding: 15px;
font-size: 18px;
color: white;
cursor: pointer;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
#swapButton:hover {
background-color: #5faad7; /* Biru Langit Gelap */
transform: scale(1.1);
}
/* Convert Button */
.convert-button {
background-color: #007bff;
border: none;
border-radius: 8px;
padding: 14px 20px;
font-size: 18px;
color: white;
font-weight: bold;
cursor: pointer;
width: 100%;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.convert-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
/* Result Box */
.result-box {
margin-top: 15px;
padding: 15px;
font-size: 16px;
color: #333;
text-align: center;
background-color: #f0f4ff;
border: 1px solid #87cefa;
border-radius: 8px;
}
/* Footer */
footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
|