Sorteios/index.html at main · ingridfreitas/Sorteios · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="imagex/png" href="assets/CenterPsy.ico">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=delete,repeat,swap_vertical_circle,upload" />
    <title>Sorteio</title>
</head>

<body>
    <main class="main-content">
        <header class="header-banner">
            <img src="assets/CenterPsy.png" alt="Logo do CenterPSY" class="logo">
            <h1 class="main-title">Sorteio</h1>
            <h1></h1>
        </header>

        <section class="input-section">
            <h2 class="section-title">Digite o nome dos partipantes</h2>
            <div class="input-wrapper">
                <input type="text" id="nomeAdicionado" class="input-name" placeholder="Digite um nome">
                <button class="button-add" onclick="validarNome()">Adicionar</button>
            </div>

            <div class="input-wrapper">
                <label for="listaNomes" class="load-lista">
                    <span class="lista"> <span class="material-symbols-outlined icon">upload</span>Carregar Lista de
                        Nomes (.txt /.csv)</span>
                    <input type="file" id="listaNomes" accept=".txt, .csv">
                </label>
            </div>

            <h2 class="section-title subtitle">Partipantes:</h2>
            <div class="input-wrapper listaParticipantes">
                <ul id="listaAmigos" class="name-list" aria-labelledby="listaAmigos" role="list">
                    <li id="listaVazia" class="vazio">Nenhum participante adicionado ainda!</li>
                </ul>
            </div>


            <div class="button-container">
                <button class="button-draw" onclick="abrirModal()" aria-label="Sortear amigo secreto">
                    <span class="material-symbols-outlined">
                        swap_vertical_circle
                    </span>
                    Realizar Sorteio
                </button>
                <button class="button-draw" onclick="novoSorteio()" aria-label="Sortear amigo secreto">
                    <span class="material-symbols-outlined">
                        repeat
                    </span>
                    Novo Sorteio
                </button>
            </div>

            <h2 class="section-title subtitle">Patrocinadores:</h2>
            <div class="patrocinadores">
                <ul class="patrocinadores-lista">
                    <li class="patrocinador">
                        <img src="assets/casamoretto.png" alt="Casa Moretto">
                    </li>
                    <li class="patrocinador">
                        <img src="assets/centerpsyclin.png" alt="Clínica CENTERPSY">
                    </li>
                    <li class="patrocinador">
                        <img src="assets/patmos.jpg" alt="Assessoria Patmos">
                    </li>
                    <li class="patrocinador">
                        <img src="assets/paulotransportes.png" alt="Paulo Transportes">
                    </li>
                    <li class="patrocinador">
                        <img src="assets/visiosho.png" alt="Visio DHO">
                    </li>
                    <li class="patrocinador">
                        <img src="assets/zag.jpg" alt="Zag Modas">
                    </li>
                </ul>
            </div>

            <div id="modal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1></h1>
                        <h1></h1>
                        <span class="close">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div id="telaSorteio">
                            <img id="patrocinador" src="" alt="Patrocinador" />

                            <div id="contador"></div>

                            <h1 id="resultado"></h1>
                        </div>
                    </div>
                </div>

            </div>

        </section>
    </main>

    <script src="app.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>
</body>

</html>