Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
94b4d08220 |
103
assets/css/custom.css
Normal file
103
assets/css/custom.css
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
: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);
|
||||||
|
}
|
||||||
33
assets/js/main.js
Normal file
33
assets/js/main.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
246
index.php
246
index.php
@ -1,150 +1,120 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
|
||||||
<?php
|
<!-- SEO & Meta Tags -->
|
||||||
// Read project preview data from environment
|
<title>Recycle Hero</title>
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<meta name="description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<meta name="keywords" content="recycling game, garbage sorting, eco-friendly, kids education, environmental game, waste management, recycling for kids, how to recycle, contamination, sustainability">
|
||||||
?>
|
|
||||||
<?php if ($projectDescription): ?>
|
<!-- Open Graph / Facebook -->
|
||||||
<!-- Meta description -->
|
<meta property="og:type" content="website">
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<meta property="og:title" content="Recycle Hero">
|
||||||
<!-- Open Graph meta tags -->
|
<meta property="og:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
||||||
<!-- Twitter meta tags -->
|
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<!-- Twitter -->
|
||||||
<?php endif; ?>
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<?php if ($projectImageUrl): ?>
|
<meta name="twitter:title" content="Recycle Hero">
|
||||||
<!-- Open Graph image -->
|
<meta name="twitter:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<!-- Bootstrap 5 CDN -->
|
||||||
<?php endif; ?>
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<!-- Custom CSS -->
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
<link rel="stylesheet" href="assets/css/custom.css">
|
||||||
<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>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand fw-bold" href="#">Recycle Hero</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#game">Game</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#blogs">Blogs</a></li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
<main>
|
||||||
<div class="card">
|
<!-- About Section -->
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<section id="about" class="section">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="container">
|
||||||
<span class="sr-only">Loading…</span>
|
<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>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></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>
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
<footer>
|
<footer>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<div class="container">
|
||||||
|
<p>© 2025 Recycle Hero - Free Use</p>
|
||||||
|
</div>
|
||||||
</footer>
|
</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