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

Refine hero background and feedback interactions

Browse Source
This commit is contained in:
Remi
2025-10-05 16:17:41 +02:00
committed by itsrubberduck
parent 53488a1076
commit 05bda29cb1
2 changed files with 34 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/pages/feedback.vue
View File

@@ -29,7 +29,7 @@
<div class="flex flex-wrap items-center justify-center gap-3 text-sm text-white/60">
<span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
<v-icon icon="mdi-bell-ring" size="18" class="text-cyan-300"/>
Honest takes only – thanks!
Candid notes welcome — thank you!
</span>
<a class="inline-flex items-center gap-2 text-cyan-200 transition hover:text-cyan-100" href="mailto:info@opensquawk.de">
<v-icon icon="mdi-email-fast" size="18"/>
@@ -217,8 +217,14 @@
:disabled="submissionState === 'submitting'"
class="inline-flex items-center justify-center gap-2 rounded-2xl bg-cyan-400 px-6 py-3 text-base font-semibold text-slate-950 shadow-[0_16px_40px_rgba(56,189,248,0.35)] transition hover:bg-cyan-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:bg-cyan-400"
>
<v-icon :icon="submissionState === 'submitting' ? 'mdi-dots-circle' : 'mdi-send'" size="20" class="text-slate-950"/>
<span>{{ submissionState === 'submitting' ? 'Sending…' : 'Send feedback' }}</span>
<template v-if="submissionState === 'submitting'">
<v-progress-circular indeterminate size="18" width="2" color="white"/>
<span>Sending…</span>
</template>
<template v-else>
<v-icon icon="mdi-send" size="20" class="text-white"/>
<span>Send feedback</span>
</template>
</button>
</div>
</form>

35
app/pages/index.vue
View File

@@ -144,10 +144,12 @@
</NuxtLink>
</div>
</div>
<div class="hero-form w-full max-w-xl lg:justify-self-end
backdrop-blur-md
" data-aos="fade-left" data-aos-delay="140">
<form class="rounded-2xl border border-white/10 bg-black/40 p-4 sm:p-5 space-y-4"
<div
class="hero-form w-full max-w-lg lg:justify-self-end"
data-aos="fade-left"
data-aos-delay="140"
>
<form class="hero-form-panel rounded-3xl p-5 sm:p-6 space-y-4"
@submit.prevent="submitUpdates">
<div class="space-y-3">
<h3 class="text-2xl font-semibold">
@@ -1905,26 +1907,39 @@ onMounted(async () => {
}
.gradient-hero {
background: radial-gradient(1200px 600px at 10% -10%, rgba(6, 182, 212, .35), transparent),
radial-gradient(900px 480px at 100% 10%, rgba(59, 130, 246, .25), transparent),
linear-gradient(180deg, #0b1020 0%, #0b1020 60%, #0a0f1c 100%);
background: radial-gradient(1200px 600px at 12% -20%, rgba(6, 182, 212, .32), transparent),
radial-gradient(900px 520px at 100% 5%, rgba(59, 130, 246, .22), transparent),
linear-gradient(180deg, rgba(11, 16, 32, 0.92) 0%, rgba(11, 16, 32, 0.94) 42%, rgba(11, 16, 32, 0.98) 68%, #0a0f1c 100%);
}
.gradient-hero::after {
content: '';
position: absolute;
inset: 0;
background: url('/img/learn/modules/img6.jpeg') center/cover no-repeat;
opacity: 0.45;
background: linear-gradient(180deg, rgba(7, 11, 24, 0.55) 0%, rgba(9, 14, 28, 0.78) 55%, rgba(11, 16, 32, 0.95) 100%),
url('/img/bridge/goldengate_front.jpeg') center/cover no-repeat;
opacity: 1;
pointer-events: none;
z-index: 0;
}
.hero-overlay {
background: linear-gradient(90deg, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.68) 45%, rgba(11, 16, 32, 0.15) 100%);
background: linear-gradient(90deg, rgba(11, 16, 32, 0.88) 0%, rgba(11, 16, 32, 0.62) 46%, rgba(11, 16, 32, 0.22) 100%);
z-index: 1;
}
.hero-form {
position: relative;
z-index: 2;
}
.hero-form-panel {
background: linear-gradient(140deg, rgba(15, 23, 42, 0.72), rgba(12, 20, 38, 0.48));
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(24px);
box-shadow: 0 42px 120px rgba(5, 12, 32, 0.45);
}
.glass {
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(10px);