File size: 2,636 Bytes
7b922de
 
 
 
 
 
72dfda2
97bf4c9
417f3d8
5c3a9b3
 
 
 
97bf4c9
d3510ca
5c3a9b3
 
 
97bf4c9
 
417f3d8
97bf4c9
417f3d8
7b922de
417f3d8
 
 
72dfda2
 
 
417f3d8
 
 
 
72dfda2
 
5c3a9b3
417f3d8
 
97bf4c9
417f3d8
97bf4c9
 
417f3d8
 
97bf4c9
 
 
 
 
 
 
 
 
 
 
 
417f3d8
97bf4c9
 
 
417f3d8
97bf4c9
417f3d8
72dfda2
 
5c3a9b3
417f3d8
5c3a9b3
 
 
97bf4c9
 
417f3d8
97bf4c9
5c3a9b3
417f3d8
72dfda2
5c3a9b3
 
 
417f3d8
 
 
 
 
5c3a9b3
 
 
 
417f3d8
5c3a9b3
7b922de
97bf4c9
d3510ca
 
cbd46ca
d3510ca
cbd46ca
d3510ca
 
417f3d8
d3510ca
 
 
 
 
417f3d8
 
d3510ca
 
 
 
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
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #E5E5E5, #D1D1D1); /* Perubahan gradien agar lebih halus */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
  position: relative; /* Agar watermark terletak di atas background */
}

.container {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Efek bayangan lebih tegas */
  padding: 40px;
  width: 400px; /* Ukuran container sedikit lebih besar */
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1; /* Agar watermark berada di belakang */
}

h1 {
  font-size: 30px; /* Membuat judul lebih besar */
  margin-bottom: 25px;
  color: #4CAF50; /* Warna hijau yang lebih segar */
  font-weight: 700; /* Berat font lebih tebal */
}

input, select {
  padding: 14px;
  margin: 15px 0;
  width: 100%;
  font-size: 18px; /* Ukuran font lebih besar */
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Bayangan lebih soft */
  transition: all 0.3s ease-in-out;
}

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: 15px;
}

span {
  font-size: 20px;
  font-weight: 500;
  color: #777;
}

button {
  padding: 14px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  width: 100%;
  font-size: 20px; /* Ukuran font lebih besar */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: #45a049;
  transform: translateY(-2px); /* Efek tombol bergerak sedikit saat hover */
}

button:active {
  transform: translateY(1px); /* Efek tombol sedikit tertekan */
}

#result {
  margin-top: 20px;
  font-size: 24px; /* Ukuran font lebih besar */
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
}

/* Watermark dengan Copyright */
body::after {
  content: "© 2025 Powered by Teggar";
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3); /* Transparansi untuk watermark */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1; /* Agar watermark berada di belakang konten */
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}