Paragraph-Generator/index.html at main · LeoBringasAtLife/Paragraph-Generator · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Párrafos</title>

    <link rel="stylesheet" href="style.css">

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

<body>
    <!-- Contenedor principal -->
    <main class="container">

        <!-- Controles del formulario -->
        <form class="controls" onsubmit="return false;" aria-labelledby="formLabel">

            <!-- Título -->
            <h1 id="formLabel" class="title">
                Generador de párrafos
            </h1>

            <!-- Descripción -->
            <p class="subtitle">
                Genera párrafos de texto de ejemplo en el idioma que elijas.
                Solo indica la <i>cantidad e idioma</i> y apretás <strong>Generar.</strong>
            </p>

            <!-- Input: cantidad de párrafos -->
            <div class="form-group">
                <label for="paragraphs">Párrafos</label>
                <input type="number" id="paragraphs" min="1" placeholder="Ingresa un número"
                    aria-label="Cantidad de párrafos">
            </div>

            <!-- Selector de idioma -->
            <div class="form-group">
                <label for="lang">Idioma</label>
                <select id="lang" aria-label="Idioma">
                    <option value="auto">Seleccionar Idioma</option>
                    <option value="es">Español</option>
                    <option value="en">Inglés</option>
                </select>
            </div>
        </form>

        <!-- Botones de acción -->
        <section class="btn-row" aria-label="Acciones">
            <button id="generateBtn" type="button" aria-label="Generar párrafos">Generar</button>
            <button id="copyBtn" type="button" aria-label="Copiar texto">Copiar</button>
        </section>

        <!-- Sección de salida -->
        <section id="outputSection" role="region" aria-labelledby="outputLabel">
            <div id="outputLabel" class="resultado">Resultado:</div>

            <!-- Contador de caracteres y palabras -->
            <div id="stats">
                Palabras: 0 · Caracteres: 0
            </div>

            <!-- Mensaje generado (salida principal) -->
            <div id="output" aria-live="polite"></div>

            <!-- Mensaje de error -->
            <div id="error" aria-live="polite" style="margin-top: 12px;"></div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <p class="contenido-footer">
            Desarrollado por
            <a href="https://instagram.com/leobringasatlife" class="enlace-persona" target="_blank"
                rel="noopener noreferrer">
                Leonardo Bringas
            </a>
        </p>

        <!-- Enlace a GitHub (pendiente de completar) -->
        <ul>
            <li>
                <a href="http://" target="_blank" rel="noopener noreferrer"></a>
            </li>
        </ul>
    </footer>
</body>

</html>