Skip to content

Commit

Permalink
Create sservice.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stalin-143
Stalin-143 authored Jan 31, 2025
1 parent 2d02ebf commit 7a3465f
Showing 1 changed file with 239 additions and 0 deletions.
239 changes: 239 additions & 0 deletions sservice.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Submission Form - Nexulean</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.form-container {
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
}

h2 {
color: #333;
text-align: center;
margin-bottom: 20px;
}

/* Form Styling */
.form-group {
margin-bottom: 20px;
}

.form-control {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 5px;
transition: border-color 0.3s ease;
}

.form-control:focus {
border-color: #4CAF50;
outline: none;
}

/* Button Styling */
.submit-btn {
width: 100%;
padding: 14px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.submit-btn:hover {
background-color: #45a049;
}

/* Responsive Styling */
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
}

/* Label and Field Grouping */
label {
font-size: 14px;
font-weight: bold;
color: #333;
}

/* Error Message Styling */
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Project Submission Form</h2>
<form action="https://api.web3forms.com/submit" method="POST" id="contactForm" data-aos="fade-up" data-aos-delay="500">
<input type="hidden" name="access_key" value="e63367f9-8001-46ea-8ef3-688c17cabbaf">

<!-- Name -->
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter your name" required>
<div class="error" id="nameError"></div>
</div>

<!-- Email -->
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter your email" required>
<div class="error" id="emailError"></div>
</div>

<!-- Phone Number -->
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter your phone number" required pattern="\d{10}">
<div class="error" id="phoneError"></div>
</div>

<!-- Project Title -->
<div class="form-group">
<label for="project_title">Project Title</label>
<input type="text" id="project_title" name="project_title" class="form-control" placeholder="Enter the project title" required>
<div class="error" id="projectTitleError"></div>
</div>

<!-- Subject -->
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="form-control" placeholder="Enter the subject" required>
<div class="error" id="subjectError"></div>
</div>

<!-- Description -->
<div class="form-group">
<label for="description">Project Description</label>
<textarea id="description" name="description" class="form-control" rows="6" placeholder="Provide a description of your project" required></textarea>
<div class="error" id="descriptionError"></div>
</div>

<!-- Requirements -->
<div class="form-group">
<label for="requirements">Project Requirements</label>
<textarea id="requirements" name="requirements" class="form-control" rows="4" placeholder="List the project requirements" required></textarea>
<div class="error" id="requirementsError"></div>
</div>

<!-- CAPTCHA -->
<div class="form-group">
<label for="captcha">Please enter the CAPTCHA code below:</label>
<div id="captchaContainer">
<input type="text" id="captcha" name="captcha" class="form-control" required>
<span id="captchaText"></span>
</div>
<div class="error" id="captchaError"></div>
</div>

<!-- Submit Button -->
<div class="form-group">
<button type="submit" class="submit-btn">Submit Project</button>
</div>
</form>
</div>

<script>
// Generate random CAPTCHA code
function generateCaptcha() {
const captcha = Math.floor(Math.random() * 90000) + 10000; // Random 5-digit number
document.getElementById('captchaText').textContent = captcha;
return captcha;
}

let captchaValue = generateCaptcha();

// Refresh CAPTCHA every 30 seconds
setInterval(function() {
captchaValue = generateCaptcha();
}, 30000); // Refresh every 30 seconds

// Form validation script
document.getElementById("contactForm").addEventListener("submit", function(event) {
let valid = true;

// Clear all error messages
document.querySelectorAll(".error").forEach(error => error.textContent = "");

// Check for required fields
const name = document.getElementById("name").value;
if (!name) {
document.getElementById("nameError").textContent = "Name is required.";
valid = false;
}

const email = document.getElementById("email").value;
if (!email) {
document.getElementById("emailError").textContent = "Email is required.";
valid = false;
}

const phone = document.getElementById("phone").value;
if (!phone.match(/\d{10}/)) {
document.getElementById("phoneError").textContent = "Please enter a valid phone number (10 digits).";
valid = false;
}

const projectTitle = document.getElementById("project_title").value;
if (!projectTitle) {
document.getElementById("projectTitleError").textContent = "Project Title is required.";
valid = false;
}

const description = document.getElementById("description").value;
if (!description) {
document.getElementById("descriptionError").textContent = "Project Description is required.";
valid = false;
}

const requirements = document.getElementById("requirements").value;
if (!requirements) {
document.getElementById("requirementsError").textContent = "Project Requirements are required.";
valid = false;
}

const captcha = document.getElementById("captcha").value;
if (captcha !== captchaValue.toString()) {
document.getElementById("captchaError").textContent = "Incorrect CAPTCHA.";
valid = false;
}

if (!valid) {
event.preventDefault();
}
});
</script>

</body>
</html>

0 comments on commit 7a3465f

Please sign in to comment.