Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@skillnull/device-js

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@skillnull/device-js - npm Package Compare versions

Comparing version
2.1.4
 to
2.1.5
+1
-1
package.json
{
"name": "@skillnull/device-js",
"version": "2.1.4",
"version": "2.1.5",
"description": "Get device information by javascript.",

@@ -5,0 +5,0 @@ "main": "dist/device",

+4
-4
README.md

@@ -13,11 +13,11 @@ <div align="center">

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

@@ -24,0 +24,0 @@ 

+164
-71
src/index.css
html, body {
font-weight: 300;
margin: 0;
padding: 0;
font-weight: 300;
margin: 0;
padding: 0;
background: #141414;
color: #CFD3DC;
}
.title {
text-align: center;
font-size: 16px;
background: #3b8dbb;
color: white;
margin: 0;
padding: 1rem;
text-align: center;
color: white;
margin: 0;
width: calc(100% - 20px);
padding: 10px 10px 20px 10px;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
backdrop-filter: saturate(50%) blur(4px);
background-image: radial-gradient(transparent 1px, #141414 1px);
background-size: 4px 4px;
border-bottom: 1px solid #333;
}
.title > .brand {
height: 80px;
width: auto;
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
}
.title > .tips {
font-size: 18px;
color: #c6c6c6;
}
.title > .fork {
width: 40px;
height: 40px;
background-image: url("https://skillnull.com/wp-content/themes/basepress/assets/images/icon/github.png");
background-repeat: no-repeat;
background-size: calc(100% - 5px) calc(100% - 5px);
position: absolute;
right: 0;
top: 0;
background-position: right 5px top 5px;
cursor: pointer;
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
}
.title > .fork > .text {
font-size: 12px;
position: absolute;
left: -50%;
top: 40%;
transform: rotate(45deg) translateY(-50%);
background: white;
width: 180%;
color: black;
text-shadow: 0px 0px 1px #000000;
}
.content {
margin-bottom: 20px;
}
.keyTipBox {
margin: 5px;
word-break: break-all;
word-break: break-all;
}
.keyTipBox > ul > li > .comment {
color: #3d8dbc;
}
.getInfoBox {
display: flex;
flex: 1;
justify-content: flex-start;
align-items: center;
margin: 25px;
display: flex;
flex: 1;
justify-content: flex-start;
align-items: center;
margin: 25px;
}
.getInfoBox textarea {
display: flex;
flex: 4;
height: 35px;
outline: none;
border-radius: 3px;
padding: 5px;
display: flex;
flex: 4;
height: 35px;
outline: none;
border-radius: 3px;
padding: 5px;
box-shadow: 0 0 0 1px #3d8dbc61 inset;
background: transparent;
border: none;
color: #3d8dbc;
font-family: auto;
}
.getInfoBox button {
margin: 0 10px;
width: 60px;
text-align: center;
justify-content: center;
align-items: center;
height: 45px;
border-radius: 3px;
outline: none;
border: 1px solid #3c8dbc;
font-size: 14px;
cursor: pointer;
background-color: #3c8dbc;
color: #fff;
font-weight: 300;
margin: 0 10px;
width: 60px;
text-align: center;
justify-content: center;
align-items: center;
height: 45px;
border-radius: 3px;
outline: none;
border: 1px solid #3d8dbc61;
font-size: 14px;
cursor: pointer;
background-color: transparent;
color: #3d8dbc;
font-weight: 400;
}
.getInfoBox button:hover {
background-color: #387ca8;
border-color: #3d8dbc;
}
#info_box {
word-break: break-all;
word-break: break-all;
}
textarea::placeholder {
padding: 8px;
font-weight: 300;
padding: 8px;
font-weight: 300;
color: #3d8dbc61;
}

@@ -71,49 +130,83 @@

.ball-pulse {
transform: scale(1);
transform: scale(1);
}
.ball-pulse > div:nth-child(1) {
-webkit-animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-webkit-animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(2) {
-webkit-animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-webkit-animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(3) {
-webkit-animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-webkit-animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div {
background-color: #0FB560;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
background-color: #0FB560;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
@keyframes ball-pulse-scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
/*========= end loading =========*/
/*========= end loading =========*/
::-webkit-scrollbar {
width: 2px !important;
height: 2px !important;
}
::-webkit-scrollbar-track {
background-color: #000000 !important;
border-radius: 2px !important;
}
::-webkit-scrollbar-track-piece {
background-color: #000000 !important;
border-radius: 2px !important;
}
::-webkit-scrollbar-thumb {
background: #3d8dbc61 !important;
border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #3d8dbc61 !important;
width: 2px !important;
}
::-webkit-scrollbar-corner {
display: none !important;
}
::-webkit-scrollbar-button {
display: none !important;
}
+38
-30
src/index.html

@@ -9,37 +9,45 @@ <!doctype html>

<title>Get Device Info Online</title>
<link rel="stylesheet" href="index.css?v=20220808">
<link rel="shortcut icon" href="http://skillnull.com/others/images/DeviceJs.ico">
<link rel="bookmark" href="http://skillnull.com/others/images/DeviceJs.ico">
<link rel="stylesheet" href="index.css?v=202410311050">
<link rel="shortcut icon" href="https://skillnull.com/others/images/DeviceJs.ico?v=202410311050">
<link rel="bookmark" href="https://skillnull.com/others/images/DeviceJs.ico?v=202410311050">
</head>
<body>
<div class="title">输入以下想要获取信息的key，多个key用逗号相隔, 为空则显示全部</div>
<div class="keyTipBox">
<ul>
<li>deviceType // 设备类型</li>
<li>OS // 操作系统</li>
<li>OSVersion // 操作系统版本</li>
<li>platform // 操作系统平台</li>
<li>screenHeight // 屏幕高</li>
<li>screenWidth // 屏幕宽</li>
<li>language // 当前使用的语言-国家</li>
<li>netWork // 联网类型</li>
<li>orientation // 横竖屏</li>
<li>browserInfo // 浏览器信息</li>
<li>fingerprint // 浏览器指纹</li>
<li>userAgent // 包含 appCodeName,appName,appVersion,language,platform 等</li>
<li>geoPosition // 地理位置</li>
<li>date // 阳历日期时间</li>
<li>lunarDate // 阴历日期</li>
<li>week // 周几</li>
<li>UUID // 通用唯一标识 Universally Unique Identifier</li>
</ul>
<div class="title">
<img src="http://skillnull.com/others/images/DeviceJs.png?v=202410311050" alt="" class="brand">
<div class="tips">输入以下想要获取信息的key，多个key用逗号相隔, 为空则显示全部</div>
<div class="fork" onclick="fork()">
<div class="text">FORK</div>
</div>
</div>
<div class="getInfoBox">
<textarea id="info_input" placeholder="为空默认显示全部信息"></textarea>
<button onclick="getInfo()">获取</button>
<div class="content">
<div class="keyTipBox">
<ul>
<li>deviceType <span class="comment">// 设备类型</span></li>
<li>OS <span class="comment">// 操作系统</span></li>
<li>OSVersion <span class="comment">// 操作系统版本</span></li>
<li>platform <span class="comment">// 操作系统平台</span></li>
<li>screenHeight <span class="comment">// 屏幕高</span></li>
<li>screenWidth <span class="comment">// 屏幕宽</span></li>
<li>language <span class="comment">// 当前使用的语言-国家</span></li>
<li>netWork <span class="comment">// 联网类型</span></li>
<li>orientation <span class="comment">// 横竖屏</span></li>
<li>browserInfo <span class="comment">// 浏览器信息</span></li>
<li>fingerprint <span class="comment">// 浏览器指纹</span></li>
<li>userAgent <span class="comment">// 包含 appCodeName,appName,appVersion,language,platform 等</span></li>
<li>geoPosition <span class="comment">// 地理位置</span></li>
<li>date <span class="comment">// 阳历日期时间</span></li>
<li>lunarDate <span class="comment">// 阴历日期</span></li>
<li>week <span class="comment">// 周几</span></li>
<li>UUID <span class="comment">// 通用唯一标识 Universally Unique Identifier</span></li>
</ul>
</div>
<div class="getInfoBox">
<textarea id="info_input" placeholder="为空默认显示全部信息"></textarea>
<button onclick="getInfo()">获取</button>
</div>
<div id="info_box"></div>
</div>
<div id="info_box"></div>
<script src="./device.js" type="module"></script>
<script src="./index.js"></script>
<script src="./device.js?v=202410311050" type="module"></script>
<script src="./index.js?v=202410311050"></script>
</body>
</html>
+20
-4
src/index.js

@@ -11,3 +11,2 @@ let proxy = new Proxy({}, {

domain: 'https://www.skillnull.com',
// transferDateToLunar: '2023/1/30',
info: value && value.split(',')

@@ -17,4 +16,4 @@ }).then(infoResult => {

for (let i in infoResult) {
let value = infoResult[i]
if (i === 'lunarDate'){
let value = infoResult[i]
if (i === 'lunarDate') {
value = `${infoResult[i].year} ${infoResult[i].chineseZodiac} ${infoResult[i].month}${infoResult[i].day}`

@@ -26,3 +25,3 @@ }

' <span style="margin:0 1px;">:</span>' +
' <span style="color: red;">' + value + '</span>' +
' <span style="color: #3d8dbc;">' + value + '</span>' +
'</li>')

@@ -43,1 +42,18 @@ }

}
const fork = () => {
window.open('https://github.com/skillnull/DeviceJs')
}
const setTopDistance = () => {
const title = document.querySelector('.title')
const title_height = title.getBoundingClientRect().height
const keyTipBox = document.querySelector('.content')
keyTipBox.style.paddingTop = title_height + 'px'
}
setTopDistance()
window.addEventListener('resize', () => {
setTopDistance()
})