New Version 2 -- prolly doesn't work.
This commit is contained in:
Aaron D. Lee
15
frontends/web/static/favicon.svg
Normal file
15
frontends/web/static/favicon.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#667eea"/>
|
||||
<stop offset="100%" style="stop-color:#764ba2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M32 4 L56 14 L56 32 C56 48 44 58 32 62 C20 58 8 48 8 32 L8 14 Z" fill="url(#grad)"/>
|
||||
<rect x="16" y="18" width="32" height="24" rx="2" fill="#1a1a2e" stroke="#fff" stroke-width="1.5"/>
|
||||
<polygon points="16,42 26,30 34,36 48,22 48,42" fill="#667eea" opacity="0.5"/>
|
||||
<rect x="24" y="30" width="16" height="12" rx="2" fill="#fff"/>
|
||||
<path d="M27 30 L27 25 C27 20 37 20 37 25 L37 30" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="32" cy="35" r="2.5" fill="url(#grad)"/>
|
||||
<rect x="31" y="35" width="2" height="4" fill="url(#grad)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 866 B |
23
frontends/web/static/logo.svg
Normal file
23
frontends/web/static/logo.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#667eea"/>
|
||||
<stop offset="100%" style="stop-color:#764ba2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="photoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
||||
<stop offset="100%" style="stop-color:#16213e"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="100" cy="100" r="95" fill="none" stroke="url(#shieldGrad)" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M100 20 L170 45 L170 100 C170 145 140 175 100 185 C60 175 30 145 30 100 L30 45 Z" fill="url(#shieldGrad)" opacity="0.95"/>
|
||||
<rect x="50" y="55" width="100" height="75" rx="4" ry="4" fill="url(#photoGrad)" stroke="#fff" stroke-width="2" opacity="0.9"/>
|
||||
<polygon points="50,130 75,95 95,115 130,75 150,130" fill="#667eea" opacity="0.6"/>
|
||||
<circle cx="125" cy="75" r="12" fill="#ffd700" opacity="0.8"/>
|
||||
<g transform="translate(100, 105)">
|
||||
<rect x="-18" y="-5" width="36" height="28" rx="4" ry="4" fill="#fff" opacity="0.95"/>
|
||||
<path d="M-10 -5 L-10 -18 C-10 -30 10 -30 10 -18 L10 -5" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" opacity="0.95"/>
|
||||
<circle cx="0" cy="8" r="5" fill="url(#shieldGrad)"/>
|
||||
<rect x="-2.5" y="8" width="5" height="10" rx="1" fill="url(#shieldGrad)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
257
frontends/web/static/style.css
Normal file
257
frontends/web/static/style.css
Normal file
@@ -0,0 +1,257 @@
|
||||
/* ============================================================================
|
||||
Stegasoo - Main Stylesheet
|
||||
============================================================================ */
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
CSS Variables
|
||||
---------------------------------------------------------------------------- */
|
||||
:root {
|
||||
--gradient-start: #667eea;
|
||||
--gradient-end: #764ba2;
|
||||
--bg-dark-1: #1a1a2e;
|
||||
--bg-dark-2: #16213e;
|
||||
--bg-dark-3: #0f3460;
|
||||
--text-muted: rgba(255, 255, 255, 0.5);
|
||||
--border-light: rgba(255, 255, 255, 0.1);
|
||||
--overlay-dark: rgba(0, 0, 0, 0.3);
|
||||
--overlay-light: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Base Styles
|
||||
---------------------------------------------------------------------------- */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 50%, var(--bg-dark-3) 100%);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Navigation
|
||||
---------------------------------------------------------------------------- */
|
||||
.navbar {
|
||||
background: var(--overlay-dark) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Cards
|
||||
---------------------------------------------------------------------------- */
|
||||
.card {
|
||||
background: var(--overlay-light);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Buttons
|
||||
---------------------------------------------------------------------------- */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Forms
|
||||
---------------------------------------------------------------------------- */
|
||||
.form-control,
|
||||
.form-select {
|
||||
background: var(--overlay-light);
|
||||
border: 1px solid var(--border-light);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--gradient-start);
|
||||
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Fix dropdown options for dark theme */
|
||||
.form-select option {
|
||||
background: var(--bg-dark-1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Hero & Icons
|
||||
---------------------------------------------------------------------------- */
|
||||
.hero-icon {
|
||||
font-size: 4rem;
|
||||
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Phrase Display
|
||||
---------------------------------------------------------------------------- */
|
||||
.phrase-display {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 1rem;
|
||||
background: var(--overlay-dark);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid var(--gradient-start);
|
||||
display: inline-block;
|
||||
line-height: 1.6;
|
||||
word-spacing: 0.3rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
PIN Display
|
||||
---------------------------------------------------------------------------- */
|
||||
.pin-display {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.75rem;
|
||||
background: linear-gradient(135deg, #fef08a, #fcd34d, #fb923c);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pin-container {
|
||||
background: var(--overlay-dark);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Story Cards (Memory Aid)
|
||||
---------------------------------------------------------------------------- */
|
||||
.story-word {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.story-card {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-left: 3px solid var(--gradient-start);
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.story-card .day-label {
|
||||
font-weight: bold;
|
||||
color: var(--gradient-start);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Alert / Message Display
|
||||
---------------------------------------------------------------------------- */
|
||||
.alert-message {
|
||||
background: var(--overlay-dark);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Drop Zone (Drag & Drop File Upload)
|
||||
---------------------------------------------------------------------------- */
|
||||
.drop-zone {
|
||||
position: relative;
|
||||
border: 2px dashed rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.drop-zone.drag-over {
|
||||
border-color: var(--gradient-start);
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.drop-zone input[type="file"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drop-zone-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.drop-zone-preview {
|
||||
max-height: 120px;
|
||||
border-radius: 0.375rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Footer
|
||||
---------------------------------------------------------------------------- */
|
||||
footer {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Custom Alert Variants
|
||||
---------------------------------------------------------------------------- */
|
||||
.alert-success-bright {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
border-color: #22c55e;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Utility Classes
|
||||
---------------------------------------------------------------------------- */
|
||||
.bg-dark-subtle {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
Reference in New Issue
Block a user