Skip to content

Commit 1620102

Browse files
IAmJustCodinIAmJustCodin
authored
Add files via upload
1 parent 6617fef commit 1620102

File tree

4 files changed

+304
-0
lines changed

4 files changed

+304
-0
lines changed

‎Website/Get_Started.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Get Started - RetroUse</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<!-- Hero Section -->
12+
<section class="hero small-hero">
13+
<div class="container">
14+
<h2>Get Started with RetroUse</h2>
15+
<p>Follow the steps below to set up and start using RetroUse.</p>
16+
</div>
17+
</section>
18+
19+
<!-- Instructions Section -->
20+
<section class="section">
21+
<div class="container">
22+
<h2>Setup Instructions</h2>
23+
<ol class="steps">
24+
<li>Download the RetroUse app using the button below.</li>
25+
<li>Visit Google Cloud and create/get your Gemini API key.</li>
26+
<li>Open RetroUse → paste your API key when prompted.</li>
27+
<li>Choose an option: <strong>Recycle, Reuse, Reduce, ReEarth</strong>.</li>
28+
<li>Start scanning and saving the Earth! 🌍</li>
29+
</ol>
30+
31+
<div class="download-box">
32+
<h3>Download RetroUse</h3>
33+
<p>Click below to download the latest version (v1.0.1).</p>
34+
<a href="#RetroUse-v1.0.1.apk" class="btn download-btn">Download under construction</a>
35+
</div>
36+
</div>
37+
</section>
38+
39+
<!-- Footer -->
40+
<footer class="footer">
41+
<p>&copy; 2025 RetroUse | For Earth’s Sake</p>
42+
</footer>
43+
</body>
44+
</html>

‎Website/Home.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>RetroUse v1.0.1 - A ReEarth Module</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<!-- Header -->
12+
<header class="header">
13+
<div class="container header-inner">
14+
<h1 class="logo">🌍 RetroUse</h1>
15+
<nav class="nav">
16+
<a href="#intro">Introduction</a>
17+
<a href="#problem">Problem</a>
18+
<a href="#solution">Solution</a>
19+
<a href="#howto">How to Use</a>
20+
<a href="#future">Future</a>
21+
</nav>
22+
</div>
23+
</header>
24+
25+
<!-- Hero Section -->
26+
<section class="hero">
27+
<h2>RetroUse v1.0.1</h2>
28+
<p>Transforming Waste Into Opportunity with AI-Powered Recycling</p>
29+
<a href="Get_Started.html" class="btn">Get Started</a>
30+
</section>
31+
32+
<!-- Introduction -->
33+
<section id="intro" class="section">
34+
<h3>Introduction</h3>
35+
<p>Our Earth is drowning in pollution — yet profit too often takes priority over the planet. Every day, tons of plastic and non-biodegradable waste end up in landfills, oceans, and even inside animals. That’s why we created <strong>RetroUse</strong>, powered by Google’s Gemini AI. With just your API key, RetroUse scans and detects recyclable items in real time.</p>
36+
</section>
37+
38+
<!-- Problem -->
39+
<section id="problem" class="section alt">
40+
<h3>The Problem</h3>
41+
<p>It’s not just about plastic. It’s about all harmful, non-biodegradable polymers that threaten ecosystems. This isn’t someone else’s problem — it’s our problem. Earth’s problem. The continued neglect of recycling is silently destroying the environment.</p>
42+
</section>
43+
44+
<!-- Solution -->
45+
<section id="solution" class="section alt">
46+
<h3>The Solution</h3>
47+
<p>We don’t need more posters or campaigns that people ignore. We need <strong>action</strong>. RetroUse transforms passive observers into active changemakers by showing how waste can be recycled, reused, or even upcycled into something new and useful.</p>
48+
<div class="cards">
49+
<div class="card">
50+
<h4> Recycle</h4>
51+
<p>Scan an item, identify it, and get recycling & upcycling instructions instantly.</p>
52+
</div>
53+
<div class="card">
54+
<h4> Reuse</h4>
55+
<p>Get creative and efficient ways to reuse your waste instead of throwing it away.</p>
56+
</div>
57+
<div class="card">
58+
<h4> ReEarth</h4>
59+
<p>Learn methods to grow plants, trees, and contribute to a greener planet.</p>
60+
</div>
61+
</div>
62+
</section>
63+
64+
<!-- How to Use -->
65+
<section id="howto" class="section">
66+
<h3>How to Use</h3>
67+
<ol>
68+
<li><p>Download RetroUse from our website.</p></li>
69+
<li><p>Get your Google API key from Google Cloud Console.</p></li>
70+
<li><p>Open the app and enter your API key in the popup.</p></li>
71+
<li><p>Choose from 4 modes: <strong>Recycle</strong>, <strong>Reuse</strong>, <strong>Reduce</strong>, or <strong>ReEarth</strong>.</p></li>
72+
</ol>
73+
</section>
74+
75+
<!-- Future -->
76+
<section id="future" class="section">
77+
<h3>Future Vision</h3>
78+
<p>RetroUse is not just another awareness app. It’s the beginning of a larger revolution — a future where waste fuels innovation, and every discarded item is a chance to give back to Earth. The future of this planet depends on solutions like RetroUse — and on people who choose to use them.</p>
79+
</section>
80+
81+
<!-- Footer -->
82+
<footer class="footer">
83+
<p>&copy; 2025 RetroUse | For Earth’s Sake</p>
84+
</footer>
85+
86+
</body>
87+
</html>

‎Website/Site1.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const bg = document.getElementById('bg');
2+
3+
window.addEventListener('scroll', () => {
4+
const scrollY = window.scrollY;
5+
const maxScroll = document.body.scrollHeight - window.innerHeight;
6+
const scrollRatio = scrollY / maxScroll;
7+
8+
const angle = 180 - (scrollRatio * 180);
9+
bg.style.background = `linear-gradient(${angle}deg, #eea539, #ffffff, #91ea99)`;
10+
});

‎Website/style.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/* =============================
2+
RetroUse v1.0.1 Website Styles
3+
============================= */
4+
5+
/* Reset */
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14+
line-height: 1.6;
15+
background-color: #f9fafb;
16+
color: #222;
17+
}
18+
19+
.container {
20+
width: 90%;
21+
max-width: 1100px;
22+
margin: 0 auto;
23+
}
24+
25+
/* Header */
26+
.header {
27+
background: linear-gradient(to right, #3f0d6a, #6b21a8, #0891b2); /* Green to Purple to Cyan */
28+
color: #fff;
29+
padding: 1rem 0;
30+
position: sticky;
31+
top: 0;
32+
z-index: 1000;
33+
}
34+
35+
.header-inner {
36+
display: flex;
37+
justify-content: space-between;
38+
align-items: center;
39+
}
40+
41+
.logo {
42+
font-size: 1.5rem;
43+
font-weight: bold;
44+
}
45+
46+
.nav a {
47+
margin-left: 1.5rem;
48+
color: #fff;
49+
text-decoration: none;
50+
font-weight: 500;
51+
transition: color 0.3s;
52+
}
53+
54+
.nav a:hover {
55+
color: #fde047; /* Yellow */
56+
}
57+
58+
/* Hero */
59+
.hero {
60+
background: linear-gradient(to right, #3f0d6a, #7e22ce, #06b6d4); /* Green → Purple → Cyan */
61+
color: white;
62+
text-align: center;
63+
padding: 6rem 2rem;
64+
}
65+
66+
.hero h2 {
67+
font-size: 3rem;
68+
margin-bottom: 1rem;
69+
font-weight: 800;
70+
}
71+
72+
.hero p {
73+
font-size: 1.2rem;
74+
margin-bottom: 2rem;
75+
}
76+
77+
.btn {
78+
background: #fde047;
79+
color: #222;
80+
padding: 0.8rem 1.5rem;
81+
border-radius: 50px;
82+
font-weight: 600;
83+
text-decoration: none;
84+
transition: background 0.3s;
85+
}
86+
87+
.btn:hover {
88+
background: #facc15;
89+
}
90+
91+
/* Sections */
92+
.section {
93+
padding: 4rem 2rem;
94+
background: #fff;
95+
}
96+
97+
.section.alt {
98+
background: #f3f4f6;
99+
}
100+
101+
.section h3 {
102+
font-size: 2rem;
103+
margin-bottom: 1rem;
104+
font-weight: 700;
105+
background: linear-gradient(to right, #3f0d6a, #7e22ce, #06b6d4);
106+
-webkit-background-clip: text;
107+
-webkit-text-fill-color: transparent;
108+
}
109+
110+
.section p, .section ol, .section li {
111+
font-size: 1.1rem;
112+
margin-bottom: 1rem;
113+
}
114+
115+
/* Cards */
116+
.cards {
117+
display: grid;
118+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
119+
gap: 1.5rem;
120+
margin-top: 2rem;
121+
}
122+
123+
.card {
124+
background: #fff;
125+
padding: 1.5rem;
126+
border-radius: 12px;
127+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
128+
transition: transform 0.3s, box-shadow 0.3s;
129+
}
130+
131+
.card:hover {
132+
transform: translateY(-5px);
133+
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
134+
}
135+
136+
.card h4 {
137+
font-size: 1.3rem;
138+
margin-bottom: 0.5rem;
139+
background: linear-gradient(to right, #15803d, #7e22ce, #06b6d4);
140+
-webkit-background-clip: text;
141+
-webkit-text-fill-color: transparent;
142+
}
143+
144+
/* Footer */
145+
.footer {
146+
background: linear-gradient(to right, #166534, #6b21a8, #0891b2);
147+
color: white;
148+
text-align: center;
149+
padding: 1.5rem;
150+
margin-top: 3rem;
151+
}
152+
.how-to-use {
153+
border: 2px solid #4CAF50;
154+
padding: 20px;
155+
border-radius: 8px;
156+
background-color: #f9f9f9;
157+
}
158+
159+
.how-to-use ul {
160+
padding-left: 20px;
161+
margin-top: 10px;
162+
}
163+

0 commit comments

Comments
 (0)