File size: 1,941 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 a15fcdc 680fcd9 a15fcdc 258b2cc 25aafa1 13c110b 9cd7849 25aafa1 a9f1847 680fcd9 9cd7849 25aafa1 13c110b 4fbca64 a15fcdc a9f1847 a15fcdc a9f1847 258b2cc 13c110b 05d1a10 91bbfc3 05d1a10 258b2cc 91bbfc3 680fcd9 4fbca64 a9f1847 13c110b 91bbfc3 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 |
/* 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;
}
.input-group select {
padding: 12px;
font-size: 14px;
border-radius: 8px;
border: 1px solid #ccc;
width: 100%;
}
.swap-group {
display: flex;
justify-content: center;
margin: 10px 0;
}
#swapButton {
background-color: #ffffff;
color: #333;
border: 1px solid #ccc;
border-radius: 50%;
padding: 10px;
cursor: pointer;
font-size: 18px;
}
#swapButton:hover {
background-color: #f1f1f1;
}
.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);
}
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;
}
footer {
margin-top: 20px;
font-size: 14px;
color: #666;
text-align: center;
}
|