Jak stworzyć prostą stronę z hasłem

Hej! Jeśli kiedykolwiek zastanawiałeś się, jak zrobić prostą stronę internetową, która wymaga hasła, to dobrze trafiłeś. Nie musisz być mistrzem kodowania ani mieć zaawansowanego zaplecza technicznego. Wystarczy odrobina cierpliwości, podstawowa znajomość HTML i CSS oraz odrobina magii w postaci JavaScript. Gotowy? Zaczynamy!

Dlaczego warto stworzyć stronę z hasłem?

Możesz się zastanawiać, po co w ogóle robić stronę z hasłem. Oto kilka przykładów:

Prywatne projekty: Masz portfolio, które chcesz pokazać tylko wybranym osobom.
Ekskluzywna zawartość: Chcesz udostępniać materiały tylko dla znajomych lub klientów.
Testy i prototypy: Chcesz przetestować coś, zanim pokażesz to światu.

Niezależnie od powodu, strona z hasłem to świetny sposób na ograniczenie dostępu. Teraz pokażę Ci, jak to zrobić!

Co będziemy potrzebować?

Edytor kodu (np. Visual Studio Code, Notepad++ czy nawet zwykły Notatnik).
Przeglądarka internetowa do podglądu wyników.
Trochę chęci do eksperymentowania – serio, to nie jest trudne.

Jak zrobić stronę z hasłem?

Poniżej znajdziesz prosty kod HTML z dodatkiem JavaScript, który umożliwi stworzenie strony wymagającej wpisania hasła. Gotowy? No to jazda!

1. Stwórz podstawową strukturę HTML

Najpierw musimy stworzyć podstawowy szkielet strony. W pliku HTML wklej poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z hasłem</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        input[type="password"] {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Wprowadź hasło</h1>
        <input type="password" id="password" placeholder="Wpisz hasło">
        <button onclick="checkPassword()">Zaloguj</button>
        <p class="error" id="error"></p>
    </div>
    <script>
        function checkPassword() {
            const password = document.getElementById('password').value;
            const error = document.getElementById('error');

            // Ustaw swoje hasło poniżej
            const correctPassword = "tajnehaslo";

            if (password === correctPassword) {
                window.location.href = "tajna-strona.html"; // Przekierowanie na ukrytą stronę
            } else {
                error.textContent = "Niepoprawne hasło. Spróbuj ponownie!";
            }
        }
    </script>
</body>
</html>

2. Jak działa ten kod?

HTML: Tworzy podstawowy układ strony, w tym pole do wpisania hasła i przycisk.
CSS: Dodaje stylizację, dzięki której strona wygląda schludnie i estetycznie.
JavaScript: Sprawdza, czy wpisane hasło jest poprawne. Jeśli tak – przekierowuje użytkownika na inną stronę (np. tajna-strona.html).

3. Stwórz ukrytą stronę

Teraz potrzebujemy drugiego pliku, który będzie wyświetlany po wpisaniu poprawnego hasła. Nazwijmy go tajna-strona.html. Oto przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tajna Strona</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #222;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        h1 {
            font-size: 3em;
        }
    </style>
</head>
<body>
    <h1>Witaj na tajnej stronie!</h1>
</body>
</html>

To jest strona, do której użytkownik dostanie dostęp tylko wtedy, gdy wpisze poprawne hasło.

Czy to bezpieczne?

No cóż, trzeba być szczerym – takie rozwiązanie jest raczej proste i nie zapewnia pełnej ochrony. Jeśli ktoś zna podstawy HTML, może podejrzeć kod i znaleźć hasło. To jest świetne na potrzeby edukacyjne lub do ochrony mniej istotnych treści.

Jeśli chcesz stworzyć naprawdę bezpieczną stronę, warto użyć technologii serwerowych, takich jak PHP czy Python, oraz baz danych.

Jak to wygląda w praktyce?

Otwórz swój edytor kodu i wklej powyższy kod do dwóch plików: index.html i tajna-strona.html.
Zapisz pliki i uruchom je w przeglądarce.
Spróbuj wpisać hasło, które ustawiłeś w kodzie (w naszym przykładzie to „tajnehaslo”).
Jeśli hasło jest poprawne, zostaniesz przekierowany na ukrytą stronę. Jeśli nie – zobaczysz komunikat o błędzie.

Co możesz ulepszyć?

Zaszyfruj hasło: Użyj algorytmów hashujących, takich jak SHA256, aby zabezpieczyć hasło (choć wymaga to dodatkowego backendu).
Dodaj więcej funkcji: Możesz dodać możliwość zmiany hasła lub wyświetlanie podpowiedzi.
Zastosuj sesje: Jeśli użytkownik raz wpisał poprawne hasło, możesz zapamiętać go na dłużej, np. za pomocą plików cookie.

Stworzenie prostej strony z hasłem to fajny projekt, który uczy podstaw kodowania. Oczywiście, rozwiązanie jest dalekie od ideału, ale daje Ci dobry start w świat tworzenia dynamicznych stron internetowych. Teraz pora na Ciebie – weź ten kod, baw się nim, modyfikuj i ucz się!