Celestial-Odyssey/index.html at main · clerisy47/Celestial-Odyssey · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
    <link rel="icon" type="image/x-icon" href="/assets/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Celestial Odyssey</title>
  </head>
  <body>
    <span class="easter-egg">🥚</span>
    <div id="app">
      <div class="scene"></div>
      <div id="wrap-effect">
        <video
          muted
          src="./assets/video/wrap.mov"
          class="wrapVideo"
          loop
          style="opacity: 0"
        ></video>
      </div>
      <img src="./assets/spaceship3.png" class="spaceship" />
      <div class="ui">
        <div class="vec1 box">
          <img src="assets/design/Vector 3.png" alt="" />
        </div>
        <div class="planet-text-box box">
          <h2 class="planet-text">Planets</h2>
        </div>
        <div class="planet-box box">
          <div class="planet mercury">
            <img src="assets/planet_images/mercury.png" alt="" />
          </div>
          <div class="planet venus">
            <img src="assets/planet_images/venus.png" alt="" />
          </div>
          <div class="planet earth">
            <img src="assets/planet_images/earth.png" alt="" />
          </div>
          <div class="planet mars">
            <img src="assets/planet_images/mars.png" alt="" />
          </div>
          <div class="planet jupiter">
            <img src="assets/planet_images/jupiter.png" alt="" />
          </div>
          <div class="planet saturn">
            <img src="assets/planet_images/saturn.png" alt="" />
          </div>
          <div class="planet uranus">
            <img src="assets/planet_images/uranus.png" alt="" />
          </div>
          <div class="planet neptune">
            <img src="assets/planet_images/neptune.png" alt="" />
          </div>
        </div>
        <div class="vec2 box">
          <img src="assets/design/Vector 2.png" alt="" />
        </div>
        <span class="sound-btn sound-box">
          <svg
            width="359"
            height="295"
            viewBox="0 0 359 295"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g id="Group 27">
              <rect
                id="Rectangle 15"
                x="57"
                y="86"
                width="18"
                height="131"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 20"
                x="265"
                y="86"
                width="18"
                height="131"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 21"
                x="303"
                y="102"
                width="18"
                height="98"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 23"
                x="10"
                y="102"
                width="18"
                height="98"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 22"
                x="341"
                y="112"
                width="18"
                height="78"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 16"
                x="95"
                y="54"
                width="18"
                height="195"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 19"
                x="227"
                y="65"
                width="18"
                height="173"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 18"
                x="180"
                y="44"
                width="18"
                height="214"
                fill="#E6E6E6"
              />
              <rect
                id="Rectangle 17"
                x="133"
                y="18.9999"
                width="18"
                height="265"
                fill="#E6E6E6"
              />
              <rect
                id="cross"
                y="10.6454"
                width="14.4329"
                height="420.878"
                transform="rotate(-47.5255 0 10.6454)"
                fill="#B3B3B3"
              />
            </g>
          </svg>
        </span>

        <div class="image-box box uiBox"></div>
        <div class="location-info-box box">
          <p class="location-info-text-box box"></p>
          <div class="location-info-box-closebtn box">X</div>
        </div>
        <div class="info-box box">info</div>
        <div class="info-text-box box">
          <p class="info-text"></p>
          <div class="close-info-text-btn box">X</div>
        </div>
        <div class="data-box box uiBox"></div>
        <div class="close-ai-btn box">></div>
        <div class="chatbot box">
          <div class="input-box box" novalidate="novalidate">
            <div>
              <input class="box" type="text" required />
              <label class="placeholder">is there any question?</label>
            </div>
          </div>
          <div class="bot-img">
            <img src="assets/bot.png" alt="" />
          </div>
        </div>
        <span class="background-sound box" data-played="true">
          <svg
            width="169"
            height="156"
            viewBox="0 0 169 156"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M78.2015 0.0131009C76.115 0.0196009 73.8075 0.955601 71.7015 3.0551L34.528 45.1036H6.5C2.9185 45.1036 0 48.0221 0 51.6036V103.604C0 107.185 2.9185 110.104 6.5 110.104H34.5345L71.5 151.951C78 158.451 84.5 155.123 84.5 146.263V7.9236C84.5 2.7821 81.6855 -0.0193989 78.2015 0.000101114V0.0131009ZM125.326 13.0131C123.944 13.2543 122.677 13.9363 121.714 14.9574C120.751 15.9784 120.145 17.2836 119.986 18.6778C119.826 20.072 120.122 21.4804 120.829 22.6924C121.537 23.9044 122.617 24.855 123.91 25.4021C133.579 30.2636 141.704 37.7228 147.372 46.9431C153.04 56.1634 156.028 66.7804 156 77.6036C156 100.51 143 120.179 123.903 129.805C123.034 130.107 122.239 130.591 121.571 131.223C120.902 131.856 120.376 132.623 120.027 133.474C119.677 134.325 119.512 135.241 119.543 136.161C119.573 137.08 119.799 137.983 120.204 138.809C120.61 139.635 121.186 140.365 121.895 140.952C122.604 141.539 123.43 141.968 124.317 142.212C125.204 142.456 126.133 142.508 127.042 142.366C127.951 142.224 128.82 141.891 129.59 141.388C152.945 129.604 169 105.476 169 77.6036C169 49.7316 152.938 25.6036 129.59 13.8191C128.478 13.1983 127.208 12.918 125.938 13.0131C125.734 13.0035 125.53 13.0035 125.326 13.0131ZM109.889 38.1941C108.489 38.2969 107.161 38.8498 106.101 39.7704C105.042 40.6909 104.309 41.9295 104.012 43.3011C103.715 44.6726 103.87 46.1035 104.454 47.3797C105.037 48.656 106.018 49.7091 107.25 50.3816C117.28 56.6151 123.5 66.4886 123.5 77.6036C123.5 88.7966 117.182 98.8001 107.049 105.027C106.252 105.442 105.551 106.018 104.988 106.718C104.426 107.418 104.015 108.227 103.78 109.094C103.546 109.96 103.494 110.866 103.627 111.754C103.76 112.642 104.076 113.493 104.554 114.253C105.032 115.013 105.663 115.665 106.406 116.169C107.149 116.673 107.989 117.018 108.872 117.181C109.755 117.345 110.662 117.324 111.536 117.119C112.41 116.914 113.233 116.531 113.951 115.993C127.406 107.738 136.5 93.6976 136.5 77.6036C136.5 61.6071 127.485 47.4891 114.153 39.2146C113.064 38.5188 111.792 38.1635 110.5 38.1941C110.296 38.1845 110.093 38.1845 109.889 38.1941Z"
              fill="black"
            />
          </svg>
        </span>
        <div class="askAI box">ask ai</div>
      </div>
    </div>
    <div class="overlay">
      <video src="./assets/space2.mp4" autoplay playsinline muted loop style="z-index: 0;"></video>
      <svg height="100%" width="100%" id="svgText">
        <defs>
          <mask id="mask" x="0" y="0" width="100%" height="100%">
            <rect x="0" y="0" width="100%" height="100%" />
            <text
              x="50%"
              y="60%"
              fill="blue"
              text-anchor="middle"
              id="textBackground"
            >
              Explore Beyond
            </text>
          </mask>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" />
      </svg>
      <button class="btn start-btn" id="btn">Start</button>
    </div>
    <script
      src="https://kit.fontawesome.com/58d2d348a2.js"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="/main.js"></script>
  </body>
</html>