213 lines
13 KiB
HTML
213 lines
13 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>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)
|