Skip to content

Commit

Permalink
Merge branch 'main' into anuragverma108#1634
Browse files Browse the repository at this point in the history
  • Loading branch information
@Crazyraturi
Crazyraturi authored Oct 30, 2024
2 parents 0eb2911 + 4bbbe33 commit c44d725
Show file tree
Hide file tree
Showing 12 changed files with 438 additions and 358 deletions.
355 changes: 156 additions & 199 deletions Donation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,230 +5,187 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WildGuard Donations</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

::-webkit-scrollbar {
width: 24px; /* Width of the scrollbar */
::-webkit-scrollbar {
width: 1px;
}

::-webkit-scrollbar-track {
background: #6eff92; /* Background of the scrollbar track */
background: #00000000;
}

::-webkit-scrollbar-thumb {
background-color: rgb(0, 113, 19); /* Color of the scrollbar thumb */
border-radius: 10px; /* Rounding edges */
/* Adds padding around the thumb */
background-color: rgb(0, 0, 0);
border-radius: 1px;
}

/* Firefox Scrollbar */
html {
scrollbar-color: rgb(0, 113, 19) #f0f8ff; /* Thumb color | Track color */
scrollbar-width: thin; /* Makes the scrollbar thinner */
}

.backimg {
background-image: url("assets/images/community-hero-bg.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: left;
min-height: 780px;
}

body {
font-family: 'Arial', sans-serif;
background: #f0f8ff;
color:black;
line-height: 1.6;
overflow: hidden;
}

header {
text-align: center;
padding: 10px;
background-color:rgba(255, 253, 253, 0.721);
color: rgb(0, 113, 19);
}

header h1 {
font-size: 3em;
}

header p {
font-size: 1.2em;
}

.donation-form {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
max-width: 400px;
margin: 40px auto;
padding: 40px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
text-align: center;
color: white;
transition: background 0.3s ease;
}


.donation-form h2 {
font-size: 2em;
margin-bottom: 20px;
color: #228B22;
}

.donation-form p {
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
font-weight: bold;
}

input, select {
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
border: 1px solid #ccc;
}

button {
padding: 12px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

button:hover {
background-color: #45a049;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


#thankYouMessage {
text-align: center;
margin-top: 20px;
}

footer {
background-color:rgb(0, 113, 19);
padding: 10px;
text-align: center;
color: white;
position: fixed;
width: 100%;
bottom: 0;
}
scrollbar-width: 1px;
}

</style>
</head>
<body>
<div class="backimg">
<header>
<h1>WildGuard</h1>
<p>Help protect wildlife. Donate today to save the animals!</p>
</header>
.backimg {
background-image: url("assets/images/community-hero-bg.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: left;
min-height: 100vh;
}

<main>
<section class="donation-form">
<h2>Make a Donation</h2>
<p>Your donation will help protect endangered species and wildlife habitats.</p>
body {
font-family: 'Arial', sans-serif;
background: #000000;
color: black;
font-family: Cinzel;
line-height: 1.3;
}

<form id="donationForm">
<label for="donorName">Full Name</label>
<input type="text" id="donorName" placeholder="Your Name" required>
header {
text-align: center;
padding: 4vh 0;
background: linear-gradient( #000,#00000000);
color: rgb(166, 168, 167);
}

<label for="email">Email</label>
<input type="email" id="email" placeholder="Your Email" required>
header h1 {
font-size: 3em;
letter-spacing: 2px;
}

<label for="amount">Donation Amount</label>
<select id="amount" required>
<option value="10">$10</option>
<option value="25">$25</option>
<option value="50">$50</option>
<option value="100">$100</option>
<option value="custom">Custom</option>
</select>
header p {
font-size: 1.5em;
}

<input type="number" id="customAmount" placeholder="Enter custom amount" style="display: none;">
.donation-form {
background: rgba(72, 72, 72, 0.258);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
max-width: 50%;
margin: 1vh auto;
padding: 1vh 10%;
border-radius: 20px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
text-align: center;
color: rgb(0, 0, 0);
}

<button type="submit" onclick="btnAlertBox()">Donate Now</button>
.donation-form h2 {
margin-top: 5%;
font-size: 1.4em;
letter-spacing: 0.5px;
margin-left: -10%;
margin-right: -10%;
margin-bottom: 15px;
color: rgb(16, 16, 16);
}

</form>
form {
display: flex;
flex-direction: column;
height: 35vh;
}

<script>
function btnAlertBox() {
alert("Thank you for your donation!");
}
</script>
.form-row {
display: flex;
justify-content: space-between;
margin-bottom: 0px;
}

<div id="thankYouMessage" style="display:none;">
<h3>Thank you for your generosity!</h3>
<p>Your donation will make a huge difference in protecting animals.</p>
</div>
</section>
</main>
#donorName{
width: 48%;
}

#amount {
width: 50%;
}

#email {
width: 100%;
}

input, select {
padding: 2vh;
margin-bottom: 10px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.499);
border: 1px solid #00000000;
}

input:focus, select:focus {
background: rgba(255, 255, 255, 0.7);
border: 1px solid #cccccc00;
outline: none;
}

button {
margin-top: 20px;
letter-spacing: 1.5px;
font-family: Cinzel;
padding: 2.5vh 0vw;
background: rgba(0, 0, 0, 0.499);
margin-left: 50%;
translate: -50%;
width: 120px;
color: rgb(201, 201, 201);
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
}

button:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #000;
}

#thankYouMessage {
margin-top: 45px;
height: 30vh;
text-align: center;
}

footer {
background-color: rgba(15, 15, 15, 0);
padding: 1vh;
text-align: center;
color: white;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div class="backimg">

<footer>
<p>&copy; 2024 WildGuard Organization. All rights reserved.</p>
</footer>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const donationForm = document.getElementById('donationForm');
const amountSelect = document.getElementById('amount');
const customAmountInput = document.getElementById('customAmount');
const thankYouMessage = document.getElementById('thankYouMessage');

// Show custom amount input if 'Custom' is selected
amountSelect.addEventListener('change', function () {
if (amountSelect.value === 'custom') {
customAmountInput.style.display = 'block';
} else {
customAmountInput.style.display = 'none';
}
});

// Handle form submission
donationForm.addEventListener('submit', function (event) {
event.preventDefault();

const name = document.getElementById('donorName').value;
const email = document.getElementById('email').value;
let amount = amountSelect.value === 'custom' ? customAmountInput.value : amountSelect.value;
// Validating the name field
if(!name.match('^[a-zA-Z\s]+$')){
alert("Invalid Name Format");
return
}
if (amount && name && email) {
// Display thank you message
donationForm.style.display = 'none';
thankYouMessage.style.display = 'block';
}
});
});
const donationForm = document.getElementById('donationForm');
const thankYouMessage = document.getElementById('thankYouMessage');

donationForm.addEventListener('submit', function (event) {
event.preventDefault();

const name = document.getElementById('donorName').value;
const email = document.getElementById('email').value;

if (!name.match('^[a-zA-Z\\s]+$')) {
alert("Invalid Name Format");
return;
}

if (name && email) {
donationForm.style.display = 'none';
thankYouMessage.style.display = 'block';
}
});
});
</script>
</body>
</html>
Loading

0 comments on commit c44d725

Please sign in to comment.