ResoundApp/index.html at main · digitalinteraction/ResoundApp · 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
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width" />
      <meta name="format-detection" content="telephone=no">
      <link rel="manifest" href="app.webmanifest" />
      <link rel="icon" href="img/icon.png" />

      <link href="style.min.css" rel="stylesheet" type="text/css">
      <link href="splide/splide.min.css" rel="stylesheet" type="text/css">
      <script src="splide/splide.min.js"></script>

      <script src="script.min.js"></script>
    </head>
    <body>
      <div class="container">
        <div class="header"><img src="img/resound_logo.svg" width="100" height="40"></div>
        <div class="background-image">
          <img id="sphereImage">
        </div>

        <!-- Carousel Section -->
        <section id="carousel" class="splide">
          <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide" data-id="server">
                      <div class="slide-content">
                        <div class="row top-row">
                          Connect the sphere with your community!
                        </div>
                        <div class="row middle-row">
                          <form class="yo-yo-form" id="server_form">
                            <input name="host" id="server_host" class="form-control" placeholder="Resound Server" type="text">
                            <input name="channel" id="server_channel" class="form-control" placeholder="Channel" type="text">
                            <input name="name" id="server_name" class="form-control" placeholder="Name" type="text">
                            <button id="server_button" type="submit">Connect</button>
                          </form>
                        </div>
                        <div class="row"></div>
                      </div>
                    </li>
                    <li class="splide__slide" data-id="tuning">
                      <div class="slide-content">
                          <div class="row top-row">Tune the sphere to your voice!</div>
                          <div class="row middle-row">
                          </div>
                          <div class="row">
                            <span class="content"></span>
                          </div>
                      </div>
                    </li>
                    <!-- <li class="splide__slide" data-id="volume">
                      <div class="slide-content">
                          <div class="row top-row">Adjust the volume of your sphere!</div>
                          <div class="row middle-row yo-yo-form">
                            <div class="slider-container">
                              <input type="range" class="slider" id="vollevel" min="0" max="100" value="50">
                            </div>
                          </div>
                          <div class="row">
                            <template class="sphere_up_text">Make your sphere louder by turning your finger clockwise or quieter by turning it anti-clockwise.</template>
                            <template class="sphere_down_text">To get started, please turn the sphere over.</template>
                            <span class="content"></span>
                          </div>
                      </div>
                    </li> -->
                    <li class="splide__slide" data-id="wifi">
                      <div class="slide-content">
                        <div class="row top-row">
                          Connect the sphere to your WiFi!
                        </div>
                        <div class="row middle-row">
                          <form class="yo-yo-form" id="wifi_form">
                                <select name="ssid" class="form-control" id="wifi_ssid">
                                  <option value="" disabled selected>WiFi networks</option>
                                </select>
                                <input name="secret" id="wifi_secret" class="form-control" placeholder="Password" type="password">
                                <button id="wifi_button" type="submit">Connect</button>
                          </form>
                        </div>
                        <div class="row"></div>
                      </div>
                    </li>
                    <li class="splide__slide" data-id="landing">
                      <div class="slide-content">
                        <div class="row top-row">Hello!</div>
                        <div class="row middle-row">
                          <div id="room_container"></div>
                          <template id="room_item_template">
                            <div class="room_item">
                                <img src="">
                                <span></span>
                            </div>
                          </template>
                        </div>
                        <div class="row">
                          <span></span>
                          <!-- <button id="install_button" type="button">Install</button> -->
                        </div>
                      </div>
                    </li>
                    <li class="splide__slide" data-id="determination">
                      <div class="slide-content">
                        <div class="row top-row">
                          Your group's determination!
                        </div>
                        <div class="row middle-row yo-yo-form">
                            <textarea id="determination_individual" placeholder="Your determination"></textarea>
                        </div>
                        <div class="row">
                          <div id="count"></div> DMK
                        </div>
                      </div>
                    </li>
                </ul>
          </div>
      </section>

    <div class="info">
      <div id="spherename"></div>
      <div id="sphereversion"></div>
      <div id="copyright">Open Lab 2025</div>
    </div>
  </body>
</html>