move Freezmo news to the Right now tile, rework Freezmo panel into a real launch section
This commit is contained in:
parent
95dd0128b8
commit
222c62ca06
3 changed files with 249 additions and 25 deletions
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -222,9 +222,10 @@ export default function WebLayout() {
|
|||
<article id="now" className="web-tile glass">
|
||||
<h3 className="web-tile-title">Right now</h3>
|
||||
<p className="web-tile-text">
|
||||
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{" "}
|
||||
<a href="https://freezmo.dvorakmortonxd.dev">Freezmo</a>, basically a free
|
||||
version of the famous Gizmo app but instead of paying for AI you use your
|
||||
ollama free cloud api key.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
|
@ -235,22 +236,53 @@ export default function WebLayout() {
|
|||
</article>
|
||||
</div>
|
||||
|
||||
<Section eyebrow="FREEZMO" title="Introducing Freezmo" className="web-feature">
|
||||
<Image
|
||||
src="/freezmo-app.webp"
|
||||
alt="Freezmo quiz screen — a history question about the Schuman plan with AI grading feedback"
|
||||
width={1941}
|
||||
height={942}
|
||||
sizes="(max-width: 900px) 100vw, 1100px"
|
||||
className="web-feature-shot"
|
||||
/>
|
||||
<p className="web-feature-text">
|
||||
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{" "}
|
||||
<a href="https://freezmo.dvorakmortonxd.dev">freezmo.dvorakmortonxd.dev</a>.
|
||||
</p>
|
||||
</Section>
|
||||
<section className="web-freezmo glass">
|
||||
<span className="web-freezmo-orb web-freezmo-orb-a" aria-hidden="true" />
|
||||
<span className="web-freezmo-orb web-freezmo-orb-b" aria-hidden="true" />
|
||||
<div className="web-freezmo-body">
|
||||
<div className="web-freezmo-copy">
|
||||
<span className="web-eyebrow">Freezmo</span>
|
||||
<h2 className="web-freezmo-title">
|
||||
Introducing <span className="web-freezmo-name">Freezmo</span>
|
||||
<span className="web-freezmo-badge">new</span>
|
||||
</h2>
|
||||
<p className="web-freezmo-lead">
|
||||
A free take on the famous Gizmo study app. Notes in, flashcards and quizzes
|
||||
out — and instead of paying for AI, you plug in your own free Ollama cloud
|
||||
API key.
|
||||
</p>
|
||||
<ul className="web-freezmo-points">
|
||||
<li>Notes in, flashcards & quizzes out</li>
|
||||
<li>AI grades your answers and explains what you missed</li>
|
||||
<li>Your own free Ollama cloud API key — no subscription</li>
|
||||
</ul>
|
||||
<div className="web-freezmo-actions">
|
||||
<a
|
||||
className="web-freezmo-cta"
|
||||
href="https://freezmo.dvorakmortonxd.dev"
|
||||
>
|
||||
Try Freezmo <span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
<a
|
||||
className="web-freezmo-ghost"
|
||||
href="https://git.dvorakmortonxd.dev/dvorakmortonxd/freezmo"
|
||||
>
|
||||
Source on GitDXD
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="web-freezmo-shot">
|
||||
<Image
|
||||
src="/freezmo-app.webp"
|
||||
alt="Freezmo quiz screen — a history question about the Schuman plan with AI grading feedback"
|
||||
width={1941}
|
||||
height={942}
|
||||
sizes="(max-width: 900px) 100vw, 560px"
|
||||
className="web-freezmo-img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="web-split">
|
||||
<Section eyebrow="REVIVAL.INC" title="Revival Inc." className="web-feature">
|
||||
|
|
|
|||
201
src/app/web.css
201
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue