===================================Landing Page.html==========================================
Landing Page
Welcome to TCS Demo Website
==================================== Landing Page.css=================================
body{
/* background-color:rgb(12, 138, 110); */
background: url("images/NEW.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.outer {
width: 500px;
align-self: center;
height: 300px;
margin-left: 33.5%;
margin-top: 11%;
border: 5px solid rgba(234, 240, 240, .2);
border-radius: 5px;
}
h1{
color:#fff;
text-align:center;
margin-top: 8%;
}
.container
{
display: inline-block;
font-family: "arial";
font-size: 24px;
margin-left: 27%;
} .typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 3.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}@keyframes typing {
from { width: 0 }
to { width: 100% }
}
h2{
color:darksalmon ;
text-align:center;
margin-bottom:30px;
margin-top: 15%;
}
.SignIn{
margin-top:4%;
margin-left:28%;
width:45%;
display:flex;
flex-direction:column;
}
.SignIn button{
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 4px;
height: 45px;
background-color: #007c89;
color: white;
padding: 7px 15px;
:hover {
background-color: #772ce8;
}}
.SignIn button a{
color:#fff;
text-decoration:solid;
font-size: 16px;
font-weight:400;
}
.SignUp{
margin-top:2%;
margin-left:28%;
width:45%;
display:flex;
flex-direction:column;
}
.SignUp button{
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 4px;
height: 45px;
background-color: #007c89;
color: white;
padding: 7px 15px;
:hover {
background-color: #772ce8;
}}
.SignUp button a{
color:#fff;
text-decoration:solid;
font-size: 16px;
font-weight:400;
}
========================= Sign Up.html===========================================
Sign Up
TCS Demo Website
Sign Up
Please Fill Your Details
Acknowledgement
User ID:
User Name:
Email:
Registration Successful!
Login
==============================Sign Up.css============================================
body {
font-family: Arial, sans-serif;
background: url("images/SignUPbg.jpg");
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
}
h1{
color: white;
margin-top: 5%;
}
.container
{
display: inline-block;
font-family: "arial";
font-size: 24px;
margin-left: 2%;
} .typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 3.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}@keyframes typing {
from { width: 0 }
to { width: 100% }
}
h2{
color:darksalmon ;
text-align:center;
}
h3{
color: #fff;
text-align:left;
margin-left: 11px;
}
.registration-form {
background-color: rgba(234, 240, 240,.2);
padding: 20px;
border-radius: 10px;
border:2px solid rgba(255,255,255,0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width:30%;
}
.registration-form input {
margin-bottom: 10px;
width: 88%;
padding: 10px;
font-size: 16px;
border: 1px solid lightslategray;
border-radius: 5px;
margin-left:11px;
margin-right:11px;
margin-top:15px;
}
.registration-form button{
display: inline-block;
outline: 0;
margin-left: 29.3%;
margin-bottom: 10px;
width: 40%;
height:40px;
font-size: 16px;
color:#fff;
cursor: pointer;
border: 2px solid rgb(12, 138, 110);;
border-radius: 5px;
margin-top:15px;
background-color: rgb(12, 138, 110);
}
.acknowledgement-screen {
display: none;
margin-top: 20px;
text-align: center;
color:#fff;
}
.acknowledgement-screen p {
margin: 5px 0;
}
.acknowledgement-screen button{
margin-left: 3%;
margin-bottom: 10px;
width: 40%;
height:40px;
font-size: 16px;
color:#fff;
cursor: pointer;
border: 2px solid rgb(12, 138, 110);
border-radius: 5px;
margin-top:15px;
background-color: rgb(12, 138, 110);
}
a{
color: none;
}
.acknowledgement-screen h2 {
color: #4caf50;
}
====================Sign Up.js===========================================================
document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault();
// Generate random User ID (for demonstration purposes)
const userId = Math.floor(Math.random() * 1000000);
const userName = document.querySelector('input[placeholder="Enter your Username"]').value;
const email = document.querySelector('input[placeholder="Enter your Email"]').value;
const password = document.querySelector('input[placeholder="Enter your Password"]').value;
const phone = document.querySelector('input[placeholder="Mobile Number"]').value;
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()-_+=])[A-Za-z\d!@#$%^&*()-_+=]{8,}$/;
const phonePattern = /^(?:\+\d{1,3})?[0-9 -]+$/;
if(passwordPattern.test(password) && phonePattern.test(phone)){
// Display acknowledgment screen
document.getElementById("userId").textContent = userId;
document.getElementById("userName").textContent = userName;
document.getElementById("email").textContent = email;
document.querySelector(".registration-form").style.display = "none";
document.querySelector(".acknowledgement-screen").style.display = "block";
}
else{
alert("Invalid password / phone number");
console.log("gjjkju");
}
});
function myfun()
{
window.location.href="Landing Page.html";
}
====================================Sign In.html=========================================
Sign In
TCS Demo Website
================================ Sign In.css====================================
*{
margin: 0;
padding: 0;
font-family: 'poppins',sans-serif;
background-image: url(images/NEW.jpg);
display: cover;
}
h1{
color: white;
margin-top: 5%;
}
.container
{
display: inline-block;
font-family: "arial";
font-size: 24px;
margin-left: 35%;
} .typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 3.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.form-box{
width: 400px;
height: 450px;
margin-left: 37%;
margin-top: 7%;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 20px;
backdrop-filter: blur(15px);
display:flex;
justify-content: center;
align-items: center;
}
h2{
font-size: 2em;
color: #ffffff;
text-align: center;
}
.inputbox{
position: relative;
margin: 30px 0;
width: 310px;
border-bottom: 2px solid #fff;
}
.inputbox input {
width: 100%;
height: 50px;
/* background: none; */
border: none;
outline: none;
font-size: 1em;
padding:0 35px 0 5px;
color: #fff;
}
button{
width: 100%;
height: 40px;
border-radius: 40px;
background: #fff;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
font-weight: 600;
color: inherit;
text-decoration: black;
}
.register{
font-size: .9em;
color: #fff;
text-align: center;
margin: 25px 0 10px;
}
.register p a{
text-decoration: none;
color: #4c99ff;
font-weight: 600;
}
.register p a:hover{
text-decoration: underline;
}
==================================Sign.in js=========================================
document.getElementById("SignInForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
// Get user input values
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
// Check authentication
if (email === "ankit@xyz.com" && password === "Ankit@1") {
// Authentication successful, redirect to home page
window.location.href = "Stest.html";
} else {
// Authentication failed, show error message (you can customize this part)
alert("Invalid email or password. Please try again.");
}
});
function fun() {
console.log("hello");
window.location.href = "Stest.html";
};
====================================Stest.html========================================
Services Page
TCS Demo Website
Available Services
Homecleaning
IT Services
Vehicle Repair
Electrician
============================stest.css===================================
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
background-image: url(images/NEW.jpg);
background-size: cover;
}
.outer {
background-size: cover;
margin-left: 32% ;
margin-top: 12%;
width: 550px;
height: 350px;
border: 5px solid rgba(234, 240, 240, .2);
border-radius: 5px;
text-align:center;
padding-inline: 20px;
}
.outer button{background-color:mediumseagreen;
color: #fff;
border: none;
padding: 14px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 3px;
margin-right: 20px;
}
h1{
color: white;
margin-top: 10%;
}
.container
{
display: inline-block;
font-family: "arial";
font-size: 24px;
margin-left: 2%;
} .typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 3.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}@keyframes typing {
from { width: 0 }
to { width: 100% }
}
h2{
margin-top: 10%;
color: darksalmon;
}
.services-container {
text-align: center;
margin: 50px;
}
.service {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
.form-container {
display: none;
text-align: center;
margin-left: 35%;
margin-top: 8%;
width: 500px;
}
.form-container h2 {
margin-bottom: 20px;
color: #fff;
}
.form-container label {
color: white;
display: block;
margin: 10px 0;
justify-content: left;
}
.form-container input, .form-container textarea, .form-container select {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 15px;
border-radius: 10px;
}
.form-container button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
===============================stest.js=====================================
function showServiceForm(service) {
// Display service form container
document.getElementById("serviceForm").style.display = "block";
// Hide services container
document.querySelector(".services-container").style.display = "none";
// Dynamically generate service form content based on the selected service
const formContainer = document.getElementById("serviceForm");
let subservicesOptions = "";
switch (service) {
case 'Homecleaning':
subservicesOptions = `
1BHK
2BHK
3BHK
Bathroom Cleaning
`;
break;
case 'IT Services':
subservicesOptions = `
Ram Increase
OS Installation
Disk Management
Formatting
`;
break;
case 'Vehicle Repair':
subservicesOptions = `
Engine Repair
Brake Change
Half Engine Work
Seat Change
`;
break;
case 'Electrician':
subservicesOptions = `
Wiring
MCB
Fuse Change
Others
`;
break;
default:
break;
}
formContainer.innerHTML = `
${service} Service
Date/Slot:
Address:
Subservices:
${subservicesOptions}
Vendor:
TCS
Wipro
Infosys
Amount:
Confirm Booking
`;
}
function confirmBooking() {
const serviceId = generateRandomId();
const vendor = document.getElementById("vendor").value;
const date = document.getElementById("serviceDate").value;
const subservice = document.getElementById("subservices").value;
// Redirect to acknowledgement page with query parameters
window.location.href = `acknowledgement.html?serviceId=${serviceId}&vendor=${vendor}&date=${date}&subservice=${subservice}`;
}
function generateRandomId() {
return Math.random().toString(36).substring(2, 8);
}
==========================ack.html=========================================
Booking Acknowledgement
Book another service
See ALL Booking History
=============================================ack.css===================================
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
background-image: url(images/NEW.jpg);
}
.outer {
background-size: cover;
margin-left: 32% ;
margin-top: 12%;
width: 550px;
height: 350px;
border: 5px solid rgba(234, 240, 240, .2);
border-radius: 5px;
text-align:center;
padding-inline: 20px;
}
.outer button{background-color:mediumseagreen;
color: #fff;
border: none;
padding: 14px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 3px;
margin-right: 20px;
}
.acknowledgement-container {
display: none;
text-align: center;
margin: 50px;
color: #008000; /* Green color for success message */
}
.acknowledgement-container p {
margin: 10px 0;
}
==================================ack.js==========================================
document.addEventListener('DOMContentLoaded', function () {
// Extract query parameters from the URL
const urlParams = new URLSearchParams(window.location.search);
const serviceId = urlParams.get('serviceId');
const vendor = urlParams.get('vendor');
const date = urlParams.get('date');
const subservice = urlParams.get('subservice');
// Display acknowledgment details
const acknowledgementContainer = document.querySelector(".acknowledgement-container");
acknowledgementContainer.style.display = "block";
acknowledgementContainer.innerHTML = `
Service booked successfully!
Service ID: ${serviceId}
Vendor: ${vendor}
Date: ${date}
Subservice: ${subservice}
`;
});
function myfun1()
{
window.location.href ="pagination.html";
};
function myfun()
{
window.location.href ="Stest.html";
};
=========================pagination.html===========================================
Service Booking Home
TCS Demo Website
User/Customer ID
User_Name
Service ID
Date
Slot
Type of Service
Status
==========================pagi.css=============================
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url(images/NEW.jpg);
background-size: cover;
background-blend-mode: luminosity;
}
h1{
color: white;
margin-top: 7%;
margin-left: 110%;
margin-bottom: 5%;
}
.container
{
display: inline-block;
font-family: "arial";
font-size: 24px;
margin-left: 2%;
} .typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 3.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.table-container {
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th{
padding: 12px;
text-align: left;
} td {
padding: 12px;
text-align: left;
color: aqua;
}
th {
background-color: #f2f2f2;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
margin: 0 5px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.pagination button:hover {
background-color:darkgreen;
}
===============================pagi.js=============================
const data = [
["1", "Ankit Tiwari", "101", "2023-05-21", "10:00 AM", "Repair", "Pending"],
["2", "Utkarsh B", "102", "2023-07-01", "02:30 PM", "disk cleanup", "Completed"],
["3", "A malik", "103", "2023-01-15", "02:30 PM", " ram Management", "Completed"],
["4", "A awasthi", "104", "2023-04-12", "02:30 PM", "Installation", "Pending"],
["5", "Akansha v", "105", "2023-01-22", "02:30 PM", "disk cleanup", "Completed"],
["6", "Nandan ", "106", "2023-02-02", "02:30 PM", "ram Management", "Completed"],
["7", "Harsh Sri", "107", "2021-11-02", "02:30 PM", "Installation", "Pending"],
["8", "Amol", "108", "2023-01-12", "02:30 PM", "Installation", "Completed"],
["9", "Jaya Sharma", "109", "2022-01-02", "02:30 PM", "Installation", "Completed"],
["10", "Vishaka", "110", "2023-03-02", "02:30 PM", "ram Management", "Completed"],
["11", "Aman A", "111", "2023-11-09", "02:30 PM", "Installation", "Pending"],
["12", "Ashwin", "112", "2023-01-04", "02:30 PM", "disk cleanup", "Completed"],
["13", "Arihant", "113", "2023-02-02", "02:30 PM", "ram Management", "Pending"],
];
const pageSize = 5;
let currentPage = 1;
function displayData() {
const tableBody = document.getElementById("tableBody");
tableBody.innerHTML = "";
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
for (let i = startIndex; i < endIndex && i < data.length; i++) {
const row = document.createElement("tr");
for (let j = 0; j < data[i].length; j++) {
const cell = document.createElement("td");
cell.textContent = data[i][j];
row.appendChild(cell);
}
tableBody.appendChild(row);
}
}
function nextPage() {
if (currentPage < Math.ceil(data.length / pageSize)) {
currentPage++;
displayData();
}
}
function prevPage() {
if (currentPage > 1) {
currentPage--;
displayData();
}
}
function landingpage()
{
window.location.href="Landing Page.html";
}
// Initial display
displayData();
============================================