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);
|
||||
});
|
||||
});
|
||||
258
index.php
258
index.php
@ -1,150 +1,120 @@
|
||||
<?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>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<?php
|
||||
// Read project preview data from environment
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
?>
|
||||
<?php if ($projectDescription): ?>
|
||||
<!-- Meta description -->
|
||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||
<!-- Open Graph meta tags -->
|
||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<!-- Twitter meta tags -->
|
||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ($projectImageUrl): ?>
|
||||
<!-- Open Graph image -->
|
||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<!-- Twitter image -->
|
||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<?php endif; ?>
|
||||
<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;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>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- SEO & Meta Tags -->
|
||||
<title>Recycle Hero</title>
|
||||
<meta name="description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
||||
<meta name="keywords" content="recycling game, garbage sorting, eco-friendly, kids education, environmental game, waste management, recycling for kids, how to recycle, contamination, sustainability">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Recycle Hero">
|
||||
<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:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Recycle Hero">
|
||||
<meta name="twitter:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
||||
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
||||
|
||||
<!-- Bootstrap 5 CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</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>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user