|
:root { |
|
--primary-color: #8a2be2; |
|
--secondary-color: #4b0082; |
|
--accent-color: #9370db; |
|
--text-color: #f8f9fa; |
|
--card-bg: rgba(25, 25, 35, 0.8); |
|
--input-bg: rgba(30, 30, 40, 0.6); |
|
--success-color: #6ab04c; |
|
--error-color: #eb4d4b; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: 'Quicksand', sans-serif; |
|
color: var(--text-color); |
|
background-color: #121212; |
|
min-height: 100vh; |
|
position: relative; |
|
overflow-x: hidden; |
|
} |
|
|
|
|
|
.stars, .twinkling { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.stars { |
|
background: #000 url('https://i.imgur.com/YKY28eT.png') repeat top center; |
|
z-index: -2; |
|
} |
|
|
|
.twinkling { |
|
background: transparent url('https://i.imgur.com/XYMF4ca.png') repeat top center; |
|
z-index: -1; |
|
animation: move-twink-back 200s linear infinite; |
|
} |
|
|
|
@keyframes move-twink-back { |
|
from {background-position: 0 0;} |
|
to {background-position: -10000px 5000px;} |
|
} |
|
|
|
|
|
.container { |
|
max-width: 1000px; |
|
margin: 0 auto; |
|
padding: 2rem 1rem; |
|
} |
|
|
|
|
|
header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 2rem; |
|
padding-bottom: 1rem; |
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
} |
|
|
|
.title-container h1 { |
|
font-size: 2.2rem; |
|
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.title-container p { |
|
font-size: 1.1rem; |
|
color: var(--accent-color); |
|
} |
|
|
|
.user-actions { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.btn-logout { |
|
background-color: rgba(255, 255, 255, 0.1); |
|
color: var(--text-color); |
|
border: none; |
|
padding: 0.5rem 1rem; |
|
border-radius: 50px; |
|
cursor: pointer; |
|
transition: all 0.3s; |
|
text-decoration: none; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.btn-logout:hover { |
|
background-color: rgba(255, 255, 255, 0.2); |
|
} |
|
|
|
|
|
.card { |
|
background-color: var(--card-bg); |
|
border-radius: 16px; |
|
padding: 2rem; |
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); |
|
backdrop-filter: blur(10px); |
|
margin-bottom: 2rem; |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
transition: transform 0.3s, box-shadow 0.3s; |
|
} |
|
|
|
.card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); |
|
} |
|
|
|
|
|
.form-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.form-group label { |
|
display: block; |
|
margin-bottom: 0.5rem; |
|
font-weight: 500; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.form-group label i { |
|
color: var(--accent-color); |
|
} |
|
|
|
input, textarea, select { |
|
width: 100%; |
|
padding: 1rem; |
|
background-color: var(--input-bg); |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
border-radius: 8px; |
|
color: var(--text-color); |
|
font-family: 'Quicksand', sans-serif; |
|
font-size: 1rem; |
|
transition: all 0.3s; |
|
} |
|
|
|
input:focus, textarea:focus, select:focus { |
|
outline: none; |
|
border-color: var(--accent-color); |
|
box-shadow: 0 0 0 2px rgba(147, 112, 219, 0.2); |
|
} |
|
|
|
textarea { |
|
min-height: 120px; |
|
resize: vertical; |
|
} |
|
|
|
select { |
|
appearance: none; |
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239370db' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); |
|
background-repeat: no-repeat; |
|
background-position: calc(100% - 1rem) center; |
|
padding-right: 2.5rem; |
|
} |
|
|
|
|
|
.btn-convert, .btn-copy { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.5rem; |
|
padding: 1rem 2rem; |
|
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
|
color: white; |
|
border: none; |
|
border-radius: 50px; |
|
font-family: 'Quicksand', sans-serif; |
|
font-size: 1.1rem; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: all 0.3s; |
|
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); |
|
} |
|
|
|
.btn-convert { |
|
width: 100%; |
|
} |
|
|
|
.btn-convert:hover, .btn-copy:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4); |
|
} |
|
|
|
.btn-convert:active, .btn-copy:active { |
|
transform: translateY(1px); |
|
} |
|
|
|
|
|
.result-card h2 { |
|
margin-bottom: 1.5rem; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.result-card h2 i { |
|
color: var(--success-color); |
|
} |
|
|
|
.result-container { |
|
position: relative; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
#convertResult { |
|
padding-right: 4rem; |
|
} |
|
|
|
.btn-copy { |
|
position: absolute; |
|
right: 0.5rem; |
|
top: 0.5rem; |
|
padding: 0.5rem; |
|
font-size: 0.9rem; |
|
min-width: auto; |
|
} |
|
|
|
.tip { |
|
text-align: center; |
|
margin-top: 1rem; |
|
} |
|
|
|
.tip p { |
|
color: var(--accent-color); |
|
font-size: 1.1rem; |
|
} |
|
|
|
|
|
footer { |
|
text-align: center; |
|
margin-top: 4rem; |
|
padding: 1.5rem 0; |
|
color: rgba(255, 255, 255, 0.6); |
|
font-size: 0.9rem; |
|
} |
|
|
|
|
|
.toast { |
|
position: fixed; |
|
bottom: 2rem; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
padding: 0.75rem 1.5rem; |
|
background-color: rgba(0, 0, 0, 0.8); |
|
color: white; |
|
border-radius: 50px; |
|
font-size: 0.9rem; |
|
opacity: 0; |
|
transition: opacity 0.3s; |
|
z-index: 1000; |
|
} |
|
|
|
.toast.show { |
|
opacity: 1; |
|
} |
|
|
|
|
|
.login-container { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
min-height: 100vh; |
|
padding: 1rem; |
|
} |
|
|
|
.login-card { |
|
background-color: var(--card-bg); |
|
border-radius: 16px; |
|
padding: 2.5rem; |
|
width: 100%; |
|
max-width: 400px; |
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); |
|
backdrop-filter: blur(10px); |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
text-align: center; |
|
} |
|
|
|
.login-card h1 { |
|
font-size: 1.8rem; |
|
margin-bottom: 0.5rem; |
|
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.login-card h3 { |
|
color: var(--accent-color); |
|
margin-bottom: 2rem; |
|
font-weight: 500; |
|
} |
|
|
|
.alert { |
|
padding: 0.75rem; |
|
margin-bottom: 1.5rem; |
|
border-radius: 8px; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.alert-error { |
|
background-color: rgba(235, 77, 75, 0.2); |
|
color: #ff6b6b; |
|
border: 1px solid rgba(235, 77, 75, 0.3); |
|
} |
|
|
|
.btn-login { |
|
width: 100%; |
|
padding: 0.75rem; |
|
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
|
color: white; |
|
border: none; |
|
border-radius: 8px; |
|
font-family: 'Quicksand', sans-serif; |
|
font-size: 1rem; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: all 0.3s; |
|
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); |
|
} |
|
|
|
.btn-login:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4); |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
header { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
} |
|
|
|
.user-actions { |
|
margin-top: 1rem; |
|
width: 100%; |
|
justify-content: space-between; |
|
} |
|
|
|
.title-container h1 { |
|
font-size: 1.8rem; |
|
} |
|
} |
|
|
|
@media (max-width: 480px) { |
|
.card { |
|
padding: 1.5rem; |
|
} |
|
|
|
.btn-convert { |
|
padding: 0.75rem 1.5rem; |
|
} |
|
} |
|
|
