Cześć wszystkim,
Zacząłem, narazie dla frajdy a w przyszłości dla zarobku pisać dziennik elektroniczny dla szkół. Sam jestem uczniem jednej z SP w Węgrówie i korzystają oni z dziennika VULCAN UONET+. Nie jest to zbyt innowacyjny system, wyglądem przypomina torchę logowanie do Windowsa XP. Pomyślałem więc, że napiszę swój i być może zastąpi vulcana ale mniejsza. Mam panel logowania. Chcę, aby po kliknięciu w ikonkę oczka pojawiało się hasło wpisane w tym polu. Na wstępie uprzedzam, że średnio z przewagą na prawie wogóle nie umiem JS. Czy mógłby ktoś podpowiedzieć jak takie coś zrobić? Tutaj wrzucam kod HTML i CSS (dzisiaj zacząłem dopiero więc małego tego jest ;-)
<!DOCTYPE html>
<html lang="pl-pl">
<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">
<meta name="description" content="smartmath dzinenik - strona logowania">
<meta name="keywords" content="smartmath, dzinenik, szkoła, school">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap">
<link rel="stylesheet" href="loginpage/login.css">
<title>Logowanie | smartmath</title>
</head>
<body>
<div class="container">
<div class="login_form">
<h2>Zaloguj się do systemu</h2>
<br>
<form action="/" method="post">
<input type="email" name="email" placeholder="Adres e-mail" autocomplete="email">
<input type="password" name="password" placeholder="Hasło">
<input type="submit" value="Zaloguj się">
</form>
</div>
</div>
</body>
</html>
body{
font-family: 'Oxygen', sans-serif;
font-size: 17px;
background-color: rgb(28, 148, 223);
color: #292929;
}
.login_form{
margin-left: auto;
margin-right: auto;
margin-top: 120px;
height: 350px;
width: 550px;
text-align: center;
background-color: #fefefe;
}
input[type=email], input[type=password]{
margin-top: 20px;
width: 350px;
height: 25px;
border: 2px solid #292929;
border-radius: 1px;
}
input[type=email]:focus, input[type=password]:focus{
outline: none;
border: 2px solid rgb(28, 148, 223);
}
input[type=submit]{
margin-top: 50px;
width: 200px;
height: 40px;
background-color: rgb(28, 148, 223);
color: white;
border: none;
}
input[type=submit]:focus, input[type=submit]:hover{
background-color: #292929;
outline: none;
}
