-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (152 loc) · 6.34 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-Hant-TW" style="display: none">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UI DEMO</title>
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<!-- Utils -->
<script defer src="./src/@utils/obj.js"></script>
<script defer src="./src/@utils/ajax.js"></script>
<script defer src="./src/@utils/process.js"></script>
<script defer src="./src/@utils/anchor.js"></script>
<!-- MasterCSS -->
<!--<script src="https://cdn.jsdelivr.net/npm/@master/[email protected]/dist/index.browser.js"></script>-->
<script defer src="./src/@master/helpers.js"></script>
<script defer src="./src/@master/config.js"></script>
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@master/[email protected]/dist/index.mjs" />
<script type="module">
import MasterCSS, { Theme } from 'https://cdn.jsdelivr.net/npm/@master/[email protected]/dist/index.mjs';
window.masterTheme = new MasterTheme(Theme);
window.masterCSSConfig = window.objUtil.merge(window.masterCSSConfig, {
colors: {},
});
window.masterCSS = new MasterCSS(window.masterCSSConfig);
</script>
<!-- UI -->
<script defer type="module" src="./src/@ui/index.js"></script>
<style id="FIX_UI_FOUC">
:not(:defined) {
display: inline-block;
height: 100vh;
opacity: 0;
transition: opacity 0.2s ease-out;
}
</style>
<!-- Iconify Icon -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconify-icon.min.js"></script>
<!-- Splide -->
<!-- <script defer src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script> -->
<!-- <link href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/themes/splide-default.min.css" rel="stylesheet" /> -->
<!-- AlpineJS -->
<script defer src="./src/@alpine/index.js" version="3.12.0" plugins="mask"></script>
<script>
const getData = function () {
return {
search: '',
sections: {},
loading: { sections: null },
async init() {
this.$watch('search', (search) => {
Object.entries(this.sections).forEach(([section, settings]) => {
settings.hide = !section.includes(search.toLowerCase());
});
});
if (true || !window.ajaxUtil.url.isProd) {
this.$store.dev.grid();
this.$store.dev.panel(window.ajaxUtil.url.domain + '/src/@alpine/template/devPanel.html');
}
await this.initSections();
},
async initSections() {
this.loading.sections = true;
const result = window.ajaxUtil.get({ url: window.ajaxUtil.url.domain + '/data/sections.json' });
const delay = new Promise((r) => setTimeout(r, 1000));
const [[error, res]] = await Promise.all([result, delay]);
if (error || !res) return;
this.sections = res;
const sections = await Promise.allSettled(Object.keys(this.sections).map((key) => window.ajaxUtil.getText(`${window.ajaxUtil.url.domain}/sections/${key}.html`)));
sections.forEach((section) => {
if (section.status != 'fulfilled') return;
window.ajaxUtil.setTemplate(this.$refs.sections, section.value);
});
this.$refs.sections.style.opacity = 1;
window.TkMessage.success('Sections');
this.loading.sections = false;
},
};
};
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet" />
<style>
:root {
--font: 'Inter', 'Noto Sans TC', sans-serif;
}
</style>
<!-- Styles -->
<style>
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
#app {
transition: opacity 0.2s ease-out;
}
[x-cloak] {
opacity: 0;
}
</style>
</head>
<body class="normal bg:#eee @" x-data="getData">
<!-- Header -->
<header
class="header header--fixed flex ai:center {opacity:.9;shadow:md}.header--fade"
x-data="{
transparentBar: function(){
var st = window.scrollY || window.pageYOffset;
this.$el.classList.toggle('header--fade', st > 50)
}
}"
@scroll.window="transparentBar"
>
<div class="container w:full py:0 flex flex:wrap ai:center jc:space-between">
<div class="flex:1 flex ai:center">
<!-- ICON -->
<div class="flex ai:center opacity:0.8:hover ~opacity|.2s pointer">
<div class="w:4x h:4x r:0x overflow:hidden">
<tk-media img="./favicon.png" prevented-lazy prevented-skeleton></tk-media>
</div>
<p class="ml:2x ml:1x@<2xs fg:theme-fg hide@<2xs">UI DEMO</p>
</div>
</div>
<div class="flex">
<!-- SEARCH -->
<div class="input mr:3x mr:1x@<xs opacity:.5 opacity:.8:hover ~opacity|.2s w:170@<xs w:120@<3xs">
<tk-icon class="input-icon" icon="mdi:search"></tk-icon>
<input type="search" placeholder="Search" x-model.debounce="search" />
</div>
<div>
<tk-button type="theme" shape="circle" icon="ph:github-logo" href="https://github.com/zhongyoulu/TK-UI-DEMO"></tk-button>
<tk-button type="theme" shape="circle" icon="ph:codesandbox-logo" href="https://codesandbox.io/s/github/zhongyoulu/TK-UI-DEOM"></tk-button>
</div>
<tk-theme class="ml:2x ml:1x@<2xs" @click.stop @theme="window.TkMessage.success('theme: ' + $event.detail.current)"></tk-theme>
</div>
</div>
</header>
<!-- APP -->
<div id="app" class="flex flex:column min-h:calc(100vh-header)">
<template x-if="loading.sections">
<tk-icon loading class="my:5x">Loading</tk-icon>
</template>
<!-- Sections -->
<div x-ref="sections" class="flex:1 container mb:5x opacity:0 ~opacity|.2s" x-cloak></div>
<!-- Footer -->
<footer class="mt:auto p:1x t:center bg:theme fg:theme-fg">© ZYL</footer>
</div>
</body>
</html>