Sidequest/index.html at master · CLICGameStar/Sidequest · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="./assets/img/favicons/favicon.ico">

  <title>Sidequest</title>

  <!-- Bootstrap core CSS -->
  <link href="./assets/css/bootstrap.min.css" rel="stylesheet">

  <!-- FontAwesome CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
    integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
    crossorigin="anonymous" />

  <!-- Custom styles for this template -->
  <link href="./assets/css/sticky-footer.css" rel="stylesheet">
</head>

<body>

  <!-- Begin page content -->
  <main role="main" class="container">
    <h1 class="mt-5">Sidequest</h1>
    <p class="lead">Participe aux qualifications en ligne, viens disputer la finale IRL !</p>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        Menu
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav w-100 justify-content-around">
          <li class="nav-item">
            <a class="nav-link" href="#">Informations générales</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#regles">Règles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#faq">Foire Aux Questions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="old">Anciennes éditions</a>
          </li>
        </ul>
      </div>
    </nav>

    <hr />

    <!-- Informations générales -->
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-12 text-center">
        <h2>Tournoi: Teamfight Tactics</h2>
        <img class="mw-100" src="./assets/img/tft.png" width="400" />
        <div id="timer"></div> <!-- Modifier tout en bas pour changer le timer ! -->
        <p>Qualifications en ligne : <br /><strong>Du 13 mars jusqu'au 23 mars à 11h59</strong></p>
        <p>Finale en présentiel :<br /><strong>Jeudi 26 mars. Horaire: 18h30.</strong></p>
      </div>
    </div>

    <hr />

    <!-- Règles -->
    <div class="row justify-content-center">

      <div class="col-12">
        <h2>Inscription</h2>
        <ul>
        <il>Pour s'inscrire il suffit de remplir ce <a href="https://docs.google.com/forms/d/e/1FAIpQLSeDNvVItgadAW32JKS1YzjNCEbdZVPi4TqXyf_uAtRuMX_Zvg/viewform?usp=dialog">form</a>, et vous recevrez un mail de confirmation avant le début des qualifications.</il>
        </ul>
      </div>

      <a id="regles"></a>
      <div class="col-12">
        <h2>Règles générales</h2>
        <ul>
          <li> Les rencontres sont gérées par les joueur·euse·s. Si ce n'est pas déjà fait, rejoindre le discord de Game*. Il sera utilisé par les participant·e·s pour l'organisation des rencontres ainsi que par Game* pour la modération du tournoi. <b> Si jamais vous n'avez pas rejoint le discord avant la fin des inscriptions, nous considérerons que vous ne participez pas au tournoi et annulerons votre participation </b>. </li>
          <li>À la fin de chaque rencontre, veuillez reporter l'issue de la partie sur le formulaire ci-dessous. </li>
          <li> En cas de litige, si aucune preuve n'est apportée (e.g., une capture d'écran), les deux participant·e·s seront marqué·e·s comme perdant·e·s </li>
          <li> Le tournoi se déroule en deux phases : Une phase de qualifications, puis une finale pour les 8 joueur·euse·s qualifié·e·s. </li>
        </ul>

        <h2>Règles spécifiques au jeu</h2>
        <ul>
          <li> Les joueur·euse·s seront divisés dans des lobbys de 8 personnes pour les qualifications, en fonction de leur disponibilité. Chaque participant·e jouera le même nombre de match. </li>
<li> Les points seront attribués en fonction du placement de chaque game, allant de 1 point pour un top 8 à 8 points pour un top 1. </li>
<li> En cas d'égalités entre plusieurs joueur·euse·s, le départage sera basé sur le nombre de top 1 réalisés, puis de top 2 en cas de nouvelle égalité et ainsi de suite. </li>
<li> Si le processus écrit ci-dessus découle sur une nouvelle égalité, le placement de la derniére partie sera utilisé pour décider quel joueur·euse·s est qualifié·e pour la finale.</li>
        </ul>
      </div>
    </div>

    <!-- Arbre de participation -->
  <div class="row">
    <div class="col-12">
      <a id="brackets"></a>
      <h2>Arbre de participation</h2>
      <!-- <iframe class="w-100 border-0"
	    src="https://challonge.com/j5b1vzpi/module" width="100%" height="500" frameborder="0" scrolling="auto" allowtransparency="true"></iframe> -->
      <p> L'arbre s'affichera une fois les inscriptions finies! </p>
    </div>
  </div>

  <hr/>

  <!-- Autodéclaration -->
  <div class="row">
    <div class="col-12">
      <a id="reporting"></a>
      <h2>Autodéclaration</h2>
      <iframe class="w-100 m-0 border-0"
        src="https://docs.google.com/forms/d/e/1FAIpQLScGvwllL7WaV-tBZWzifRn9bAtgURXUKX2wxIDRWo0fHoazGg/viewform?usp=header"
        height="1070px" marginheight="0" marginwidth="0">Chargement...
      </iframe>
    </div>
  </div>
  <hr/>
    <!-- Foire Aux Questions -->
    <div class="row">
      <div class="col-12">
        <a id="faq"></a>
        <h2>Foire Aux Questions</h2>

        <h3>Générales</h3>
        <dl class="row">

          <dt class="col-sm-3">Puis-je obtenir une extension de délai pour les qualifications ?</dt>
          <dd class="col-sm-9">
            <p>
              Étant donné que la finale est prévue le lendemain de la fin qualifications, il n'est pas possible d'obtenir une extension de délai.
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </main>


  <footer>
    <section class="my-3 mw-100 d-flex flex-row justify-content-center align-items-center flex-wrap">
      <a class="text-dark" href="http://sibyll.in/clicgamestar" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fas fa-link fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://discord.gg/8tVCZJG" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-discord fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://t.me/clicgamestar" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-telegram-plane fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://twitter.com/clicgamestar" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-twitter fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://instagram.com/clicgamestar" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-instagram fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://twitch.tv/clicgamestar" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-twitch fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="http://youtube.com/channel/UCXFwVqbBNf4wO3d5CmW3uBg" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fab fa-youtube fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
      <a class="text-dark" href="mailto:gamestar.clic@epfl.ch" target="_blank">
        <span class="fa-stack">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fas fa-envelope fa-stack-1x fa-inverse fa-fw"></i>
        </span>
      </a>
    </section>
  </footer>


  <script src="./assets/js/jquery-1.12.4.min.js"></script>
  <script src="./assets/js/bootstrap.min.js"></script>

  <script>
    <!-- Information du tour en cours -->
    var endDateBase = new Date("2026-03-26 18:30:00");
    var endQualifs = new Date("2026-03-23 12:00:00");
    var endInscriptions = new Date("2026-03-11 23:59:59");

    var endInscr = endInscriptions.getTime();
    var endDate = endDateBase.getTime();
    var end = endQualifs.getTime();

    var ends = [endInscr, end, endDate];

    var reasons = [ "pour les inscriptions", "pour les qualifications", "avant la finale"];
    var timer = setInterval(function () {
      let now = new Date().getTime();
       //Find first date in ends that is after now var
        i = 0; while (i < 3 && ends[i] < now) { i++; } let t = ends[i] - now;
        if (t >= 0) {

          let days = Math.floor(t / (1000 * 60 * 60 * 24));
          let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
          let secs = Math.floor((t % (1000 * 60)) / 1000);

          let jours = days > 1 ? "<span class='label'> jours </span>" : "<span class='label'> jour </span>";

          document.getElementById("timer").innerHTML = "<h3>Temps restant "
             + reasons[i] + "&nbsp: <br> "
            + days + jours
            + ("0" + hours).slice(-2) + "<span class='label'>h </span>"
            + ("0" + mins).slice(-2) + "<span class='label'>min </span>"
            + ("0" + secs).slice(-2) + "<span class='label'>sec</span>"
            + "</h3>";

        } else {
          document.getElementById("timer").innerHTML = "Le tournoi est terminé !";

        }


    }, 1000);


    //Add function to parse a date into a string
    function parseDate(date) {
      return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
    }

  </script>

</body>

</html>