diff --git a/CLAUDE.md b/CLAUDE.md index 1359f70..fbb53d1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,6 +2,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. +## Important Nots +Do not take screenshots yourself, ask the user to take screenshots of your visual changes if you want to so that you can verify them. + ## Commands **Go Executable:** diff --git a/backend/static/backgrounds/stars1.gif b/backend/static/backgrounds/stars1.gif new file mode 100644 index 0000000..8bc6a86 Binary files /dev/null and b/backend/static/backgrounds/stars1.gif differ diff --git a/backend/static/css/00-base.css b/backend/static/css/00-base.css index 8c2e589..eaa0450 100644 --- a/backend/static/css/00-base.css +++ b/backend/static/css/00-base.css @@ -1,10 +1,3 @@ -/* - * Theme tokens. - * :root holds the default "revamp" (Aurora glass) theme so the page looks right - * even before JS runs or when JS is disabled. [data-theme="classic"] restores the - * original dark-zinc look exactly. The theme attribute is set on by - * /static/js/05-theme.js from localStorage before first paint. - */ :root { color-scheme: dark; --background: #0b0b16; @@ -65,6 +58,38 @@ --surface-2: rgba(39, 39, 42, 0.28); } +:root[data-theme="retro"] { + color-scheme: light; + --background: #ffffff; + --foreground: #000000; + --card: #c0c0c0; + --card-foreground: #000000; + --muted: #c0c0c0; + --muted-foreground: #404040; + --accent: #000078; + --accent-foreground: #ffffff; + --border: #000000; + --input: #000000; + --primary: #000078; + --primary-foreground: #ffffff; + --primary-hover: #0f80cd; + --ring: #000078; + --success: #008000; + --danger: #c00000; + --radius: 0rem; + --shadow: + inset -1px -1px 0 #404040, + inset 1px 1px 0 #ffffff, + inset -2px -2px 0 #808080, + inset 2px 2px 0 #dfdfdf; + --font-sans: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif; + --header-bg: #c0c0c0; + --body-bg: #000000; + --surface-1: #ffffff; + --surface-1-hover: #fffff0; + --surface-2: #c0c0c0; +} + * { box-sizing: border-box; } diff --git a/backend/static/css/15-revamp.css b/backend/static/css/15-revamp.css index 9cd97bc..ff05973 100644 --- a/backend/static/css/15-revamp.css +++ b/backend/static/css/15-revamp.css @@ -2,19 +2,19 @@ * Revamp ("Aurora glass") flourishes. * * These rules only apply to the default/revamp theme. They are scoped to - * :root:not([data-theme="classic"]) so they cover both the explicit + * :root:not([data-theme="classic"]):not([data-theme="retro"]) so they cover both the explicit * data-theme="revamp" attribute AND the no-JS default (no attribute), while * never touching the classic theme. Token colours live in 00-base.css; this * file adds the things a flat token swap can't: the animated aurora backdrop, * frosted glass, gradient accents, glow and motion. */ -:root:not([data-theme="classic"]) { +:root:not([data-theme="classic"]):not([data-theme="retro"]) { scroll-behavior: smooth; } /* Animated aurora backdrop ------------------------------------------------ */ -:root:not([data-theme="classic"]) body::before { +:root:not([data-theme="classic"]):not([data-theme="retro"]) body::before { content: ""; position: fixed; inset: -20vmax; @@ -29,7 +29,7 @@ animation: aurora-drift 26s ease-in-out infinite alternate; } -:root:not([data-theme="classic"]) body::after { +:root:not([data-theme="classic"]):not([data-theme="retro"]) body::after { content: ""; position: fixed; inset: 0; @@ -52,13 +52,13 @@ } @media (prefers-reduced-motion: reduce) { - :root:not([data-theme="classic"]) body::before { + :root:not([data-theme="classic"]):not([data-theme="retro"]) body::before { animation: none; } } /* Frosted glass cards ----------------------------------------------------- */ -:root:not([data-theme="classic"]) .card { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .card { background: linear-gradient( 155deg, color-mix(in srgb, var(--card) 78%, transparent), @@ -70,20 +70,20 @@ } /* Sticky header gets the same glassy treatment */ -:root:not([data-theme="classic"]) .site-header { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .site-header { backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } /* Brand mark glows */ -:root:not([data-theme="classic"]) .brand-mark { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .brand-mark { background: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #22d3ee); color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45); } /* Headings get a soft gradient sheen */ -:root:not([data-theme="classic"]) h1 { +:root:not([data-theme="classic"]):not([data-theme="retro"]) h1 { background: linear-gradient(120deg, #f5f3ff 0%, #c4b5fd 60%, #67e8f9 100%); -webkit-background-clip: text; background-clip: text; @@ -91,8 +91,8 @@ } /* Gradient primary buttons ------------------------------------------------ */ -:root:not([data-theme="classic"]) .button-primary, -:root:not([data-theme="classic"]) .button.is-active { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary, +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button.is-active { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 130%); color: #fff; border-color: transparent; @@ -100,43 +100,43 @@ transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease; } -:root:not([data-theme="classic"]) .button-primary:hover { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary:hover { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 130%); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5); transform: translateY(-1px); } -:root:not([data-theme="classic"]) .button-primary:active { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary:active { transform: translateY(0); } /* Outline / ghost buttons get a subtle lift on hover */ -:root:not([data-theme="classic"]) .button-outline, -:root:not([data-theme="classic"]) .button-ghost { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-outline, +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-ghost { transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } -:root:not([data-theme="classic"]) .button-outline:hover, -:root:not([data-theme="classic"]) .button-ghost:hover { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-outline:hover, +:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-ghost:hover { border-color: rgba(168, 150, 255, 0.4); transform: translateY(-1px); } /* Glow focus rings -------------------------------------------------------- */ -:root:not([data-theme="classic"]) :focus-visible { +:root:not([data-theme="classic"]):not([data-theme="retro"]) :focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring), 0 0 16px rgba(167, 139, 250, 0.55); } -:root:not([data-theme="classic"]) input:focus, -:root:not([data-theme="classic"]) select:focus { +:root:not([data-theme="classic"]):not([data-theme="retro"]) input:focus, +:root:not([data-theme="classic"]):not([data-theme="retro"]) select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22); } /* Drop zone: animated, glowing -------------------------------------------- */ -:root:not([data-theme="classic"]) .drop-zone { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone { border-color: rgba(168, 150, 255, 0.3); background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.1), transparent 70%), @@ -144,18 +144,18 @@ transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease; } -:root:not([data-theme="classic"]) .drop-zone:hover, -:root:not([data-theme="classic"]) .drop-zone.is-dragging { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone:hover, +:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone.is-dragging { border-color: #a78bfa; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), 0 18px 50px rgba(99, 102, 241, 0.28); transform: translateY(-2px); } -:root:not([data-theme="classic"]) .drop-icon { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-icon { color: #c4b5fd; } -:root:not([data-theme="classic"]) .drop-zone.is-dragging .drop-icon { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone.is-dragging .drop-icon { animation: drop-bounce 700ms ease infinite; } @@ -165,34 +165,34 @@ } /* Badges pick up a tinted glass look */ -:root:not([data-theme="classic"]) .badge { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .badge { background: rgba(139, 92, 246, 0.14); color: #d6ccff; border: 1px solid rgba(168, 150, 255, 0.22); } /* File / result rows lift on hover */ -:root:not([data-theme="classic"]) .download-item, -:root:not([data-theme="classic"]) .result-item { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .download-item, +:root:not([data-theme="classic"]):not([data-theme="retro"]) .result-item { background: color-mix(in srgb, var(--card) 60%, transparent); border-color: rgba(168, 150, 255, 0.14); transition: border-color 140ms ease, transform 140ms ease, background 140ms ease; } -:root:not([data-theme="classic"]) .download-item:hover { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .download-item:hover { border-color: rgba(168, 150, 255, 0.34); transform: translateY(-1px); } /* Thumbnails on the download page */ -:root:not([data-theme="classic"]) .file-emblem { +:root:not([data-theme="classic"]):not([data-theme="retro"]) .file-emblem { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.18)); color: #d6ccff; border: 1px solid rgba(168, 150, 255, 0.22); } /* Gentle entrance for primary content cards */ -:root:not([data-theme="classic"]) main > * { +:root:not([data-theme="classic"]):not([data-theme="retro"]) main > * { animation: rise-in 420ms ease both; } @@ -208,7 +208,7 @@ } @media (prefers-reduced-motion: reduce) { - :root:not([data-theme="classic"]) main > * { + :root:not([data-theme="classic"]):not([data-theme="retro"]) main > * { animation: none; } } diff --git a/backend/static/css/16-retro.css b/backend/static/css/16-retro.css new file mode 100644 index 0000000..fa0c98e --- /dev/null +++ b/backend/static/css/16-retro.css @@ -0,0 +1,393 @@ +/* + * "retro" theme flourishes — modelled on danlegt.com. + * + * Windows 98 chrome over a black pixel-star desktop, PixeloidSans pixel font, + * crisp (non-antialiased, pixelated) rendering. Scoped entirely to + * :root[data-theme="retro"] so it never touches the other themes. + * + * CSP-safe: external stylesheet + self-hosted fonts only (font-src 'self'), + * no inline styles, no remote assets. The starfield is pure CSS so we don't + * depend on img-src for a background gif. + */ + +/* Self-hosted pixel fonts (mirrored locally — GGBotNet PixeloidSans is free, + PixelOperator is CC0). ------------------------------------------------- */ +@font-face { + font-family: "PixeloidSans"; + src: url("/static/fonts/pixeloid_sans/PixeloidSans.ttf") format("truetype"); + font-weight: normal; + font-display: swap; +} +@font-face { + font-family: "PixeloidSans"; + src: url("/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf") format("truetype"); + font-weight: bold; + font-display: swap; +} +@font-face { + font-family: "PixelOperatorMono"; + src: url("/static/fonts/pixel_operator/PixelOperatorMono.ttf") format("truetype"); + font-weight: normal; + font-display: swap; +} +@font-face { + font-family: "PixelOperatorMono"; + src: url("/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf") format("truetype"); + font-weight: bold; + font-display: swap; +} + +/* Crisp, pixelated, non-smoothed rendering like the source site. */ +:root[data-theme="retro"] { + font-smooth: never; + -webkit-font-smoothing: none; + -moz-osx-font-smoothing: unset; +} + +:root[data-theme="retro"] img, +:root[data-theme="retro"] .thumb-link img, +:root[data-theme="retro"] .preview-stage img { + image-rendering: pixelated; +} + +/* Square everything — Win98 had no rounded corners. */ +:root[data-theme="retro"] *, +:root[data-theme="retro"] *::before, +:root[data-theme="retro"] *::after { + border-radius: 0 !important; +} + +/* Black desktop with the tiled starfield mirrored from danlegt.com. */ +:root[data-theme="retro"] body { + background-color: #000000; + background-image: url("/static/backgrounds/stars1.gif"); + background-repeat: repeat; + background-attachment: fixed; + image-rendering: pixelated; +} + +/* Selection + focus use the classic dotted/navy treatment. */ +:root[data-theme="retro"] ::selection { + background: #000078; + color: #ffffff; +} + +:root[data-theme="retro"] :focus-visible { + outline: 1px dotted #000000; + outline-offset: -4px; +} + +/* Header: thin flat silver toolbar with a bottom bevel. */ +:root[data-theme="retro"] .site-header { + background: #c0c0c0; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border-bottom: 2px solid #404040; + box-shadow: inset 0 1px 0 #ffffff; +} + +:root[data-theme="retro"] .nav { + min-height: 2.1rem; +} + +:root[data-theme="retro"] .site-header .button { + min-height: 1.6rem; + padding: 0.15rem 0.6rem; +} + +:root[data-theme="retro"] .brand { + color: #000000; + font-size: 0.95rem; +} + +:root[data-theme="retro"] .brand-mark { + width: 1.4rem; + height: 1.4rem; + background: linear-gradient(90deg, #000078, 80%, #0f80cd); + color: #ffffff; + font-size: 0.75rem; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #6f6fff; +} + +/* Cards are raised silver windows with black text. */ +:root[data-theme="retro"] .card { + background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%); + background-color: #c0c0c0; + color: #000000; + border: 1px solid #000000; + box-shadow: var(--shadow); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +/* Headings become Win98 active title bars. */ +:root[data-theme="retro"] h1 { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + margin: -0.35rem -0.35rem 1rem; + padding: 0.35rem 0.5rem; + background: linear-gradient(to right, #000078, 80%, #0f80cd); + color: #ffffff; + font-size: 1rem; + font-weight: 700; + letter-spacing: 0; + text-shadow: none; +} + +/* Fake window control button on the right of every title bar. */ +:root[data-theme="retro"] h1::after { + content: "✕"; + display: grid; + place-items: center; + width: 1.15rem; + height: 1rem; + background: #c0c0c0; + color: #000000; + font-size: 0.7rem; + font-weight: 700; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; +} + +/* Links: classic blue, underlined, purple when visited. */ +:root[data-theme="retro"] a:not(.button):not(.brand) { + color: #0000ee; + text-decoration: underline; +} + +:root[data-theme="retro"] a:not(.button):not(.brand):visited { + color: #551a8b; +} + +:root[data-theme="retro"] a:not(.button):not(.brand):hover { + color: #ee0000; +} + +/* Buttons: grey beveled chunks that press in when active. */ +:root[data-theme="retro"] .button, +:root[data-theme="retro"] button { + background: #c0c0c0; + color: #000000; + border: 1px solid #000000; + font-weight: 700; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; +} + +:root[data-theme="retro"] .button:hover, +:root[data-theme="retro"] button:hover { + background: #d4d0c8; +} + +:root[data-theme="retro"] .button:active, +:root[data-theme="retro"] button:active, +:root[data-theme="retro"] .button.is-active { + background: #c0c0c0; + box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #ffffff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf; + padding-top: calc(0.45rem + 1px); + padding-left: calc(0.85rem + 1px); +} + +/* The primary call-to-action gets the blue title-bar gradient. */ +:root[data-theme="retro"] .button-primary { + background: linear-gradient(to right, #000078, 80%, #0f80cd); + color: #ffffff; +} + +:root[data-theme="retro"] .button-primary:hover { + background: linear-gradient(to right, #0a0a9a, 80%, #1a90dd); +} + +:root[data-theme="retro"] .button-danger { + background: #c0c0c0; + color: #c00000; + border-color: #000000; +} + +/* Inputs and selects look sunken (inset bevel). */ +:root[data-theme="retro"] input, +:root[data-theme="retro"] select, +:root[data-theme="retro"] textarea { + background: #ffffff; + color: #000000; + border: 1px solid #000000; + box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff; +} + +:root[data-theme="retro"] input:focus, +:root[data-theme="retro"] select:focus { + outline: 1px dotted #000000; + outline-offset: -3px; +} + +/* Labels inside windows read black, not muted-grey-on-grey. */ +:root[data-theme="retro"] label span, +:root[data-theme="retro"] .stack-form label, +:root[data-theme="retro"] .form-footer p, +:root[data-theme="retro"] .drop-copy, +:root[data-theme="retro"] .drop-meta, +:root[data-theme="retro"] .upload-subtitle, +:root[data-theme="retro"] .download-subtitle, +:root[data-theme="retro"] .muted-copy, +:root[data-theme="retro"] .kicker, +:root[data-theme="retro"] .checkbox-field span { + color: #1a1a1a; +} + +/* Desktop-level text (outside the grey windows) reads light on the black sky. */ +:root[data-theme="retro"] .docs-header, +:root[data-theme="retro"] .docs-header p, +:root[data-theme="retro"] .docs-header .kicker { + color: #cfd8ff; +} + +:root[data-theme="retro"] .docs-header code { + color: #ffffff; +} + +/* Drop zone: a sunken white field with a dashed navy border. */ +:root[data-theme="retro"] .drop-zone { + background: #ffffff; + border: 2px dashed #000078; + box-shadow: inset 2px 2px 0 #808080, inset -2px -2px 0 #ffffff; +} + +:root[data-theme="retro"] .drop-zone:hover, +:root[data-theme="retro"] .drop-zone.is-dragging { + background: #fffff0; + border-color: #0f80cd; +} + +:root[data-theme="retro"] .drop-icon { + color: #000078; +} + +/* The hero "Welcome" badge becomes a high-contrast blinking pixel sticker + that sits on the black desktop above the window. */ +:root[data-theme="retro"] .hero-eyebrow { + background: linear-gradient(to right, #000078, 80%, #0f80cd); + border: 1px solid #000000; + color: #ffffff; + font-weight: 700; + text-transform: uppercase; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #6f6fff; +} + +:root[data-theme="retro"] .hero-eyebrow::before { + content: "★ "; + color: #ffff66; + animation: retro-blink 1.1s steps(1, end) infinite; +} + +:root[data-theme="retro"] .hero-eyebrow::after { + content: " ★"; + color: #ffff66; + animation: retro-blink 1.1s steps(1, end) 0.55s infinite; +} + +@keyframes retro-blink { + 50% { opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + :root[data-theme="retro"] .hero-eyebrow::before, + :root[data-theme="retro"] .hero-eyebrow::after { + animation: none; + } +} + +/* Badges become square chips. */ +:root[data-theme="retro"] .badge { + background: #ffffff; + color: #000000; + border: 1px solid #000000; + box-shadow: inset 1px 1px 0 #808080; +} + +/* File / result rows: flat white with a sunken hairline. */ +:root[data-theme="retro"] .download-item, +:root[data-theme="retro"] .result-item { + background: #ffffff; + color: #000000; + border: 1px solid #000000; + box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; +} + +:root[data-theme="retro"] .file-main, +:root[data-theme="retro"] .download-item small, +:root[data-theme="retro"] .result-item code { + color: #000000; +} + +:root[data-theme="retro"] .file-emblem { + background: #000078; + color: #ffffff; + border: 1px solid #000000; + box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #4a4aff; +} + +/* Code blocks use the pixel mono font. */ +:root[data-theme="retro"] code, +:root[data-theme="retro"] pre, +:root[data-theme="retro"] pre code { + font-family: "PixelOperatorMono", ui-monospace, monospace; + color: #000000; +} + +:root[data-theme="retro"] pre { + background: #ffffff; + border: 1px solid #000000; + box-shadow: inset 1px 1px 0 #808080; +} + +/* Progress bar: blocky segmented Win98 look. */ +:root[data-theme="retro"] .progress { + background: #ffffff; + border: 1px solid #000000; + box-shadow: inset 1px 1px 0 #808080; +} + +:root[data-theme="retro"] .progress span { + background: repeating-linear-gradient(90deg, #000078 0 8px, transparent 8px 10px), #0f80cd; +} + +/* Chunky retro scrollbars (WebKit/Blink). */ +:root[data-theme="retro"] ::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +:root[data-theme="retro"] ::-webkit-scrollbar-track { + background: #dfdfdf; +} + +:root[data-theme="retro"] ::-webkit-scrollbar-thumb { + background: #c0c0c0; + border: 1px solid #000000; + box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff; +} + +/* Footer sits on the black desktop: white pixel text + a wink to the old web. */ +:root[data-theme="retro"] .site-footer { + color: #ffffff; +} + +:root[data-theme="retro"] .site-footer a, +:root[data-theme="retro"] .footer-links a:not(.button) { + color: #66ccff; +} + +:root[data-theme="retro"] .theme-picker > span { + color: #ffffff; +} + +:root[data-theme="retro"] .site-footer::after { + content: "✩ Best viewed in 1024×768 ✩"; + font-weight: 700; +} + +@media (max-width: 720px) { + :root[data-theme="retro"] .site-footer::after { + display: none; + } +} diff --git a/backend/static/css/20-upload.css b/backend/static/css/20-upload.css index f3ae01f..0e78a6c 100644 --- a/backend/static/css/20-upload.css +++ b/backend/static/css/20-upload.css @@ -29,6 +29,13 @@ } +.upload-subtitle { + margin: 0.35rem 0 1.25rem; + color: var(--muted-foreground); + font-size: 0.95rem; + line-height: 1.5; +} + .drop-zone { min-height: 19rem; display: grid; diff --git a/backend/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf b/backend/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf new file mode 100644 index 0000000..215d4a2 Binary files /dev/null and b/backend/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf differ diff --git a/backend/static/fonts/pixel_operator/PixelOperatorMono.ttf b/backend/static/fonts/pixel_operator/PixelOperatorMono.ttf new file mode 100644 index 0000000..1c1edcc Binary files /dev/null and b/backend/static/fonts/pixel_operator/PixelOperatorMono.ttf differ diff --git a/backend/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf b/backend/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf new file mode 100644 index 0000000..c8b030c Binary files /dev/null and b/backend/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf differ diff --git a/backend/static/fonts/pixeloid_sans/PixeloidSans.ttf b/backend/static/fonts/pixeloid_sans/PixeloidSans.ttf new file mode 100644 index 0000000..445d9b8 Binary files /dev/null and b/backend/static/fonts/pixeloid_sans/PixeloidSans.ttf differ diff --git a/backend/static/js/05-theme.js b/backend/static/js/05-theme.js index 2b142bc..6a40d64 100644 --- a/backend/static/js/05-theme.js +++ b/backend/static/js/05-theme.js @@ -11,7 +11,7 @@ */ (function () { var STORAGE_KEY = "warpbox-theme"; - var THEMES = ["revamp", "classic"]; + var THEMES = ["revamp", "classic", "retro"]; function stored() { try { diff --git a/backend/templates/layouts/base.html b/backend/templates/layouts/base.html index 919e110..a9e5d11 100644 --- a/backend/templates/layouts/base.html +++ b/backend/templates/layouts/base.html @@ -19,6 +19,7 @@ + @@ -65,6 +66,7 @@ {{if .CurrentUser}}DashboardAPIAccount{{else}}Sign inAPI{{end}} diff --git a/backend/templates/pages/home.html b/backend/templates/pages/home.html index 26bcb8c..5356143 100644 --- a/backend/templates/pages/home.html +++ b/backend/templates/pages/home.html @@ -5,17 +5,20 @@
{{if .CurrentUser}}

Welcome back, {{.CurrentUser.Username}}

-

Drop it. Share it.

-

{{.Data.LimitSummary}}

{{else}}

Welcome

-

Send a file. Get a link.

-

Fast, private transfers that expire on your terms.

{{end}}
+ {{if .CurrentUser}} +

Drop it. Share it.

+

{{.Data.LimitSummary}}

+ {{else}} +

Send a file. Get a link.

+

Fast, private transfers that expire on your terms.

+ {{end}}