Greed_OlympicSchedule/index.html at master · projeto-de-algoritmos/Greed_OlympicSchedule · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <title> Olympic Schedule </title>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }

        #atracoesContainer {
            display: none;
            /* Ocultar o container por padrão */
        }
    </style>
    <style>
        /* Estilo para remover o marcador de lista antes dos checkboxes */
        ul {
            list-style-type: none;
            min-width: 400px;
        }
    </style>
</head>

<body class="bg-dark">

    <nav class=" navbar navbar-expand-lg navbar navbar-dark bg-dark ">
        <a class=" navbar-brand" href="#">&nbsp; Olympic Schedule</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado"
            aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link"
                        href="https://press.paris2024.org/assets/paris-2024-olympic-sport-events-schedule-1-pdf-3a20-7578a.html?lang=en">Cronograma
                        dos Jogos<span class="sr-only">(página atual)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/projeto-de-algoritmos/Greed_OlympicSchedule">Git Hub</a>
                </li>
        </div>
    </nav>

    <!--Para mudar a imagen altere o nome em style(t.jpg)-->
    <div class="pb-5 mb-1 mx-5 mt-1 rounded shadow" style="background-image: url('t.jpg');">

        <div class="myLoc pb-5 mb-5 mx-5">
            <div class="row">
                <div class="text-center">
                    <!-- <h1 style="color: rgb(0, 0, 0);"">Amazon Boat Tour</h1> -->
                </div>
                <!-- <div class=" col-sm">
                        <h2 style="color: rgb(0, 0, 0)" ;></h2>
                </div> -->
            </div>
        </div>


        <div class="container rounded bg-light shadow p-4">

            </br>
            <div class="col text-center">
                <img class="pb-3" src="logo.png" alt="Minha Figura" width="200px" height="230px">
                <h2>Jogos Olímpicos de 2024 </h2>
            </div>
            <div class="row">
                <div class="col-md-6 -md-2 mt-3">
                    <div>
                        <div class="box mt-0 d-flex justify-content-center align-items-center">
                            <div id="categoryListDiv">
                                <h1 style="font-size: 24px; text-align: center;">Selecione as Modalidades</h1>
                                <ul id="categoryList" class="list-group" style="overflow: auto; max-height: 350px;">
                                    <!-- Aqui a lista será renderizada -->
                                </ul>
                            </div>
                        </div>
                        <div class="box mb-0 mt-4 d-flex justify-content-center align-items-center">

                            <!-- Button trigger modal -->
                            <div>
                                <button id="showSelectedButton" type="button" class="btn btn-dark ml-3">
                                    Montar roteiro
                                </button>

                            </div>


                        </div>
                    </div>
                </div>
                <div class="col-md-6 mt-3   order-md-1 ">
                    <div class="box mt-0 d-flex justify-content-center align-items-center">
                        <div id="minhaDiv" class="minimizada rounded ">
                            <div id="selectedCategoriesDiv">
                                <h1 style="font-size: 24px; text-align: center;">Seu roteiro</h1>
                                <ul id="selectedCategories" style="overflow: auto; max-height: 350px; background-color: white;">
                                    <!-- Aqui a lista será renderizada -->
                                </ul>
                            </div>

                            <script src="script.js"></script>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <iframe src="https://giphy.com/embed/xd9gIexjZKYpyZFv1A" width="100" height="100" frameBorder="0"
                class="giphy-embed" allowFullScreen></iframe>
            <p><a href="https://giphy.com/gifs/olympics-mascot-paris-2024-olympic-xd9gIexjZKYpyZFv1A"></a></p>
        </div>
    </div>

    <footer class="text-center mt-3 mb-3 text-light">
        <p>&copy <a href="https://github.com/charles-serafim">Charles Serafim</a> && <a
                href="https://github.com/thiago-Cerq">Thiago Cerqueira</a></p>
    </footer>
</body>

</html>