Spaces:
Running
Running
File size: 2,505 Bytes
7b922de 72dfda2 fdd77d0 9dd2c1c 5c3a9b3 97bf4c9 fdd77d0 5c3a9b3 97bf4c9 9dd2c1c 97bf4c9 fdd77d0 7b922de fdd77d0 72dfda2 9dd2c1c 72dfda2 5c3a9b3 fdd77d0 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 72dfda2 5c3a9b3 9dd2c1c 5c3a9b3 97bf4c9 9dd2c1c 97bf4c9 5c3a9b3 fdd77d0 72dfda2 5c3a9b3 fdd77d0 5c3a9b3 9dd2c1c 5c3a9b3 7b922de 97bf4c9 fdd77d0 d3510ca cbd46ca d3510ca cbd46ca d3510ca fdd77d0 d3510ca fdd77d0 d3510ca fdd77d0 5c3a9b3 |
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 137 138 139 |
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #F3F4F9, #C9D6E3);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
position: relative;
padding: 20px; /* Add padding for responsiveness */
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px; /* Limit max width for larger screens */
text-align: center;
position: relative;
overflow: hidden; /* Prevents overflowing content */
}
h1 {
font-size: 26px;
margin-bottom: 20px;
color: #2D3A3A;
font-weight: 600;
}
input, select {
padding: 14px;
margin: 10px 0;
width: 100%;
font-size: 16px;
border-radius: 8px;
border: 1px solid #E0E0E0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
input:focus, select:focus {
border: 1px solid #4CAF50;
outline: none;
box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
}
.currency-selectors {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
span {
font-size: 18px;
font-weight: 500;
color: #555;
}
button {
padding: 12px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
width: 100%;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #45a049;
transform: scale(1.05);
}
#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
text-transform: uppercase;
word-wrap: break-word;
}
/* Watermark dengan Copyright */
body::after {
content: "© 2025 Powered by Teggar";
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
opacity: 0.5;
pointer-events: none;
user-select: none;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Loading Indicator */
.loading {
display: none;
font-size: 18px;
color: #4CAF50;
}
.loading.show {
display: block;
}
/* Responsiveness for smaller screens */
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 22px;
}
input, select {
font-size: 14px;
}
button {
font-size: 16px;
}
} |