fall25_gregslist_monsters/index.html at main · CodeWorks-FullStack/fall25_gregslist_monsters · 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
<!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>gregslist_async</title>
</head>

<body data-bs-theme="light">
  <header>
    <nav class="navbar bg-codeworks text-light gap-2 px-2">
      <img src="./assets/img/logo.png" height="45" alt="" loading="lazy">
      <div><b>gregslist_async</b></div>
      <!-- NOTE do not remove this id if you want users to be able to log in -->
      <div class="ms-auto" id="authstate"></div>
    </nav>
  </header>

  <main>
    <section class="text-center my-3">
      <button onclick="app.carsController.toggleCarsSection()" class="btn btn-primary">
        Cars 🚗
      </button>
      <button onclick="app.monstersController.toggleMonsterSection()" class="btn btn-primary">
        Monsters 👹
      </button>
    </section>

    <!-- TODO houses go here! -->

    <section id="cars-section" class="container-fluid d-none">
      <div class="row my-3">
        <div class="col-md-6">
          <div id="car-form-placeholder">
            Please log in so you can list your car
          </div>
          <form onsubmit="app.carsController.submitCar()" id="car-form" class="sticky-top d-none">
            <div>
              <label for="car-make">Car Make</label>
              <input id="car-make" type="text" maxlength="500" required name="make" class="w-100">
            </div>
            <div>
              <label for="car-model">Car Model</label>
              <input id="car-model" type="text" maxlength="500" required name="model" class="w-100">
            </div>
            <div>
              <label for="car-year">Car Year</label>
              <!-- TODO it would be good to automate setting the max here -->
              <input id="car-year" type="number" min="1886" max="2026" required name="year" class="w-100">
            </div>
            <div>
              <label for="car-price">Car Price (in USD)</label>
              <input id="car-price" type="number" min="0" max="1000000" required name="price" class="w-100">
            </div>
            <div>
              <label for="car-img-url">Car Image URL</label>
              <input id="car-img-url" type="url" maxlength="500" required name="imgUrl" class="w-100">
            </div>
            <div>
              <label for="car-description">Car Description</label>
              <textarea name="description" id="car-description" maxlength="500" class="w-100"></textarea>
            </div>
            <div>
              <label for="car-engine-type">Car Engine Type</label>
              <select name="engineType" id="car-engine-type">
                <option value="unknown" selected>Unknown</option>
                <option value="2 stroke">2 stroke</option>
                <option value="4 cylinder">4 cylinder</option>
                <option value="v6">v6</option>
                <option value="v8">v8</option>
                <option value="v10">v10</option>
                <option value="v12">v12</option>
                <option value="small">small</option>
                <option value="medium">medium</option>
                <option value="large">large</option>
                <option value="chuncko">chuncko</option>
              </select>
            </div>
            <div>
              <label for="car-color">Car Color</label>
              <input id="car-color" type="color" name="color">
            </div>
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
          </form>
        </div>
        <div class="col-6 d-none d-md-block">
          <img
            src="https://images.unsplash.com/photo-1533558701576-23c65e0272fb?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FyJTIwa2V5c3xlbnwwfHwwfHx8MA%3D%3D"
            alt="hand holding car keys" class="img-fluid">
        </div>
      </div>
      <div id="car-listings" class="row">
        <!-- ANCHOR cars -->
      </div>
    </section>

    <section class="container-fluid">
      <div id="monster-list" class="row d-none">
        <!-- ANCHOR monsters -->
      </div>
    </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>