-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (101 loc) · 4.83 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
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>设计 共创 众筹</title>
<link rel="shortcut icon" type="image/svg+xml" href="3d.svg">
<link rel="apple-touch-icon" href="3d.svg">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- safari page top background -->
<meta media="(prefers-color-scheme:light)" name="theme-color" content="#ececec" />
<meta media="(prefers-color-scheme:dark )" name="theme-color" content="#111111" />
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- global -->
<style>
.full {height:100vh !important; width:100vw !important;}
.envtop {margin-top: env(safe-area-inset-top);}
.envbtm {padding-bottom: env(safe-area-inset-bottom);}
.none {display:none !important;}
.flex {display:flex;}
.flexCol{display:flex; flex-flow:column;}
.box {box-sizing:border-box;}
.abs {position: absolute;}
.rel {position: relative;}
.scrollx{overflow-x: auto; scrollbar-width:none;}
.bold {font-weight: bold;}
.h100 {height:100%;}
.w100 {width:100%;}
.o62 {opacity:.62;}
.o38 {opacity:.38;}
.o100 {opacity:1;}
.ro180 {transform:rotate(180deg);}
.w1 {flex:1;} .w2 {flex:2;}
.w3 {flex:3;} .w4 {flex:4;}
.w5 {flex:5;} .w6 {flex:6;}
.vc {display:flex; align-items:center;}
.hc {display:flex; justify-content:center;}
.ic22 {background:#0000; width:22px; height:22px; flex-shrink:0;}
.ic44 {background:#0000; width:22px; height:22px; flex-shrink:0; margin:11px;}
</style>
<!-- element style -->
<style>
body, html {overflow:hidden;}
* {-webkit-user-select:none; user-select:none; outline:none; -webkit-tap-highlight-color:transparent;}
body {margin:0; padding:0; font-family:sans-serif;}
canvas,input{border:none; outline:none; font-size:initial;}
body,input,textarea{font-size:13px;}
::placeholder {opacity: 0.5;}
::-webkit-scrollbar {display:none;}
.round {border-radius:11px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);}
.htop {height:36px;}
.finder {border:none; box-sizing: border-box; padding: 0 calc(11px + 36px) 0 11px; background:transparent;}
.btmPad {padding:11px 11px max(11px, env(safe-area-inset-bottom)) 11px; box-sizing:border-box;}
.prdTab {opacity:0; padding:calc(env(safe-area-inset-top) + 4px) 11px 0; height:calc(100vh - max(11px, env(safe-area-inset-bottom)) - 44px - 11px);}
.prdTab.sel {opacity:1; z-index:11 !important;}
.pagerx {overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; display:flex;}
.pagery {overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; display:flex; flex-flow:column;}
.pagerx>*, .pagery>*{scroll-snap-align:start; scroll-snap-stop:always; flex:none;}
/* background color based on wechat webview */
@media (prefers-color-scheme: dark) {
body {background:#111111; --shadow-c:#1111; --bg-c:#11111155;}
body,input,textarea {color:#bbb;}
.ic22,.ic44 {fill:#bbb;}
.round {background:#6662;}
}
@media (prefers-color-scheme: light) {
body {background:#ececec; --shadow-c:#0004; --bg-c:#ececec99;}
body,input,textarea {color:#121419;}
.ic22,.ic44 {fill:black;}
.round {background:#fff6;}
}
</style>
<script src="js/util.js?t=6"></script>
<script src="js/echo.js?t=6"></script>
<!-- iconfont for app -->
<script src="//at.alicdn.com/t/c/font_4443303_pz96c6w6zh.js"></script>
</head>
<body class="box full">
<div id="top" class="envtop vc abs box w100" style="padding:4px 11px; height:44px; gap:11px; z-index:1;">
<div class="vc hc bold round htop" style="min-width:7em;">设计 · 数码</div>
<div class="w1 round rel">
<input placeholder="搜索关键字" class="finder bold htop w100" value="ITX主机 3.72L"/>
<svg aria-hidden="true" class="abs ic22 o38" style="top:7px;right:7px;"><use xlink:href="#find-fill"></use></svg>
</div>
<img class="round htop box" style="width:36px; background:#f305;" src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraightStrand&accessoriesType=Prescription02&hairColor=Red&facialHairType=Blank&clotheType=Hoodie&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Pale"/>
</div>
<script>
if (navigator.userAgent.includes('CPU i') && !window.navigator.standalone) {
document.body.innerHTML=`<div style="height:100%; font-size:1.25em; display:flex; justify-content:center; align-items:center; box-sizing:border-box; padding:3em;">
您正在使用iPhone或iPad访问，请点击Safari底部的分享按钮，添加至桌面。
<br><br>
You are accessing through iPhone or iPad，Please tap the share button of Safari and add to Home Screen.
</div>`
} else {
Util.loadComponent([ 'baby3d', 'prdArgs', 'prdIdea', 'prdSell', 'prdInfo', ])
window.addEventListener('load', echo.init)
window.addEventListener("visibilitychange", () => {
echo.uploadStatus(document.visibilityState)
})
}
</script>
</body></html>