mdlook/apps/web/index.html at main · ghzhost/mdlook · 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
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="mdlook,md,markdown,markdown-editor,markdown-viewer,wechat,official-account" />
    <meta name="description" content="mdlook · Markdown 查看器与公众号排版工具 | 左看源码右预览，一键复制到公众号" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
    <title>mdlook · Markdown 查看与公众号排版</title>
    <link rel="shortcut icon" href="/favicon.png" />
    <link rel="apple-touch-icon-precomposed" href="/favicon.png" />
    <style>
      .loading {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100vw;
        height: 100vh;
        color: #181716;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: radial-gradient(circle at 50% 42%, rgb(221 116 82 / 10%), transparent 30%), #fffdfb;
      }

      .loading__icon {
        width: 84px;
        height: 84px;
        border-radius: 20px;
        box-shadow: 0 18px 40px rgb(60 40 30 / 12%);
      }

      .loading__brand {
        margin-top: 8px;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 700;
      }

      .loading__desc {
        color: #6f6863;
        font-size: 13px;
        line-height: 1.4;
      }

      .loading.dark {
        color: #f8f5f2;
        background: radial-gradient(circle at 50% 42%, rgb(221 116 82 / 18%), transparent 30%), #141211;
      }

      .loading.dark .loading__desc {
        color: #bcb4ae;
      }

      .loading__bar {
        position: relative;
        width: 96px;
        height: 3px;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: rgb(221 116 82 / 16%);
      }

      .loading__bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: -40%;
        width: 40%;
        height: 100%;
        border-radius: inherit;
        background: #dd7452;
        animation: loading-bar 1.2s ease-in-out infinite;
      }

      .loading .timeout-tip {
        display: none;
        max-width: 320px;
        margin: 22px 24px 0;
        color: #d94b30;
        font-size: 13px;
        line-height: 1.6;
        text-align: center;
      }

      @keyframes loading-bar {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(350%);
        }
      }
    </style>
  </head>

  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app">
      <div class="loading">
        <img class="loading__icon" src="/favicon.png" alt="mdlook" />
        <strong class="loading__brand">mdlook</strong>
        <span class="loading__desc">看 Markdown，发公众号</span>
        <span class="loading__bar"></span>
        <p class="timeout-tip">加载时间过长，请尝试刷新页面或按 F12 查看控制台是否有异常信息</p>
      </div>
    </div>
    <script>
      const theme = localStorage.getItem('vueuse-color-scheme')
      if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.querySelector('.loading').classList.add('dark')
      }

      setTimeout(() => {
        const tip = document.querySelector('.loading .timeout-tip')
        if (tip) {
          tip.style.display = 'block'
        }
      }, 30000)
    </script>
    <script>
      window.MathJax = {
        tex: { tags: 'ams' },
        svg: { fontCache: 'none' },
      }
    </script>
    <script
      id="MathJax-script"
      src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/mathjax@3/es5/tex-svg.js"
    ></script>
    <script type="module" src="/src/main.ts"></script>
    <script type="module" src="/src/sidepanel.ts"></script>
  </body>
</html>