One static splash: app icon + name in index.html from the first frame, no companion, no timers
The first second was a blank page, then a splash with the selected companion, then the home screen. Now index.html carries the splash (icon from the Android launcher, name, white to match the native window background) and SplashScreen draws the same markup, so the hand-over from HTML to React shows no change. Not run on a device. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,45 +1,13 @@
|
||||
import { motion } from 'motion/react';
|
||||
import { SeyarMascot } from '@/mascots/SeyarMascot';
|
||||
import { BrandMark } from '@/components/BrandMark';
|
||||
|
||||
/** نمادهای ریاضی که آرام از پایینِ صفحه بالا میروند؛ فقط CSS (transform/opacity)، بیبارِ اضافه. */
|
||||
const GLYPHS = [
|
||||
{ c: 'π', x: 12, d: 0 }, { c: '+', x: 28, d: 2.6 }, { c: '√', x: 46, d: 1.2 },
|
||||
{ c: '÷', x: 64, d: 3.8 }, { c: '∑', x: 80, d: 0.6 }, { c: '×', x: 90, d: 4.6 },
|
||||
];
|
||||
|
||||
/**
|
||||
* تا وقتی نشستِ قبلی بررسی میشود نمایش داده میشود. `showContent=false` فقط پسزمینه است؛ App
|
||||
* محتوا را فقط وقتی روشن میکند که پاسخِ سرور دیر کرده باشد.
|
||||
* اسپلشِ ثابت: آیکونِ اپ و نام، بیانیمیشن و بیهمراه (همراهِ انتخابی هنوز معلوم نیست و تکرارش
|
||||
* بد است). عینِ `.boot-splash` در index.html است تا تحویل از HTML به React دیده نشود؛ استایلش
|
||||
* هم آنجا است چون باید پیش از رسیدنِ CSS و JS کار کند.
|
||||
*/
|
||||
export function SplashScreen({ showContent }: { showContent: boolean }) {
|
||||
if (!showContent) return <div className="h-full bg-rose" />;
|
||||
export function SplashScreen() {
|
||||
return (
|
||||
<div className="relative flex h-full flex-col items-center justify-center overflow-hidden bg-rose">
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2">
|
||||
{GLYPHS.map((g) => (
|
||||
<span key={g.c} className="rise absolute bottom-0 text-3xl font-black text-white/60" style={{ left: `${g.x}%`, animationDelay: `${g.d}s` }}>
|
||||
{g.c}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 220, damping: 18 }}
|
||||
className="relative flex flex-col items-center gap-4"
|
||||
>
|
||||
<div className="rounded-[32px] bg-white/15 p-6 backdrop-blur-sm">
|
||||
<SeyarMascot char="sigma" mood="happy" size={130} />
|
||||
</div>
|
||||
<BrandMark size={44} />
|
||||
<p className="text-sm text-white/80">ریاضی، قدمبهقدم، از روی کتابِ درسی</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 1.8, repeat: Infinity, ease: 'linear' }}
|
||||
className="absolute bottom-20 h-6 w-6 rounded-full border-2 border-white/25 border-t-white"
|
||||
/>
|
||||
<div className="boot-splash" dir="rtl">
|
||||
<img src="/app-icon.png" alt="" width={144} height={144} />
|
||||
<span>تدریسینو</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user