gitadmin/fraxlenet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add estimates package modals, magical animations and pricing links

Browse Source 
- estimates: per-package detail modals with min/max breakdown and specs,
  opening with a wand-flick spiral spring and sparkle trail, closing with a
  perimeter sparkle burst
- home: pricing teaser section linking to estimates; contact form pre-fills
  a message when arriving from a package "Enquire" link
- mascot: Star Trek-style teleport-in (delay, sparkle charge, bottom-up
  materialise with near-white energy wash and rising sparkle beam)
- buttons: wand-sparkle swipe speed and density now scale with button width
- themed scrollbars site-wide with stable gutter to stop modal scroll shift

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Fraxle
2026-06-02 12:38:41 +01:00
co-authored by Claude Opus 4.8
parent 206daaef5d
commit 9303dc7f4d
4 changed files with 724 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+17 -2
View File
@@ -19,6 +19,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<noscript><style>.mascot-teleport{opacity:1;}</style></noscript>
</head>
<body>
@@ -58,7 +59,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<span class="hero-title-accent">for Small Business</span>
</h1>
<div class="hero-mascots-mobile">
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img">
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
<p class="hero-caption">Danny the tech-wizard &amp; Astro the cosmic cat</p>
</div>
<p class="hero-subtitle">Friendly website design, technology support and gadget wizardry - with a touch of enchantment. Based in Oxfordshire.</p>
@@ -73,7 +74,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
</div>
<div class="hero-mascots">
<div class="mascot-ring">
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img">
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
</div>
<p class="hero-caption">Danny the tech-wizard &amp; Astro the cosmic cat</p>
</div>
@@ -240,6 +241,20 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
</div>
</section>
<!-- ===================== PRICING TEASER ===================== -->
<section id="pricing-teaser" class="pricing-teaser section-pad">
<div class="container">
<div class="section-header reveal">
<p class="section-eyebrow">Transparent Pricing</p>
<h2 class="section-title">Spells &amp; Pricing</h2>
<p class="section-lead">From a simple first website to a full ecommerce empire - plus ongoing care plans and ad-hoc tech support. See clear, honest estimates with no hidden fees, and enquire about any package in a click.</p>
<a href="estimates.php" class="btn btn-primary pricing-teaser-btn">
<i class="fas fa-scroll"></i> View Estimates &amp; Packages
</a>
</div>
</div>
</section>
<!-- ===================== CONTACT ===================== -->
<section id="contact" class="contact section-pad">
<div class="container">