mirror of
https://github.com/rjNemo/payit
synced 2026-06-06 10:26:40 +00:00
Ruidy
9814dc5e30
Refactored web server to move route registration into a dedicated method and extracted static CSS into its own file for better maintainability. Updated HTML template to use external stylesheet and improved JS code style consistency. This enhances separation of concerns and prepares for easier future asset management.
83 lines
1.4 KiB
CSS
83 lines
1.4 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
font-family:
|
|
"Inter",
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
line-height: 1.5;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at top, #fdfbfb, #ebedee);
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
}
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 18px;
|
|
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
|
|
padding: 2.5rem;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
}
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 1.75rem;
|
|
color: #0f172a;
|
|
}
|
|
p {
|
|
margin: 0.5rem 0 1.5rem;
|
|
color: #475569;
|
|
}
|
|
.price {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #2563eb;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
label {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
input[type="number"] {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 12px;
|
|
border: 1px solid #cbd5f5;
|
|
font-size: 1rem;
|
|
}
|
|
button {
|
|
background: linear-gradient(135deg, #2563eb, #7c3aed);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
padding: 0.9rem 1.2rem;
|
|
cursor: pointer;
|
|
transition:
|
|
transform 0.15s ease,
|
|
box-shadow 0.15s ease;
|
|
}
|
|
button:hover:not([disabled]) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
|
|
}
|
|
button[disabled] {
|
|
opacity: 0.65;
|
|
cursor: wait;
|
|
}
|
|
#message {
|
|
min-height: 1.5rem;
|
|
color: #dc2626;
|
|
font-size: 0.95rem;
|
|
}
|