<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MailGuard - E-Mail-Leak-Checker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card animate__animated animate__fadeInUp">
            <h1 class="animate__animated animate__bounceIn">MailGuard</h1>
            <p class="animate__animated animate__fadeIn">Prüfe, ob deine E-Mail-Adresse in einem Datenleck aufgetaucht ist.</p>
            <input type="email" id="emailInput" placeholder="Gib deine E-Mail-Adresse ein" class="animate__animated animate__zoomIn">
            <button onclick="checkEmail()" class="animate__animated animate__pulse">Prüfen</button>
            <div id="result" class="animate__animated animate__fadeIn"></div>
        </div>
    </div>

    <footer>
        <p>By <span class="glow">59Official</span></p>
    </footer>


    <div id="feedback-container">
        <button id="feedback-button" class="feedback-button">📝 Feedback</button>
        <div id="feedback-modal" class="feedback-modal">
            <div class="modal-content">
                <h2>Feedback</h2>
                <textarea id="feedback-text" placeholder="FeedBack..."></textarea>
                <button id="submit-feedback" class="submit-feedback">Absenden</button>
                <button id="close-feedback" class="close-feedback">Schließen</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
