Code
Uploaded by
omarbakri9007Code
Uploaded by
omarbakri9007<!
DOCTYPE html>
<html>
<head>
<title>Welcome to My Website</title>
<style>
/* Add some basic styling to our page */
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #FF8C00; /* Deeper orange background color */
}
.button {
background-color: #FFC107; /* Orange button background color */
color: #000000; /* Black button text color */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #FF9900; /* Darker orange button background color on hover
*/
}
h1 {
color: #000000; /* Black heading color */
}
p {
color: #000000; /* Black paragraph color */
}
/* Add styles for the login form */
.login-form {
display: none; /* Hide the login form by default */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF; /* White background color */
padding: 20px;
border: 1px solid #CCCCCC; /* Light gray border */
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.login-form.show {
display: block; /* Show the login form when the button is clicked */
}
/* Add styles for the signup form */
.signup-form {
display: none; /* Hide the signup form by default */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF; /* White background color */
padding: 20px;
border: 1px solid #CCCCCC; /* Light gray border */
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.signup-form.show {
display: block; /* Show the signup form when the button is clicked */
}
/* Add styles for the top right buttons */
.top-right-buttons {
position: absolute;
top: 20px;
right: 20px;
}
.top-right-buttons button {
margin-left: 10px;
}
/* Add styles for the search bar */
.search-bar {
width: 50%;
margin: 20px auto;
padding: 10px;
border: 1px solid #CCCCCC;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.search-bar input {
width: 80%;
padding: 10px;
border: none;
border-radius: 5px;
}
.search-bar button {
width: 20%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #FFC107;
color: #000000;
cursor: pointer;
}
.search-bar button:hover {
background-color: #FF990
.search-bar button:hover {
background-color: #FF9900;
}
</style>
</head>
<body>
<div class="top-right-buttons">
<button class="button" id="login-button">Log In</button>
<button class="button" id="signup-button">Sign Up</button>
</div>
<h1>Welcome to My Website</h1>
<div class="search-bar">
<input type="text" placeholder="Rechercher...">
<button>Rechercher</button>
</div>
<p>This is a basic welcome page.</p>
<!-- Add the login form -->
<div class="login-form" id="login-form">
<h2>Log In</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Log In">
</form>
</div>
<!-- Add the signup form -->
<div class="signup-form" id="signup-form">
<h2>Sign Up</h2>
<form>
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="prenom">Prénom:</label>
<input type="text" id="prenom" name="prenom"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Sign Up">
</form>
</div>
<script>
// Add an event listener to the login button
document.getElementById("login-button").addEventListener("click", function() {
// Show the login form
document.getElementById("login-form").classList.add("show");
});
// Add an event listener to the signup button
document.getElementById("signup-button").addEventListener("click", function() {
// Show the signup form
document.getElementById("signup-form").classList.add("show");
});
// Add an event listener to the search bar
document.getElementById("search-bar").addEventListener("submit",
function(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get the search query from the input field
var searchQuery = document.getElementById("search-input").value;
// Send the search query to the server
fetch("/search", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ searchQuery: searchQuery })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
</script>
</body>
</html>
