flightsimulatorplatfrom/OpenSquawk
1
0
Fork 0
mirror of https://github.com/OpenSquawk/OpenSquawk synced 2026-08-01 06:06:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(start): add tile illustrations, radar background, equal-height cards

Browse Source
This commit is contained in:
itsrubberduck
2026-07-10 08:05:14 +02:00
parent 080691643d
commit 142d18f850
1 changed files with 101 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
app/pages/start.vue
View File

@@ -1,6 +1,19 @@
<template>
<div class="learn-theme flex min-h-screen items-center justify-center bg-[#070d1a] px-4 py-16 text-white">
<div class="w-full max-w-3xl space-y-8">
<div class="learn-theme relative flex min-h-screen items-center justify-center overflow-hidden bg-[#070d1a] px-4 py-16 text-white">
<div class="pointer-events-none absolute inset-0 start-bg" aria-hidden="true">
<div class="start-bg__glow start-bg__glow--cyan" />
<div class="start-bg__glow start-bg__glow--amber" />
<div class="start-bg__grid" />
<svg class="start-bg__radar" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="200" cy="200" r="60" stroke="currentColor" stroke-width="1" />
<circle cx="200" cy="200" r="120" stroke="currentColor" stroke-width="1" />
<circle cx="200" cy="200" r="180" stroke="currentColor" stroke-width="1" />
<line x1="200" y1="20" x2="200" y2="380" stroke="currentColor" stroke-width="1" />
<line x1="20" y1="200" x2="380" y2="200" stroke="currentColor" stroke-width="1" />
</svg>
</div>
<div class="relative w-full max-w-3xl space-y-8">
<div class="space-y-3 text-center">
<span
class="inline-flex items-center gap-2 rounded-full border border-cyan-300/40 bg-cyan-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200/80"
@@ -14,16 +27,24 @@
<div class="grid gap-4 sm:grid-cols-2">
<button
type="button"
class="relative flex flex-col gap-3 rounded-2xl border border-cyan-300/40 bg-cyan-400/10 p-5 text-left transition hover:border-cyan-300/60 hover:bg-cyan-400/15"
class="relative flex h-full flex-col gap-3 overflow-hidden rounded-2xl border border-cyan-300/40 bg-cyan-400/10 p-5 text-left transition hover:border-cyan-300/60 hover:bg-cyan-400/15"
@click="goToClassroom"
>
<svg
class="pointer-events-none absolute -right-6 -bottom-8 h-36 w-36 text-cyan-200/[0.12]"
viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
>
<path d="M50 8 L86 30 V70 L50 92 L14 70 V30 Z" stroke="currentColor" stroke-width="2.5" />
<path d="M50 20 L50 92 M14 45 L86 45" stroke="currentColor" stroke-width="1.5" />
<circle cx="50" cy="32" r="9" fill="currentColor" />
</svg>
<span
class="absolute right-4 top-4 rounded-full border border-cyan-300/40 bg-cyan-400/15 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-cyan-200"
>Default</span>
<div class="flex h-10 w-10 items-center justify-center rounded-xl border border-cyan-300/40 bg-cyan-400/15">
<v-icon icon="mdi-school-outline" size="20" class="text-cyan-200" />
</div>
<div>
<div class="flex-1">
<p class="text-base font-semibold text-white">Classroom</p>
<p class="mt-1 text-sm text-white/70">
Structured, self-paced radio practice. No simulator required — this is where most pilots start.
@@ -38,15 +59,25 @@
<NuxtLink
v-if="liveAtcUnlocked"
to="/pm"
class="relative flex flex-col gap-3 rounded-2xl border border-amber-400/30 bg-amber-400/[0.06] p-5 transition hover:border-amber-400/50 hover:bg-amber-400/10"
class="relative flex h-full flex-col gap-3 overflow-hidden rounded-2xl border border-amber-400/30 bg-amber-400/[0.06] p-5 transition hover:border-amber-400/50 hover:bg-amber-400/10"
>
<svg
class="pointer-events-none absolute -right-6 -bottom-8 h-36 w-36 text-amber-200/[0.12]"
viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
>
<circle cx="50" cy="50" r="14" stroke="currentColor" stroke-width="2.5" />
<circle cx="50" cy="50" r="30" stroke="currentColor" stroke-width="1.5" />
<circle cx="50" cy="50" r="46" stroke="currentColor" stroke-width="1.5" />
<path d="M50 50 L82 26" stroke="currentColor" stroke-width="2" />
<circle cx="82" cy="26" r="4" fill="currentColor" />
</svg>
<span
class="absolute right-4 top-4 rounded-full border border-amber-300/40 bg-amber-400/15 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-amber-200"
>Alpha</span>
<div class="flex h-10 w-10 items-center justify-center rounded-xl border border-amber-300/40 bg-amber-400/15">
<v-icon icon="mdi-radar" size="20" class="text-amber-200" />
</div>
<div>
<div class="flex-1">
<p class="text-base font-semibold text-white">Live ATC</p>
<p class="mt-1 text-sm text-white/70">
Connect your simulator and fly against our live AI controller. Early alpha — not everything works
@@ -60,16 +91,26 @@
</NuxtLink>
<div
v-else
class="relative flex flex-col gap-3 rounded-2xl border border-white/10 bg-white/5 p-5 opacity-60"
class="relative flex h-full flex-col gap-3 overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-5 opacity-60"
aria-disabled="true"
>
<svg
class="pointer-events-none absolute -right-6 -bottom-8 h-36 w-36 text-white/[0.08]"
viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
>
<circle cx="50" cy="50" r="14" stroke="currentColor" stroke-width="2.5" />
<circle cx="50" cy="50" r="30" stroke="currentColor" stroke-width="1.5" />
<circle cx="50" cy="50" r="46" stroke="currentColor" stroke-width="1.5" />
<path d="M50 50 L82 26" stroke="currentColor" stroke-width="2" />
<circle cx="82" cy="26" r="4" fill="currentColor" />
</svg>
<span
class="absolute right-4 top-4 rounded-full border border-white/15 bg-white/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-white/60"
>Alpha</span>
<div class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/10">
<v-icon icon="mdi-radar" size="20" class="text-white/50" />
</div>
<div>
<div class="flex-1">
<p class="text-base font-semibold text-white">Live ATC</p>
<p class="mt-1 text-sm text-white/70">
Connect your simulator and fly against our live AI controller. Early alpha — not everything works
@@ -124,3 +165,55 @@ function goToClassroom() {
router.push(introCompleted ? '/classroom' : '/classroom-introduction')
}
</script>
<style scoped>
.start-bg__glow {
position: absolute;
border-radius: 9999px;
filter: blur(90px);
opacity: 0.35;
}
.start-bg__glow--cyan {
top: -10%;
left: -8%;
width: 32rem;
height: 32rem;
background: radial-gradient(circle, rgba(103, 232, 249, 0.35), transparent 70%);
}
.start-bg__glow--amber {
bottom: -15%;
right: -10%;
width: 30rem;
height: 30rem;
background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 70%);
}
.start-bg__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%);
}
.start-bg__radar {
position: absolute;
top: 50%;
left: 50%;
width: 44rem;
height: 44rem;
transform: translate(-50%, -50%);
color: rgba(103, 232, 249, 0.08);
animation: start-bg-spin 60s linear infinite;
}
@keyframes start-bg-spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>