xiaosiAdmin/index.html at main · leinuoa/xiaosiAdmin · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>

  <body>
    <div id="app">
      <style>
        * {
          margin: 0;
          padding: 0;
        }

        html,
        body {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #000;
          overflow: hidden;
          font-family: 'Reggae One', cursive;
        }

        .develop-p {
          font-size: 8vw;
          overflow: hidden;
          -webkit-text-stroke: 3px #7272a5;
        }

        .develop-span {
          display: block;
          font-size: 20px;
          overflow: hidden;
          color: green;
          text-align: center;
        }

        .develop-p::before {
          content: ' ';
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
          mix-blend-mode: multiply;
        }

        .develop-p::after {
          content: '';
          background: radial-gradient(circle, #fff, #000 50%);
          background-size: 25% 25%;
          position: absolute;
          top: -100%;
          left: -100%;
          right: 0;
          bottom: 0;
          mix-blend-mode: color-dodge;
          animation: mix 2s linear infinite;
        }

        @keyframes mix {
          to {
            transform: translate(50%, 50%);
          }
        }
      </style>
      <div class="g-container">
        <p class="develop-p">SuperCuteXiaoSi</p>
        <span class="develop-span"></span>
      </div>
    </div>
    <script>
      // 此代码仅用于开发环境的友好提示，项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
      window.onload = function () {
        (function () {
          const ua = navigator.userAgent.toLowerCase();
          const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
          const m = ua.match(re);
          const Sys = {
            browser: m[1].replace(/version/, "'safari"),
            version: m[2],
          };

          const browser = Array.of('chrome', 'firefox').includes(Sys.browser);
          const version = parseFloat(Sys.version);

          const el = document.querySelector('.develop');

          if (el) {
            if (browser && version >= 90) {
              let success = document.createTextNode('哈哈哈哈哈！帅吧？ 😃');
              el.appendChild(success);
            } else {
              let warn = document.createTextNode('你这浏览器不行啊，换一个吧！😯');
              el.appendChild(warn);
              el.style.color = 'red';
            }
          }
          return Sys;
        })();
      };
    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>