Skip to content

Create terms and conditions .html #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Giftzzz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create terms and conditions .html #402

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 204 additions & 0 deletions terms and conditions .html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form with Terms & Conditions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.feedback-form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
position: relative;
}

.feedback-form h2 {
margin-bottom: 15px;
font-size: 24px;
}

.feedback-form label {
font-size: 16px;
margin-bottom: 5px;
display: block;
}

.feedback-form input,
.feedback-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.feedback-form textarea {
resize: vertical;
}

.feedback-form button {
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.submit-btn {
background-color: #4CAF50;
color: white;
margin-right: 10px;
}

.cancel-btn {
background-color: #f44336;
color: white;
}

.feedback-form button:hover {
opacity: 0.9;
}

.terms-link {
display: block;
margin-top: 15px;
color: #007BFF;
text-decoration: none;
}

.terms-link:hover {
text-decoration: underline;
}

/* Modal Styling */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 600px;
width: 100%;
position: relative;
}

.modal-content h2 {
margin-top: 0;
}

.modal-content p {
line-height: 1.6;
margin-bottom: 10px;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #f44336;
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>

<form class="feedback-form" id="feedback-form">
<h2>Feedback Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name..." required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email..." required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" placeholder="Your message..." required></textarea>

<button type="submit" class="submit-btn">Submit</button>
<button type="button" class="cancel-btn" id="cancel-btn">Cancel</button>

<a href="#" class="terms-link" id="terms-link">Terms & Conditions</a>
</form>

<!-- Modal for Terms and Conditions -->
<div class="modal" id="terms-modal">
<div class="modal-content">
<button class="close-btn" id="close-btn">&times;</button>
<h2>Terms & Conditions</h2>
<p>Welcome to our service. Before proceeding, please take a moment to read our rules and instructions:</p>
<p><strong>Rules:</strong></p>
<ul>
<li>Users must provide accurate and truthful information.</li>
<li>Feedback should not contain any offensive or harmful content.</li>
<li>Users must agree to our privacy policy.</li>
</ul>
<p><strong>Instructions:</strong></p>
<ul>
<li>Complete all required fields before submitting the form.</li>
<li>If you wish to reset the form, use the 'Cancel' button.</li>
<li>Contact support if you have any issues.</li>
</ul>
</div>
</div>

<script>
const cancelButton = document.getElementById('cancel-btn');
const form = document.getElementById('feedback-form');
const termsLink = document.getElementById('terms-link');
const modal = document.getElementById('terms-modal');
const closeModalButton = document.getElementById('close-btn');

// Reset form when Cancel button is clicked
cancelButton.addEventListener('click', () => {
form.reset();
});

// Show modal when Terms & Conditions link is clicked
termsLink.addEventListener('click', (e) => {
e.preventDefault();
modal.style.display = 'flex';
});

// Close modal when 'x' button is clicked
closeModalButton.addEventListener('click', () => {
modal.style.display = 'none';
});

// Close modal when clicking outside modal content
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
</script>

</body>
</html>