commit
a3c88cc023
@ -0,0 +1,39 @@ |
|||||||
|
## Running application |
||||||
|
1. Clone App |
||||||
|
``` |
||||||
|
git clone https://hackethon.ai/hack/Sanju-15/aquaguardian.git |
||||||
|
cd aquaguardian |
||||||
|
``` |
||||||
|
|
||||||
|
2. Run the live server. |
||||||
|
|
||||||
|
## Github Setup |
||||||
|
### Setup account |
||||||
|
git config --global user.name "your_username" |
||||||
|
|
||||||
|
git config --global user.email johndoe@example.com |
||||||
|
|
||||||
|
|
||||||
|
# first time |
||||||
|
``` |
||||||
|
git init |
||||||
|
|
||||||
|
git checkout -b main |
||||||
|
|
||||||
|
git add README.md |
||||||
|
|
||||||
|
git commit -m "first commit" |
||||||
|
|
||||||
|
git remote add origin https://hackethon.ai/hack/Sanju-15/aquaguardian.git |
||||||
|
|
||||||
|
git push -u origin main |
||||||
|
``` |
||||||
|
|
||||||
|
# already existing repo |
||||||
|
|
||||||
|
1. clone it. |
||||||
|
``` |
||||||
|
git add . |
||||||
|
git commit -m "msg" |
||||||
|
git push |
||||||
|
``` |
||||||
|
After Width: | Height: | Size: 41 KiB |
@ -0,0 +1,111 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>AquaGuardians</title> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<link rel="shortcut icon" type="icon/png" href="finalfr.png"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div class="container"> |
||||||
|
<div class="together"> |
||||||
|
<h1>Water Conservation Survey</h1> |
||||||
|
<img |
||||||
|
src="finalfr.png" alt="Top Left Image" |
||||||
|
class="top-left-image"> |
||||||
|
</div> |
||||||
|
<form id="surveyForm"> |
||||||
|
<!-- Full Name --> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="fullName">Full Name:</label> |
||||||
|
<input type="text" id="fullName" name="fullName" placeholder="Enter username" required> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Email --> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="email">Email:</label> |
||||||
|
<input type="email" id="email" name="email" placeholder= "Enter email" required> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- General Awareness --> |
||||||
|
<fieldset class="form-group"> |
||||||
|
<legend><strong>1. General Awareness</strong></legend> |
||||||
|
<label>Do you lack water?</label> |
||||||
|
<input type="radio" name="lackwater" value="Yes"> Yes<br> |
||||||
|
<input type="radio" name="lackwater" value="No"> No<br> |
||||||
|
<input type="radio" name="lackwater" value="Not sure"> Not sure<br> |
||||||
|
|
||||||
|
<label>Are you aware of your household’s daily water consumption?</label> |
||||||
|
<input type="radio" name="householdWater" value="Yes"> Yes<br> |
||||||
|
<input type="radio" name="householdWater" value="No"> No<br> |
||||||
|
<input type="radio" name="householdWater" value="Not sure"> Not sure<br> |
||||||
|
|
||||||
|
<label>Do you know how much water is wasted by a dripping tap per day?</label> |
||||||
|
<input type="radio" name="drippingTap" value="Less than 5 liters"> Less than 5 liters<br> |
||||||
|
<input type="radio" name="drippingTap" value="5-10 liters"> 5–10 liters<br> |
||||||
|
<input type="radio" name="drippingTap" value="10-20 liters"> 10–20 liters<br> |
||||||
|
<input type="radio" name="drippingTap" value="More than 20 liters"> More than 20 liters<br> |
||||||
|
|
||||||
|
<label>Have you noticed water wastage in your community?</label> |
||||||
|
<input type="radio" name="wastage" value="Frequently"> Frequently<br> |
||||||
|
<input type="radio" name="wastage" value="Occassionaly"> Occassionaly<br> |
||||||
|
<input type="radio" name="wastage" value="Rarely"> Rarely<br> |
||||||
|
<input type="radio" name="wastage" value="Never"> Never<br> |
||||||
|
</fieldset> |
||||||
|
|
||||||
|
<!-- Personal Habits --> |
||||||
|
<fieldset class="form-group"> |
||||||
|
<legend><strong>2. Personal Habits</strong></legend> |
||||||
|
|
||||||
|
<label>How often do you turn off the tap while brushing your teeth?</label> |
||||||
|
<input type="radio" name="tapWhileBrushing" value="Always"> Always<br> |
||||||
|
<input type="radio" name="tapWhileBrushing" value="Sometimes"> Sometimes<br> |
||||||
|
<input type="radio" name="tapWhileBrushing" value="Never"> Never<br> |
||||||
|
|
||||||
|
|
||||||
|
<label>Do you have a habit of fixing leaks in your home promptly?</label> |
||||||
|
<input type="radio" name="fixLeaks" value="Yes"> Yes<br> |
||||||
|
<input type="radio" name="fixLeaks" value="No"> No<br> |
||||||
|
|
||||||
|
<label>How frequently do you reuse water (e.g., for gardening, cleaning)?</label> |
||||||
|
<input type="radio" name="reuseWater" value="Always"> Always<br> |
||||||
|
<input type="radio" name="reuseWater" value="Sometimes"> Sometimes<br> |
||||||
|
<input type="radio" name="reuseWater" value="Never"> Never<br> |
||||||
|
|
||||||
|
<label>What type of water-saving appliances do you use at home?</label> |
||||||
|
<input type="radio" name="waterAppliances" value="Low-flow faucets"> Low-flow faucets<br> |
||||||
|
<input type="radio" name="waterAppliances" value="Dual-flush toilets"> Dual-flush toilets<br> |
||||||
|
<input type="radio" name="waterAppliances" value="Water-efficient washing machines"> Water-efficient washing machines<br> |
||||||
|
<input type="radio" name="waterAppliances" value="None"> None<br> |
||||||
|
</fieldset> |
||||||
|
|
||||||
|
<!-- Feedback and Suggestions --> |
||||||
|
<fieldset class="form-group"> |
||||||
|
<legend><strong>3. Feedback and Suggestions</strong></legend> |
||||||
|
<label>What do you think is the biggest cause of water wastage in your community?</label> |
||||||
|
<textarea name="waterWastageCause" required></textarea> |
||||||
|
|
||||||
|
<label>What kind of resources or tools would help you adopt better water conservation practices?</label> |
||||||
|
<textarea name="conservationResources"></textarea> |
||||||
|
|
||||||
|
<label>Do you have any suggestions for improving water conservation in your area?</label> |
||||||
|
<textarea name="conservationSuggestions"></textarea> |
||||||
|
</fieldset> |
||||||
|
|
||||||
|
<!-- Submit Button --> |
||||||
|
<button type="submit">Submit Survey</button> |
||||||
|
</form> |
||||||
|
|
||||||
|
<!-- Tips Section --> |
||||||
|
<div id="tips"> |
||||||
|
<h2>Tips for Water Conservation</h2> |
||||||
|
<p id="tipsContent"></p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
<script src="script.js"></script> |
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,57 @@ |
|||||||
|
document.getElementById('surveyForm').addEventListener('submit', function(event) { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
// Collect form data
|
||||||
|
const formData = new FormData(event.target); |
||||||
|
const tips = []; |
||||||
|
|
||||||
|
// Analyze responses and provide tips
|
||||||
|
if (formData.get('lackwater') === 'Yes') { |
||||||
|
tips.push('Consider monitoring your water usage to identify areas of excess consumption.'); |
||||||
|
} |
||||||
|
|
||||||
|
// Analyze responses and provide tips
|
||||||
|
if (formData.get('dailyWaterUsage') === 'Less than 50 liters') { |
||||||
|
tips.push('You are using less water why bro.'); |
||||||
|
} |
||||||
|
if (formData.get('householdWater') === 'No') { |
||||||
|
tips.push('Start tracking your household water usage with a meter or app.'); |
||||||
|
} |
||||||
|
|
||||||
|
if (formData.get('householdWater') === 'Not Sure') { |
||||||
|
tips.push('Start tracking your household water usage with a meter or app.'); |
||||||
|
} |
||||||
|
if (formData.get('drippingTap') === 'More than 20 liters') { |
||||||
|
tips.push('Fix dripping taps promptly to save water.'); |
||||||
|
} |
||||||
|
if (formData.get('waterwastages') === 'Frequently') { |
||||||
|
tips.push('.'); |
||||||
|
} |
||||||
|
if (formData.get('tapWhileBrushing') === 'Never') { |
||||||
|
tips.push('Turn off the tap while brushing to save up to 10 liters of water per day.'); |
||||||
|
} |
||||||
|
if (formData.get('fixLeaks') === 'No') { |
||||||
|
tips.push('Regularly inspect and fix leaks to prevent water wastage.'); |
||||||
|
} |
||||||
|
if (formData.get('reuseWater') === 'Never') { |
||||||
|
tips.push('Reuse greywater from washing vegetables or clothes for gardening.'); |
||||||
|
} |
||||||
|
if (formData.get('reuseWater') === 'Sometimes') { |
||||||
|
tips.push('Try to reuse greywater more frequently.'); |
||||||
|
} |
||||||
|
if (formData.get('waterAppliances') === 'None') { |
||||||
|
tips.push('Invest in water-efficient appliances like low-flow faucets and dual-flush toilets.'); |
||||||
|
} |
||||||
|
|
||||||
|
// Display tips
|
||||||
|
const tipsContent = document.getElementById('tipsContent'); |
||||||
|
const tipsDiv = document.getElementById('tips'); |
||||||
|
|
||||||
|
if (tips.length > 0) { |
||||||
|
tipsContent.innerHTML = tips.map(tip => `<li>${tip}</li>`).join(''); |
||||||
|
tipsDiv.style.display = 'block'; |
||||||
|
} else { |
||||||
|
tipsContent.innerHTML = '<p>Thank you for your responses! You are already making great choices for water conservation.</p>'; |
||||||
|
tipsDiv.style.display = 'block'; |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
/* body{ |
||||||
|
background-image: url(water.jpg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-attachment: fixed; |
||||||
|
background-size:cover; |
||||||
|
} */ |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: Arial, sans-serif; |
||||||
|
line-height: 1.6; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
background-color: #6487aa; |
||||||
|
color: #ededed; |
||||||
|
} |
||||||
|
.together{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.container { |
||||||
|
max-width: 800px; |
||||||
|
margin: 20px auto; |
||||||
|
margin-top: 50 px; |
||||||
|
/* background: #fff; */ |
||||||
|
padding: 20px; |
||||||
|
border: 1px solid black; |
||||||
|
background-color: rgba(47, 65, 72, 0.23); |
||||||
|
box-shadow: inset -5px -5px rgba(0, 0, 0, 0.5); |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
text-align: center; |
||||||
|
color: #000202; |
||||||
|
} |
||||||
|
.form-group { |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
label { |
||||||
|
display: block; |
||||||
|
margin-bottom: 5px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
input[type="text"], input[type="email"], textarea { |
||||||
|
width: 65%; |
||||||
|
padding: 8px; |
||||||
|
/* margin: 20px ; */ |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
border-radius: 20px; |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
box-shadow: inset -3px -3px rgba(0, 0, 0, 0.5); |
||||||
|
color: white; |
||||||
|
font-size:1rem; |
||||||
|
} |
||||||
|
input[type="radio"] { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
textarea { |
||||||
|
resize: vertical; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
button { |
||||||
|
align-items:center; |
||||||
|
display: block; |
||||||
|
width: 50%; |
||||||
|
padding: 10px 20px; |
||||||
|
margin: 0 auto; |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
box-shadow= inset -3px -3px rgba(0, 0, 0, 0.5); |
||||||
|
color: #fff; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
border-radius: 20px; |
||||||
|
font-size:1rem; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
button:hover { |
||||||
|
background-color: #005bb5; |
||||||
|
} |
||||||
|
#tips { |
||||||
|
margin-top: 20px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #898f90; |
||||||
|
border-left: 4px solid #0066cc; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.top-left-image { |
||||||
|
position: static; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 150px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
Loading…
Reference in new issue