ADD formularz rejestracji bez API

This commit is contained in:
Lewy 2022-05-30 01:02:38 +02:00
parent 01c2b99232
commit 58d1d03972
4 changed files with 157 additions and 1 deletions

View File

@ -26,7 +26,7 @@
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
<span> Nie masz konta? <a href="#">Zajerestruj się</a></span>
<span> Nie masz konta? <a href="../rejestracja/index.html">Zajerestruj się</a></span>
</div>
</div>

View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padle tournament system</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="form">
<div class="register">
<h2>Rejestracja</h2>
<input placeholder="Imię">
<span class="icon-dice"></span>
<input placeholder="Nazwisko">
<br>
<svg class="svg-icon">
<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
</svg>
<input placeholder="Login">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
</svg>
<input placeholder="Email">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M13.372,1.781H6.628c-0.696,0-1.265,0.569-1.265,1.265v13.91c0,0.695,0.569,1.265,1.265,1.265h6.744c0.695,0,1.265-0.569,1.265-1.265V3.045C14.637,2.35,14.067,1.781,13.372,1.781 M13.794,16.955c0,0.228-0.194,0.421-0.422,0.421H6.628c-0.228,0-0.421-0.193-0.421-0.421v-0.843h7.587V16.955z M13.794,15.269H6.207V4.731h7.587V15.269z M13.794,3.888H6.207V3.045c0-0.228,0.194-0.421,0.421-0.421h6.744c0.228,0,0.422,0.194,0.422,0.421V3.888z"></path>
</svg>
<input placeholder="Telefon">
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878"></path>
</svg>
<input placeholder="Hasło" type="password" id="password" name="password">
<i class="bi bi-eye-slash" id="togglePassword"></i>
<br>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878"></path>
</svg>
<input placeholder="Potwierdź hasło">
<i class="bi bi-eye-slash" id="togglePassword2"></i>
<center>
<form action="#">
<input class="myButton" type="submit" value="Zarejestruj" />
</form>
</center>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
<span> Masz już konto? <a href="../logowanie/index.html">Zaloguj się</a></span>
</div>
</div>
</div>
<script>
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
// prevent form submit
const form = document.querySelector("form");
form.addEventListener('submit', function (e) {
e.preventDefault();
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -0,0 +1,61 @@
html {
background-image: url(mezczyzna_padel.jpg);
background-attachment: fixed;
background-size: cover;
}
.container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.form {
width: 50%;
height: 40%;
background-color: #EBEBEB;
display: flex;
;
justify-content: center;
align-items: center;
}
.myButton {
background-color: #14A6F9;
border-radius: 28px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 5px 15px;
width: 50%;
align-content: center;
}
/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-icon {
width: 1em;
height: 1em;
/*background-color: #EBEBEB;*/
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
form i {
margin-left: -30px;
cursor: pointer;
}