347 lines
19 KiB
HTML
347 lines
19 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>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)
|