WitNote/index.html at main · hooosberg/WitNote · 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
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="智简笔记本 - 本地优先的 AI 记事本" />
  <link rel="icon" type="image/png" href="/src/icon/智简icon 拷贝.png" />
  <title>WitNote</title>
  <script>
    // 立即应用缓存的主题，避免 FOUC (Flash of Unstyled Content)
    (function () {
      try {
        const cachedTheme = localStorage.getItem('zen-theme-cache');
        if (cachedTheme) {
          document.documentElement.setAttribute('data-theme', cachedTheme);
        }
      } catch (e) {
        console.warn('Failed to load theme from cache', e);
      }
    })();
  </script>
  <style>
    :root {
      --splash-bg: #ffffff;
      --splash-text: #1d1d1f;
    }

    [data-theme='dark'] {
      --splash-bg: #1c1c1e;
      --splash-text: #f5f5f7;
    }

    [data-theme='tea'] {
      --splash-bg: #f5f0e8;
      --splash-text: #3c3630;
    }

    #splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--splash-bg);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    }

    .splash-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .splash-logo {
      width: 50px;
      height: 50px;
      color: var(--splash-text);
      opacity: 0.9;
    }

    /* Floating dots container - positioned above the cup */
    /* Adjust 'left' or 'margin-left' to align with the cup body, excluding the handle */
    .splash-dots {
      position: absolute;
      top: 5px;
      left: calc(50% - 6px);
      /* Shift left to align with cup body (excluding handle) */
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
    }

    .splash-dot {
      width: 5px;
      height: 5px;
      background-color: var(--splash-text);
      border-radius: 50%;
      opacity: 0.8;
      animation: splash-bounce 1.4s infinite ease-in-out both;
    }

    .splash-dot:nth-child(1) {
      animation-delay: -0.32s;
    }

    .splash-dot:nth-child(2) {
      animation-delay: -0.16s;
    }

    .splash-dot:nth-child(3) {
      animation-delay: 0s;
    }

    @keyframes splash-bounce {

      0%,
      80%,
      100% {
        transform: scale(0);
        opacity: 0.5;
      }

      40% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .splash-hidden {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <div id="splash-screen">
    <div class="splash-content">
      <!-- Three floating dots -->
      <div class="splash-dots">
        <div class="splash-dot"></div>
        <div class="splash-dot"></div>
        <div class="splash-dot"></div>
      </div>
      <!-- Coffee Cup Logo (Steam removed) -->
      <svg class="splash-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
        <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
      </svg>
    </div>
  </div>

  <script>
    (function () {
      // Check if this is a refresh (sessionStorage persists on refresh, clears on close)
      // BUT electron behavior might vary. Usually sessionStorage is good for "per session".
      // The user specifically said "Never show on refresh... only when app closed and restarted".
      try {
        if (sessionStorage.getItem('witnote_splash_shown')) {
          var splash = document.getElementById('splash-screen');
          if (splash) {
            splash.style.display = 'none'; // Hide immediately without animation
          }
        } else {
          sessionStorage.setItem('witnote_splash_shown', 'true');
        }
      } catch (e) {
        console.warn('Splash screen logic failed', e);
      }
    })();
  </script>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>