Automated commit to test9 from Docker container
This commit is contained in:
commit
8afbbb12ae
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
Dockerfile
|
||||
134
authentication.html
Normal file
134
authentication.html
Normal file
@ -0,0 +1,134 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Authentication</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - EcoConnect</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="login-section" aria-labelledby="login-heading">
|
||||
<h1 id="login-heading">Welcome Back!</h1>
|
||||
<p>Log in to track your eco-friendly activities, earn badges, and see your collective impact.</p>
|
||||
|
||||
<form action="/login" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="" autocomplete="email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Enter your password" required="" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="remember-me" name="remember-me">
|
||||
<label for="remember-me">Remember me</label>
|
||||
</div>
|
||||
<a href="/forgot-password">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">Log In</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">Don't have an account yet? <a href="/register">Sign Up</a></p>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sign Up - EcoTracker</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section id="signup" class="signup-container">
|
||||
<h2>Join EcoTracker Today!</h2>
|
||||
<p>Start logging your eco-friendly activities, earn badges, and contribute to a greener planet. Whether you're an individual or a company, every action counts!</p>
|
||||
|
||||
<form class="signup-form" aria-labelledby="signup-heading">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Choose a unique username" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Min. 8 characters" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm-password">Confirm Password</label>
|
||||
<input type="password" id="confirm-password" name="confirm_password" placeholder="Re-enter your password" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="account-type">Account Type</label>
|
||||
<select id="account-type" name="account_type">
|
||||
<option value="individual">Individual Eco-Warrior</option>
|
||||
<option value="company">Company / Organization</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="text-align: center;">
|
||||
<input type="checkbox" id="terms-agree" name="terms_agree" required="">
|
||||
<label for="terms-agree" class="checkbox-label">I agree to the <a href="#terms">Terms of Service</a> and <a href="#privacy">Privacy Policy</a></label>
|
||||
</div>
|
||||
|
||||
<button type="submit">Create My Account</button>
|
||||
</form>
|
||||
|
||||
<p class="login-link">
|
||||
Already have an account? <a href="#login">Log In Here</a>
|
||||
</p>
|
||||
</section>
|
||||
<div class="app-form"><h1>Enroll to Make a Difference</h1><h2>Your Profile for Impact</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Your email for eco-updates"></div><h2>Connect With Us</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Your contact number"></div><h2>Tell Us About Your Green Journey</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your passion for environmental action and how you envision contributing to our vibrant eco-community!"></textarea></div><button type="submit">Start Your Green Impact!</button></div>
|
||||
<section class="password-recovery-prompt">
|
||||
<div class="container">
|
||||
<header class="prompt-header">
|
||||
<h1 class="prompt-title">Forgot Your Password?</h1>
|
||||
<p class="prompt-description">
|
||||
Enter the email address associated with your EcoTrack account and we'll send you a link to reset your password.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form action="#" method="POST" class="recovery-form">
|
||||
<div class="form-group">
|
||||
<label for="recoveryEmail" class="sr-only">Email Address</label>
|
||||
<input type="email" id="recoveryEmail" name="email" placeholder="Your registered email address" required="" autocomplete="email" class="form-input">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="button button-primary">Send Reset Link</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<footer class="prompt-footer">
|
||||
<p class="prompt-link-text">
|
||||
<a href="#" class="link-secondary">Remembered your password? Log in here.</a>
|
||||
</p>
|
||||
<p class="prompt-link-text">
|
||||
<a href="#" class="link-secondary">Need help? Contact support.</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EcoTrack</h3><p class="footer-1-newsletter-text">Join our newsletter to get the latest updates on environmental initiatives and community achievements.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Stay Informed</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive impactful updates and eco-tips from our community.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">About EcoTrack</a></li><li><a href="#">How It Works</a></li><li><a href="#">Impact Map</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Community Forum</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Partnerships</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 EcoTrack. All rights reserved. Empowering a greener future.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
241
dashboard.html
Normal file
241
dashboard.html
Normal file
@ -0,0 +1,241 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<div class="text-1-wrapper"><section class="text-1-section"><p class="text-1-tagline">Your Actions, Our Planet</p><h2 class="text-1-heading">Track Your Eco-Journey, Visualize Collective Change</h2><p class="text-1-description">Log your personal or company's eco-friendly activities like recycling, tree planting, and energy saving. Earn unique badges, see your impact on interactive maps, and inspire a global community.</p><div class="text-1-button-group"><button class="text-1-btn text-1-solid">Start Your Green Impact</button><button class="text-1-btn text-1-outline">Explore Features</button></div></section></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quick Activity Log</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="quick-log-section" aria-labelledby="quickLogHeading">
|
||||
<header class="quick-log-header">
|
||||
<h2 id="quickLogHeading">Quick Activity Log</h2>
|
||||
<p>Log your eco-friendly activities quickly and see your positive impact grow. Every action counts!</p>
|
||||
</header>
|
||||
|
||||
<div class="activity-grid">
|
||||
<article class="activity-form-card" aria-labelledby="logNewActivityHeading">
|
||||
<h3 id="logNewActivityHeading">Log a New Activity</h3>
|
||||
<form action="#" method="post">
|
||||
<div class="form-group">
|
||||
<label for="activity-type">Activity Type</label>
|
||||
<select id="activity-type" name="activityType" required="" aria-required="true">
|
||||
<option value="">Select an activity...</option>
|
||||
<option value="recycling">Recycling</option>
|
||||
<option value="tree-planting">Tree Planting</option>
|
||||
<option value="energy-saving">Energy Saving</option>
|
||||
<option value="water-conservation">Water Conservation</option>
|
||||
<option value="community-cleanup">Community Cleanup</option>
|
||||
<option value="other">Other Eco-Friendly Action</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-details">Details (e.g., items recycled, trees planted)</label>
|
||||
<textarea id="activity-details" name="activityDetails" rows="3" placeholder="e.g., 5kg of plastic and paper, 3 native saplings" aria-placeholder="e.g., 5kg of plastic and paper, 3 native saplings"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-date">Date of Activity</label>
|
||||
<input type="date" id="activity-date" name="activityDate" value="2023-10-27" required="" aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-impact">Estimated Impact Points (Optional)</label>
|
||||
<input type="number" id="activity-impact" name="activityImpact" min="0" placeholder="e.g., 50 (for 50g CO2 saved)" aria-placeholder="e.g., 50 (for 50g CO2 saved)">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="cta-button">Submit Activity</button>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article class="activity-card" aria-labelledby="recentActivityHeading">
|
||||
<h3 id="recentActivityHeading">Recent Activities</h3>
|
||||
<p>See what you've logged recently and track your progress towards new badges.</p>
|
||||
<ul>
|
||||
<li><strong aria-label="Activity type: Recycling">Recycling:</strong> 15kg Mixed Recyclables - Oct 25, 2023</li>
|
||||
<li><strong aria-label="Activity type: Tree Planting">Tree Planting:</strong> 2 Oak Trees - Oct 20, 2023</li>
|
||||
<li><strong aria-label="Activity type: Energy Saving">Energy Saving:</strong> Switched to LED Bulbs - Oct 18, 2023</li>
|
||||
</ul>
|
||||
<a href="#view-all-activities" class="cta-button" aria-label="View all your logged activities">View All Activities</a>
|
||||
</article>
|
||||
|
||||
<article class="activity-card" aria-labelledby="earnBadgesHeading">
|
||||
<h3 id="earnBadgesHeading">Earn Badges</h3>
|
||||
<p>Unlock new achievements and recognition for your consistent eco-efforts. Your next badge awaits!</p>
|
||||
<p><strong>Next Goal:</strong> "Green Thumb" - Log 10 tree planting activities.</p>
|
||||
<a href="#view-badges" class="cta-button" aria-label="Explore available badges and your progress">Explore Badges</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section id="recent-achievements" class="section-container">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Recent Achievements</h2>
|
||||
<p class="section-description">See the latest eco-friendly activities from our community and companies.</p>
|
||||
<div class="achievements-grid">
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">🌳</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Trees Planted Milestone</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">User EcoWarrior77</span>
|
||||
<span class="achievement-date">2 hours ago</span>
|
||||
</p>
|
||||
<p class="achievement-description">Achieved "Forest Creator" badge by planting 100 trees!</p>
|
||||
<p class="achievement-impact">Impact: Offset 1 ton CO2</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">♻️</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Plastic Recycling Challenge</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">GreenSolutions Inc.</span>
|
||||
<span class="achievement-date">Yesterday</span>
|
||||
</p>
|
||||
<p class="achievement-description">Successfully recycled 500kg of plastic waste this month.</p>
|
||||
<p class="achievement-impact">Impact: Saved 1,500L water</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">💧</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Water Saving Initiative</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">User AquaSaver</span>
|
||||
<span class="achievement-date">3 days ago</span>
|
||||
</p>
|
||||
<p class="achievement-description">Logged 100 days of reduced water consumption.</p>
|
||||
<p class="achievement-impact">Impact: Saved 5,000L water</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">💡</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Energy Reduction Goal</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">BrightFuture Corp.</span>
|
||||
<span class="achievement-date">1 week ago</span>
|
||||
</p>
|
||||
<p class="achievement-description">Reduced office electricity consumption by 20% this quarter.</p>
|
||||
<p class="achievement-impact">Impact: Lowered carbon footprint</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">🍎</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Composting Champion</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">User CompostKing</span>
|
||||
<span class="achievement-date">1 week ago</span>
|
||||
</p>
|
||||
<p class="achievement-description">Logged 50kg of food waste composted.</p>
|
||||
<p class="achievement-impact">Impact: Reduced landfill waste</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<span class="icon-placeholder">🚲</span>
|
||||
</div>
|
||||
<div class="achievement-details">
|
||||
<h3 class="achievement-title">Green Commute Streak</h3>
|
||||
<p class="achievement-meta">
|
||||
<span class="achievement-user">User PedalPower</span>
|
||||
<span class="achievement-date">2 weeks ago</span>
|
||||
</p>
|
||||
<p class="achievement-description">Completed 30 days of cycling to work.</p>
|
||||
<p class="achievement-impact">Impact: Offset 100kg CO2</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="achievements-footer">
|
||||
<a href="#all-achievements" class="button button-primary">View All Achievements</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="overall-impact" class="impact-metrics-section">
|
||||
<div class="container">
|
||||
<h2>Overall Impact Metrics</h2>
|
||||
<p class="section-description">
|
||||
Explore the collective power of our community's eco-friendly actions across the globe.
|
||||
</p>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<article class="metric-card">
|
||||
<h3>Total Activities Logged</h3>
|
||||
<p class="metric-value">1,234,567</p>
|
||||
<p class="metric-unit">Activities Completed</p>
|
||||
</article>
|
||||
|
||||
<article class="metric-card">
|
||||
<h3>Trees Planted Globally</h3>
|
||||
<p class="metric-value">567,890</p>
|
||||
<p class="metric-unit">Trees Planted</p>
|
||||
</article>
|
||||
|
||||
<article class="metric-card">
|
||||
<h3>Waste Diverted</h3>
|
||||
<p class="metric-value">89,012</p>
|
||||
<p class="metric-unit">Tonnes from Landfill</p>
|
||||
</article>
|
||||
|
||||
<article class="metric-card">
|
||||
<h3>CO2 Reduced</h3>
|
||||
<p class="metric-value">12,345</p>
|
||||
<p class="metric-unit">Tonnes Equivalent</p>
|
||||
</article>
|
||||
|
||||
<article class="metric-card">
|
||||
<h3>Badges Earned</h3>
|
||||
<p class="metric-value">234,567</p>
|
||||
<p class="metric-unit">Community Badges</p>
|
||||
</article>
|
||||
|
||||
<article class="metric-card">
|
||||
<h3>Participants Worldwide</h3>
|
||||
<p class="metric-value">98,765</p>
|
||||
<p class="metric-unit">Individuals & Companies</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="call-to-action">
|
||||
<p>Want to visualize the impact on a map or see detailed breakdowns?</p>
|
||||
<a href="/dashboard/detailed-impact" class="button primary-button">View Detailed Impact & Leaderboards</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EcoTrack</h3><p class="footer-1-newsletter-text">Join our newsletter to get the latest updates on environmental initiatives and community achievements.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Stay Informed</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive impactful updates and eco-tips from our community.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">About EcoTrack</a></li><li><a href="#">How It Works</a></li><li><a href="#">Impact Map</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Community Forum</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Partnerships</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 EcoTrack. All rights reserved. Empowering a greener future.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
347
impact_visualization.html
Normal file
347
impact_visualization.html
Normal file
@ -0,0 +1,347 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impact Visualization</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Interactive Global Map</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section id="interactive-map" class="global-map-section">
|
||||
<div class="container">
|
||||
<h2>Visualize Our Collective Eco-Impact</h2>
|
||||
<p class="section-description">
|
||||
Explore a dynamic global map showcasing eco-friendly activities from users worldwide. See where trees are planted, waste is recycled, and communities are making a difference.
|
||||
</p>
|
||||
|
||||
<div class="map-stats-grid">
|
||||
<div class="map-container" aria-label="Interactive Global Map">
|
||||
<!-- Placeholder for interactive map (e.g., Leaflet, Google Maps, custom SVG map) -->
|
||||
<!-- This div would typically contain the map library's initialization code -->
|
||||
</div>
|
||||
|
||||
<aside class="statistics-sidebar">
|
||||
<h3>Global Impact Snapshot</h3>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon" aria-hidden="true">🌳</div> <!-- Tree emoji -->
|
||||
<div class="stat-content">
|
||||
<strong>1,234,567</strong>
|
||||
<span>Trees Planted</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon" aria-hidden="true">♻</div> <!-- Recycling symbol -->
|
||||
<div class="stat-content">
|
||||
<strong>987,654 kg</strong>
|
||||
<span>Waste Recycled</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon" aria-hidden="true">👪</div> <!-- Group emoji -->
|
||||
<div class="stat-content">
|
||||
<strong>123,456</strong>
|
||||
<span>Active Participants</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon" aria-hidden="true">🌍</div> <!-- Earth emoji -->
|
||||
<div class="stat-content">
|
||||
<strong>150+</strong>
|
||||
<span>Countries Involved</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="call-to-action">
|
||||
<h3>Ready to Make Your Mark?</h3>
|
||||
<p>
|
||||
Join our growing community and log your eco-friendly activities. Your actions, big or small, contribute to a healthier planet and appear on this map!
|
||||
</p>
|
||||
<a href="#register" class="btn-primary">Start Contributing Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="personal-trend-graphs" class="py-12 bg-gray-50">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 text-center mb-8">
|
||||
Your Personal Eco-Trend Dashboard
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12">
|
||||
Track your individual contributions and see how your eco-friendly habits are growing over time.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Recycling Activity: Weight Over Time
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 1 Placeholder: Line Chart - Total Recycled Weight per Month]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
See your total recycled weight across different material types monthly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Tree Planting & Carbon Offset Progress
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 2 Placeholder: Bar Chart - Trees Planted per Quarter]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
Track the number of trees you've planted and their estimated carbon absorption.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Energy Savings: Kilowatt-Hours Reduced
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 3 Placeholder: Area Chart - KWh Saved Annually]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
Monitor your electricity consumption reductions and energy-saving impact.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Water Conservation: Liters Saved
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 4 Placeholder: Line Chart - Water Saved per Month]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
Observe the positive trend in your water-saving efforts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Badges Earned Over Time
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 5 Placeholder: Scatter Plot/Timeline - Badges Achieved]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
Celebrate your milestones and see your badge collection grow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">
|
||||
Overall Eco-Impact Score
|
||||
</h3>
|
||||
<div class="bg-gray-200 h-64 flex items-center justify-center rounded-md text-gray-500">
|
||||
[Graph 6 Placeholder: Progress/Gauge Chart - Cumulative Score]
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
Your combined score reflecting all your eco-friendly activities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<p class="text-lg text-gray-700">
|
||||
Want to log more activities or explore collective impact?
|
||||
</p>
|
||||
<a href="#log-activity" class="mt-4 inline-block bg-green-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-700 transition duration-300">
|
||||
Log New Activity
|
||||
</a>
|
||||
<a href="#collective-impact" class="mt-4 ml-4 inline-block bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300">
|
||||
View Collective Impact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="impact-filters" aria-labelledby="impact-filters-heading">
|
||||
<h2 id="impact-filters-heading">Filter Impact View</h2>
|
||||
|
||||
<form class="impact-filter-form">
|
||||
<div class="filter-group filter-timeframe">
|
||||
<label for="timeframe-select">Timeframe:</label>
|
||||
<select id="timeframe-select" name="timeframe">
|
||||
<option value="all">All Time</option>
|
||||
<option value="month" selected="">Last 30 Days</option>
|
||||
<option value="week">Last 7 Days</option>
|
||||
<option value="year">Year to Date</option>
|
||||
<option value="custom">Custom Range</option>
|
||||
</select>
|
||||
<div id="custom-range-fields" class="hidden">
|
||||
<label for="start-date">Start Date:</label>
|
||||
<input type="date" id="start-date" name="start_date">
|
||||
<label for="end-date">End Date:</label>
|
||||
<input type="date" id="end-date" name="end_date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset class="filter-group filter-activity-type">
|
||||
<legend>Activity Type:</legend>
|
||||
<div class="checkbox-options">
|
||||
<input type="checkbox" id="activity-all" name="activity_type" value="all" checked="">
|
||||
<label for="activity-all">All Activities</label>
|
||||
|
||||
<input type="checkbox" id="activity-recycling" name="activity_type" value="recycling">
|
||||
<label for="activity-recycling">Recycling</label>
|
||||
|
||||
<input type="checkbox" id="activity-tree-planting" name="activity_type" value="tree_planting">
|
||||
<label for="activity-tree-planting">Tree Planting</label>
|
||||
|
||||
<input type="checkbox" id="activity-energy-saving" name="activity_type" value="energy_saving">
|
||||
<label for="activity-energy-saving">Energy Saving</label>
|
||||
|
||||
<input type="checkbox" id="activity-water-conservation" name="activity_type" value="water_conservation">
|
||||
<label for="activity-water-conservation">Water Conservation</label>
|
||||
|
||||
<input type="checkbox" id="activity-community-cleanup" name="activity_type" value="community_cleanup">
|
||||
<label for="activity-community-cleanup">Community Cleanup</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="filter-group filter-location">
|
||||
<label for="location-select">Location Scope:</label>
|
||||
<select id="location-select" name="location_scope">
|
||||
<option value="my-location">My Location</option>
|
||||
<option value="my-country">My Country</option>
|
||||
<option value="global" selected="">Global</option>
|
||||
<option value="custom-area">Custom Area</option>
|
||||
</select>
|
||||
<input type="text" id="location-search" name="location_search" placeholder="Search city or region" aria-label="Search for a specific location" class="hidden">
|
||||
</div>
|
||||
|
||||
<div class="filter-group filter-user-group">
|
||||
<label for="group-select">User Group:</label>
|
||||
<select id="group-select" name="user_group">
|
||||
<option value="all-users" selected="">All Users</option>
|
||||
<option value="individuals">Individuals</option>
|
||||
<option value="companies">Companies</option>
|
||||
<option value="schools">Schools</option>
|
||||
<option value="organizations">Organizations</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="submit" class="button-primary">Apply Filters</button>
|
||||
<button type="reset" class="button-secondary">Reset Filters</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Comparative Analytics Display</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="analytics-section" aria-labelledby="comparative-analytics-heading">
|
||||
<h1 id="comparative-analytics-heading">Your Impact: Comparative Analytics</h1>
|
||||
|
||||
<div class="analytics-grid">
|
||||
<article class="analytics-card" aria-labelledby="personal-impact-heading">
|
||||
<h2 id="personal-impact-heading">Your Personal Eco-Impact</h2>
|
||||
<p>Track your individual contributions and see how your efforts in recycling, tree planting, and energy saving add up over time.</p>
|
||||
<div class="placeholder-graph" aria-label="Placeholder chart for personal impact data">
|
||||
[Placeholder: Bar Chart/Line Graph of Your Activities Over Time]
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="analytics-card" aria-labelledby="community-impact-heading">
|
||||
<h2 id="community-impact-heading">Community Collective Impact</h2>
|
||||
<p>Visualize the combined power of your community. See how collective actions contribute to a greener planet.</p>
|
||||
<div class="placeholder-graph" aria-label="Placeholder map showing community eco-friendly activities">
|
||||
[Placeholder: Heat Map or Pin Map of Community Activities]
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="analytics-card" aria-labelledby="leaderboard-standing-heading">
|
||||
<h2 id="leaderboard-standing-heading">Your Leaderboard Standing</h2>
|
||||
<p>See where you rank among friends, family, or other companies in eco-friendly activities. Healthy competition drives greater impact!</p>
|
||||
<div class="placeholder-graph" aria-label="Placeholder list of leaderboard rankings">
|
||||
[Placeholder: Top 5 Users/Teams Leaderboard Snippet]
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section class="comparison-bar-section" aria-labelledby="benchmarking-heading">
|
||||
<h2 id="benchmarking-heading">Benchmark Your Progress</h2>
|
||||
<p>Compare your eco-friendly contributions against regional, national, or global averages for similar activities.</p>
|
||||
<div class="comparison-placeholder" aria-label="Placeholder for recycling comparison bar chart">
|
||||
[Placeholder: Comparative Bar Chart - Your Recycling vs. Average]
|
||||
</div>
|
||||
<div class="comparison-placeholder" aria-label="Placeholder for tree planting comparison bar chart">
|
||||
[Placeholder: Comparative Bar Chart - Your Tree Planting vs. Average]
|
||||
</div>
|
||||
<p class="comparison-info">
|
||||
<em>Data updates daily based on user submissions and public datasets.</em>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="cta-section" aria-labelledby="explore-more-heading">
|
||||
<h2 id="explore-more-heading">Dive Deeper into Your Analytics</h2>
|
||||
<p>Ready to explore comprehensive data, detailed graphs, and personalized insights? See the full picture of your environmental contribution.</p>
|
||||
<a href="#full-dashboard" class="cta-button" role="button">Explore Full Dashboard</a>
|
||||
</section>
|
||||
</section>
|
||||
<section id="share-impact-prompt" class="impact-prompt-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Share Your Eco-Impact</h2>
|
||||
<p class="section-description">Logged an eco-friendly activity recently? Share it with our community to contribute to the collective impact and earn badges!</p>
|
||||
|
||||
<form class="impact-form" action="#" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="activity-type">Activity Type</label>
|
||||
<input type="text" id="activity-type" name="activityType" placeholder="e.g., Tree Planting, Recycling, Commuting by Bike" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-date">Date of Activity</label>
|
||||
<input type="date" id="activity-date" name="activityDate" required="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="impact-quantity">Impact Quantity / Details</label>
|
||||
<input type="text" id="impact-quantity" name="impactQuantity" placeholder="e.g., 5 trees planted, 10kg recycled, 5km cycled">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-location">Location (Optional)</label>
|
||||
<input type="text" id="activity-location" name="activityLocation" placeholder="e.g., City, Park Name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-notes">Additional Notes (Optional)</label>
|
||||
<textarea id="activity-notes" name="activityNotes" rows="4" placeholder="Any details you'd like to add about your activity..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Log My Impact</button>
|
||||
</form>
|
||||
|
||||
<div class="impact-cta">
|
||||
<p>Every small action contributes to a greener planet. Let's make a difference together!</p>
|
||||
<a href="#collective-impact" class="text-link">See Collective Impact <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">EcoImpact</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">hello@ecoimpact.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">About Us</a></li><li><a href="#">How It Works</a></li><li><a href="#">Features</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Join Today</a></li></ul><ul><li><a href="#">Community</a></li><li><a href="#">Blog</a></li><li><a href="#">Support</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 EcoImpact. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
28
index.html
Normal file
28
index.html
Normal file
@ -0,0 +1,28 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<div class="hero-2-wrapper"><section class="hero-2-centered-hero"><h2 id="101" title="testing" class="hero-2-heading">Track Your Green Impact, Inspire Change</h2><p class="hero-2-description">Join a vibrant community dedicated to a greener planet. Log your eco-friendly activities, earn unique badges, and see your collective impact visualized on dynamic maps and leaderboards. Together, we can build a sustainable future.</p><div class="hero-2-button-group"><button class="hero-2-btn hero-2-solid">Start Your Green Journey</button><button class="hero-2-btn hero-2-outline">See Our Impact</button></div><div class="hero-2-image"><img src="https://images.unsplash.com/photo-1638699532230-1c7676c2a708?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxzdXN0YWluYWJpbGl0eSUyQyUyNTIwZW52aXJvbm1lbnQlMkMlMjUyMGVjby1mcmllbmRseSUyQyUyNTIwY29tbXVuaXR5JTJDJTI1MjBncmVlbiUyQyUyNTIwaW1wYWN0JTJDJTI1MjBwbGFuZXQlMkMlMjUyMGFjdGlvbiUyQyUyNTIwdHJhY2tpbmclMkMlMjUyMHZpc3VhbGl6YXRpb258ZW58MHx8fHwxNzUyMjk3MDQ1fDA&ixlib=rb-4.1.0&q=80&w=1080" class="hero-2-placeholder"></div></section></div>
|
||||
<div class="split-10-wrapper"><section class="split-10-section"><div class="split-10-left"><div class="split-10-placeholder"></div></div><div class="split-10-right"><p class="split-10-tagline">Unleash Your Green Potential</p><h2 class="split-10-heading">Visualize Your Impact, Inspire Change</h2><p class="split-10-description">Log your eco-friendly activities, from recycling initiatives to tree planting projects, and watch your personal impact grow. Our intuitive dashboards, interactive maps, and dynamic leaderboards transform your efforts into a powerful story of positive change, inspiring a greener future for all.</p><div class="split-10-button-group"><button class="split-10-btn split-10-outline">See How It Works</button><button class="split-10-btn split-10-arrow">Join the Movement →</button></div></div></section></div>
|
||||
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img src="webflow-logo.svg" alt="Webflow" class="testimonial-1-logo"><p class="testimonial-1-text">This platform has completely transformed how our team approaches sustainability. Seeing our collective impact visualized, from tree planting initiatives to our weekly recycling efforts, has fostered incredible engagement and friendly competition. It's truly inspiring to see how small actions add up to a big difference!</p><div class="testimonial-1-author"><img src="author-avatar.jpg" alt="Author Avatar" class="testimonial-1-author-image"><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Sarah Chen</p><p class="testimonial-1-author-position">Sustainability Lead, GreenSolutions Inc.</p></div></div></div></div>
|
||||
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Empower Your Green Journey</p><h2 class="pricing-2-heading">Choose Your Impact Plan</h2><p class="pricing-2-subheading">Select the perfect plan to track your eco-friendly actions, earn badges, and contribute to a healthier planet.</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly billing</button><button class="pricing-2-btn">Annual billing</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Individual Impact</h3><p class="pricing-2-plan-subtitle">For personal eco-tracking</p><p class="pricing-2-price">$19/mo</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ Unlimited activity logging</li><li>✓ Personal impact dashboard</li><li>✓ Earn exclusive badges</li><li>✓ Community leaderboard access</li><li>✓ Basic data visualization</li><li>✓ Standard support</li></ul><button class="pricing-2-cta">Start Your Journey</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Team Earth</h3><p class="pricing-2-plan-subtitle">For companies and groups</p><p class="pricing-2-price">$19/mo</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ All Individual Impact features</li><li>✓ Team-wide activity tracking</li><li>✓ Company impact analytics</li><li>✓ Custom team challenges</li><li>✓ Group leaderboards</li><li>✓ Priority support</li></ul><button class="pricing-2-cta">Boost Team Impact</button></div></div></section></div>
|
||||
<div class="newsletter-2-wrapper"><section class="newsletter-2-section"><div class="newsletter-2-container"><div class="newsletter-2-left"><h2 class="newsletter-2-heading">Start Your Eco-Journey Today!</h2><p class="newsletter-2-description">Track your green activities, earn badges, and visualize your collective impact on a healthier planet.</p></div><div class="newsletter-2-right"><form class="newsletter-2-signup-form"><input type="email" placeholder="Enter your email" class="newsletter-2-email-input"><button type="submit" class="newsletter-2-submit-btn">Join the Movement</button></form><p class="newsletter-2-disclaimer">By joining, you agree to our <a href="#">Terms and Conditions</a><span>.</span></p></div></div></section></div>
|
||||
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">EcoImpact</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">hello@ecoimpact.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">About Us</a></li><li><a href="#">How It Works</a></li><li><a href="#">Features</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Join Today</a></li></ul><ul><li><a href="#">Community</a></li><li><a href="#">Blog</a></li><li><a href="#">Support</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 EcoImpact. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
<div class="features-grid"><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Track Your Eco-Actions</h3><p class="feature-description">Effortlessly log personal or company environmental activities, from recycling to reducing energy.</p></div><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Earn Green Badges</h3><p class="feature-description">Unlock unique badges and achievements as you reach new milestones in your sustainability journey.</p></div><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Visualize Your Impact</h3><p class="feature-description">See your contributions come alive with interactive graphs, maps, and insightful data.</p></div><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Join the Green Leaderboard</h3><p class="feature-description">Compete with friends, colleagues, or other companies and inspire more collective action.</p></div><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Collective Progress Mapping</h3><p class="feature-description">Explore a global map showcasing where and how communities are making a difference.</p></div><div class="feature-item"><div class="feature-icon"><svg class="icon"></svg></div><h3 class="feature-title">Easy Data Management</h3><p class="feature-description">Securely store and manage all your environmental activity data with simple, intuitive tools.</p></div></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
358
leaderboard.html
Normal file
358
leaderboard.html
Normal file
@ -0,0 +1,358 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leaderboard</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Top Contributors List</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="top-contributors-section">
|
||||
<div class="container">
|
||||
<h2>Our Top Eco-Heroes</h2>
|
||||
<p>Celebrate the incredible individuals and companies leading the charge in environmental sustainability. Their collective actions are making a significant difference!</p>
|
||||
|
||||
<div class="contributors-grid">
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank gold">1</div>
|
||||
<div class="avatar" aria-label="Avatar for Alice Green">A</div>
|
||||
<h3>Alice Green</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Tree Planter Badge">🌱</span>
|
||||
<span class="badge-icon" title="Recycling Champion Badge">♻️</span>
|
||||
<span class="badge-icon" title="Water Saver Badge">💧</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>12,500</strong></p>
|
||||
<small>Last Activity: Recycled 50kg plastics</small>
|
||||
</article>
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank silver">2</div>
|
||||
<div class="avatar" aria-label="Avatar for Bob Eco">B</div>
|
||||
<h3>Bob Eco</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Energy Saver Badge">💡</span>
|
||||
<span class="badge-icon" title="Composter Badge">🍂</span>
|
||||
<span class="badge-icon" title="Community Organizer Badge">🤝</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>10,200</strong></p>
|
||||
<small>Last Activity: Hosted a local cleanup</small>
|
||||
</article>
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank bronze">3</div>
|
||||
<div class="avatar" aria-label="Avatar for EcoCorp Solutions">E</div>
|
||||
<h3>EcoCorp Solutions</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Corporate Sustainability Badge">🏢</span>
|
||||
<span class="badge-icon" title="Large Scale Recycling Badge">♻️</span>
|
||||
<span class="badge-icon" title="Carbon Neutral Badge">🌬️</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>9,800</strong></p>
|
||||
<small>Last Activity: Implemented new solar panels</small>
|
||||
</article>
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank">4</div>
|
||||
<div class="avatar" aria-label="Avatar for Carol Planet">C</div>
|
||||
<h3>Carol Planet</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Public Transport User Badge">🚌</span>
|
||||
<span class="badge-icon" title="Plant-Based Diet Badge">🥕</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>8,100</strong></p>
|
||||
<small>Last Activity: Logged car-free commute</small>
|
||||
</article>
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank">5</div>
|
||||
<div class="avatar" aria-label="Avatar for David Bloom">D</div>
|
||||
<h3>David Bloom</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Garden Enthusiast Badge">🌷</span>
|
||||
<span class="badge-icon" title="Water Conservation Badge">💦</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>7,900</strong></p>
|
||||
<small>Last Activity: Started composting bin</small>
|
||||
</article>
|
||||
|
||||
<article class="contributor-card">
|
||||
<div class="rank">6</div>
|
||||
<div class="avatar" aria-label="Avatar for Flora Nature">F</div>
|
||||
<h3>Flora Nature</h3>
|
||||
<div class="badges">
|
||||
<span class="badge-icon" title="Upcycling Innovator Badge">🎨</span>
|
||||
<span class="badge-icon" title="Reusable Products User Badge">🛍️</span>
|
||||
</div>
|
||||
<p class="impact-points">Total Impact Points: <strong>7,500</strong></p>
|
||||
<small>Last Activity: Shared upcycled craft</small>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="call-to-action">
|
||||
<h3>Want to see your name on the leaderboard?</h3>
|
||||
<p>Start logging your eco-friendly activities today and earn badges for your contributions!</p>
|
||||
<a href="#register" class="btn">Join the Movement</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leaderboard Filters</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="leaderboard-filters-section" aria-labelledby="leaderboard-filters-title">
|
||||
<h2 id="leaderboard-filters-title">Filter Leaderboard</h2>
|
||||
|
||||
<form class="filter-controls" aria-label="Leaderboard filter options">
|
||||
<div class="filter-group">
|
||||
<label for="filter-scope">Scope</label>
|
||||
<select id="filter-scope" name="scope">
|
||||
<option value="global">Global</option>
|
||||
<option value="company">My Company</option>
|
||||
<option value="department">My Department</option>
|
||||
<option value="team">My Team</option>
|
||||
<option value="friends">Friends</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-timeframe">Timeframe</label>
|
||||
<select id="filter-timeframe" name="timeframe">
|
||||
<option value="all-time">All Time</option>
|
||||
<option value="this-month">This Month</option>
|
||||
<option value="this-quarter">This Quarter</option>
|
||||
<option value="this-year">This Year</option>
|
||||
<option value="last-month">Last Month</option>
|
||||
<option value="custom">Custom Range</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-startDate">Start Date</label>
|
||||
<input type="date" id="filter-startDate" name="startDate" disabled="">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-endDate">End Date</label>
|
||||
<input type="date" id="filter-endDate" name="endDate" disabled="">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-category">Activity Category</label>
|
||||
<select id="filter-category" name="category">
|
||||
<option value="all">All Categories</option>
|
||||
<option value="recycling">Recycling</option>
|
||||
<option value="tree-planting">Tree Planting</option>
|
||||
<option value="energy-saving">Energy Saving</option>
|
||||
<option value="water-conservation">Water Conservation</option>
|
||||
<option value="community-cleanups">Community Cleanups</option>
|
||||
<option value="sustainable-transport">Sustainable Transport</option>
|
||||
<option value="eco-education">Eco-Education</option>
|
||||
<option value="waste-reduction">Waste Reduction</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-impact-type">Impact Type</label>
|
||||
<select id="filter-impact-type" name="impactType">
|
||||
<option value="total-points">Total Points</option>
|
||||
<option value="activities-logged">Activities Logged</option>
|
||||
<option value="badges-earned">Badges Earned</option>
|
||||
<option value="trees-planted">Trees Planted</option>
|
||||
<option value="co2-saved">CO2 Saved (Est.)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group checkbox-group" role="group" aria-labelledby="activity-type-heading">
|
||||
<span id="activity-type-heading" style="display: none;">Activity Type (Filter by specific activity types)</span>
|
||||
<label>Activity Type</label>
|
||||
<label for="checkbox-recycling">
|
||||
<input type="checkbox" id="checkbox-recycling" name="activityType" value="recycling"> Recycling
|
||||
</label>
|
||||
<label for="checkbox-treeplanting">
|
||||
<input type="checkbox" id="checkbox-treeplanting" name="activityType" value="tree-planting"> Tree Planting
|
||||
</label>
|
||||
<label for="checkbox-energy">
|
||||
<input type="checkbox" id="checkbox-energy" name="activityType" value="energy-saving"> Energy Saving
|
||||
</label>
|
||||
<label for="checkbox-water">
|
||||
<input type="checkbox" id="checkbox-water" name="activityType" value="water-conservation"> Water Conservation
|
||||
</label>
|
||||
<label for="checkbox-other">
|
||||
<input type="checkbox" id="checkbox-other" name="activityType" value="other"> Other
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="filter-location">Location (City/Region)</label>
|
||||
<input type="text" id="filter-location" name="location" placeholder="e.g., New York, Earth">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="submit" class="apply-btn">Apply Filters</button>
|
||||
<button type="reset" class="reset-btn">Reset Filters</button>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
// JavaScript for enabling/disabling date inputs based on Timeframe selection
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const timeframeSelect = document.getElementById('filter-timeframe');
|
||||
const startDateInput = document.getElementById('filter-startDate');
|
||||
const endDateInput = document.getElementById('filter-endDate');
|
||||
|
||||
function toggleDateInputs() {
|
||||
const isCustom = timeframeSelect.value === 'custom';
|
||||
startDateInput.disabled = !isCustom;
|
||||
endDateInput.disabled = !isCustom;
|
||||
if (!isCustom) {
|
||||
startDateInput.value = '';
|
||||
endDateInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Initial call to set state correctly on page load
|
||||
toggleDateInputs();
|
||||
|
||||
// Add event listener for changes
|
||||
timeframeSelect.addEventListener('change', toggleDateInputs);
|
||||
|
||||
// Reset button functionality
|
||||
const resetButton = document.querySelector('.reset-btn');
|
||||
resetButton.addEventListener('click', function() {
|
||||
document.querySelector('.filter-controls').reset();
|
||||
toggleDateInputs(); // Ensure date inputs are disabled after reset
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<section id="ranking-criteria" class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">How We Rank Eco-Champions</h2>
|
||||
|
||||
<p class="text-lg text-center max-w-3xl mx-auto mb-16 text-gray-700">
|
||||
Our leaderboards are designed to celebrate consistent effort and tangible environmental impact. Here's how we measure success and determine your rank among individuals and organizations.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-green-700">1. Activity Impact Score</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
Points are awarded based on the environmental significance of each logged activity. Higher impact actions contribute more to your overall score.
|
||||
</p>
|
||||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||||
<li>Placeholder: Weighting for specific activity types (e.g., Tree Planting vs. Recycling).</li>
|
||||
<li>Placeholder: Bonus for quantifiable impact (e.g., kg recycled, trees planted).</li>
|
||||
<li>Placeholder: Regular review and update of activity values.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-green-700">2. Consistency & Frequency</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
Sustained effort is key. Users who consistently log activities over time will see their rank improve.
|
||||
</p>
|
||||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||||
<li>Placeholder: Daily/Weekly logging streaks.</li>
|
||||
<li>Placeholder: Minimum number of activities per period.</li>
|
||||
<li>Placeholder: Recency of last logged activity.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-green-700">3. Badge Achievement</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
Earning various badges demonstrates a breadth of eco-friendly engagement and contributes to your standing.
|
||||
</p>
|
||||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||||
<li>Placeholder: Points awarded for each badge level achieved.</li>
|
||||
<li>Placeholder: Special bonuses for completing badge sets.</li>
|
||||
<li>Placeholder: Encouraging diverse activity types.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-green-700">4. Community Engagement (Optional Placeholder)</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
(This section could be used if community interaction like inviting friends, sharing impact, or participating in challenges also contributes to ranking).
|
||||
</p>
|
||||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||||
<li>Placeholder: Referring new users.</li>
|
||||
<li>Placeholder: Participating in team challenges.</li>
|
||||
<li>Placeholder: Sharing personal impact on social media.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 bg-white p-8 rounded-lg shadow-md max-w-4xl mx-auto">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-green-700">Important Notes & Transparency</h3>
|
||||
<ul class="list-disc pl-5 text-gray-600 space-y-2">
|
||||
<li>Placeholder: Ranking calculations are updated hourly/daily.</li>
|
||||
<li>Placeholder: Criteria may be refined over time for fairness and effectiveness.</li>
|
||||
<li>Placeholder: Anti-fraud measures are in place to ensure data integrity.</li>
|
||||
<li>Placeholder: Separate leaderboards exist for individuals and companies.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="pricing-3-wrapper"><section class="pricing-3-section"><p class="pricing-3-tagline">Amplify Your Impact</p><h2 class="pricing-3-heading">Collective Catalyst Plan</h2><p class="pricing-3-subheading">Empower your team or organization to track, visualize, and celebrate your combined eco-friendly contributions with advanced tools and reporting.</p><div class="pricing-3-grid"><div class="pricing-3-card"><i class="fas fa-users pricing-3-icon"></i><h3 class="pricing-3-plan-title">EcoVerse Team Pro</h3><p class="pricing-3-plan-subtitle">Seamlessly connect your members. Each gains full access to track and log green activities.</p><p class="pricing-3-price">$12/user/month (min. 10 users)</p><hr class="pricing-3-divider"><p class="pricing-3-includes">Includes:</p><ul class="pricing-3-feature-list"><li>✓ Everything in Pro Individual +</li><li>✓ Centralized team dashboard & analytics</li><li>✓ Customizable team challenges & badges</li><li>✓ Organizational impact reports & insights</li></ul><button class="pricing-3-cta">Request a Custom Demo</button><p class="pricing-3-footer-note">Designed for businesses, NGOs, and educational bodies eager to foster a culture of sustainability and track their collective environmental footprint.</p></div></div></section></div>
|
||||
<section class="my-ranking-highlight-section">
|
||||
<h2 class="section-title">My Ranking Highlight</h2>
|
||||
<div class="ranking-highlight-card">
|
||||
<div class="ranking-summary">
|
||||
<div class="metric-block">
|
||||
<span class="metric-label">Overall Rank</span>
|
||||
<span class="metric-value">#123</span>
|
||||
</div>
|
||||
<div class="metric-block">
|
||||
<span class="metric-label">Points Earned</span>
|
||||
<span class="metric-value">5,432</span>
|
||||
</div>
|
||||
<div class="metric-block">
|
||||
<span class="metric-label">Collective Impact Contribution</span>
|
||||
<span class="metric-value">~2.5 kg CO2 Offset</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-achievement">
|
||||
<h3 class="achievement-title">Your Top Badge</h3>
|
||||
<div class="badge-display">
|
||||
<img src="https://via.placeholder.com/80/007bff/ffffff?text=Badge" alt="Eco Champion Badge" width="80" height="80" class="badge-icon">
|
||||
<div class="badge-details">
|
||||
<p class="badge-name">Eco Champion</p>
|
||||
<p class="badge-level">Level III</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="achievement-description">Achieved for logging 50+ tree planting activities.</p>
|
||||
</div>
|
||||
|
||||
<div class="ranking-message">
|
||||
<p>You are currently in the top <strong>5%</strong> of users globally this month!</p>
|
||||
<p>Keep up the fantastic work!</p>
|
||||
</div>
|
||||
|
||||
<div class="ranking-actions">
|
||||
<a href="#leaderboard" class="button-link">View Full Leaderboard</a>
|
||||
<a href="#my-badges" class="button-link">Explore My Badges</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">EcoImpact</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">hello@ecoimpact.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">About Us</a></li><li><a href="#">How It Works</a></li><li><a href="#">Features</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Join Today</a></li></ul><ul><li><a href="#">Community</a></li><li><a href="#">Blog</a></li><li><a href="#">Support</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 EcoImpact. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
213
log_activity.html
Normal file
213
log_activity.html
Normal file
@ -0,0 +1,213 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Log Activity</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<div class="app-form"><h1>Enroll to Make a Difference</h1><h2>Your Profile for Impact</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Your email for eco-updates"></div><h2>Connect With Us</h2><div class="form-group full-width"><label>Phone Number</label><input id="phone" type="tel" placeholder="Your contact number"></div><h2>Tell Us About Your Green Journey</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your passion for environmental action and how you envision contributing to our vibrant eco-community!"></textarea></div><button type="submit">Start Your Green Impact!</button></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Activity Type Selector</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<div class="container">
|
||||
<section class="activity-selector-section" aria-labelledby="activity-selection-title">
|
||||
<h2 id="activity-selection-title">What eco-friendly activity are you logging today?</h2>
|
||||
<p>Select the category that best describes your contribution to a greener planet. Your actions make a difference!</p>
|
||||
|
||||
<div class="activity-categories">
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🌳</span> <!-- Tree icon -->
|
||||
<h3>Tree Planting</h3>
|
||||
<p>Planting trees, restoring forests, or supporting afforestation projects.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">♻</span> <!-- Recycling symbol -->
|
||||
<h3>Recycling</h3>
|
||||
<p>Recycling waste materials, reducing landfill contribution.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🚶♂️</span> <!-- Walking person -->
|
||||
<h3>Sustainable Commute</h3>
|
||||
<p>Walking, biking, or using public transport instead of driving.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">💧</span> <!-- Droplet icon -->
|
||||
<h3>Water Conservation</h3>
|
||||
<p>Reducing water usage, fixing leaks, or collecting rainwater.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🏘️</span> <!-- House with garden -->
|
||||
<h3>Gardening & Composting</h3>
|
||||
<p>Home gardening, composting organic waste, or urban farming.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🔋</span> <!-- Battery icon -->
|
||||
<h3>Energy Saving</h3>
|
||||
<p>Reducing electricity consumption, using renewable energy.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🧼</span> <!-- Leaf or plant -->
|
||||
<h3>Waste Reduction</h3>
|
||||
<p>Minimizing waste, reusing items, or choosing zero-waste products.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">🧑🏭</span> <!-- Factory worker -->
|
||||
<h3>Community Cleanup</h3>
|
||||
<p>Participating in litter cleanups or environmental restoration.</p>
|
||||
</button>
|
||||
|
||||
<button type="button" class="category-card" aria-pressed="false">
|
||||
<span class="icon" aria-hidden="true">📚</span> <!-- Book icon -->
|
||||
<h3>Eco-Education</h3>
|
||||
<p>Learning about sustainability or sharing eco-friendly knowledge.</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button type="button" class="button button-primary">Proceed to Log Activity</button>
|
||||
<button type="button" class="button button-secondary">View My Logged Activities</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const categoryCards = document.querySelectorAll('.category-card');
|
||||
|
||||
categoryCards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
// Toggle selected class on click
|
||||
const isSelected = card.classList.contains('selected');
|
||||
categoryCards.forEach(c => {
|
||||
c.classList.remove('selected');
|
||||
c.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
if (!isSelected) {
|
||||
card.classList.add('selected');
|
||||
card.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Date and Time Picker</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="date-time-picker-section" aria-labelledby="datetime-picker-heading">
|
||||
<h2 id="datetime-picker-heading">Log Your Eco-Activity Date & Time</h2>
|
||||
<p>Select the precise date and time when your eco-friendly action took place to accurately record its impact.</p>
|
||||
|
||||
<form action="#" method="post">
|
||||
<div class="form-group">
|
||||
<label for="activity-date">Activity Date:</label>
|
||||
<input type="date" id="activity-date" name="activity-date" required="" aria-describedby="date-help">
|
||||
<small id="date-help" class="sr-only">Choose the calendar date for your activity.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activity-time">Activity Time:</label>
|
||||
<input type="time" id="activity-time" name="activity-time" required="" aria-describedby="time-help">
|
||||
<small id="time-help" class="sr-only">Select the specific time for your activity.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="reset">Clear Selections</button>
|
||||
<button type="submit">Confirm Date & Time</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section id="location-map" class="section-padding">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Where Eco-Actions Happen</h2>
|
||||
|
||||
<div class="location-input-group">
|
||||
<input type="text" id="location-search" name="location-search" placeholder="Enter your city, address, or postal code" class="input-field" aria-label="Location search input">
|
||||
<button type="button" id="find-location-btn" class="button primary-button">
|
||||
Find My Location
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="map-placeholder">
|
||||
<h3>Interactive Map Placeholder</h3>
|
||||
<p>This area will display an interactive map visualizing collective eco-impact.</p>
|
||||
<ul>
|
||||
<li>Pins showing recent tree plantings.</li>
|
||||
<li>Heatmaps indicating high recycling activity zones.</li>
|
||||
<li>Markers for community clean-up events.</li>
|
||||
</ul>
|
||||
<p>Explore the impact near you and across the globe!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="proof-attachment-section" aria-labelledby="proof-attachment-heading">
|
||||
<div class="container">
|
||||
<h2 id="proof-attachment-heading">Proof of Activity</h2>
|
||||
<p class="section-description">
|
||||
Upload photos or documents to verify your eco-friendly action. This helps us confirm your activity and award badges.
|
||||
</p>
|
||||
|
||||
<div class="upload-area">
|
||||
<div class="drag-drop-zone" tabindex="0" role="group" aria-describedby="upload-instructions">
|
||||
<input type="file" id="proofUpload" name="proofUpload" accept="image/*, .pdf" multiple="" aria-hidden="true">
|
||||
<p id="upload-instructions">Drag & drop your files here, or <label for="proofUpload" class="upload-link">browse your device</label></p>
|
||||
<p class="accepted-formats">Accepted formats: JPG, PNG, PDF (Max 5MB per file)</p>
|
||||
</div>
|
||||
|
||||
<div class="file-previews" aria-live="polite">
|
||||
<h3>Uploaded Files</h3>
|
||||
<ul id="uploadedFilesList">
|
||||
<li class="file-item">
|
||||
<div class="file-thumbnail">
|
||||
<img src="https://via.placeholder.com/30/cccccc/ffffff?text=IMG" alt="Image file thumbnail" class="file-icon">
|
||||
</div>
|
||||
<span class="file-name">my_eco_activity_1.jpg</span>
|
||||
<span class="file-size">2.3 MB</span>
|
||||
<button type="button" class="remove-file-btn" aria-label="Remove my_eco_activity_1.jpg">X</button>
|
||||
</li>
|
||||
<li class="file-item">
|
||||
<div class="file-thumbnail">
|
||||
<img src="https://via.placeholder.com/30/cccccc/ffffff?text=PDF" alt="PDF file thumbnail" class="file-icon">
|
||||
</div>
|
||||
<span class="file-name">certificate_of_participation.pdf</span>
|
||||
<span class="file-size">1.1 MB</span>
|
||||
<button type="button" class="remove-file-btn" aria-label="Remove certificate_of_participation.pdf">X</button>
|
||||
</li>
|
||||
<li class="file-item empty-state">
|
||||
<p>No files attached yet.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attachment-actions">
|
||||
<button type="button" class="btn btn-primary">Attach Proof</button>
|
||||
<p class="attachment-note">You can attach up to 3 files per activity submission.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">EcoImpact</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">hello@ecoimpact.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">About Us</a></li><li><a href="#">How It Works</a></li><li><a href="#">Features</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Join Today</a></li></ul><ul><li><a href="#">Community</a></li><li><a href="#">Blog</a></li><li><a href="#">Support</a></li><li><a href="#">Partnerships</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 EcoImpact. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
414
my_badges.html
Normal file
414
my_badges.html
Normal file
@ -0,0 +1,414 @@
|
||||
SafeValue must use [property]=binding:
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Badges</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">EcoPact</div><ul class="nav-1-nav-links"><li><a href="home.html">Your Eco-Journey</a></li><li><a href="about.html">About EcoPact</a></li><li><a href="contact.html">Contact & Support</a></li><li><a href="services.html">Features & Benefits</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Explore More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join for Free</button><button class="nav-1-btn nav-1-solid">Log Your Impact</button></div></nav></div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Earned Badges Gallery</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section id="earned-badges" class="badges-gallery-section">
|
||||
<header>
|
||||
<h2>Your Earned Badges</h2>
|
||||
<p class="section-description">Celebrate your commitment to a sustainable future! Each badge represents a significant step you've taken to make a positive impact.</p>
|
||||
</header>
|
||||
|
||||
<div class="badges-grid">
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>♻️</span>
|
||||
<!-- Alternative: <img src="placeholder-recycle-badge.png" alt="Recycling Champion Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Recycling Champion</h3>
|
||||
<p>Awarded for consistent and significant contributions to recycling initiatives.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> January 15, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>🌳</span>
|
||||
<!-- Alternative: <img src="placeholder-tree-planting-badge.png" alt="Forest Planter Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Forest Planter</h3>
|
||||
<p>Recognizes participation in tree planting events and afforestation efforts.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> March 22, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>💧</span>
|
||||
<!-- Alternative: <img src="placeholder-water-saver-badge.png" alt="Water Steward Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Water Steward</h3>
|
||||
<p>For diligently conserving water through daily habits and reporting leaks.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> June 01, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>⚡</span>
|
||||
<!-- Alternative: <img src="placeholder-energy-saver-badge.png" alt="Energy Saver Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Energy Saver</h3>
|
||||
<p>Awarded for reducing energy consumption and promoting energy-efficient practices.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> August 10, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>🚶♀️</span>
|
||||
<!-- Alternative: <img src="placeholder-commute-badge.png" alt="Green Commuter Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Green Commuter</h3>
|
||||
<p>For choosing eco-friendly transportation methods like cycling or walking.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> September 05, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>🍎</span>
|
||||
<!-- Alternative: <img src="placeholder-compost-badge.png" alt="Compost Master Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Compost Master</h3>
|
||||
<p>For effectively managing organic waste through composting initiatives.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> October 18, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>🌱</span>
|
||||
<!-- Alternative: <img src="placeholder-garden-badge.png" alt="Urban Gardener Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Urban Gardener</h3>
|
||||
<p>Recognizes efforts in maintaining and promoting urban green spaces.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> November 29, 2023
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon" aria-hidden="true">
|
||||
<span>💡</span>
|
||||
<!-- Alternative: <img src="placeholder-innovator-badge.png" alt="Eco Innovator Badge Icon"> -->
|
||||
</div>
|
||||
<h3>Eco Innovator</h3>
|
||||
<p>For suggesting and implementing creative solutions for environmental challenges.</p>
|
||||
<div class="badge-progress">
|
||||
<span>Achieved:</span> December 12, 2023
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<footer class="call-to-action">
|
||||
<p>Ready to earn more badges and expand your impact?</p>
|
||||
<a href="#log-activity" class="btn">Log New Activity</a>
|
||||
</footer>
|
||||
</section>
|
||||
<section id="badge-details-section" style="padding: 2rem; max-width: 960px; margin: 2rem auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ffffff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); overflow: hidden;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem;">
|
||||
<h2 style="font-size: 2.8rem; color: #2e7d32; margin-bottom: 0.5rem; font-weight: 700;">Badge Details</h2>
|
||||
<p style="font-size: 1.1rem; color: #666; margin-top: 0;">Explore the criteria and impact of this prestigious badge.</p>
|
||||
|
||||
<div class="badge-header" style="display: flex; flex-direction: column; align-items: center; gap: 1rem; background-color: #e8f5e9; padding: 1.5rem 2rem; border-radius: 10px; width: calc(100% - 4rem);">
|
||||
<img src="https://via.placeholder.com/180/8bc34a/ffffff?text=Eco+Hero" alt="Badge Icon - Eco Hero" style="width: 180px; height: 180px; border-radius: 50%; border: 6px solid #a5d6a7; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
|
||||
<h3 style="font-size: 2.2rem; color: #388e3c; margin: 0; font-weight: 600;">The Eco Hero Badge</h3>
|
||||
<p style="font-style: italic; color: #757575; margin: 0; font-size: 1.1rem;">Awarded for significant, consistent contributions to ecological well-being.</p>
|
||||
</div>
|
||||
|
||||
<div class="badge-description" style="width: 100%; text-align: left;">
|
||||
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">About This Badge</h4>
|
||||
<p style="line-height: 1.7; color: #555; font-size: 1rem;">This badge signifies a deep and ongoing commitment to environmental stewardship. It's designed for users who consistently go above and beyond in logging eco-friendly activities across multiple categories, inspiring others and making a tangible difference.</p>
|
||||
</div>
|
||||
|
||||
<div class="badge-criteria" style="width: 100%; text-align: left;">
|
||||
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">How to Earn It</h4>
|
||||
<ul style="list-style-type: none; padding: 0; margin: 0;">
|
||||
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Log 75+ recycling activities.
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Participate in 15+ tree planting or re-forestation initiatives.
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #66bb6a; font-weight: bold; font-size: 1.3rem;">✓</span> Complete 30+ energy conservation activities (e.g., reduce electricity, water).
|
||||
</li>
|
||||
<li style="margin-bottom: 1rem; padding-left: 30px; position: relative; color: #666; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #bdbdbd; font-weight: bold; font-size: 1.3rem;">○</span> Lead or organize 5 community clean-up events (Current: 3/5).
|
||||
</li>
|
||||
<li style="margin-bottom: 0; padding-left: 30px; position: relative; color: #666; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #bdbdbd; font-weight: bold; font-size: 1.3rem;">○</span> Achieve "Carbon Footprint Reducer" badge (Not yet achieved).
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="badge-progress-earned" style="width: 100%; text-align: left;">
|
||||
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">Your Progress</h4>
|
||||
<p style="color: #555; font-size: 1rem; margin-bottom: 0.5rem;"><strong>Status:</strong> <span style="color: #ef6c00; font-weight: bold;">In Progress</span></p>
|
||||
<p style="color: #555; font-size: 1rem; margin-bottom: 0.8rem;"><strong>Overall Completion:</strong> 65%</p>
|
||||
<div style="background-color: #e0e0e0; border-radius: 8px; height: 20px; overflow: hidden; margin-bottom: 0.8rem;">
|
||||
<div style="width: 65%; background-color: #81c784; height: 100%; border-radius: 8px; transition: width 0.5s ease-in-out;"></div>
|
||||
</div>
|
||||
<p style="color: #555; font-size: 1rem;"><strong>Date Earned:</strong> Not yet earned. Keep up the great work!</p>
|
||||
<!-- Example if earned: <p style="color: #555; font-size: 1rem;"><strong>Date Earned:</strong> November 15, 2023</p> -->
|
||||
</div>
|
||||
|
||||
<div class="badge-impact" style="width: 100%; text-align: left;">
|
||||
<h4 style="font-size: 1.6rem; color: #424242; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.8rem; margin-bottom: 1.2rem; font-weight: 600;">Collective Impact of Eco Heroes</h4>
|
||||
<p style="color: #555; font-size: 1rem; margin-bottom: 0.8rem;">Users who have earned this badge have collectively achieved remarkable impact:</p>
|
||||
<ul style="list-style-type: none; padding: 0; margin: 0;">
|
||||
<li style="margin-bottom: 0.8rem; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Diverted over 150,000 kg of waste from landfills.
|
||||
</li>
|
||||
<li style="margin-bottom: 0.8rem; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Contributed to the planting of 25,000+ trees.
|
||||
</li>
|
||||
<li style="margin-bottom: 0; padding-left: 25px; position: relative; color: #555; font-size: 1rem;">
|
||||
<span style="position: absolute; left: 0; color: #4CAF50; font-weight: bold; font-size: 1.1rem;">•</span> Saved an estimated 75,000 kWh of energy.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="actions" style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; width: 100%;">
|
||||
<a href="#" style="display: inline-block; padding: 14px 30px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);">View My Activities</a>
|
||||
<button style="padding: 14px 30px; background-color: #607d8b; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 8px rgba(96, 125, 139, 0.3);">Share This Badge</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Upcoming Badges Preview</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="badges-preview-section" aria-labelledby="upcomingBadgesHeading">
|
||||
<header>
|
||||
<h2 id="upcomingBadgesHeading">Upcoming Badges Preview</h2>
|
||||
<p class="section-description">
|
||||
Discover the next achievements waiting for you! Track your progress towards these eco-friendly milestones and see how close you are to earning new recognition for your positive impact.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="badges-grid">
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon-container" aria-hidden="true">🌳</div>
|
||||
<h3>Forest Guardian</h3>
|
||||
<p class="badge-description">Log 10 tree planting activities to earn this badge. Help reforest our planet!</p>
|
||||
<div class="badge-progress-text">Progress: 5/10 activities</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Forest Guardian badge">
|
||||
<div class="badge-progress-fill" style="width: 50%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 10 Tree Planted</p>
|
||||
</article>
|
||||
|
||||
<article class="badge-card">
|
||||
<div class="badge-icon-container" aria-hidden="true">♻️</div>
|
||||
<h3>Recycling Champion</h3>
|
||||
<p class="badge-description">Reach 50kg of recycled materials logged. Every gram counts!</p>
|
||||
<div class="badge-progress-text">Progress: 25kg/50kg</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Recycling Champion badge">
|
||||
<div class="badge-progress-fill" style="width: 50%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 50kg Recycled</p>
|
||||
</article>
|
||||
|
||||
<article class="badge-card locked">
|
||||
<div class="badge-icon-container" aria-hidden="true">💡</div>
|
||||
<h3>Energy Saver</h3>
|
||||
<p class="badge-description">Log 20 energy-saving actions (e.g., unplugging devices, using LED lights).</p>
|
||||
<div class="badge-progress-text">Progress: 8/20 actions</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Energy Saver badge">
|
||||
<div class="badge-progress-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 20 Energy Actions</p>
|
||||
</article>
|
||||
|
||||
<article class="badge-card locked">
|
||||
<div class="badge-icon-container" aria-hidden="true">💧</div>
|
||||
<h3>Water Wise</h3>
|
||||
<p class="badge-description">Record 15 water conservation activities (e.g., shorter showers, fixing leaks).</p>
|
||||
<div class="badge-progress-text">Progress: 3/15 activities</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Water Wise badge">
|
||||
<div class="badge-progress-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 15 Water Actions</p>
|
||||
</article>
|
||||
|
||||
<article class="badge-card locked">
|
||||
<div class="badge-icon-container" aria-hidden="true">🚴</div>
|
||||
<h3>Green Commuter</h3>
|
||||
<p class="badge-description">Log 100km of eco-friendly travel (biking, walking, public transport).</p>
|
||||
<div class="badge-progress-text">Progress: 10km/100km</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Green Commuter badge">
|
||||
<div class="badge-progress-fill" style="width: 10%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 100km Green Travel</p>
|
||||
</article>
|
||||
|
||||
<article class="badge-card locked">
|
||||
<div class="badge-icon-container" aria-hidden="true">🤝</div>
|
||||
<h3>Community Impact</h3>
|
||||
<p class="badge-description">Participate in 5 community cleanup events or eco-volunteering initiatives.</p>
|
||||
<div class="badge-progress-text">Progress: 0/5 events</div>
|
||||
<div class="badge-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Progress towards Community Impact badge">
|
||||
<div class="badge-progress-fill" style="width: 0%;"></div>
|
||||
</div>
|
||||
<p class="badge-threshold">Threshold: 5 Community Events</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Badge Collection Summary</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<section class="section-badge-summary" aria-labelledby="badgeSummaryHeading">
|
||||
<h2 id="badgeSummaryHeading">Your Badge Collection Summary</h2>
|
||||
|
||||
<div class="badge-grid">
|
||||
<article class="badge-card" aria-labelledby="recyclerBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">♻️</div>
|
||||
<h3 id="recyclerBadgeTitle" class="badge-card__title">Recycler Pro</h3>
|
||||
<p class="badge-card__description">Awarded for consistent household recycling efforts.</p>
|
||||
<span class="badge-card__count">x 5</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 75%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">75% to next level</small>
|
||||
</article>
|
||||
|
||||
<article class="badge-card" aria-labelledby="treePlanterBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">🌳</div>
|
||||
<h3 id="treePlanterBadgeTitle" class="badge-card__title">Forest Builder</h3>
|
||||
<p class="badge-card__description">Earned for participating in tree planting initiatives.</p>
|
||||
<span class="badge-card__count">x 2</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 100%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">Level complete! New challenge awaits.</small>
|
||||
</article>
|
||||
|
||||
<article class="badge-card" aria-labelledby="waterSaverBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">💧</div>
|
||||
<h3 id="waterSaverBadgeTitle" class="badge-card__title">Water Steward</h3>
|
||||
<p class="badge-card__description">Recognizes efforts in conserving water at home or work.</p>
|
||||
<span class="badge-card__count">x 1</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">20% to next level</small>
|
||||
</article>
|
||||
|
||||
<article class="badge-card" aria-labelledby="energySaverBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">⚡</div>
|
||||
<h3 id="energySaverBadgeTitle" class="badge-card__title">Energy Guardian</h3>
|
||||
<p class="badge-card__description">For reducing energy consumption and carbon footprint.</p>
|
||||
<span class="badge-card__count">x 3</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 50%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">50% to next level</small>
|
||||
</article>
|
||||
|
||||
<article class="badge-card" aria-labelledby="communityHeroBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">🤝</div>
|
||||
<h3 id="communityHeroBadgeTitle" class="badge-card__title">Community Hero</h3>
|
||||
<p class="badge-card__description">Awarded for organizing or participating in local cleanups.</p>
|
||||
<span class="badge-card__count">x 1</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 100%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">Level complete! New challenge awaits.</small>
|
||||
</article>
|
||||
|
||||
<article class="badge-card" aria-labelledby="zeroWasteBadgeTitle">
|
||||
<div class="badge-card__icon" aria-hidden="true">🗑️</div>
|
||||
<h3 id="zeroWasteBadgeTitle" class="badge-card__title">Zero Waste Champion</h3>
|
||||
<p class="badge-card__description">For minimal waste production and conscious consumption.</p>
|
||||
<span class="badge-card__count">x 0</span>
|
||||
<div class="badge-card__progress-bar">
|
||||
<div class="badge-card__progress-fill" style="width: 0%;"></div>
|
||||
</div>
|
||||
<small class="badge-card__status">Start earning this badge!</small>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="summary-stats">
|
||||
<div class="summary-stat-item highlight">
|
||||
<span class="summary-stat-item__value">12</span>
|
||||
<p class="summary-stat-item__label">Total Badges Earned</p>
|
||||
</div>
|
||||
<div class="summary-stat-item">
|
||||
<span class="summary-stat-item__value">6</span>
|
||||
<p class="summary-stat-item__label">Unique Badges Collected</p>
|
||||
</div>
|
||||
<div class="summary-stat-item">
|
||||
<span class="summary-stat-item__value">4</span>
|
||||
<p class="summary-stat-item__label">Badges Levelled Up</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="share-badge-prompt">
|
||||
<div class="share-badge-container">
|
||||
<header class="share-badge-header">
|
||||
<h2 class="share-badge-title">Congratulations! You've Earned a New Badge!</h2>
|
||||
<p class="share-badge-subtitle">Your efforts are making a real difference. Share your achievement!</p>
|
||||
</header>
|
||||
|
||||
<div class="badge-display-area">
|
||||
<div class="badge-icon-wrapper">
|
||||
<img src="placeholder-badge-icon.png" alt="Eco-Warrior Badge Icon" class="badge-icon">
|
||||
</div>
|
||||
<h3 class="badge-name">Eco-Warrior Badge</h3>
|
||||
<p class="badge-description">Awarded for consistently tracking 50+ eco-friendly activities. You're a true champion for the planet!</p>
|
||||
<p class="badge-level">Level: Elite</p>
|
||||
</div>
|
||||
|
||||
<div class="share-actions">
|
||||
<h4 class="share-actions-heading">Spread the Word!</h4>
|
||||
<div class="share-buttons-grid">
|
||||
<a href="#" class="share-button share-facebook" aria-label="Share your badge on Facebook">
|
||||
<span class="share-icon-placeholder"></span> Share on Facebook
|
||||
</a>
|
||||
<a href="#" class="share-button share-twitter" aria-label="Share your badge on X (formerly Twitter)">
|
||||
<span class="share-icon-placeholder"></span> Share on X
|
||||
</a>
|
||||
<a href="#" class="share-button share-linkedin" aria-label="Share your badge on LinkedIn">
|
||||
<span class="share-icon-placeholder"></span> Share on LinkedIn
|
||||
</a>
|
||||
<a href="#" class="share-button share-email" aria-label="Share your badge via Email">
|
||||
<span class="share-icon-placeholder"></span> Email
|
||||
</a>
|
||||
<button class="share-button share-copy-link" aria-label="Copy link to your badge">
|
||||
<span class="share-icon-placeholder"></span> Copy Link
|
||||
</button>
|
||||
</div>
|
||||
<p class="share-encouragement">Inspire others to join the movement and make a positive impact!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">EcoTrack</h3><p class="footer-1-newsletter-text">Join our newsletter to get the latest updates on environmental initiatives and community achievements.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Stay Informed</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive impactful updates and eco-tips from our community.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Quick Links</h4><ul><li><a href="#">About EcoTrack</a></li><li><a href="#">How It Works</a></li><li><a href="#">Impact Map</a></li><li><a href="#">Badges & Rewards</a></li><li><a href="#">Community Forum</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="#">Help Center</a></li><li><a href="#">FAQs</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Partnerships</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 EcoTrack. All rights reserved. Empowering a greener future.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.display = 'none';
|
||||
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html> (see https://g.co/ng/security#xss)
|
||||
Loading…
x
Reference in New Issue
Block a user