Skip to content

Commit 82487b1

Browse files
skillnullskillnull
committed
feat: homepage
1 parent 3f9a79e commit 82487b1

File tree

5 files changed

+229
-112
lines changed

5 files changed

+229
-112
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
1111
```html
1212
使用 UMD 格式
13-
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.4/dist/device.js"></script>
13+
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.5/dist/device.js"></script>
1414
# or
15-
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.4/dist/device.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.5/dist/device.js"></script>
1616

1717

1818
使用 ES 格式
19-
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.4/dist/device.es.js" type="module"></script>
19+
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.5/dist/device.es.js" type="module"></script>
2020
# or
21-
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.4/dist/device.es.js" type="module"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.5/dist/device.es.js" type="module"></script>
2222
```
2323

2424
> #### 安装

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@skillnull/device-js",
3-
"version": "2.1.4",
3+
"version": "2.1.5",
44
"description": "Get device information by javascript.",
55
"main": "dist/device",
66
"author": "skillnull",

‎src/index.css‎

Lines changed: 166 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,211 @@
11
html, body {
2-
font-weight: 300;
3-
margin: 0;
4-
padding: 0;
2+
font-weight: 300;
3+
margin: 0;
4+
padding: 0;
5+
background: #141414;
6+
color: #CFD3DC;
57
}
68

79
.title {
8-
text-align: center;
9-
font-size: 16px;
10-
background: #3b8dbb;
11-
color: white;
12-
margin: 0;
13-
padding: 1rem;
10+
text-align: center;
11+
color: white;
12+
margin: 0;
13+
width: calc(100% - 20px);
14+
padding: 10px 10px 20px 10px;
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
overflow: hidden;
19+
backdrop-filter: saturate(50%) blur(4px);
20+
background-image: radial-gradient(transparent 1px, #141414 1px);
21+
background-size: 4px 4px;
22+
border-bottom: 1px solid #333;
23+
}
24+
25+
.title > .brand {
26+
height: 80px;
27+
width: auto;
28+
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
29+
}
30+
31+
.title > .tips {
32+
font-size: 18px;
33+
color: #c6c6c6;
34+
}
35+
36+
.title > .fork {
37+
width: 40px;
38+
height: 40px;
39+
background-image: url("https://skillnull.com/wp-content/themes/basepress/assets/images/icon/github.png");
40+
background-repeat: no-repeat;
41+
background-size: calc(100% - 5px) calc(100% - 5px);
42+
position: absolute;
43+
right: 0;
44+
top: 0;
45+
background-position: right 5px top 5px;
46+
cursor: pointer;
47+
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
48+
}
49+
50+
.title > .fork > .text {
51+
font-size: 12px;
52+
position: absolute;
53+
left: -50%;
54+
top: 40%;
55+
transform: rotate(45deg) translateY(-50%);
56+
background: white;
57+
width: 180%;
58+
color: black;
59+
text-shadow: 0px 0px 1px #000000;
60+
}
61+
62+
.content {
63+
margin-bottom: 20px;
1464
}
1565

1666
.keyTipBox {
17-
margin: 5px;
18-
word-break: break-all;
67+
word-break: break-all;
68+
}
69+
70+
.keyTipBox > ul > li > .comment {
71+
color: #3d8dbc;
1972
}
2073

2174
.getInfoBox {
22-
display: flex;
23-
flex: 1;
24-
justify-content: flex-start;
25-
align-items: center;
26-
margin: 25px;
75+
display: flex;
76+
flex: 1;
77+
justify-content: flex-start;
78+
align-items: center;
79+
margin: 25px;
2780
}
2881

2982
.getInfoBox textarea {
30-
display: flex;
31-
flex: 4;
32-
height: 35px;
33-
outline: none;
34-
border-radius: 3px;
35-
padding: 5px;
83+
display: flex;
84+
flex: 4;
85+
height: 35px;
86+
outline: none;
87+
border-radius: 3px;
88+
padding: 5px;
89+
box-shadow: 0 0 0 1px #3d8dbc61 inset;
90+
background: transparent;
91+
border: none;
92+
color: #3d8dbc;
93+
font-family: auto;
3694
}
3795

3896
.getInfoBox button {
39-
margin: 0 10px;
40-
width: 60px;
41-
text-align: center;
42-
justify-content: center;
43-
align-items: center;
44-
height: 45px;
45-
border-radius: 3px;
46-
outline: none;
47-
border: 1px solid #3c8dbc;
48-
font-size: 14px;
49-
cursor: pointer;
50-
background-color: #3c8dbc;
51-
color: #fff;
52-
font-weight: 300;
97+
margin: 0 10px;
98+
width: 60px;
99+
text-align: center;
100+
justify-content: center;
101+
align-items: center;
102+
height: 45px;
103+
border-radius: 3px;
104+
outline: none;
105+
border: 1px solid #3d8dbc61;
106+
font-size: 14px;
107+
cursor: pointer;
108+
background-color: transparent;
109+
color: #3d8dbc;
110+
font-weight: 400;
53111
}
54112

55113
.getInfoBox button:hover {
56-
background-color: #387ca8;
114+
border-color: #3d8dbc;
57115
}
58116

59117
#info_box {
60-
word-break: break-all;
118+
word-break: break-all;
61119
}
62120

63121
textarea::placeholder {
64-
padding: 8px;
65-
font-weight: 300;
122+
padding: 8px;
123+
font-weight: 300;
124+
color: #3d8dbc61;
66125
}
67126

68127
/*========= start loading =========*/
69128

70129
.ball-pulse {
71-
transform: scale(1);
130+
transform: scale(1);
72131
}
73132

74133
.ball-pulse > div:nth-child(1) {
75-
-webkit-animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
76-
animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
134+
-webkit-animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
135+
animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
77136
}
78137

79138
.ball-pulse > div:nth-child(2) {
80-
-webkit-animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
81-
animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
139+
-webkit-animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
140+
animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
82141
}
83142

84143
.ball-pulse > div:nth-child(3) {
85-
-webkit-animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
86-
animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
144+
-webkit-animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
145+
animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
87146
}
88147

89148
.ball-pulse > div {
90-
background-color: #0FB560;
91-
width: 15px;
92-
height: 15px;
93-
border-radius: 100%;
94-
margin: 2px;
95-
-webkit-animation-fill-mode: both;
96-
animation-fill-mode: both;
97-
display: inline-block;
149+
background-color: #0FB560;
150+
width: 15px;
151+
height: 15px;
152+
border-radius: 100%;
153+
margin: 2px;
154+
-webkit-animation-fill-mode: both;
155+
animation-fill-mode: both;
156+
display: inline-block;
98157
}
99158

100159
@keyframes ball-pulse-scale {
101-
0% {
102-
-webkit-transform: scale(1);
103-
transform: scale(1);
104-
opacity: 1;
105-
}
106-
45% {
107-
-webkit-transform: scale(0.1);
108-
transform: scale(0.1);
109-
opacity: 0.7;
110-
}
111-
80% {
112-
-webkit-transform: scale(1);
113-
transform: scale(1);
114-
opacity: 1;
115-
}
116-
}
117-
118-
/*========= end loading =========*/
160+
0% {
161+
-webkit-transform: scale(1);
162+
transform: scale(1);
163+
opacity: 1;
164+
}
165+
45% {
166+
-webkit-transform: scale(0.1);
167+
transform: scale(0.1);
168+
opacity: 0.7;
169+
}
170+
80% {
171+
-webkit-transform: scale(1);
172+
transform: scale(1);
173+
opacity: 1;
174+
}
175+
}
176+
177+
/*========= end loading =========*/
178+
179+
180+
::-webkit-scrollbar {
181+
width: 2px !important;
182+
height: 2px !important;
183+
}
184+
185+
::-webkit-scrollbar-track {
186+
background-color: #000000 !important;
187+
border-radius: 2px !important;
188+
}
189+
190+
::-webkit-scrollbar-track-piece {
191+
background-color: #000000 !important;
192+
border-radius: 2px !important;
193+
}
194+
195+
::-webkit-scrollbar-thumb {
196+
background: #3d8dbc61 !important;
197+
border-radius: 2px !important;
198+
}
199+
200+
::-webkit-scrollbar-thumb:hover {
201+
background: #3d8dbc61 !important;
202+
width: 2px !important;
203+
}
204+
205+
::-webkit-scrollbar-corner {
206+
display: none !important;
207+
}
208+
209+
::-webkit-scrollbar-button {
210+
display: none !important;
211+
}

‎src/index.html‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,47 @@
66
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Get Device Info Online</title>
9-
<link rel="stylesheet" href="index.css?v=20220808">
10-
<link rel="shortcut icon" href="http://skillnull.com/others/images/DeviceJs.ico">
11-
<link rel="bookmark" href="http://skillnull.com/others/images/DeviceJs.ico">
9+
<link rel="stylesheet" href="index.css?v=202410311050">
10+
<link rel="shortcut icon" href="https://skillnull.com/others/images/DeviceJs.ico?v=202410311050">
11+
<link rel="bookmark" href="https://skillnull.com/others/images/DeviceJs.ico?v=202410311050">
1212
</head>
1313
<body>
14-
<div class="title">输入以下想要获取信息的key，多个key用逗号相隔, 为空则显示全部</div>
15-
<div class="keyTipBox">
16-
<ul>
17-
<li>deviceType // 设备类型</li>
18-
<li>OS // 操作系统</li>
19-
<li>OSVersion // 操作系统版本</li>
20-
<li>platform // 操作系统平台</li>
21-
<li>screenHeight // 屏幕高</li>
22-
<li>screenWidth // 屏幕宽</li>
23-
<li>language // 当前使用的语言-国家</li>
24-
<li>netWork // 联网类型</li>
25-
<li>orientation // 横竖屏</li>
26-
<li>browserInfo // 浏览器信息</li>
27-
<li>fingerprint // 浏览器指纹</li>
28-
<li>userAgent // 包含 appCodeName,appName,appVersion,language,platform 等</li>
29-
<li>geoPosition // 地理位置</li>
30-
<li>date // 阳历日期时间</li>
31-
<li>lunarDate // 阴历日期</li>
32-
<li>week // 周几</li>
33-
<li>UUID // 通用唯一标识 Universally Unique Identifier</li>
34-
</ul>
14+
<div class="title">
15+
<img src="http://skillnull.com/others/images/DeviceJs.png?v=202410311050" alt="" class="brand">
16+
<div class="tips">输入以下想要获取信息的key，多个key用逗号相隔, 为空则显示全部</div>
17+
<div class="fork" onclick="fork()">
18+
<div class="text">FORK</div>
19+
</div>
3520
</div>
36-
<div class="getInfoBox">
37-
<textarea id="info_input" placeholder="为空默认显示全部信息"></textarea>
38-
<button onclick="getInfo()">获取</button>
21+
<div class="content">
22+
<div class="keyTipBox">
23+
<ul>
24+
<li>deviceType <span class="comment">// 设备类型</span></li>
25+
<li>OS <span class="comment">// 操作系统</span></li>
26+
<li>OSVersion <span class="comment">// 操作系统版本</span></li>
27+
<li>platform <span class="comment">// 操作系统平台</span></li>
28+
<li>screenHeight <span class="comment">// 屏幕高</span></li>
29+
<li>screenWidth <span class="comment">// 屏幕宽</span></li>
30+
<li>language <span class="comment">// 当前使用的语言-国家</span></li>
31+
<li>netWork <span class="comment">// 联网类型</span></li>
32+
<li>orientation <span class="comment">// 横竖屏</span></li>
33+
<li>browserInfo <span class="comment">// 浏览器信息</span></li>
34+
<li>fingerprint <span class="comment">// 浏览器指纹</span></li>
35+
<li>userAgent <span class="comment">// 包含 appCodeName,appName,appVersion,language,platform 等</span></li>
36+
<li>geoPosition <span class="comment">// 地理位置</span></li>
37+
<li>date <span class="comment">// 阳历日期时间</span></li>
38+
<li>lunarDate <span class="comment">// 阴历日期</span></li>
39+
<li>week <span class="comment">// 周几</span></li>
40+
<li>UUID <span class="comment">// 通用唯一标识 Universally Unique Identifier</span></li>
41+
</ul>
42+
</div>
43+
<div class="getInfoBox">
44+
<textarea id="info_input" placeholder="为空默认显示全部信息"></textarea>
45+
<button onclick="getInfo()">获取</button>
46+
</div>
47+
<div id="info_box"></div>
3948
</div>
40-
<div id="info_box"></div>
41-
<script src="./device.js" type="module"></script>
42-
<script src="./index.js"></script>
49+
<script src="./device.js?v=202410311050" type="module"></script>
50+
<script src="./index.js?v=202410311050"></script>
4351
</body>
4452
</html>

0 commit comments

Comments
 (0)