CrossRoad/index.html at main · hexianWeb/CrossRoad · 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
<!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>
    <div id="app"></div>
    <!-- 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>
    <div id="item-effect-mask" class="fixed inset-0 z-[9999] pointer-events-none transition-opacity duration-300 opacity-0" style="display: none;"></div>
    <noscript class="text-center text-lg text-red-500">
      Enable JavaScript to enjoy all the features of this app.
    </noscript>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>