90 lines
3.4 KiB
HTML
90 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta name="theme-color" content="#0f172a" />
|
|
<title>Amusement - Stylish PWA Demo</title>
|
|
<meta name="description" content="A generic frontend demo showcasing beautiful, modern web design and PWA capabilities." />
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
|
<!-- PWA Manifest & Icons -->
|
|
<link rel="manifest" href="./manifest.json" />
|
|
<link rel="icon" type="image/svg+xml" href="./icon.svg" />
|
|
<link rel="apple-touch-icon" href="./icon.svg" />
|
|
</head>
|
|
<body>
|
|
<div class="background-effects">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<main class="app-container">
|
|
<header class="glass-header">
|
|
<div class="logo">
|
|
<span class="logo-icon">✨</span>
|
|
<h1>Amusement</h1>
|
|
</div>
|
|
<nav>
|
|
<button class="nav-btn active">Home</button>
|
|
<button class="nav-btn">Features</button>
|
|
<button class="nav-btn primary">Get Started</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero-section">
|
|
<div class="hero-content">
|
|
<div class="badge">Next-Gen Experience</div>
|
|
<h2 class="display-text">Stunning visuals,<br/> <span class="gradient-text">Zero Compromises.</span></h2>
|
|
<p class="subtitle">Experience a breathtaking Progressive Web App designed with modern aesthetics, glassmorphism, and seamless interactions.</p>
|
|
|
|
<div class="action-group">
|
|
<button class="btn btn-primary" id="installBtn" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Install App
|
|
</button>
|
|
<button class="btn btn-secondary">Explore Demo</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="glass-card main-card">
|
|
<div class="card-header">
|
|
<div class="dots">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="skeleton-line full"></div>
|
|
<div class="skeleton-line medium"></div>
|
|
<div class="stats-grid">
|
|
<div class="stat-box">
|
|
<span class="stat-value">99%</span>
|
|
<span class="stat-label">Performance</span>
|
|
</div>
|
|
<div class="stat-box">
|
|
<span class="stat-value">PWA</span>
|
|
<span class="stat-label">Native Feel</span>
|
|
</div>
|
|
</div>
|
|
<div class="interactive-element" id="pulseElement">
|
|
Tap to Interact
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="./app.js" type="module"></script>
|
|
</body>
|
|
</html>
|