mx-admin/index.html at master · mx-space/mx-admin · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
    <script type="module">
      import favicon from './favicon.png'

      const link = document.createElement('link')
      link.rel = 'icon'
      link.href = favicon
      document.head.appendChild(link)
    </script>
    <title>Mx Space Admin Vue 3 v2</title>
    <script>
      window.injectData = {}
      window.version = 'N/A'
      window.pageSource = 'self'
    </script>
    <!-- ENV INJECT -->
    <!-- MX SPACE ADMIN DASHBOARD VERSION INJECT -->
    <!-- injectable script -->
  </head>

  <body>
    <div id="app">
      <!-- Initial Loading State -->
      <div id="initial-loader">
        <div class="loader-content">
          <div class="loader-spinner">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 12a9 9 0 1 1-6.219-8.56" />
            </svg>
          </div>
        </div>
      </div>
      <style>
        #initial-loader {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #ffffff;
          transition: opacity 0.2s ease-out;
          z-index: 9999;
        }
        .dark #initial-loader {
          background-color: #0a0a0a;
        }
        .loader-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
        }
        .loader-spinner {
          width: 32px;
          height: 32px;
          color: #171717;
          animation: spin 1s linear infinite;
        }
        .dark .loader-spinner {
          color: #ededed;
        }
        .loader-spinner svg {
          width: 100%;
          height: 100%;
        }

        .dark .loader-text {
          color: #a3a3a3;
        }
        @keyframes spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        #initial-loader.fade-out {
          opacity: 0;
          pointer-events: none;
        }
      </style>
    </div>
    <noscript>
      <strong
        >We're sorry but MX Space Admin Vue 3 doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
      <strong>
        It may be a network problem that caused the failure to load the JS file.
      </strong>
    </noscript>
    <script>
      // Initialize theme before Vue loads to prevent flash
      ;(function () {
        var themeMode = localStorage.getItem('theme-mode')
        // Remove quotes if stored as JSON string
        if (themeMode) {
          themeMode = themeMode.replace(/^"|"$/g, '')
        }
        var isDark = false
        if (themeMode === 'dark') {
          isDark = true
        } else if (themeMode === 'system' || !themeMode) {
          isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
        }
        if (isDark) {
          document.documentElement.classList.add('dark')
        }
      })()
    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>