241 lines
15 KiB
HTML
241 lines
15 KiB
HTML
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) |