mxtools/index.html at master · xmx-emm/mxtools · 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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>MX Tools</title>
    <script>
        (function(){
            var t = '';
            try { t = localStorage.getItem('mx-theme') || ''; } catch(e){}
            var isDark = t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme:dark)').matches);
            if (isDark) {
                document.documentElement.classList.add('dark');
            }
            // 读取主题色
            var accent = null;
            try {
                var raw = localStorage.getItem('mx-accent');
                if (raw) accent = JSON.parse(raw);
            } catch(e){}
            if (accent && accent.g1 && accent.g2) {
                var s = document.documentElement.style;
                s.setProperty('--splash-g1', accent.g1);
                s.setProperty('--splash-g2', accent.g2);
                s.setProperty('--splash-primary', accent.p || accent.g1);
                s.setProperty('--splash-shadow', accent.s || 'rgba(0,122,255,0.25)');
            }
        })();
    </script>
    <style>
        :root {
            --splash-g1: #007AFF;
            --splash-g2: #5856D6;
            --splash-primary: #007AFF;
            --splash-shadow: rgba(0, 122, 255, 0.25);
        }
        html.dark {
            --splash-g1: #0a84ff;
            --splash-g2: #5e5ce6;
            --splash-primary: #0a84ff;
            --splash-shadow: rgba(10, 132, 255, 0.3);
        }

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #f3f3f3;
        }
        html.dark, html.dark body { background: #202020; }

        #splash {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            background: #f3f3f3;
            color: #1f1f1f;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            z-index: 99999;
            transition: opacity .3s ease;
        }

        #splash.splash-hidden {
            opacity: 0;
            pointer-events: none;
        }

        #splash-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--splash-g1) 0%, var(--splash-g2) 100%);
            box-shadow: 0 8px 24px var(--splash-shadow);
            animation: splash-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        #splash-logo svg {
            width: 28px;
            height: 28px;
            fill: #fff;
        }

        #splash-title {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.02em;
            opacity: 0;
            animation: splash-fade-in .4s ease .2s forwards;
        }

        #splash-bar-track {
            width: 120px;
            height: 3px;
            border-radius: 2px;
            background: color-mix(in srgb, var(--splash-primary) 12%, transparent);
            overflow: hidden;
            opacity: 0;
            animation: splash-fade-in .4s ease .35s forwards;
        }

        #splash-bar {
            height: 100%;
            border-radius: 2px;
            background: var(--splash-primary);
            animation: splash-progress 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
        }

        @keyframes splash-pop {
            from { transform: scale(0.6); opacity: 0; }
            to   { transform: scale(1);   opacity: 1; }
        }

        @keyframes splash-fade-in {
            to { opacity: .75; }
        }

        @keyframes splash-progress {
            0%   { width: 0;    margin-left: 0; }
            50%  { width: 60%;  margin-left: 20%; }
            100% { width: 0;    margin-left: 100%; }
        }

        html.dark #splash {
            background: #202020;
            color: #e8e8e8;
        }
    </style>
</head>
<body>
<div id="splash">
    <div id="splash-logo">
        <svg viewBox="0 0 24 24"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7Z"/></svg>
    </div>
    <div id="splash-title">MX Tools</div>
    <div id="splash-bar-track">
        <div id="splash-bar"></div>
    </div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>