MasterDots/index.html at main · sermare18/MasterDots · 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>Masterdots game</title>
    <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=Poppins:wght@100;200;300;400;500&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/estilos.css">
</head>

<body>
    <!-- CABECERA -->
    <header>
        <img src="./img/logo.png" alt="Logo MasterDots">
    </header>
    <!-- FORMULARIO USUARIO -->
    <main>
        <div>
            <p id="error"></p>
        </div>
        <form id="formEntrada" action="juego.html">
            <div class="itemform">
                <label for="nick">introduce tu nick*</label>
                <input type="text" name="nicka" value="@" id="nicka" readonly>
                <!-- Validación de formulario a nivel de HTML (Nivel de seguridad 1 de 3) -->
                <input type="text" name="nick" id="nick" required minlength="2">
            </div>
            <div class="itemform">
                <label for="email">correo electrónico</label>
                <input type="email" name="email" id="email" value="yo@iam.es">
            </div>
            <div class="itemform">
                <label for="tamano">tamaño del juego*</label>
                <select name="tamano" id="tamano">
                    <option value="0">--Por favor elige un tamaño--</option>
                    <option value="4">4x4</option>
                    <option value="5">5x5</option>
                    <option value="6">6x6</option>
                </select>
            </div>
            <div id="avatarform" class="itemform">
                <div id="avatar">
                    <label for="avatar">avatar</label>
                    <div id="avatarContainer">
                        <img src="./img/avatar1.png" alt="" id="avatarImg">
                    </div>
                </div>
                <div id="avatargrid">
                    <div class="avatarItem">
                        <img src="./img/avatar1.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                    <div class="avatarItem">
                        <img src="./img/avatar2.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                    <div class="avatarItem">
                        <img src="./img/avatar3.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                    <div class="avatarItem">
                        <img src="./img/avatar4.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                    <div class="avatarItem">
                        <img src="./img/avatar5.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                    <div class="avatarItem">
                        <img src="./img/avatar6.png" class="avatarImgItem" alt="" width="35" draggable="true">
                    </div>
                </div>
            </div>
            <div class="itemform">
                <p>* Obligatorio</p>
            </div>
            <div class="itemform">
                <!-- HTML inline event handler -->
                <input id="jugar" type="submit" value="JUGAR">
            </div>
        </form>
    </main>
    <!-- PIE DE PÁGINA -->
    <footer>
        <p>Curso Frontend HTML, CSS y JS</p>
    </footer>
    <!-- EL CODIGO JS -->
    <script src="./js/datosUsuarios.js"></script>
    <script src="./js/app.js"></script>
</body>

</html>