403 lines
19 KiB
HTML
403 lines
19 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="{{ lang.code() }}">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta name="description" content="{{ t.landing_meta_description }}">
|
||
|
|
<title>{{ t.nav_title }} — {{ t.landing_hero_title }}</title>
|
||
|
|
|
||
|
|
<!-- Open Graph -->
|
||
|
|
<meta property="og:title" content="{{ t.nav_title }} — {{ t.landing_hero_title }}">
|
||
|
|
<meta property="og:description" content="{{ t.landing_meta_description }}">
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
|
||
|
|
<!-- Structured Data -->
|
||
|
|
<script type="application/ld+json">
|
||
|
|
{
|
||
|
|
"@context": "https://schema.org",
|
||
|
|
"@type": "LocalBusiness",
|
||
|
|
"name": "{{ t.nav_title }}",
|
||
|
|
"description": "{{ t.landing_meta_description }}",
|
||
|
|
"serviceType": "Pet Sitting",
|
||
|
|
"@id": "#business"
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* ── Reset & Base ── */
|
||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
html { scroll-behavior: smooth; }
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||
|
|
color: #2d2b55; line-height: 1.6; overflow-x: hidden;
|
||
|
|
background: linear-gradient(160deg, #e8e4ff 0%, #fce4ec 25%, #fff3e0 50%, #e0f7fa 75%, #ede7f6 100%);
|
||
|
|
background-attachment: fixed;
|
||
|
|
}
|
||
|
|
a { color: inherit; }
|
||
|
|
|
||
|
|
/* ── Floating SVG background ── */
|
||
|
|
.bg-deco {
|
||
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
|
|
pointer-events: none; z-index: 0; overflow: hidden;
|
||
|
|
}
|
||
|
|
.bg-deco svg {
|
||
|
|
position: absolute; opacity: 0.22;
|
||
|
|
will-change: transform;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Header ── */
|
||
|
|
.site-header {
|
||
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
|
|
background: rgba(255,255,255,0.6); backdrop-filter: blur(16px);
|
||
|
|
border-bottom: 1px solid rgba(180,170,220,0.2);
|
||
|
|
}
|
||
|
|
.header-inner {
|
||
|
|
max-width: 1100px; margin: 0 auto; padding: 0.8rem 1.5rem;
|
||
|
|
display: flex; justify-content: space-between; align-items: center;
|
||
|
|
}
|
||
|
|
.logo { font-size: 1.25rem; font-weight: 700; text-decoration: none; color: #2d2b55; }
|
||
|
|
.header-secret { flex: 1; align-self: stretch; margin: 0 0.75rem; }
|
||
|
|
.header-right { display: flex; align-items: center; gap: 1.25rem; }
|
||
|
|
.header-right a { text-decoration: none; font-size: 0.9rem; color: #666; transition: color 0.2s; }
|
||
|
|
.header-right a:hover { color: #2d2b55; }
|
||
|
|
.header-cta {
|
||
|
|
display: inline-block; padding: 0.45rem 1.1rem; border-radius: 8px;
|
||
|
|
background: linear-gradient(135deg, #7c6cff, #b06cff); color: #fff !important;
|
||
|
|
font-weight: 600; font-size: 0.9rem; text-decoration: none;
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
}
|
||
|
|
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,108,255,0.35); }
|
||
|
|
|
||
|
|
/* ── Content z-index above bg ── */
|
||
|
|
.site-header, .hero, .section, .form-section, .site-footer {
|
||
|
|
position: relative; z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Hero ── */
|
||
|
|
.hero {
|
||
|
|
padding: 8rem 1.5rem 4.5rem;
|
||
|
|
text-align: center;
|
||
|
|
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.6) 0%, transparent 70%);
|
||
|
|
}
|
||
|
|
.hero h1 {
|
||
|
|
font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800;
|
||
|
|
line-height: 1.2; max-width: 750px; margin: 0 auto 1.25rem;
|
||
|
|
color: #2d2b55;
|
||
|
|
}
|
||
|
|
.hero p {
|
||
|
|
font-size: clamp(1.05rem, 2.5vw, 1.25rem);
|
||
|
|
color: #5a5680; max-width: 640px; margin: 0 auto 2rem;
|
||
|
|
}
|
||
|
|
.hero-cta {
|
||
|
|
display: inline-block; padding: 0.9rem 2.5rem; border-radius: 14px;
|
||
|
|
background: linear-gradient(135deg, #7c6cff, #b06cff);
|
||
|
|
color: #fff; font-size: 1.1rem; font-weight: 700;
|
||
|
|
text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
box-shadow: 0 4px 20px rgba(124,108,255,0.35);
|
||
|
|
}
|
||
|
|
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(124,108,255,0.45); }
|
||
|
|
.hero-emoji { font-size: 4rem; margin-bottom: 1rem; display: block; }
|
||
|
|
|
||
|
|
/* ── Section common ── */
|
||
|
|
.section { padding: 5rem 1.5rem; background: transparent; }
|
||
|
|
.section-inner { max-width: 1100px; margin: 0 auto; }
|
||
|
|
.section-title {
|
||
|
|
text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
||
|
|
font-weight: 800; margin-bottom: 3rem; color: #2d2b55;
|
||
|
|
}
|
||
|
|
.section-alt {
|
||
|
|
background: rgba(255,255,255,0.3); backdrop-filter: blur(4px);
|
||
|
|
border-top: 1px solid rgba(180,170,220,0.15);
|
||
|
|
border-bottom: 1px solid rgba(180,170,220,0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Services grid ── */
|
||
|
|
.services-grid {
|
||
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
.service-card {
|
||
|
|
background: rgba(255,255,255,0.55); backdrop-filter: blur(10px);
|
||
|
|
border-radius: 18px; padding: 2rem 1.75rem;
|
||
|
|
border: 1px solid rgba(180,170,220,0.2);
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
}
|
||
|
|
.service-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 12px 36px rgba(124,108,255,0.12);
|
||
|
|
}
|
||
|
|
.service-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
|
||
|
|
.service-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; color: #2d2b55; }
|
||
|
|
.service-card p { color: #5a5680; font-size: 0.95rem; line-height: 1.6; }
|
||
|
|
|
||
|
|
/* ── Steps ── */
|
||
|
|
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
|
||
|
|
.step { text-align: center; padding: 1.5rem; }
|
||
|
|
.step-num {
|
||
|
|
width: 3.5rem; height: 3.5rem; border-radius: 50%;
|
||
|
|
background: linear-gradient(135deg, #7c6cff, #b06cff);
|
||
|
|
color: #fff; font-size: 1.4rem; font-weight: 800;
|
||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
||
|
|
margin-bottom: 1rem; box-shadow: 0 4px 14px rgba(124,108,255,0.3);
|
||
|
|
}
|
||
|
|
.step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; color: #2d2b55; }
|
||
|
|
.step p { color: #5a5680; font-size: 0.95rem; }
|
||
|
|
|
||
|
|
/* ── Form section ── */
|
||
|
|
.form-section {
|
||
|
|
padding: 5rem 1.5rem;
|
||
|
|
background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.5) 0%, transparent 70%);
|
||
|
|
}
|
||
|
|
.form-wrapper {
|
||
|
|
max-width: 540px; margin: 0 auto;
|
||
|
|
background: rgba(255,255,255,0.6); backdrop-filter: blur(14px);
|
||
|
|
border-radius: 22px; padding: 2.5rem 2rem;
|
||
|
|
box-shadow: 0 8px 40px rgba(124,108,255,0.12);
|
||
|
|
border: 1px solid rgba(180,170,220,0.25);
|
||
|
|
}
|
||
|
|
.form-wrapper h2 {
|
||
|
|
text-align: center; font-size: 1.6rem; font-weight: 800;
|
||
|
|
margin-bottom: 0.4rem; color: #2d2b55;
|
||
|
|
}
|
||
|
|
.form-wrapper .form-sub {
|
||
|
|
text-align: center; color: #7a7599; margin-bottom: 1.75rem; font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
.form-field { margin-bottom: 1.25rem; }
|
||
|
|
.form-field label {
|
||
|
|
display: block; font-size: 0.85rem; font-weight: 600;
|
||
|
|
color: #4a4570; margin-bottom: 0.35rem;
|
||
|
|
}
|
||
|
|
.form-field input,
|
||
|
|
.form-field textarea {
|
||
|
|
width: 100%; padding: 0.75rem 1rem;
|
||
|
|
border: 1.5px solid rgba(180,170,220,0.35);
|
||
|
|
border-radius: 10px; font-size: 1rem; font-family: inherit;
|
||
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||
|
|
background: rgba(255,255,255,0.65);
|
||
|
|
}
|
||
|
|
.form-field input:focus,
|
||
|
|
.form-field textarea:focus {
|
||
|
|
outline: none; border-color: #7c6cff;
|
||
|
|
box-shadow: 0 0 0 3px rgba(124,108,255,0.15);
|
||
|
|
background: rgba(255,255,255,0.85);
|
||
|
|
}
|
||
|
|
.form-field textarea { resize: vertical; min-height: 90px; }
|
||
|
|
.form-submit {
|
||
|
|
width: 100%; padding: 0.85rem; border: none; border-radius: 12px;
|
||
|
|
background: linear-gradient(135deg, #7c6cff, #b06cff);
|
||
|
|
color: #fff; font-size: 1.1rem; font-weight: 700;
|
||
|
|
cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
box-shadow: 0 4px 16px rgba(124,108,255,0.3);
|
||
|
|
}
|
||
|
|
.form-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(124,108,255,0.4); }
|
||
|
|
|
||
|
|
/* ── Footer ── */
|
||
|
|
.site-footer {
|
||
|
|
text-align: center; padding: 2rem 1.5rem;
|
||
|
|
color: #8a85a8; font-size: 0.85rem;
|
||
|
|
border-top: 1px solid rgba(180,170,220,0.15);
|
||
|
|
background: rgba(255,255,255,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Mobile ── */
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.hero { padding: 6.5rem 1rem 3rem; }
|
||
|
|
.section { padding: 3rem 1rem; }
|
||
|
|
.form-section { padding: 3rem 1rem; }
|
||
|
|
.form-wrapper { padding: 1.75rem 1.25rem; }
|
||
|
|
.header-cta { display: none; }
|
||
|
|
.bg-deco svg { opacity: 0.15; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Floating decorative SVG background -->
|
||
|
|
<div class="bg-deco" id="bgDeco" aria-hidden="true"></div>
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="site-header">
|
||
|
|
<div class="header-inner">
|
||
|
|
<a href="/?lang={{ lang.code() }}" class="logo">🐾 {{ t.nav_title }}</a>
|
||
|
|
<a href="/admin" class="header-secret" aria-hidden="true"></a>
|
||
|
|
<div class="header-right">
|
||
|
|
<a href="?lang={{ lang.other().code() }}">{{ lang.other().label() }}</a>
|
||
|
|
<a href="#form" class="header-cta">{{ t.landing_hero_cta }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<section class="hero">
|
||
|
|
<span class="hero-emoji" role="img" aria-label="pets">🐱🐶</span>
|
||
|
|
<h1>{{ t.landing_hero_title }}</h1>
|
||
|
|
<p>{{ t.landing_hero_subtitle }}</p>
|
||
|
|
<a href="#form" class="hero-cta">{{ t.landing_hero_cta }}</a>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Services -->
|
||
|
|
<section class="section section-alt" id="services">
|
||
|
|
<div class="section-inner">
|
||
|
|
<h2 class="section-title">{{ t.landing_services_title }}</h2>
|
||
|
|
<div class="services-grid">
|
||
|
|
<article class="service-card">
|
||
|
|
<span class="service-icon" role="img" aria-label="cat">🐱</span>
|
||
|
|
<h3>{{ t.landing_service_cats_title }}</h3>
|
||
|
|
<p>{{ t.landing_service_cats_text }}</p>
|
||
|
|
</article>
|
||
|
|
<article class="service-card">
|
||
|
|
<span class="service-icon" role="img" aria-label="dog">🐕</span>
|
||
|
|
<h3>{{ t.landing_service_dogs_title }}</h3>
|
||
|
|
<p>{{ t.landing_service_dogs_text }}</p>
|
||
|
|
</article>
|
||
|
|
<article class="service-card">
|
||
|
|
<span class="service-icon" role="img" aria-label="home">🏠</span>
|
||
|
|
<h3>{{ t.landing_service_home_title }}</h3>
|
||
|
|
<p>{{ t.landing_service_home_text }}</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- How it works -->
|
||
|
|
<section class="section" id="how">
|
||
|
|
<div class="section-inner">
|
||
|
|
<h2 class="section-title">{{ t.landing_how_title }}</h2>
|
||
|
|
<div class="steps">
|
||
|
|
<div class="step">
|
||
|
|
<span class="step-num">1</span>
|
||
|
|
<h3>{{ t.landing_how_step1_title }}</h3>
|
||
|
|
<p>{{ t.landing_how_step1_text }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="step">
|
||
|
|
<span class="step-num">2</span>
|
||
|
|
<h3>{{ t.landing_how_step2_title }}</h3>
|
||
|
|
<p>{{ t.landing_how_step2_text }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="step">
|
||
|
|
<span class="step-num">3</span>
|
||
|
|
<h3>{{ t.landing_how_step3_title }}</h3>
|
||
|
|
<p>{{ t.landing_how_step3_text }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Lead Form -->
|
||
|
|
<section class="form-section" id="form">
|
||
|
|
<div class="form-wrapper">
|
||
|
|
<h2>{{ t.landing_form_title }}</h2>
|
||
|
|
<p class="form-sub">{{ t.landing_form_subtitle }}</p>
|
||
|
|
<form method="post" action="/submit">
|
||
|
|
<div class="form-field">
|
||
|
|
<label for="name">{{ t.landing_form_name }}</label>
|
||
|
|
<input type="text" id="name" name="name" required autocomplete="name">
|
||
|
|
</div>
|
||
|
|
<div class="form-field">
|
||
|
|
<label for="phone">{{ t.landing_form_phone }}</label>
|
||
|
|
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||
|
|
</div>
|
||
|
|
<div class="form-field">
|
||
|
|
<label for="comment">{{ t.landing_form_comment }}</label>
|
||
|
|
<textarea id="comment" name="comment" placeholder="{{ t.landing_form_comment_placeholder }}"></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="form-submit">{{ t.landing_form_submit }}</button>
|
||
|
|
</form>
|
||
|
|
{% if !contact_info.is_empty() %}
|
||
|
|
<div style="text-align:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(180,170,220,0.25);">
|
||
|
|
<p style="color:#7a7599;font-size:0.9rem;margin-bottom:0.4rem;">{{ t.landing_contact_label }}</p>
|
||
|
|
<p style="font-size:1.1rem;font-weight:600;color:#2d2b55;">{{ contact_info }}</p>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="site-footer">
|
||
|
|
<p>{{ t.landing_footer_text }}</p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var icons = [
|
||
|
|
// Cat face
|
||
|
|
'<svg viewBox="0 0 80 80" width="W" height="W"><path d="M20 15 L10 2 L18 18 M60 15 L70 2 L62 18 M40 70 C18 70 8 52 8 38 C8 20 22 8 40 8 C58 8 72 20 72 38 C72 52 62 70 40 70Z" fill="none" stroke="C" stroke-width="3" stroke-linecap="round"/><circle cx="28" cy="36" r="3.5" fill="C"/><circle cx="52" cy="36" r="3.5" fill="C"/><ellipse cx="40" cy="48" rx="4" ry="2.5" fill="C"/><path d="M36 48 Q32 54 28 52 M44 48 Q48 54 52 52" fill="none" stroke="C" stroke-width="2" stroke-linecap="round"/></svg>',
|
||
|
|
// Dog face
|
||
|
|
'<svg viewBox="0 0 80 80" width="W" height="W"><path d="M15 28 Q6 18 12 8 Q18 14 22 22 M65 28 Q74 18 68 8 Q62 14 58 22" fill="none" stroke="C" stroke-width="3" stroke-linecap="round"/><ellipse cx="40" cy="44" rx="28" ry="26" fill="none" stroke="C" stroke-width="3"/><circle cx="30" cy="38" r="3" fill="C"/><circle cx="50" cy="38" r="3" fill="C"/><ellipse cx="40" cy="50" rx="5" ry="3.5" fill="C"/><path d="M40 53.5 L40 58 M36 58 Q40 62 44 58" fill="none" stroke="C" stroke-width="2" stroke-linecap="round"/></svg>',
|
||
|
|
// Bone
|
||
|
|
'<svg viewBox="0 0 100 44" width="W" height="H"><path d="M28 14 C28 6, 18 0, 12 6 C6 0, -2 8, 4 16 C0 20, 0 24, 4 28 C-2 36, 6 44, 12 38 C18 44, 28 38, 28 30 L72 30 C72 38, 82 44, 88 38 C94 44, 102 36, 96 28 C100 24, 100 20, 96 16 C102 8, 94 0, 88 6 C82 0, 72 6, 72 14 Z" fill="C" opacity="0.45"/></svg>',
|
||
|
|
// Bowl
|
||
|
|
'<svg viewBox="0 0 80 50" width="W" height="H2"><path d="M8 18 Q8 46 40 46 Q72 46 72 18 Z" fill="C" opacity="0.2"/><ellipse cx="40" cy="18" rx="34" ry="10" fill="none" stroke="C" stroke-width="3"/><path d="M8 18 Q8 46 40 46 Q72 46 72 18" fill="none" stroke="C" stroke-width="3" stroke-linejoin="round"/></svg>',
|
||
|
|
// Paw print
|
||
|
|
'<svg viewBox="0 0 60 70" width="W2" height="W"><ellipse cx="30" cy="46" rx="16" ry="18" fill="C" opacity="0.55"/><ellipse cx="14" cy="22" rx="8" ry="10" fill="C" opacity="0.55" transform="rotate(-10 14 22)"/><ellipse cx="46" cy="22" rx="8" ry="10" fill="C" opacity="0.55" transform="rotate(10 46 22)"/><ellipse cx="24" cy="8" rx="6" ry="8" fill="C" opacity="0.55" transform="rotate(-5 24 8)"/><ellipse cx="38" cy="8" rx="6" ry="8" fill="C" opacity="0.55" transform="rotate(5 38 8)"/></svg>',
|
||
|
|
// Fish
|
||
|
|
'<svg viewBox="0 0 80 40" width="W" height="H"><path d="M60 20 Q48 2 28 8 Q10 14 10 20 Q10 26 28 32 Q48 38 60 20Z" fill="C" opacity="0.25"/><path d="M60 20 Q48 2 28 8 Q10 14 10 20 Q10 26 28 32 Q48 38 60 20Z" fill="none" stroke="C" stroke-width="2.5"/><path d="M60 20 L74 6 L74 34 Z" fill="C" opacity="0.25" stroke="C" stroke-width="2.5" stroke-linejoin="round"/><circle cx="24" cy="18" r="2.5" fill="C"/></svg>',
|
||
|
|
// Heart
|
||
|
|
'<svg viewBox="0 0 60 55" width="W2" height="W2"><path d="M30 50 C10 35 0 22 0 14 C0 5 7 0 15 0 C21 0 26 3 30 9 C34 3 39 0 45 0 C53 0 60 5 60 14 C60 22 50 35 30 50Z" fill="C" opacity="0.5"/></svg>',
|
||
|
|
// Mouse toy
|
||
|
|
'<svg viewBox="0 0 70 50" width="W" height="H2"><ellipse cx="32" cy="28" rx="22" ry="16" fill="C" opacity="0.2"/><ellipse cx="32" cy="28" rx="22" ry="16" fill="none" stroke="C" stroke-width="2.5"/><path d="M12 22 Q2 10 10 6 M12 34 Q2 40 6 46" fill="none" stroke="C" stroke-width="2.5" stroke-linecap="round"/><circle cx="22" cy="24" r="2" fill="C"/><path d="M54 28 Q68 18 64 32 Q60 40 56 30" fill="none" stroke="C" stroke-width="2.5" stroke-linecap="round"/></svg>'
|
||
|
|
];
|
||
|
|
|
||
|
|
var colors = ['#7c6cff','#ff5287','#ff8c26','#00c9a7','#b06cff','#ff6eb4','#22c993','#4da6ff','#ffb340','#ff6b6b'];
|
||
|
|
|
||
|
|
var container = document.getElementById('bgDeco');
|
||
|
|
if (!container) return;
|
||
|
|
|
||
|
|
var count = Math.min(30, Math.floor(window.innerWidth / 50));
|
||
|
|
var items = [];
|
||
|
|
|
||
|
|
var seed = 42;
|
||
|
|
function rng() { seed = (seed * 16807 + 0) % 2147483647; return seed / 2147483647; }
|
||
|
|
|
||
|
|
for (var i = 0; i < count; i++) {
|
||
|
|
var iconIdx = Math.floor(rng() * icons.length);
|
||
|
|
var color = colors[Math.floor(rng() * colors.length)];
|
||
|
|
var size = 44 + Math.floor(rng() * 56);
|
||
|
|
var x = rng() * 100;
|
||
|
|
var y = rng() * 100;
|
||
|
|
var rotation = Math.floor(rng() * 360);
|
||
|
|
var speed = 0.15 + rng() * 0.35;
|
||
|
|
var rotSpeed = (rng() - 0.5) * 0.04;
|
||
|
|
|
||
|
|
var svg = icons[iconIdx]
|
||
|
|
.replace(/W2/g, String(Math.round(size * 0.75)))
|
||
|
|
.replace(/H2/g, String(Math.round(size * 0.6)))
|
||
|
|
.replace(/W/g, String(size))
|
||
|
|
.replace(/H/g, String(Math.round(size * 0.5)))
|
||
|
|
.replace(/C/g, color);
|
||
|
|
|
||
|
|
var wrapper = document.createElement('div');
|
||
|
|
wrapper.innerHTML = svg;
|
||
|
|
var el = wrapper.firstChild;
|
||
|
|
el.style.left = x + '%';
|
||
|
|
el.style.top = y + '%';
|
||
|
|
el.style.transform = 'rotate(' + rotation + 'deg)';
|
||
|
|
container.appendChild(el);
|
||
|
|
|
||
|
|
items.push({ el: el, baseY: y, rotation: rotation, speed: speed, rotSpeed: rotSpeed });
|
||
|
|
}
|
||
|
|
|
||
|
|
var ticking = false;
|
||
|
|
function onScroll() {
|
||
|
|
if (ticking) return;
|
||
|
|
ticking = true;
|
||
|
|
requestAnimationFrame(function() {
|
||
|
|
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
|
||
|
|
for (var i = 0; i < items.length; i++) {
|
||
|
|
var it = items[i];
|
||
|
|
var offsetY = scrollY * it.speed;
|
||
|
|
var rot = it.rotation + scrollY * it.rotSpeed;
|
||
|
|
it.el.style.transform = 'translateY(' + (-offsetY) + 'px) rotate(' + rot + 'deg)';
|
||
|
|
}
|
||
|
|
ticking = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|