Greed_OlympicSchedule/index.html at master · charles-serafim/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
<!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://olympics.com/en/news/olympic-games-paris-2024-full-schedule-and-day-by-day-competitions">Official Schedule<span class="sr-only">(página atual)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/charles-serafim/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>Paris 2024 Olympic Games</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;">Select sport</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">
                                    Build schedule
                                </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;">Your Schedule</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>