From 94b4d08220116f2f9d8ccb9f3f11b3f4f22f5124 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Sat, 4 Oct 2025 18:37:02 +0000 Subject: [PATCH] test1 --- assets/css/custom.css | 103 +++++++++++++++++ assets/js/main.js | 33 ++++++ index.php | 260 +++++++++++++++++++----------------------- 3 files changed, 251 insertions(+), 145 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..5e1c23e --- /dev/null +++ b/assets/css/custom.css @@ -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); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..1658699 --- /dev/null +++ b/assets/js/main.js @@ -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); + }); +}); diff --git a/index.php b/index.php index 7205f3d..2550453 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,120 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + Recycle Hero + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Be a Recycle Hero

+

Learn to sort trash correctly and save our planet, one bin at a time!

+ Play the Game +
+
+ + +
+ +
+
+
+
+
+

The Problem of Contamination

+

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.

+
+
+
+ A colorful pile of sorted recyclable materials like plastic bottles, paper, and glass. +
+
+
+
+ + +
+
+
+
+ An illustration of the Recycle Hero game interface showing different bins for sorting. +
+
+
+

The Recycle Hero Game

+

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!

+ I'm Ready! +
+
+
+
+
+ + +
+
+
+

Latest from Our Blog

+

Stay updated with tips, news, and stories about recycling and sustainability. Our blog is your go-to resource for becoming a true Recycle Hero.

+

New articles coming soon!

+
+
+
+ +
+ + + + + + + + - + \ No newline at end of file