<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Default page settings -->
    <title>GameJam</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="Images/UFO.png" />
    <!-- Default page settings end -->
    <!-- CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="Styles/Index.css" />
    <link rel="stylesheet" href="Styles/SpinningWheel.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/css/OverlayScrollbars.css"
    />
    <!-- CSS end -->
    <!-- Header scripts -->
    <script
      src="https://kit.fontawesome.com/57b6c8b971.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
      integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
      integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/js/jquery.overlayScrollbars.js"></script>
    <!-- Header scripts end -->
  </head>

  <body>
      <!-- Navbar -->
      <nav id="header"
           class="navbar navbar-dark navbar-expand-lg navbar-light  smart-scroll" style="background-color: #59142D;
        color: #F2E6D8;">
          <div class="container-fluid">
              <a class="navbar-brand NavLink" onclick="GoToTop()">
                  <img src="Images/UFO.png"
                       alt="Snow"
                       style="width: 32px; height: 32px" />
              </a>
              <button class="navbar-toggler"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#navbarSupportedContent"
                      aria-controls="navbarSupportedContent"
                      aria-expanded="false"
                      aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item">
                          <a class="nav-link NavLink"
                             aria-current="page"
                             data-bs-toggle="collapse"
                             data-bs-target="#navbarSupportedContent"
                             href="#hjem">
                              Hjem
                          </a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link NavLink"
                             data-bs-toggle="collapse"
                             data-bs-target="#navbarSupportedContent"
                             href="#info">
                              Information
                          </a>
                      </li>
                      <li class="nav-item dropdown">
                          <div class="btn-group">       
                              <a 
                                 type="button"
                                 class="nav-link dropdown-toggle dropdown-toggle-split"
                                 id="navbarDropdown"
                                 data-bs-toggle="dropdown"
                                 aria-expanded="false">
                                 Event
                              </a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                  <li>
                                      <a class="dropdown-item NavLink"
                                         data-bs-toggle="collapse"
                                         data-bs-target="#navbarSupportedContent"
                                         href="#spil">Spil</a>
                                  </li>
                                  <li>
                                      <a class="dropdown-item NavLink"
                                         data-bs-toggle="collapse"
                                         data-bs-target="#navbarSupportedContent"
                                         href="#upload">Upload fil</a>
                                  </li>
                                  <li>
                                      <a class="dropdown-item NavLink"
                                         data-bs-toggle="collapse"
                                         data-bs-target="#navbarSupportedContent"
                                         href="#stem">Stem</a>
                                  </li>
                                  <li>
                                      <a class="dropdown-item NavLink"
                                         data-bs-toggle="collapse"
                                         data-bs-target="#navbarSupportedContent"
                                         href="#lod">Lodtrækning</a>
                                  </li>
                              </ul>
                          </div>
                      </li>
                      <li class="nav-item">
                          <a type="button"
                             class="nav-link NavLink"
                             data-bs-toggle="modal"
                             data-bs-target="#RulesModal">
                              Regler
                          </a>
                      </li>
                  </ul>

                  <a id="NavUser"
                     type="button"
                     class="nav-link"
                     style="
              display: none;
              cursor: default;
              color: rgba(255, 255, 255, 0.55);
            ">
                  </a>

                  <a id="AdminPanel"
                     type="button"
                     class="nav-link LoginButton"
                     href="../Frontend/Html/AdminPage.html"
                     style="display: none">
                      Admin Panel
                  </a>

                  <a id="NavLogout"
                     type="button"
                     class="nav-link LoginButton"
                     style="display: none">
                      Logout
                  </a>
                  <a id="NavLogin"
                     type="button"
                     class="nav-link LoginButton"
                     data-bs-toggle="modal"
                     data-bs-target="#LoginModal"
                     style="display: block">
                      Login
                  </a>
              </div>
          </div>
      </nav>
      <!-- Navbar end -->
      <!-- Login modal -->
      <div class="LoginModal">
          <div class="modal fade"
               id="LoginModal"
               tabindex="-1"
               aria-labelledby="LoginModalLabel"
               aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                      <div class="modal-header FullWidthModalTabs">
                          <ul class="nav nav-tabs" id="ModalLoginTab" role="tablist">
                              <li class="nav-item" role="presentation">
                                  <button class="nav-link active"
                                          id="LoginTab"
                                          data-bs-toggle="tab"
                                          data-bs-target="#Login"
                                          type="button"
                                          role="tab"
                                          aria-controls="Login"
                                          aria-selected="true">
                                      <i class="fas fa-sign-in-alt"></i> Login
                                  </button>
                              </li>
                              <li class="nav-item" role="presentation">
                                  <button class="nav-link"
                                          id="RegistrerTab"
                                          data-bs-toggle="tab"
                                          data-bs-target="#Registrer"
                                          type="button"
                                          role="tab"
                                          aria-controls="Registrer"
                                          aria-selected="false">
                                      <i class="fas fa-user-plus"></i> Registrer
                                  </button>
                              </li>
                              <li class="nav-item" role="presentation">
                                  <button class="nav-link"
                                          id="AdminLoginTab"
                                          data-bs-toggle="tab"
                                          data-bs-target="#AdminLogin"
                                          type="button"
                                          role="tab"
                                          aria-controls="AdminLogin"
                                          aria-selected="false">
                                      <i class="fas fa-user-secret"></i> Admin Login
                                  </button>
                              </li>
                              <li style="
                    width: 32px;
                    height: 42px;
                    right: 0;
                    position: absolute;
                  ">
                                  <button style="
                      padding: 25% !important;
                      border: none;
                      background-color: transparent;
                    "
                                          type="button"
                                          data-bs-dismiss="modal"
                                          aria-label="Close">
                                      <i class="fas fa-times CloseIcon"></i>
                                  </button>
                              </li>
                          </ul>
                      </div>
                      <div class="modal-body">
                          <div class="tab-content" id="ModalLoginTabContent">
                              <div class="tab-pane fade show active"
                                   id="Login"
                                   role="tabpanel"
                                   aria-labelledby="LoginTab">
                                  <form id="LoginForm" class="box">
                                      <h1 class="text-muted">Team Login</h1>

                                      <input id="loginUsername"
                                             type="text"
                                             name="groupName"
                                             placeholder="Gruppe navn" />
                                      <input id="loginPassword"
                                             type="password"
                                             name="password"
                                             placeholder="Password" />

                                      <p id="ErrorText"
                                         style="text-align: center; color: red; display: none">
                                          Wrong Username Or Password!
                                      </p>

                                      <input id="LoginBtn"
                                             type="submit"
                                             name="login"
                                             value="Login" />
                                  </form>
                              </div>
                              <div class="tab-pane fade"
                                   id="Registrer"
                                   role="tabpanel"
                                   aria-labelledby="RegistrerTab">
                                  <form id="RegisterForm" method="POST" class="box">
                                      <h1 class="text-muted">Team Registrering</h1>
                                      <input id="username"
                                             type="text"
                                             name="groupName"
                                             placeholder="Unikt gruppe navn" />
                                      <input id="pass1"
                                             type="password"
                                             class=""
                                             placeholder="Password" />
                                      <input id="pass2"
                                             type="password"
                                             class=""
                                             name="password"
                                             placeholder="Gentag Password" />
                                      <!-- <select id="GameJamSelect"
                                                                class="form-select"
                                                                aria-label="Default select example"></select>

                                                        <input type="hidden" name="groupAmount" id="groupAmount" />
                                                        <input type="hidden" name="gameJamId" id="gameJamId" />
                                                        <div
                                      id="NUD"
                                      class="btn-group"
                                      role="group"
                                      aria-label="Basic example"
                                    >
                                      <button
                                        id="NUDMinus"
                                        type="button"
                                        class="btn btn-primary"
                                      >
                                        <i class="fas fa-minus"></i>
                                      </button>
                                      <button
                                        disabled
                                        id="NUDDisplay"
                                        type="button"
                                        class="btn btn-primary"
                                      >
                                        Antal medlemmer
                                      </button>
                                      <button
                                        id="NUDPlus"
                                        type="button"
                                        class="btn btn-primary"
                                      >
                                        <i class="fas fa-plus"></i>
                                      </button>
                                    </div> -->

                                      <div id="pass_info">
                                          <h5>Passsword skal opfylde følgende krav :</h5>
                                          <ul>
                                              <li id="letter" class="invalid">
                                                  Mindst 1 <strong>lille bogstave</strong>
                                              </li>
                                              <li id="capital" class="invalid">
                                                  Mindst 1 <strong>stort bogstave</strong>
                                              </li>
                                              <li id="number" class="invalid">
                                                  Mindst 1 <strong>tal</strong>
                                              </li>
                                              <li id="special" class="invalid">
                                                  Mindst 1 <strong>special tegn</strong>
                                              </li>
                                              <li id="min-length" class="invalid">
                                                  Mindst <strong>8 tegn langt</strong>
                                              </li>
                                              <li id="max-length" class="invalid">
                                                  Maksimalt <strong>255 tegn langt</strong>
                                              </li>
                                          </ul>
                                      </div>

                                      <input id="RegisterBtn"
                                             type="submit"
                                             name="regGroup"
                                             value="Registrer" />
                                  </form>
                              </div>
                              <div class="tab-pane fade"
                                   id="AdminLogin"
                                   role="tabpanel"
                                   aria-labelledby="AdminLoginTab">
                                  <form id="AdminLoginForm" method="POST" class="box">
                                      <h1 class="text-muted">Admin Login</h1>

                                      <input id="adminUsername"
                                             type="text"
                                             name="userName"
                                             placeholder="Brugernavn" />
                                      <input id="adminPassword"
                                             type="password"
                                             name="password"
                                             placeholder="Password" />

                                      <p id="AdminErrorText"
                                         style="text-align: center; color: red; display: none">
                                          Wrong Username Or Password!
                                      </p>

                                      <input id="AdminLoginBtn"
                                             type="submit"
                                             name="aLogin"
                                             value="Login" />
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- Login modal end -->
      <!-- Rules Modal -->
      <div class="modal fade"
           id="RulesModal"
           tabindex="-1"
           aria-labelledby="RulesModalLabel"
           aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
              <div class="modal-content">
                  <div class="modal-header">
                      <h1>Regler</h1>
                  </div>
                  <div class="modal-body">
                      <div class="tab-content" id="ModalRulesTabContent">
                          <ul>
                              <li>
                                  <span>1.</span>
                                  <p>
                                      <strong>Hold det professionelt</strong>. Racisme, sexisme,
                                      politiske temaer osv. Vil naturligvis være uhørt, bevare en
                                      positiv stemning, brug sund fornuft og gør brug af helt
                                      almindelige manerer.
                                  </p>
                              </li>
                              <li>
                                  <span>2.</span>
                                  <p>
                                      <strong>Upload dit spil</strong>. Alle hold forventes at
                                      uploade en spilbar version af deres spil, der gør det muligt
                                      for besøgende på siden at prøve deres spil. Upload skal
                                      begynde senest kl. 12
                                      <a href="https://www.timeanddate.com/time/zones/cet">CET</a>
                                      den pågældende dato, derefter er det ikke muligt at uploade
                                      flere.
                                  </p>
                              </li>
                              <li>
                                  <span>3.</span>
                                  <p>
                                      <strong>Del dit arbejde</strong>. Et af målene er at hjælpe
                                      andre med at lære af dit arbejde, hjælp med dette ved at
                                      give folk mulighed for at rode med resultaterne af dit
                                      produkt. Du skal dele enhver kode og aktiver du bruger til
                                      at lave spillet med (så længe du lovligt kan dele dem uden
                                      at bryde andre juridiske aftaler). Del ikke kode der
                                      tilhører din arbejdsgiver eller andre end dig selv, og
                                      upload noget der er under
                                      <a href="https://www.amino.dk/ordbog/hvad-er-en-nda.aspx">NDA</a>, eller andre juridiske begrænsninger.
                                  </p>
                              </li>
                              <li>
                                  <span>4.</span>
                                  <p>
                                      <strong> Husk licensen. </strong> Alle uploads (kode,
                                      aktiver, eksekverbare filer osv.) deles og licenseres under
                                      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">
                                          Attribution-NonCommercial-ShareAlike 4.0 International
                                          Creative Commons License
                                      </a>
                                  </p>
                              </li>
                              <li>
                                  <span>5.</span>
                                  <p>
                                      <strong>Respekter jammens idealer</strong>. Uanset hvilke
                                      kreative beslutninger du tager når du laver dit spil, skal
                                      du huske det fælles mål om at samarbejde, lære og dele
                                      blandt spiludviklingssamfundet. Brug værktøjer og aktiver,
                                      der gør det muligt at licensere dit spil under
                                      <a href="https://creativecommons.org/licenses/">creative commons</a>. Upload så vidt som muligt et komplet og spilbart spil, og
                                      inkluder enhver kildekode og aktiver til uddannelsesmæssige
                                      formål. Alt hvad du opretter forbliver din ejendom inden for
                                      licensaftalen.
                                  </p>
                              </li>
                              <li>
                                  <span>6.</span>
                                  <p>
                                      <strong>Pas på dig selv</strong>. Her handler det om at
                                      skabe positive oplevelser og minder. Det handler ikke om
                                      knas og konkurrence. Husk at være hydreret, spise mad,
                                      bevæge dig rundt, tage hvilepauser og give dig selv nok tid
                                      til at få masser af søvn hver nat.
                                  </p>
                              </li>
                              <li>
                                  <span>7.</span>
                                  <p>
                                      <strong>Hav det sjovt!</strong> Pas på hinanden, lær og skab
                                      nye muligheder sammen. Det handler ikke kun om at lave spil,
                                      det er også til for at få nye venskaber, forbindelser,
                                      oplevelser og minder.
                                  </p>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button"
                              class="btn btn-danger"
                              data-bs-dismiss="modal">
                          Close
                      </button>
                  </div>
              </div>
          </div>
      </div>
      <!-- Rules modal end -->
      <!-- Page content -->
      <div id="content" class="container-fluid text-center">
          <div class="text-left CenterDiv">
              <!-- Velkomstside -->
              <section id="hjem">
                  <h1>Velkommen til Game Jam!</h1>
                  <p>
                      Denne hjemmeside er lavet til alle som elsker at udvikle spil og
                      konkurerre.
                  </p>
                  <p>
                      Game jam handler om at udvikle et spil i grupper på begrænset tid.
                      Denne tidsbegrænsning er beregnet til at simulere presset fra en
                      deadline og til at fremme kreativitet blandt ideer produceret af
                      Game Jam teams. Selve Game Jammet handler om at udfodre sig selv og
                      andre. Det giver god øvelse i forhold til sine egne evner indenfor
                      programmering og design. Det viser selvfølelig også hvor godt man
                      arbejder i grupper og hvor meget man kan nå på den tid man har fået
                      til at lave sit spil i. Vi elsker at se hvordan de forskellige
                      udviklere vælger sin fremgangs måde, og hvad som er vigtigst for de
                      forskellige grupper at få med. Dette giver både nye ideer til alle
                      samt en anden måde at tænke på. Vi ved jo alle sammen godt, at ingen
                      tænker på den samme måde, og det er også det som er spændene. Man
                      ved aldrig hvad temaet er inden man går i gang. Man kan have en ide
                      om hvad for et spil man vil lave, men når man får temaet afvide, kan
                      det være at man får en ny synsvinkel på hvordan man vil løse
                      opgaven. læs mere under
                      <a href=""
                         data-bs-toggle="modal"
                         data-bs-target="#RulesModal">Regler</a>.
                  </p>
                  <h5>Hvad er Game jam?</h5>
                  <p>
                      Game Jam er et sted hvor du og dine venner kan samles og konkurrer
                      om at lave det bedste spil på begrænset tid. Her har i chancen for
                      at gøre hvad i er bedst til, nemlig at udvikle jeres eget spil.Det
                      er spændende, hyggeligt og selvfølelig rigtigt sjovt. Under
                      <a href="#lod">Lodtrækning</a>
                      bliver der trækket lod om et tema spillet skal handle om.
                  </p>

                  <h5>Hvorfor skal du deltage?</h5>

                  <div class="col-sm">
                      <button type="button" class="Collapsible Collapse-Button">
                          Her er 7 grunde
                      </button>
                      <div class="CollapsibleContent">
                          <p style="font-weight: bold">1. Tids planlægning</p>
                          <p>
                              Når du deltager i flere af Game Jams forbedrer du din evne til
                              tidsplanlægning. Du begynder bedre at estimere den tid, det vil
                              tage for en bestemt opgave. Denne færdighed er også meget
                              vigtigt at forstå, om visse funktioner er det værd, og hvis du
                              endda skal implementere dem eller ej.
                          </p>
                          <p style="font-weight: bold">2. Hastighed</p>
                          <p>
                              Deltagelse i Game Jammet vil forbedre din hastighed. For
                              eksempel, som programmør, vil du se nogle genvej til at gøre det
                              mindre smukt i koden, men funktionelt det samme, som er vigtigt
                              for et Game jam. Som et hold vil du lære at beslutte, hvilken
                              mulighed du skal vælge, hvilket spil du skal gøre meget
                              hurtigere. Når du laver prototyper, vil du også støde på en
                              masse værktøjer og tricks, som du kan bruge på senere prototyper
                              eller spil, fordi du allerede prøvet dem og nu ved, hvad de er
                              bedst egnet til.
                          </p>

                          <p style="font-weight: bold">3. Forbedre prototypeevner</p>
                          <p>
                              Game Jams omfavner virkelig tanken om, at du skal gøre spillet
                              spilbart først. Uden kunst, lyde osv. I mange tilfælde efter
                              dette får du ideen, hvis mekanikerne giver mening, eller hvis
                              det har potentiale. Du vil bemærke nogle ting, som du ikke
                              tænkte så meget på, men som er meget vigtige for at få spillet
                              spilbart, som du vil blive nødt til at løse som det næste. Når
                              spillet er spilbart, vil du fortsætte med at arbejde med ting,
                              som du ikke ville udgive dit spil uden.
                          </p>
                          <p style="font-weight: bold">4. Eksperimenter som du lyster</p>
                          <p>
                              Du kommer automatisk til at være mere villig til at prøve
                              tingene ud og se, om de vil fungere eller ej. Men det afhænger
                              naturligvis af, hvor lang tid det kommer til at tage at
                              implementere visse funktioner og prøve dem af. Så en god
                              tidsplans vil helt sikkert hjælpe. Du ved aldrig om en af de
                              funktioner vil redde projektet og sikre dig førstepladsen.
                          </p>
                          <p style="font-weight: bold">
                              5. Forbedre dine overordnede spiludviklingsevner
                          </p>
                          <p>
                              Jo flere game jams du deltager i, jo flere ting til du opdage.
                              Du lærer hvad som gør et spil bedre og hvilke funktioner som kan
                              redde dig i sidste ende. Du kan prøve en masse forskellige
                              genre, som du måske ikke ville have overvejet at prøve af før.
                              Det vil også vise dig, hvilke genre som er lettere eller sværere
                              at udvikle.
                          </p>
                          <p style="font-weight: bold">
                              6. Mød nye mennesker og skab et netværk
                          </p>
                          <p>
                              Game jams er fantastisk til at møde nye mennesker som du deler
                              interesse med, samt styrke dine nuværende relationer hvis du
                              deltager i et game jam med dem som et team. Når du skaber nye
                              relationer der deler den samme interesse som dig, er det nemt at
                              få inputs fra hinanden. Det kan muligvis være at du havde et
                              problem som du aldrig helt fandt ud af, hvor din nye relation
                              kan forklare hvordan han/hun ville have gjort, eller omvendt.
                          </p>
                          <p style="font-weight: bold">7. Hav det sjovt!</p>
                          <p>
                              Game Jams er super sjovt! Man udfordre sig selv, får nye ideer
                              og man får lov til at se hvordan andre tænker ved at løse den
                              samme opgave. Er du et konkurrance menneske gør det kun det hele
                              meget bedre. En undersøgelse af
                              <a href="http://ludumdare.com/compo/2011/12/28/infographic-survey-results/">McFunkyPants</a>
                              viser at over 95% af deltagere har haft det sjovt under
                              deltagelse og vil gerne deltage i endnu en.
                          </p>
                      </div>
                  </div>
              </section>
              <!-- Velkomstside slut -->

              <hr class="GradientDivider" />

              <!-- Information -->
              <section id="info">
                  <h3>Information</h3>
                  <p>
                      Game Jam er en konkurrence, hvor deltagerne skal lave et videospil
                      fra bunden på bestemt tid. Konkurrencens varighed varierer efter
                      hvad der er efterspørsel om og hvilket tema spillet skal handle om.
                      Nogle Game Jams kan tage 4 timer, hvor andre kan tage 1 uge.
                  </p>
                  <p>
                      Deltagerne er generelt programmører, spildesignere, kunstnere,
                      forfattere og andre inden for spiludviklingsrelaterede områder, dog
                      er alle er velkommende til at deltage.
                  </p>
                  <h5>Game Jammet kommer til at foregå sådan:</h5>
                  <p>
                      Inden konkurrancen begynder, finder man ud af hvor mange grupper som
                      skal være med til det bestemte Game Jam. Derefter bliver der trukket
                      lod om tema i <a href="#lod">lodtrækningen.</a> Når der er blevet
                      trukket et tema som spillende skal handle om, kommer der en bestemt
                      tidsperiode som man skal arbejde med spillet i. Når tiden er gået,
                      bliver hver gruppes spil <a href="#upload">uploadet</a> så det kan
                      afprøves af tilskuere og de andre grupper. Derefter stemmer man som
                      gruppe på det spil man synes bedst om, og man synes har fortjent at
                      vinde.
                  </p>

                  <h5>Hvad bliver der lagt vægt på når man finder vinderen?</h5>
                  <p>
                      Når alle deltagerne har udviklet på livet løs, og tiden er løbet ud,
                      bliver alle spillende uploadet og afprøvet af andre deltagere samt
                      tilskuere. Når man skal finde en vinder, skal man kigge på
                      forskellige ting som:
                  </p>
                  <ul class="Circle-list">
                      <li>Udnyttelse af tiden</li>
                      <li>Hvor godt virker spillet?</li>
                      <li>Hvor godt er designet?</li>
                      <li>Hvordan passer spillet til temaet?</li>
                      <li>Animationer</li>
                  </ul>
              </section>
              <!-- Information slut -->

              <hr class="GradientDivider" />

              <!--Kalender-->
              <section id="events">
                  <h3>Events</h3>
                  <p></p>
                  <div class="container">
                      <div class="calendar">
                          <div class="month">
                              <i class="fas fa-angle-left prev"></i>
                              <div class="date">
                                  <h1></h1>
                                  <p></p>
                              </div>
                              <i class="fas fa-angle-right next"></i>
                          </div>
                          <div class="weekdays">
                              <div>Man</div>
                              <div>Tir</div>
                              <div>Ons</div>
                              <div>Tor</div>
                              <div>Fre</div>
                              <div>Lør</div>
                              <div>Søn</div>
                          </div>
                          <div id="days" class="days"></div>
                      </div>
                  </div>
                  <!--Pop up-->
                  <div class="modal" tabindex="-1" id="popup">
                      <div class="modal-dialog modal-dialog-centered">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5 class="modal-title" id="popupDate">Modal title</h5>
                                  <button type="button"
                                          class="btn-close"
                                          data-bs-dismiss="modal"
                                          aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                  <p>Modal body text goes here.</p>
                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-primary">knap</button>
                                  <button type="button"
                                          class="btn btn-secondary"
                                          data-bs-dismiss="modal">
                                      Close
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!--pop up slut-->
              </section>
              <!--Kalender slut-->

              <hr class="GradientDivider" />

              <!-- Spil -->
              <section id="spil">
                  <h3>Spil</h3>
                  <p>Se de nyesste spil</p>
                  <!-- Slideshow start -->
                  <div id="carouselExampleCaptions"
                       class="carousel slide"
                       data-bs-ride="carousel"
                       data-bs-interval="false">
                      <div class="carousel-indicators">
                          <button type="button"
                                  data-bs-target="#carouselExampleCaptions"
                                  data-bs-slide-to="0"
                                  class="active"
                                  aria-current="true"
                                  aria-label="Slide 1"></button>
                          <button type="button"
                                  data-bs-target="#carouselExampleCaptions"
                                  data-bs-slide-to="1"
                                  aria-label="Slide 2"></button>
                          <button type="button"
                                  data-bs-target="#carouselExampleCaptions"
                                  data-bs-slide-to="2"
                                  aria-label="Slide 3"></button>
                      </div>
                      <div class="carousel-inner">
                          <div class="carousel-item active">
                              <img class="image_img"
                                   src="Images/spil.jpg"
                                   class="d-block w-100"
                                   alt="..." />
                              <div class="image_overlay">
                                  <div class="image_title">
                                      <a href="#" style="color: white">Navn på spil</a>
                                  </div>
                                  <p class="image_gruppenavn">Gruppenavn</p>
                              </div>
                          </div>
                          <div class="carousel-item">
                              <img class="image_img"
                                   src="Images/spil.jpg"
                                   class="d-block w-100"
                                   alt="..." />
                              <div class="image_overlay">
                                  <div class="image_title">
                                      <a href="#" style="color: white">Navn på spil</a>
                                  </div>
                                  <p class="image_gruppenavn">Gruppenavn</p>
                              </div>
                          </div>
                          <div class="carousel-item">
                              <img class="image_img"
                                   src="Images/spil.jpg"
                                   class="d-block w-100"
                                   alt="..." />
                              <div class="image_overlay">
                                  <div class="image_title">
                                      <a href="#" style="color: white">Navn på spil</a>
                                  </div>
                                  <p class="image_gruppenavn">Gruppenavn</p>
                              </div>
                          </div>
                      </div>
                      <button class="carousel-control-prev"
                              type="button"
                              data-bs-target="#carouselExampleCaptions"
                              data-bs-slide="prev">
                          <span class="carousel-control-prev-icon"
                                aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                      </button>
                      <button class="carousel-control-next"
                              type="button"
                              data-bs-target="#carouselExampleCaptions"
                              data-bs-slide="next">
                          <span class="carousel-control-next-icon"
                                aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                      </button>
                  </div>

                  <!-- Kategorier -->
                  <p>Kategorier af spil</p>
                  <div id="oldGameJam">

                  </div>
                  <!-- Kategorier slut -->
              </section>
              <!-- Spil slut -->

              <hr class="GradientDivider" />

        <!-- Upload filer -->
        <section id="upload">
          <h3>Upload filer</h3>
          <p>
            Her kan du og din gruppe uploade jeres spil. Skriv gerne en lille
            kommentar omkring hvad spillet handler om, for at give spilleren den
            bedste oplevelse.
          </p>
          <section class="text-start">
            <form id="uploadFile" method="POST">
              <div class="row">
                <div class="col">
                  <div class="mb-3">
                    <label for="List1" class="form-label">GameJam</label>
                    <input
                      class="form-control"
                      list="datalistOptions"
                      id="List1"
                      placeholder="Type to search..."
                    />
                    <datalist id="datalistOptions">
                      <option value="text"></option>
                    </datalist>
                  </div>
                </div>
                <div class="col">
                  <div class="mb-3">
                    <label for="Text1" class="form-label">Title</label>
                    <input
                      type="text"
                      class="form-control"
                      id="Text1"
                      required
                    />
                  </div>
                </div>
              </div>

              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="Switch1" />
                <label class="form-check-label" for="Switch1"
                  >Er det et web spille?</label
                >
              </div>
              <div class="row">
                <div class="col">
                  <div class="mb-3">
                    <div>
                      <label for="formFile1" class="form-label"
                        >Game file</label
                      >
                      <input
                        class="form-control form-control-sm"
                        type="file"
                        id="formFile1"
                        accept=".zip"
                        required
                      />
                    </div>
                    <div class="mb-3 pt-2">
                      <label for="formFile2" class="form-label"
                        >Thumbnail file</label
                      >
                      <input
                        class="form-control form-control-sm"
                        type="file"
                        id="formFile2"
                        aria-describedby="fileHelp"
                        accept="image/*"
                      />
                      <div id="fileHelp" class="form-text">
                        Thumbnail is optional.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="mb-3">
                    <label for="Text2" class="form-label">Description</label>
                    <textarea
                      class="form-control"
                      id="Text2"
                      rows="3"
                      required
                    ></textarea>
                  </div>
                </div>
              </div>
              <div class="col-12 d-flex justify-content-end">
                <button
                  type="submit"
                  class="btn btn-primary btn-lg"
                  id="indsend1"
                  value="Indsend"
                >
                  Submit
                </button>
              </div>
            </form>
          </section>
        </section>
        <!-- Upload filer slut -->

              <hr class="GradientDivider" />

              <!-- Stem -->
              <section id="gameJamVote">
                  <h3>Stem</h3>

                  <div class="modal" tabindex="-1" id="voteAndComment">
                      <div class="modal-dialog modal-dialog-centered">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5 class="modal-title" id="GameJameName">Modal title</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                  <p>Modal body text goes here.</p>

                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-primary">knap</button>
                                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                              </div>
                          </div>
                      </div>
                  </div>

              </section>
              <!-- Stem slut -->

              <hr class="GradientDivider" />

              <!-- Lodtrækning -->
              <section id="lod">
                  <h3>Lodtrækning</h3>

                  <div id="wrapper">
                      <div id="wheel">
                          <div id="inner-wheel">
                              <div class="sec"><span class="fa">1</span></div>
                              <div class="sec"><span class="fa">2</span></div>
                              <div class="sec"><span class="fa">3</span></div>
                              <div class="sec"><span class="fa">4</span></div>
                              <div class="sec"><span class="fa">5</span></div>
                              <div class="sec"><span class="fa">6</span></div>
                          </div>

                          <div id="spin">
                              <div id="inner-spin"></div>
                          </div>

                          <div id="shine"></div>
                      </div>
                  </div>

                  <ol class="Subject-list" type="1">
                      <li>Subject name</li>
                      <li>Subject name</li>
                      <li>Subject name</li>
                      <li>Subject name</li>
                      <li>Subject name</li>
                      <li>Subject name</li>
                  </ol>
              </section>
              <!-- Lodtrækning slut -->

              <hr class="GradientDivider" />

              <a href="javascript:" id="return-to-top">
                  <i class="fas fa-chevron-up"></i>
              </a>
          </div>
      </div>
      <!-- Page content end -->
      <!-- Footer -->
      <footer id="footer" class="text-center">
          <p>Footer Text</p>
      </footer>
      <!-- Footer end -->
      <!-- Body scripts -->
      <script src="Javascript/OverlayScrollbar.js"></script>
      <script src="Javascript/Collapsible.js"></script>
      <script src="Javascript/PasswordValidation.js"></script>
      <script src="Javascript/Kalender.js"></script>
      <script src="Javascript/SpinningWheel.js"></script>
      <script src="Javascript/LoginFunctionality.js"></script>
      <script src="Javascript/Stem.js"></script>
      <script src="Javascript/Games.js"></script>
      <script src="Javascript/UploadFiles.js"></script>

      <!-- Body scripts end -->
  </body>
</html>