Помогите с html кодом авторизации

Question

Помогите с html кодом авторизации

ArtemonCat Ученик (98), открыт 3 часа назад

HTML код."
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gody</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background">
<div class="login-container">
<h2>Login</h2>
<div class="input-group">
<label for="username">Login:</label>
<input type="text" id="username" placeholder="Enter login">
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter password">
</div>
<button class="login-button" onclick="login()">Done!</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
"
script.js
"
import credentials from './data/credentials.js';

function login() {
const usernameInput = document.getElementById('username').value;
const passwordInput = document.getElementById('password').value;

// Декодируем зашифрованные логин и пароль
const correctUsername = atob(credentials.username); // Декодирование из Base64
const correctPassword = atob(credentials.password); // Декодирование из Base64

if (usernameInput === correctUsername && passwordInput === correctPassword) {
// Перенаправление на страницу описания бургера
window.location.href = "burger.html";
} else {
alert("Неверный логин или пароль. Пожалуйста, попробуйте снова.");
}
}
"
credentials.js"
const credentials = {
username: "YXJ0ZW0=",
password: "YXJ0ZW1vbg=="
};

export default credentials;
"
В чём проблема?

Answer 1

Иван Макаров Ученик (6) 2 часа назад

Хзз

Answer 2

Через валидатор html от W3C или через плагин developer проверь

Answer 3

Павел Волгин Просветленный (32763) 2 часа назад

Выложи на сайтах, проверяющих валидность кода.

ArtemonCatУченик (98) 2 часа назад

в коде пути указанны в них ошибку показывает

Павел Волгин Просветленный (32763) ArtemonCat, Правь...

Answer 4

Илья Щур Ученик (195) 1 час назад

Через валидатор html

Answer 5

Надо изменить тег <script> в вашем HTML-файле, добавив атрибут type="module":

 <!DOCTYPE html>  
<html lang="ru">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Gody</title>  
    <link rel="stylesheet" href="style.css">  
</head>  
<body>  
    <div class="background">  
        <div class="login-container">  
            <h2>Login</h2>  
            <div class="input-group">  
                <label for="username">Login:</label>  
                <input type="text" id="username" placeholder="Enter login">  
            </div>  
            <div class="input-group">  
                <label for="password">Password:</label>  
                <input type="password" id="password" placeholder="Enter password">  
            </div>  
            <button class="login-button" onclick="login()">Done!</button>  
        </div>  
    </div>  
    <script src="script.js" type="module"></script>  
</body>  
</html>

Это скажет браузеру, что script.js является модулем, и он сможет импортировать из других модулей.

Answer 6

ДХ Ученик (174) 1 час назад

Я люблю дристать

Answer 7

В вашем script.js файле используется конструкция ES-модулей (import credentials from './data/credentials.js';), которая по умолчанию не поддерживается обычными скриптами без дополнительных настроек. Для того, чтобы браузер понял, что ваш JavaScript-файл является модулем и может использовать import, необходимо в HTML при подключении script.js указать атрибут type="module".

Ваш HTML-код сейчас выглядит примерно так:

 <script src="script.js"></script>

Чтобы импорт работал, нужно изменить это на:

 <script type="module" src="script.js"></script>

После этого импорт из credentials.js будет работать корректно, при условии, что файлы находятся в нужных путях и сервер настроен правильно. Если вы открываете файл просто двойным кликом из файловой системы (без веб-сервера), стоит учесть, что некоторые браузеры блокируют импорт по file:// протоколу. В таком случае нужно запустить локальный сервер (например, через npx http-server или подобный инструмент) или настроить свой сервер.