Pokazywanie hasła

pytanie zadane 27 stycznia 2022 w HTML i CSS przez nojszewski Początkujący (290 p.)

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;
}

1 odpowiedź

odpowiedź 27 stycznia 2022 przez VBService Ekspert (253,280 p.)
wybrane 27 stycznia 2022 przez ScriptyChris

Najlepsza

Generalnie to się sprowadza do podmiany atrybutu type elementu input z "password" na "text" np.:

P.S.1. Dodałbym jeszcze do input-ów atrybut required.

P.S.2. Może to Ciebie zaciekawi.

input::placeholder {
  padding-left: 0.25em;
  font: 400 0.95em/1 monospace;
  color: rgba(76, 98, 111, 0.9);
  letter-spacing: 0;
  opacity: 1;
  transition: all 800ms ease-out;
}
input:focus::placeholder {
  letter-spacing: 1em;
  opacity: 0;
  padding-left: 1em;
  -webkit-filter: blur(4px);
}

spróbuj też dodać (użyć) border-radius

komentarz 27 stycznia 2022 przez nojszewski Początkujący (290 p.)

Dzięki wielkie, wszystko działa, efekt placeholdera super! Wrzucam poniżej modyfikacje:

<!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="preconnect" href="https://cdn.smartmath.pl">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap">
        <link rel="stylesheet" href="loginpage/login.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.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" autocomplete="on">
                    <input type="email" name="email" placeholder="Adres e-mail" autocomplete="email" required="required">
                    <input type="password" name="password" placeholder="Hasło" autocomplete="current-password" required="required" id="id_password">
                    <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
                    <input type="submit" value="Zaloguj się">
                </form>
                <div class="reset_pass"><br>
                    <a href="https://dziennik.smartmath.pl/TUDACZMIENNAZPHP/reset-password/">Nie pamiętasz hasła?</a>
                </div>
            </div>
            <script src="loginpage/login.js"></script>
        </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);
}

#id_password{
    margin-top: 20px;
    margin-right: 7px;
    width: 350px;
    height: 25px;
    border: 2px solid #292929;
    border-radius: 1px;
}

#id_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;
    cursor: pointer;
}

a{
    color: rgb(28, 148, 223);
}

a:focus, a:hover{
    color: #292929;
    text-decoration: none;
}

input::placeholder {
    padding-left: 0.25em;
    font: 400 0.95em/1 monospace;
    color: rgba(76, 98, 111, 0.9);
    letter-spacing: 0;
    opacity: 1;
    transition: all 800ms ease-out;
    font-family: 'Oxygen', sans-serif;
  }
  input:focus::placeholder {
    letter-spacing: 1em;
    opacity: 0;
    padding-left: 1em;
    -webkit-filter: blur(4px);
    font-family: 'Oxygen', sans-serif;
  }

komentarz 27 stycznia 2022 przez VBService Ekspert (253,280 p.)

Taka luźna zajawka

body {
  font-family: 'Oxygen', sans-serif;
  font-size: 17px;
  background-color: rgb(28, 148, 223);
  color: #292929;
  overflow: hidden;
}

.login_form {
  position: relative;
  margin: 6em auto 0 auto;
  height: 350px;
  width: 550px;
  text-align: center;
  background-color: rgba(254, 254, 254, 0.7);
  border-radius: 1em;  
}

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;  
  transition: background-color 0.5s;
}

input[type=submit]:focus,
input[type=submit]:hover {
  background-color: #292929;
  outline: none;
}

input::placeholder {
  padding-left: 0.25em;
  font: 0.95em/1em 'Oxygen', sans-serif;
  color: rgba(76, 98, 111, 0.9);
  letter-spacing: 0;
  opacity: 1;
  transition: all 800ms ease-out;
}
input:focus::placeholder {
  letter-spacing: 1em;
  opacity: 0;
  padding-left: 1em;
  -webkit-filter: blur(4px);
}

.login_form::before, 
.login_form::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 800px;
  border-top-left-radius: 40%;
  border-top-right-radius: 45%;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 40%;
  z-index: -1;
}
.login_form::before {
  left: 60%;
  bottom: -130%;
  background-color: rgba(69, 105, 144, 0.15);
  animation: wawes 6s infinite linear;
}
.login_form::after {
  left: 35%;
  bottom: -125%;
  background-color: rgba(2, 128, 144, 0.2);
  animation: wawes 7s infinite;
}
@keyframes wawes {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

i np.: 33 Examples of Login Form Designs for your Inspiration

1	komentarz 27 stycznia 2022 przez nojszewski Początkujący (290 p.) O! Teraz to wygląda o niebo lepiej! Pozwoliłem sobie tylko usunąć ten lewitujący element w tle i dodać styl dla linka. Potem ciąg dalszy moich zmagań, pewnie z PHP i mysqelem

1	komentarz 27 stycznia 2022 przez nojszewski Początkujący (290 p.) Tak wogóle, jeśli ktoś chcaiłby się przyłączyć do tworzenia tego projektu (charytatywnie, nie płacę ;-)) to zapraszam do kontaktu mailowego: contact@nojszewski.net

komentarz 27 stycznia 2022 przez VBService Ekspert (253,280 p.)

Tak wogóle, jeśli ktoś chcaiłby się przyłączyć do tworzenia tego projektu (charytatywnie, nie płacę ;-))

ale zawsze to jest jakiś praktyczny projekt, wspólne zdobywanie doświadczenia - bezcenne.

1	komentarz 27 stycznia 2022 przez nojszewski Początkujący (290 p.) Zaszło trochę zmian, w kolejnym poście napiszę co dokładnie: Jeśli ktoś jest zainteresowany to zapraszam do sprawdzenia nowych postów na moim profilu.