fall25_gachamon/index.html at main · CodeWorks-FullStack/fall25_gachamon · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="./assets/img/logo.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="assets/style/main.css">
  <link rel="stylesheet" href="assets/style/style.css">
  <title>gachamon</title>
</head>

<body data-bs-theme="light" class="bg-indigo">
  <header class="mb-2">
    <nav class="navbar bg-pink d-flex justify-content-between text-light gap-2 px-2">
      <b class="fs-4">Gachamon 💽</b>

      <button onclick="app.gachamonController.getRandomGachamon()" class="btn btn-light fw-bold text-pink btn-lg">Get A
        Gacha!!</button>
    </nav>
  </header>

  <main class="container-fluid">
    <!-- SECTION gachamon cards go here -->
    <section id="gachamon-cards" class="row g-2 justify-content-center">

    </section>

    <!-- SECTION after selected, the active one draws here -->
    <section id="active-gachamon" class="row justify-content-center">
      <!--  -->
      <!-- <div class="col-8 text-center">
        <div class="active-card my-2 p-3 slasher">
          <div class="card-body">
            <img class="" src="https://em-content.zobj.net/source/microsoft-teams/400/penguin_1f427.png" alt="">
            <h3 class="fw-bold my-2">Club</h3>
            <div class="d-flex justify-content-between">
              <span class="fw-bold slasher-tag">Slasher</span>
              <span>⭐⭐</span>
            </div>
          </div>
        </div>
      </div> -->
      <!--  -->
    </section>

    <!-- SECTION my collections of gachamon -->
    <section class="text-white fs-1">My Collection</section>
    <section id="my-gachamon" class="row g-2">

    </section>
  </main>

  <footer class="text-bg-dark">
    <div class="text-center">
      <p class="mb-0"><small>Made with <i class="mdi mdi-heart text-pink"></i> by CodeWorks</small></p>
    </div>
  </footer>

  <!-- SECTION links for bootstrap, axios, and auth -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.auth0.com/js/auth0-spa-js/1.22/auth0-spa-js.production.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jakeoverall/auth0provider-client/browser/Auth0Provider.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <!-- !SECTION -->
  <!-- The start of our javascript -->
  <script src="app/App.js" type="module"></script>

</body>

</html>