File size: 2,008 Bytes
258b2cc 05d1a10 13c110b 05d1a10 25aafa1 05d1a10 25aafa1 05d1a10 13c110b 05d1a10 258b2cc 680fcd9 13c110b 680fcd9 258b2cc 13c110b 258b2cc a9f1847 1b6268d 25aafa1 05d1a10 258b2cc 680fcd9 13c110b 05d1a10 91bbfc3 258b2cc 13c110b 680fcd9 13c110b 680fcd9 258b2cc 25aafa1 13c110b 9cd7849 25aafa1 a9f1847 680fcd9 9cd7849 25aafa1 13c110b 4fbca64 a9f1847 13c110b a9f1847 13c110b a9f1847 258b2cc 13c110b 05d1a10 91bbfc3 05d1a10 258b2cc 91bbfc3 680fcd9 4fbca64 a9f1847 13c110b 91bbfc3 c490b4c 05d1a10 c490b4c 25aafa1 258b2cc 05d1a10 680fcd9 05d1a10 4fbca64 05d1a10 25aafa1 05d1a10 258b2cc 680fcd9 25aafa1 |
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 |
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f7f8fa, #e7ebf0);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
}
header h1 {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
input {
padding: 12px;
width: 100%;
font-size: 16px;
border-radius: 8px;
border: 1px solid #ccc;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.currency-selectors {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.currency-group {
flex: 1;
}
.currency-group:not(:last-child) {
margin-right: 10px;
}
#swapButton {
background-color: #ffffff;
color: #333;
border: 1px solid #ccc;
border-radius: 50%;
padding: 10px;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
#swapButton:hover {
background-color: #f1f1f1;
}
select {
padding: 12px;
font-size: 14px;
border-radius: 8px;
border: 1px solid #ccc;
width: 100%;
}
button[type="submit"] {
padding: 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
width: 100%;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
.result-box {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: #333;
background-color: #f8f8f8;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
footer {
margin-top: 20px;
font-size: 14px;
color: #666;
text-align: center;
}
|