island/index.html at big-park-copy · hexianWeb/island · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ESSENTIAL -->
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- GENERAL -->
    <title>Vite ThreeJS — Template</title>
    <meta name="title" content="Vite ThreeJS — Template" />
    <meta name="application-name" content="Vite ThreeJS — Template" />
    <meta
      name="description"
      content="Boilerplate template designed to quickly bootstrapping a 3D Web App, SPA, website or landing page with Three.JS, GLSL, Vite, TailwindCSS, ESLint, Husky and much more in just 30 seconds."
    />
    <meta
      name="keywords"
      content="
        three, three js, threejs, three.js, three-js,
        three template, three js template, threejs template, three.js template, three-js template,
        three vite, three js vite, threejs vite, three.js vite, three-js vite,
        three vite template, three js vite templante, threejs vite templante, three.js vite templante, three-js vite templante,
        webgl, 3D, GLSL, GLSL shaders, shaders, web3D,
        javascript, js, vanilla-javascript, vanilla-js,
        development, template, boilerplate, template-boilerplate, boilerplate-frontend, starter-kit,
        vite, vite template, swc, husky, eslint, commitlint, prettier,
        postcss, tailwind, tailwindcss, sass, scss, css,
        github, web app, web-app, webapp, spa
      "
    />
    <link rel="manifest" href="/app.webmanifest" />
    <link rel="icon" sizes="192x192" href="/favicon/favicon-192.webp" />
    <link rel="icon" sizes="512x512" href="/favicon/favicon-512.webp" />

    <!-- GOOGLE -->
    <meta name="rating" content="General" />
    <meta name="robots" content="index,follow" />
    <link
      rel="sitemap"
      type="application/xml"
      title="Sitemap"
      href="/sitemap.xml"
    />
    <meta
      name="google-site-verification"
      content="43hCqye5FYTS4SnBMPKNFP-wBhfLHwRBykWJF1WJawo"
    />

    <!-- FACEBOOK -->
    <meta property="og:url" content="https://webpack-three-js.d1a.app" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Webpack ThreeJS — Template" />
    <meta
      property="og:description"
      content="Boilerplate template designed to quickly bootstrapping a 3D Web App, SPA, website or landing page with Three.JS, GLSL, Vite, TailwindCSS, ESLint, Husky and much more in just 30 seconds."
    />
    <meta property="og:image" content="/og.jpg" />

    <!-- TWITTER -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="webpack-three-js.d1a.app" />
    <meta property="twitter:url" content="https://webpack-three-js.d1a.app" />
    <meta name="twitter:title" content="Webpack ThreeJS — Template" />
    <meta
      name="twitter:description"
      content="Boilerplate template designed to quickly bootstrapping a 3D Web App, SPA, website or landing page with Three.JS, GLSL, Vite, TailwindCSS, ESLint, Husky and much more in just 30 seconds."
    />
    <meta name="twitter:image" content="/og.jpg" />

    <!-- iOS -->
    <link rel="apple-touch-icon" href="/favicon/favicon-512.webp" />
    <link rel="mask-icon" href="/favicon/favicon-512.webp" color="black" />
    <meta name="apple-mobile-web-app-title" content="Vite ThreeJS — Template" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- ANDROID -->
    <meta name="theme-color" content="#000" />
    <meta name="mobile-web-app-capable" content="yes" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">

    <script defer src="/_vercel/insights/script.js"></script>
  </head>
  <body>
    <!-- Loading 全屏 进度 -->
    <div id="loading-screen" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-gray-900">
      <div class="w-64 space-y-4">
        <div class="text-center">
          <h2 class="text-xl font-semibold text-white mb-2">Loading Resources</h2>
          <p id="loading-percentage" class="text-gray-400">0%</p>
        </div>
        <div class="relative h-2 bg-gray-700 rounded-full overflow-hidden">
          <div id="loading-bar" class="absolute left-0 top-0 h-full w-0 bg-blue-500 transition-all duration-300 ease-out"></div>
        </div>
      </div>
    </div>
    <noscript class="text-center text-lg text-red-500">
      Enable JavaScript to enjoy all the features of this app.
    </noscript>
    <main class="flex h-full bg-primary text-color select-none">
      <canvas id="canvas" class="z-[0] h-full w-full"></canvas>

      <!-- Health Bar (Decorative) -->
      <div class="fixed top-7 left-7 z-20 flex gap-2 select-none">
        <img src="/icon/heart.png" alt="Heart" class="w-10 h-8 pixel-art">
        <img src="/icon/heart.png" alt="Heart" class="w-10 h-8 pixel-art">
        <img src="/icon/heart.png" alt="Heart" class="w-10 h-8 pixel-art">
        <img src="/icon/heart.png" alt="Heart" class="w-10 h-8 pixel-art">
        <img src="/icon/heart.png" alt="Heart" class="w-10 h-8 pixel-art">
      </div>

      <!-- Control Buttons -->
      <div class="fixed top-4 right-4 z-20 flex gap-4 select-none">
        <!-- Day/Night Toggle Button -->
        <button id="dayNightToggle" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 transition-all duration-200  flex items-center justify-center pixel-border2">
          <img src="/icon/sun.png" alt="Switch to Night" class="w-12 h-12 pixel-art">
        </button>

        <!-- Menu Button -->
        <button id="menuButton" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 transition-all duration-200 flex  items-center justify-center pixel-border2">
          <img src="/icon/menu.png" alt="Menu" class="w-12 h-12 pixel-art">
        </button>

        <!-- I18N Toggle Button -->
        <button id="i18nToggle" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 z-[9999] transition-all duration-200  flex items-center justify-center pixel-border2">
          <img src="/icon/i18n.png" alt="Switch to Night" class="w-12 h-12 pixel-art">
        </button>

        <!-- Icon Button -->
        <button id="iconButton" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 transition-all duration-200 flex items-center justify-center pixel-border2">
          <img src="/icon/icon.png" alt="Icon" class="w-12 h-12 pixel-art">
        </button>
        <!-- new Button -->
        <button id="newButton" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 transition-all duration-200 flex items-center justify-center pixel-border2">
          <img src="/icon/new.png" alt="New" class="w-12 h-12 pixel-art">
        </button>
        <!-- Champion Button -->
        <button id="championButton" class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-lg hover:bg-white/20 transition-all duration-200 flex items-center justify-center pixel-border2">
          <img src="/icon/champion.png" alt="Champion" class="w-12 h-12 pixel-art">
        </button>
      </div>

      <!-- Dialog Box -->
      <div class="fixed bottom-0 left-0 right-0 z-99 p-4 select-none">
        <div class="w-5/6 h-[24vh] p-6 mx-auto mb-10 select-none">
          <!-- Character Portrait -->
           <div class="pixel select-non">
             <div class="flex items-start gap-4 h-full ">
               <div class="h-full pixel-border">
                 <img id="characterPortrait" src="/assets/images/hexianWeb.png" alt="Character" class="w-full h-full object-cover pixel-art">
                </div>
                <!-- Dialog Content -->
                <div class="flex-1">
                  <h3 id="characterName" class="text-3xl font-pixelify text-white mb-2">HeXianWeb</h3>
                  <div id="dialogText" class="text-white/90 font-pixelify leading-relaxed text-2xl">

                  </div>
                </div>
            </div>
            <div class="continue-arrow"></div>
          </div>
        </div>
      </div>

      <!-- Brand Dialog -->
      <div id="brandDialog" class="fixed inset-0 z-10 hidden">
        <!-- Backdrop overlay -->
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>

        <!-- Dialog content -->
        <div class="relative flex items-center justify-center min-h-screen p-4">
          <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
            <button id="dialogClose" class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
            <h2 id="dialogTitle" class="text-xl font-bold mb-4 text-slate-950"></h2>
            <div id="dialogImage" class="w-full mb-4 rounded-lg overflow-hidden shadow-md">
              <!-- GIF image will be inserted here -->
            </div>
            <div id="dialogContent" class="text-gray-700 mb-6 leading-relaxed"></div>
            <a id="dialogUrl" href="#" target="_blank" class="inline-block px-5 py-2.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors shadow-sm font-medium">访问链接</a>
          </div>
        </div>
      </div>
    </main>
  </body>
  <script type="module" src="src/js/index.js"></script>
</html>