Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,103 +0,0 @@
|
|||||||
|
|
||||||
:root {
|
|
||||||
--primary-color: #4CAF50;
|
|
||||||
--accent-color: #FFC107;
|
|
||||||
--bg-color: #F5F7FA;
|
|
||||||
--surface-color: #FFFFFF;
|
|
||||||
--text-color: #212529;
|
|
||||||
--heading-font: 'Georgia', 'Times New Roman', serif;
|
|
||||||
--body-font: 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: var(--body-font);
|
|
||||||
background-color: var(--bg-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: var(--heading-font);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url('https://picsum.photos/seed/recyclehero-hero/1600/900') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
color: white;
|
|
||||||
padding: 12rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 4.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
||||||
background-color: #45a049;
|
|
||||||
border-color: #45a049;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 6rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card {
|
|
||||||
background-color: var(--surface-color);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 2rem;
|
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card img {
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: var(--text-color);
|
|
||||||
color: var(--bg-color);
|
|
||||||
padding: 2rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
.fade-in {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in.visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
// Smooth scrolling for anchor links
|
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
||||||
anchor.addEventListener('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fade-in animation on scroll
|
|
||||||
const faders = document.querySelectorAll('.fade-in');
|
|
||||||
const appearOptions = {
|
|
||||||
threshold: 0.3,
|
|
||||||
rootMargin: "0px 0px -50px 0px"
|
|
||||||
};
|
|
||||||
|
|
||||||
const appearOnScroll = new IntersectionObserver(function (entries, appearOnScroll) {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (!entry.isIntersecting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
entry.target.classList.add('visible');
|
|
||||||
appearOnScroll.unobserve(entry.target);
|
|
||||||
});
|
|
||||||
}, appearOptions);
|
|
||||||
|
|
||||||
faders.forEach(fader => {
|
|
||||||
appearOnScroll.observe(fader);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
260
index.php
260
index.php
@ -1,120 +1,150 @@
|
|||||||
<!DOCTYPE html>
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
@ini_set('display_errors', '1');
|
||||||
|
@error_reporting(E_ALL);
|
||||||
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
|
$phpVersion = PHP_VERSION;
|
||||||
|
$now = date('Y-m-d H:i:s');
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>New Style</title>
|
||||||
<!-- SEO & Meta Tags -->
|
<?php
|
||||||
<title>Recycle Hero</title>
|
// Read project preview data from environment
|
||||||
<meta name="description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||||
<meta name="keywords" content="recycling game, garbage sorting, eco-friendly, kids education, environmental game, waste management, recycling for kids, how to recycle, contamination, sustainability">
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
|
?>
|
||||||
<!-- Open Graph / Facebook -->
|
<?php if ($projectDescription): ?>
|
||||||
<meta property="og:type" content="website">
|
<!-- Meta description -->
|
||||||
<meta property="og:title" content="Recycle Hero">
|
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||||
<meta property="og:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
<!-- Open Graph meta tags -->
|
||||||
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
|
<!-- Twitter meta tags -->
|
||||||
<!-- Twitter -->
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<?php endif; ?>
|
||||||
<meta name="twitter:title" content="Recycle Hero">
|
<?php if ($projectImageUrl): ?>
|
||||||
<meta name="twitter:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
<!-- Open Graph image -->
|
||||||
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
|
<!-- Twitter image -->
|
||||||
<!-- Bootstrap 5 CDN -->
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
<?php endif; ?>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<!-- Custom CSS -->
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link rel="stylesheet" href="assets/css/custom.css">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color-start: #6a11cb;
|
||||||
|
--bg-color-end: #2575fc;
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||||
|
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||||
|
color: var(--text-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||||
|
animation: bg-pan 20s linear infinite;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
@keyframes bg-pan {
|
||||||
|
0% { background-position: 0% 0%; }
|
||||||
|
100% { background-position: 100% 100%; }
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: var(--card-bg-color);
|
||||||
|
border: 1px solid var(--card-border-color);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.loader {
|
||||||
|
margin: 1.25rem auto 1.25rem;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px; height: 1px;
|
||||||
|
padding: 0; margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap; border: 0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<main>
|
||||||
<!-- Header -->
|
<div class="card">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
|
<h1>Analyzing your requirements and generating your website…</h1>
|
||||||
<div class="container">
|
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||||
<a class="navbar-brand fw-bold" href="#">Recycle Hero</a>
|
<span class="sr-only">Loading…</span>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
</div>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||||
</button>
|
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||||
<ul class="navbar-nav ms-auto">
|
</div>
|
||||||
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
|
</main>
|
||||||
<li class="nav-item"><a class="nav-link" href="#game">Game</a></li>
|
<footer>
|
||||||
<li class="nav-item"><a class="nav-link" href="#blogs">Blogs</a></li>
|
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||||
</ul>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<header id="home" class="hero">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="display-3">Be a Recycle Hero</h1>
|
|
||||||
<p class="lead mb-4">Learn to sort trash correctly and save our planet, one bin at a time!</p>
|
|
||||||
<a href="#game" class="btn btn-primary btn-lg">Play the Game</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main>
|
|
||||||
<!-- About Section -->
|
|
||||||
<section id="about" class="section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row align-items-center fade-in">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="section-card">
|
|
||||||
<h2>The Problem of Contamination</h2>
|
|
||||||
<p>When the wrong items get mixed into the recycling bin, it can contaminate the whole batch! Food, plastic bags, or dirty containers can turn valuable recyclables into landfill trash. Our game teaches you how to sort like a pro, so more materials get a new life.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 text-center">
|
|
||||||
<img src="https://picsum.photos/seed/recyclehero-about/500/350" class="img-fluid rounded shadow-lg" alt="A colorful pile of sorted recyclable materials like plastic bottles, paper, and glass.">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Game Section -->
|
|
||||||
<section id="game" class="section bg-light">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row align-items-center fade-in">
|
|
||||||
<div class="col-lg-6 text-center">
|
|
||||||
<img src="https://picsum.photos/seed/recyclehero-game/500/350" class="img-fluid rounded shadow-lg" alt="An illustration of the Recycle Hero game interface showing different bins for sorting.">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="section-card">
|
|
||||||
<h2>The Recycle Hero Game</h2>
|
|
||||||
<p>Ready for a challenge? In our game, different types of garbage will drop, and it's your job to drag them to the correct bin—paper, plastic, glass, or compost. Score points for correct sorts and learn fun facts along the way. Coming soon!</p>
|
|
||||||
<a href="#game" class="btn btn-outline-primary mt-3">I'm Ready!</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Blog Placeholder Section -->
|
|
||||||
<section id="blogs" class="section">
|
|
||||||
<div class="container text-center fade-in">
|
|
||||||
<div class="section-card p-5">
|
|
||||||
<h2>Latest from Our Blog</h2>
|
|
||||||
<p class="lead">Stay updated with tips, news, and stories about recycling and sustainability. Our blog is your go-to resource for becoming a true Recycle Hero.</p>
|
|
||||||
<p><em>New articles coming soon!</em></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2025 Recycle Hero - Free Use</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Bootstrap 5 JS Bundle -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<!-- Custom JS -->
|
|
||||||
<script src="assets/js/main.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user