RamdonPasswords/index.html at master · robertfrontend/RamdonPasswords · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="title">Random Passwords | Premium Generator</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./Sass/style.css">
</head>
<body>
    <!-- Background Elements for Glassmorphism -->
    <div class="bg-shape shape-1"></div>
    <div class="bg-shape shape-2"></div>
    <div class="bg-shape shape-3"></div>

    <button id="langToggle" class="lang-toggle" aria-label="Cambiar idioma">EN</button>

    <main class="container">
        <div class="glass-panel app">
            <header>
                <h1 data-i18n="header_title">Generador de<br/><span class="text-gradient">Contraseñas</span></h1>
                <p class="subtitle" data-i18n="header_subtitle">Asegura tu mundo digital.</p>
            </header>

            <section class="generator-section">
                <div class="result-container" id="copyBtn" title="Haz clic para copiar" data-i18n-title="copy_tooltip">
                    <p id="resultado" data-i18n="initial_password">Aquí va tu nueva contraseña</p>
                    <button class="icon-btn copy-icon" aria-label="Copiar contraseña" data-i18n-aria="copy_aria">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                    </button>
                </div>

                <div class="controls-container">
                    <label for="cantidad" class="control-label">
                        <span data-i18n="length_label">Longitud:</span> <span id="lengthDisplay" class="value-display">16</span>
                    </label>
                    <input type="range" class="range-slider" id="cantidad" min="8" max="50" value="16">
                </div>

                <div class="action-container">
                    <button class="primary-btn" id="botonGeneral">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v6h6"/></svg>
                        <span data-i18n="generate_btn">Generar Contraseña</span>
                    </button>
                </div>
            </section>
        </div>

        <div class="toast-container" id="toastContainer">
            <!-- Toast messages will be injected here -->
        </div>
    </main>

    <footer>
        <p>
            <span data-i18n="footer_created">Creado por</span> <a href="https://github.com/robertfrontend" target="_blank" class="footer-link">robertfrontend</a> <span class="heart">❤</span> <span data-i18n="footer_code">Código:</span> <a target="_blank" href="https://github.com/robertfrontend/RamdonPasswords" class="footer-link">Github</a>, <span data-i18n="footer_star">espero tu</span> <span class="star">⭐</span>
        </p>
    </footer>

    <script src="./Js/App.js"></script>
</body>
</html>