From 222c62ca06cf5267a70f58a6863b79ebb9f5faa0 Mon Sep 17 00:00:00 2001 From: dvorakmortonxd Date: Sun, 11 Oct 2026 23:39:42 +0200 Subject: [PATCH] move Freezmo news to the Right now tile, rework Freezmo panel into a real launch section --- agents.md | 3 +- src/app/components/WebLayout.tsx | 70 ++++++++--- src/app/web.css | 201 ++++++++++++++++++++++++++++++- 3 files changed, 249 insertions(+), 25 deletions(-) diff --git a/agents.md b/agents.md index dc408d5..a7e68bb 100644 --- a/agents.md +++ b/agents.md @@ -171,7 +171,8 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark), (no `img`/`image`/`emoji`/`accent`). Status pill colors come from the `--status-*` tokens in `web.css`, overridden for the dark desktop windows in `skeuo.css` along with the row hairlines (`--index-line`). Above the split, the full-width - **Freezmo** feature panel (`.web-feature` + `.web-feature-shot`) is the one + **Freezmo** launch panel (`.web-freezmo` — app-tinted glow, floating orbs, + gradient wordmark + "new" badge, feature bullets, Try/Source CTAs) is the one place a **real screenshot** is used (`public/freezmo-app.webp`, the live study app). The two remaining feature panels (`.web-split`) stretch to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow` diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx index b2ab559..34baf13 100644 --- a/src/app/components/WebLayout.tsx +++ b/src/app/components/WebLayout.tsx @@ -222,9 +222,10 @@ export default function WebLayout() {

Right now

- I left the maturita.c project to focus on my proxmox server (just popped in - another 1.7TB hdd upgrade, 3 small hdds from ewaste laptops and I just - ziplocked it into place and connected it lmao) + Started working on a new project{" "} + Freezmo, basically a free + version of the famous Gizmo app but instead of paying for AI you use your + ollama free cloud api key.

@@ -235,22 +236,53 @@ export default function WebLayout() { -
- Freezmo quiz screen — a history question about the Schuman plan with AI grading feedback -

- Started working on a new project Freezmo — basically a free version of the - famous Gizmo app, but instead of paying for AI you use your ollama free cloud - API key. Notes in, flashcards and quizzes out. Try it at{" "} - freezmo.dvorakmortonxd.dev. -

-
+
+
diff --git a/src/app/web.css b/src/app/web.css index 6c18d28..fa3282c 100644 --- a/src/app/web.css +++ b/src/app/web.css @@ -448,16 +448,207 @@ html[data-theme="web"] body { display: flex; flex-direction: column; } -/* Real app screenshot inside a feature panel (Freezmo) — framed like the CSS - mock windows so it sits in the same visual language. */ -.web-feature-shot { + +/* ============================================================ + FREEZMO FEATURE + Full-width launch panel for the live study app: blue app- + tinted glow, floating orbs, gradient wordmark/badge, feature + bullets and CTAs, with the real screenshot tilted into place. + ============================================================ */ +.web-freezmo { + position: relative; + overflow: hidden; + padding: clamp(18px, 2.6vw, 30px); + border-radius: 22px; + background: + radial-gradient(55% 85% at 8% 0%, rgba(109, 94, 252, 0.2), transparent 62%), + radial-gradient(48% 78% at 96% 12%, rgba(47, 139, 255, 0.22), transparent 58%), + radial-gradient(40% 65% at 78% 100%, rgba(45, 212, 191, 0.12), transparent 62%), + linear-gradient(155deg, var(--glass-hi), var(--glass-lo)); +} +.web-freezmo-orb { + position: absolute; + z-index: 0; + border-radius: 50%; + pointer-events: none; + background: radial-gradient( + circle at 34% 30%, + rgba(255, 255, 255, 0.7), + rgba(96, 150, 255, 0.35) 45%, + rgba(30, 60, 140, 0.04) 74% + ); + box-shadow: 0 0 60px rgba(80, 140, 255, 0.35); + animation: freezmo-float 8s ease-in-out infinite; +} +.web-freezmo-orb-a { + width: 130px; + height: 130px; + left: -46px; + bottom: -46px; +} +.web-freezmo-orb-b { + width: 74px; + height: 74px; + right: 40%; + top: -28px; + animation-duration: 10s; + animation-delay: -4s; +} +.web-freezmo-body { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); + gap: clamp(20px, 3vw, 36px); + align-items: center; +} +.web-freezmo-copy { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.web-freezmo-title { + margin: 8px 0 12px; + font-size: clamp(1.7rem, 3.4vw, 2.35rem); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.08; +} +.web-freezmo-name { + background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.web-freezmo-badge { + display: inline-block; + margin-left: 12px; + padding: 4px 10px 5px; + transform: translateY(-4px); + border-radius: 999px; + font-family: var(--font-custom-mono); + font-size: 0.6rem; + font-weight: 700; + letter-spacing: 0.16em; + text-transform: uppercase; + color: #fff; + background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2)); + box-shadow: 0 10px 24px -10px var(--web-accent); +} +.web-freezmo-lead { + font-size: 0.95rem; + color: var(--web-muted); +} +.web-freezmo-points { + display: grid; + gap: 8px; + margin: 16px 0 20px; + padding: 0; + list-style: none; +} +.web-freezmo-points li { + display: flex; + gap: 10px; + align-items: baseline; + font-size: 0.86rem; + font-weight: 550; +} +.web-freezmo-points li::before { + content: "→"; + font-weight: 700; + color: var(--web-accent-2); +} +.web-freezmo-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; +} +.web-freezmo-cta { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 11px 20px; + border-radius: 12px; + color: #fff; + font-size: 0.9rem; + font-weight: 700; + text-decoration: none; + background: linear-gradient(120deg, var(--web-accent), var(--web-accent-2)); + box-shadow: 0 16px 34px -16px var(--web-accent); + transition: transform 0.16s ease, box-shadow 0.16s ease; +} +.web-freezmo-cta:hover { + transform: translateY(-2px); + box-shadow: 0 20px 40px -16px var(--web-accent); + color: #fff; +} +.web-freezmo-cta span { + transition: transform 0.16s ease; +} +.web-freezmo-cta:hover span { + transform: translate(2px, -2px); +} +.web-freezmo-ghost { + display: inline-flex; + align-items: center; + padding: 11px 18px; + border-radius: 12px; + border: 1px solid var(--btn-border, var(--glass-border)); + background: var(--btn-bg, var(--glass-lo)); + color: var(--fg); + font-size: 0.9rem; + font-weight: 600; + text-decoration: none; + transition: background-color 0.16s ease, border-color 0.16s ease; +} +.web-freezmo-ghost:hover { + background: var(--btn-bg-hi, var(--glass-hi)); + border-color: var(--accent-line); +} +.web-freezmo-shot { + position: relative; +} +.web-freezmo-shot::before { + content: ""; + position: absolute; + inset: -14% -10% -18%; + background: radial-gradient( + 60% 60% at 55% 45%, + color-mix(in srgb, var(--web-accent-2) 28%, transparent), + transparent 70% + ); + filter: blur(4px); +} +.web-freezmo-img { + position: relative; display: block; width: 100%; height: auto; - margin-bottom: 14px; border-radius: 16px; border: 1px solid var(--glass-border); - box-shadow: 0 18px 36px -22px rgba(23, 32, 60, 0.5); + box-shadow: 0 34px 70px -34px rgba(8, 16, 40, 0.75); + transform: rotate(-1.2deg); + transition: transform 0.35s ease; +} +.web-freezmo-shot:hover .web-freezmo-img { + transform: rotate(0deg) translateY(-3px); +} +@keyframes freezmo-float { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-12px); + } +} +@media (prefers-reduced-motion: reduce) { + .web-freezmo-orb { + animation: none; + } + .web-freezmo-img { + transition: none; + } } /* ============================================================ FEATURE WINDOWS