首页
资源
友链
骗子QQ
关于我们
归档
壁纸
Search
1
一为导航主题热榜api免费可用API
39,605 阅读
2
喜欢网络免费分享可用500个5刀ChatGPT的API key
1,904 阅读
3
照片转漫画 selfie 版本V6.3.9063
1,509 阅读
4
宝塔面板网站缓存优化必装插件和扩展推荐
1,287 阅读
5
Mirillis Action! v4.32.0便携版
942 阅读
默认
软件
电脑软件
手机软件
技术
源码
问答
大事件
公告
登录
/
注册
找到
129
篇与
站长可乐
相关的结果
- 第 6 页
2024-09-16
博主称“纯血鸿蒙”测试版更新快得离谱 9月底推出正式版
自从华为HarmonyOS NEXT系统公布后，人们对新系统就非常的关注，由于新系统是鸿蒙抛弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本，仅支持鸿蒙内核和鸿蒙系统的应用，因此也被人们称之为“纯血鸿蒙”。9月15日，有博主又透露了有关“纯血鸿蒙”的消息。 博主称“纯血鸿蒙”测试版更新快得离谱 9月底推出正式版图片 该数码博主发文称，HarmonyOS NEXT Beta（测试版）最近更新速度快的离谱，自己博文都还没编辑完，就又更新了。此外，他还透露， 博主称“纯血鸿蒙”测试版更新快得离谱 9月底推出正式版图片 报道称，华为鸿蒙行业解决方案总经理陈欣欣在2024年中国国际服务贸易交易会上透露，华为“纯血”鸿蒙系统HarmonyOS NEXT将于今年9月底推出正式版本。值得注意的是，前几天京东官方还宣布，京东鸿蒙原生应用正式版计划9月上架，这也侧面证实了9月发布HarmonyOS NEXT正式版的说法。 目前，华为正在进行新系统的内部测试，并且还在上个月启动了大批的HarmonyOS NEXT Beta版用户招募。根据参与测试的博主透露的消息，HarmonyOS NEXT流畅度极高，而且目前基本已经覆盖了主流日常应用，日常使用基本没有影响。而根据爆料消息称，华为下半年旗舰新机Mate70系列很可能会首发HarmonyOS NEXT。
大事件
站长可乐
1年前
0
292
0
2024-09-16
纸飞机（可复制源代码）
640 (1).gif图片 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纸飞机</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <link rel="stylesheet" href="./22-纸飞机.css"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 100 2100 1000'> <g fill='none' stroke='#674C99' stroke-width='15' stroke-linecap='round'> <line class="line" stroke-dashoffset="5208.54" stroke-dasharray="0 500 150 1150 200 604.27" x1="2723" y1="-83" x2="816.3" y2="1690.9" /> <line class="line" stroke-dashoffset="5372.94" stroke-dasharray="300 1000 200 1186.4" x1="2448.3" y1="-94.4" x2="408.9" y2="1654.3" /> <line class="line" stroke-dashoffset="5628.66" stroke-dasharray="200 1214.33 300 1100" x1="2187.4" y1="-87.6" x2="-38.7" y2="1634.3" /> <line class="line" stroke-dashoffset="5843.54" stroke-dasharray="10 490 100 1321.77 400 600" x1="1978.6" y1="-87.8" x2="-379.6" y2="1637.2" /> </g> <path class="shadow" fill='#674C99' d='M1528,665l-221.8,141c-2,1-2,5,0,7l120,60c2,1,4.6,0,5-1l101-201.2C1536.1,667,1531.7,663.1,1528,665z' /> <g class="plane-body"> <path fill='#56C2FF' d='M1131,516.3l297-38c3,0,5.6,4,2,6l-133,97c0,0-2,0.9-3,0l-163-58C1127,522,1127,516,1131,516.3z' /> <path fill='#6B6BD9' d='M1689,302l-349,423c-2,2.9-7,1-8-1l-40-138c0-1,0-3,1-5l390-284C1687,291,1692,297,1689,302z' /> <path fill='#9A9AE3' d='M1336,603.7l-2,119c0,2,3,4,5,1l349-423c2-2-1-6.7-4-4l-347,303C1336.6,602,1336,602,1336,603.7z' /> <path fill='#8FECFF' d='M1132,514l564-234c2,0,3,2,1,3l-266,195.8c0,0-0.6,0,0,0l-297,38C1130,518,1130,515,1132,514z' /> <path fill='#CDB3FF' d='M1705,279l-241,211.9c-1,0-1,2-0.7,3l116,239c1,2,4,2,5,0l124-451C1710,279,1707,277.8,1705,279z' /> <path fill='#AD81FF' d='M1341,597l120-104c1-1,3,0,4,0l115.8,238c1,2-1,4-3,3l-236-133c-4.8,2-4.8,0-3.8-2L1341,597z' /> </g> </svg> </body> <script> const planeBody = document.querySelector('.plane-body'); const shadow = document.querySelector('.shadow'); const lines = Array.from(document.querySelectorAll('.line')); planeTl = gsap.timeline({ repeat: -1 }) .to(planeBody, { duration: 1.5, y: 65, ease: 'none' }) .to(shadow, { duration: 1.5, scale: 1.2, transformOrigin: 'center center', ease: 'none' }, 0) .to(planeBody, { duration: 2.5, y: 0, ease: 'power2.out' }, 1.5) .to(shadow, { duration: 2.5, scale: 1, transformOrigin: 'center center', ease: 'power2.out' }, 1.5); lines.forEach((l) => { planeTl.to(l, { duration: 4, attr: { 'stroke-dashoffset': 0 }, ease: 'none' }, 0) }) </script> </html>
源码
站长可乐
1年前
0
246
0
2024-09-13
一个页面将图片链接直接转换带统一描述的img标签
因为最近在维护一个图片站，但是转载图片的时候会面临有很多的样式会被转载过来，所以我直接通过我自己编写的图像代码生成器直接处理复制下来的图片代码，以下是前端样式： http://likeweb.ltd/usr/uploads/2024/09/3489242918.png图片 效果就是输入图片链接或者包含图片链接的代码时，系统会自动识别图片链接并生成img标签的html代码。 完整代码详见一个页面将图片链接直接转换带统一描述的img标签
默认
站长可乐
1年前
0
296
0
2024-09-13
X64 Windows版微信防撤回v7.0 绿色版
图片 工具介绍 这是一款微信防撤回工具，现版本在可编辑上进行了升级， 弥补需要点击列表的不足。关于撤回的时间是获取百度的北京时间， 不是获取本地时间。在获取的同时会进行联网请求，除此之外，没有任何联网请求。 食用方法 1.直接运行软件 2.选择你需要的选项 3.软件运行以后在直接运行WX 4.当出现一些信息以后就可以了.接下来你可以直接关闭软件。 不影响撤回效果。如果一直运行软件则会有相关的显示方式. 5.本程序只支持X64版本的微信，按理来说不会因为版本影响。 6.如果你可以多开，那么当前程序则可以则处理你运行的WX不受个数限制 7.关于报毒的问题，我在此只能说。这个我没办法，但是我敢保证没有病毒。 8.关于开机启动这个问题，我WIN11试了也没啥问题。 不知道为什么有的朋友没有效果9.如果打开程序，运行微信没有出现任何信息的话， 请检查版本是否64或者检查是否有管理权限 10.带编辑转圈这个问题，我目前只能用弹出消息的方式让你第一时间知道。 目前这个问题我后续会处理11.XML配置是保存你个人习惯， 每次打开不用每次设置你需要的选项 下载地址 https://lightweb.lanzout.com/iwsIR29wt7mh
电脑软件
# 微信
# 防撤回
站长可乐
1年前
0
307
0
2024-09-10
小程序纯CSS实现用户中奖名单无限滚动 + JS随机生成中奖用户名称
CSS无限滚动中奖人员名单，保持一个理念能用css实现的东西坚决不用js； 滚动的核心3个容器和animation动画 <template> <view> <!-- 外围容器 --> <view class="one"> <!-- 人员列表容器 --> <view class="two"></view> <!-- 重复人员列表容器是实现无缝滚动 --> <view class="two"> </view> </view> </view> </template> <style> .two { animation: myAnimation 16s infinite linear; width: 100%; } /* 滚动动画 */ @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } </style>预览 640.gif图片 案例 可直接复制代码到uni-app项目中预览，或者手动修改for循环也可以在原生小程序中预览 <template> <view> <view class="title">中奖名单</view> <!-- 列表 --> <view class="swier"> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> <!-- 重复人员名称实现无缝滚动 --> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { usernames: [], timeDatas: [], }; }, onLoad() { // 用户名称 40是数量 this.generateNames(40); // 生产不大于现在的时间 this.generTiem(); }, methods: { // 用户名生成 getRandomChar() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz天地玄黄宇宙洪日月盈昃辰宿列寒来暑往秋收冬闰余成岁律吕调云腾致雨露结霜金生丽水玉出昆剑号巨阙珠称光果珍李柰菜重芥海咸河淡鳞潜羽龙师火帝鸟官人始制文字乃服衣推位让国有虞陶吊民伐罪周发殷坐朝问1234567890'; return chars.charAt(Math.floor(Math.random() * chars.length)); }, getRandomName() { const length = Math.floor(Math.random() * 10) + 5; // 名字长度在5到14之间 const halfLength = Math.floor(length / 2); let name = ''; // 生成前半部分 for (let i = 0; i < halfLength; i++) { name += this.getRandomChar(); } // 添加4个星号 name += '****'; // 生成后半部分 for (let i = 0; i < length - halfLength - 4; i++) { name += this.getRandomChar(); } return name; }, generateNames(count) { for (let i = 0; i < count; i++) { this.usernames.push(this.getRandomName()); } }, generTiem() { // 获取当前日期和时间 function getCurrentDateTime() { const now = new Date(); return now; } // 生成随机时间段（返回Date对象，不晚于当前时间） function getRandomTimeIntervalForTodayUpToNow() { const now = new Date(); const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当天的开始时间 // 生成从startOfDay到now之间的随机时间戳 const randomTimestamp = startOfDay.getTime() + Math.random() * (now - startOfDay); return new Date(randomTimestamp); } // 生成40个随机时间段并按时间从大到小排序 function generateAndSortRandomDateTimes(num) { const dateTimes = []; for (let i = 0; i < num; i++) { const randomDateTime = getRandomTimeIntervalForTodayUpToNow(); dateTimes.push(randomDateTime); } // 按时间从大到小排序 dateTimes.sort((a, b) => b - a); // 格式化输出为 YYYY-MM-DD HH:MM:SS return dateTimes.map(date => date.toISOString().slice(0, 19).replace('T', ' ')); } const currentDateTime = getCurrentDateTime(); const randomDateTimes = generateAndSortRandomDateTimes(40); this.timeDatas = randomDateTimes; } }, }; </script> <style> /* 状态栏 */ .nut-navbar { background-color: #ffffff !important; } /* 顶部图片 */ .win-box-img { height: 600rpx; border-radius: 40rpx; overflow: hidden; margin: 30rpx; box-shadow: 2rpx 0 20rpx rgba(0, 0, 0, 0.5); } /* 标题 */ .title { margin: 60rpx 30rpx 30rpx 30rpx; font-size: 40rpx; font-weight: bold; } .swier { height: 800rpx; overflow: hidden; } .swier-gun { animation: myAnimation 16s infinite linear; width: 100%; } @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } .user-view { display: flex; margin: 30rpx; } .user-img { width: 80rpx; height: 80rpx; border-radius: 200rpx; flex-shrink: 0; margin-right: 30rpx; background-color: red; } .user-suo { color: #777E90; margin: 0 10rpx; } .user-name { font-size: 28rpx; } .user-time { font-size: 24rpx; } </style>转载自枫瑞博客网
源码
# css
# 小程序
站长可乐
1年前
0
293
0
2024-09-09
简单的html代码做一个数码管钟（可复制源代码）
效果展示 640.gif图片 源码分享 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数码管钟</title> <style> @import url('https://fonts.cdnfonts.com/css/lcd');*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;background:linear-gradient(#040909 60vh,#312c2a 80vh);font-family:'LCD',sans-serif;font-family:'LCD2',sans-serif;font-family:'LCDMono2',sans-serif;font-family:'LCDMono',sans-serif;font-family:'Digitalism',sans-serif;--_refl:#f3eeef;--_bloom:#fcfbf9;--_y1:#fae8a5;--_y2:#fbd608;--_o1:#ff8f0c;--_o2:#e74702;--_o3:#b32801;--mw1:#d0d5d7;--m1:#fdea09;--m2:#e46703;--m3:#ac2a04}#noise-svg{height:100%;width:100%;opacity:0.12;position:absolute;z-index:100;pointer-events:none}#noise-rect{width:100vw;height:100vh}.clock{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--_size) * 0.01);--_factor:min(600px,80vh);--_size:min(var(--_factor),80vw)}.shadow{position:absolute;bottom:0;top:0;margin:auto;width:100%;height:0em;translate:0 45em;box-shadow:0 0 3em 2em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0.6}.shadow::before{content:'';display:block;position:absolute;left:0;right:0;margin:auto;height:20em;width:0;box-shadow:0 0 8em 4em var(--_y1),0 0 8em 6em var(--_y2),0 0 8em 8em var(--_o1),0 0 8em 10em var(--_o2),0 0 8em 12em var(--_o3)}.shadow::after{content:'';display:block;position:absolute;z-index:-1;opacity:0.5;left:0;right:0;margin:auto;border-radius:50%;height:10em;width:10em;border:2px solid red;transform:rotateX(70deg);box-shadow:0 0em 12em 40em var(--_o1),0 0em 12em 60em var(--_o2),0 0em 12em 80em var(--_o3)}.clock.off .shadow{box-shadow:0 0 4em 3em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0}.outer-pipe{position:absolute;z-index:2;width:calc(var(--_size) * (8/15));height:var(--_size);border-radius:20% / 10%;overflow:hidden;opacity:1;--_clip-btm:85.8%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.inner-pipe{width:100%;height:100%;scale:0.84 0.91;border-radius:15% / 7%;box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em var(--m3),0em 1.2em 1em 0.5em var(--m2),0em 1.2em 0.5em 1.2em var(--m1),0em 1.2em 1.2em 1.5em var(--m2),0em 1.2em 2em 2em var(--m3),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.pipe-accents{width:calc(var(--_size) * (8/15));height:var(--_size);position:absolute}.pipe-accents .top-tube,.pipe-accents .top,.pipe-accents .topinset,.pipe-accents .left,.pipe-accents .right{z-index:3}.pipe-accents .top-tube{position:absolute;top:3%;left:0;right:0;margin:auto;width:16%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .tube-holders{position:absolute;width:26em;height:70em;translate:0 -7em;margin:auto;left:0;right:0;top:0;bottom:0;z-index:2}.pipe-accents .tube-holders div{position:absolute;width:3em;height:3em;border-radius:50%;--_metal-1:#30241d;--_metal-2:#000000;--_metal-3:#5f5f5f;--_vl:-8%;background:conic-gradient(from 0deg at 50% 50%,var(--_metal-1) 0%,var(--_metal-2) 7%,var(--_metal-1) 21%,var(--_metal-2) 35%,var(--_metal-2) 42%,var(--_metal-3) 56%,var(--_metal-1) 63%,var(--_metal-1) 70%,var(--_metal-2) 77%,var(--_metal-3) 84%,var(--_metal-2) 91%,var(--_metal-1) 100%);box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3)}.pipe-accents .tube-holders div:nth-child(1){top:12%;left:var(--_vl);rotate:-65deg}.pipe-accents .tube-holders div:nth-child(2){top:12%;right:var(--_vl);rotate:65deg}.pipe-accents .tube-holders div:nth-child(3){top:26%;left:var(--_vl);rotate:-85deg}.pipe-accents .tube-holders div:nth-child(4){top:26%;right:var(--_vl);rotate:85deg}.pipe-accents .tube-holders div:nth-child(5){top:78.5%;left:var(--_vl);rotate:-115deg}.pipe-accents .tube-holders div:nth-child(6){top:78.5%;right:var(--_vl);rotate:115deg}.pipe-accents .top{position:absolute;top:-0.7%;left:0;right:0;margin:auto;width:22%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .topinset{position:absolute;top:-1.7%;left:0;right:0;margin:auto;width:14%;height:8%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:50%}.pipe-accents .topinset::before{content:'';display:block;width:50%;height:50%;border-radius:50%;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;box-shadow:inset 0 0 0em 0.1em #040909,0 0 0.5em 0.1em var(--_bloom),inset 0 0 1.3em 0.2em var(--_o3),inset 0 0 1.3em 0.4em var(--_o2),inset 0 0 1.3em 0.6em var(--_o1),inset 0 0 1.3em 2em var(--_y1);animation:5s flicker linear infinite}@keyframes flicker{0%{opacity:1}10%{opacity:1}11%{opacity:0.8}12%{opacity:1}65%{opacity:1}66%{opacity:0.7}67%{opacity:0.9}68%{opacity:1}69%{opacity:0.4}70%{opacity:1}100%{top:1}}.pipe-accents .left,.pipe-accents .right{width:100%;height:100%;position:absolute}.pipe-accents .left div,.pipe-accents .right div{--_pipe-pos-x:-3%;position:absolute;margin:auto;width:14%;height:2.4%;border-radius:0.7em;background:#040909}.pipe-accents .left div:nth-child(1){top:16%;left:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em var(--m3),inset -1em -0.5em 0.9em -0.5em var(--m2),inset -1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .left div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:40%;rotate:5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.5em 0.3em -0.5em var(--m3),inset 1em -0.5em 0.4em -0.3em var(--m2),inset 1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .left div:nth-child(2){top:26%;left:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em var(--m3),inset -1em 0em 0.9em 0em var(--m2),inset -1em 0em 1em 0.1em var(--m1)}.pipe-accents .left div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:0%;rotate:2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.1em 0.3em 0em var(--m3),inset 1em -0.1em 0.4em 0.2em var(--m2),inset 1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .left div:nth-child(3){top:64%;left:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em var(--m3),inset -1em 0.3em 0.9em -0.3em var(--m2),inset -1em 0.3em 1em 0em var(--m1)}.pipe-accents .left div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:20%;rotate:-4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em 0.2em 0.3em -0.1em var(--m3),inset 1em 0.2em 0.4em 0em var(--m2),inset 1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .right div:nth-child(1){top:16%;right:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em var(--m3),inset 1em -0.5em 0.9em -0.5em var(--m2),inset 1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .right div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:40%;rotate:-5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.5em 0.3em -0.5em var(--m3),inset -1em -0.5em 0.4em -0.3em var(--m2),inset -1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .right div:nth-child(2){top:26%;right:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em var(--m3),inset 1em 0em 0.9em 0em var(--m2),inset 1em 0em 1em 0.1em var(--m1)}.pipe-accents .right div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:0%;rotate:-2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.1em 0.3em 0em var(--m3),inset -1em -0.1em 0.4em 0.2em var(--m2),inset -1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .right div:nth-child(3){top:64%;right:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em var(--m3),inset 1em 0.3em 0.9em -0.3em var(--m2),inset 1em 0.3em 1em 0em var(--m1)}.pipe-accents .right div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:20%;rotate:4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em 0.2em 0.3em -0.1em var(--m3),inset -1em 0.2em 0.4em 0em var(--m2),inset -1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .bottom-left{position:absolute;bottom:12%;left:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-left::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right{position:absolute;bottom:12%;right:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.small-outer-pipe{position:absolute;translate:0 -5.6%;width:calc(var(--_size) * (1/2.7));height:calc(var(--_size) * 0.87);border-radius:40% / 10%;overflow:hidden;opacity:1;--_clip-btm:96%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm));border-top:0.3em solid var(--mw1)}.small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em var(--m3),0em 1em 1em 0.5em var(--m2),0em 1em 0.5em 1.2em var(--m1),0em 1em 1.2em 1.5em var(--m2),0em 1em 2em 2em var(--m3),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.base-container{position:absolute;width:calc(var(--_size) * (8/15));height:var(--_size)}.base-container .base{width:100%;height:100%;position:absolute}.base-container .base div{background:#040909;position:absolute;bottom:4%;left:-10%;width:120%;height:12%;border-radius:40% 40% / 30% 30%;box-shadow:0 2em 2em -1.4em #000,inset -0.4em 0.1em 0.8em -0.2em var(--mw1)}.base-container .base div::before{content:"";display:block;width:100%;height:50%;border-radius:100%;box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em var(--m3),inset 0em 0em 1em 2em var(--m2),inset 1em 0.3em 10em 10em var(--m1)}.display{color:var(--_bloom);font-size:14em;line-height:0.8em;translate:0 -0.4em}.display .row{display:flex}.display .small-row{font-size:0.3em;position:absolute;right:-22%;top:10%}.display .small-row .row{flex-direction:column;line-height:1.02em}.display .row .col{display:flex;position:relative}.display .row .col>div:nth-child(1){opacity:0.2}.display .row .col>div:nth-child(2){position:absolute;right:0;z-index:2}.display .row .col>div:nth-child(3){position:absolute;right:0;color:var(--_bloom);--_o1-size:0.1em;--_o2-size:0.4em;--_o3-size:0.6em;text-shadow:0em 0em 0.04em var(--_bloom),0em 0em 0.04em var(--_bloom),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1)}.glass-tube{position:absolute;width:26em;height:70em;translate:0 -7em;border-radius:1000px;box-shadow:0em 0em 1em -0.2em var(--m1),0em 0em 2em -0.4em var(--m2),0em 0em 3em -0.4em var(--m2),inset 0em 0em 0.4em 0.2em var(--m3),inset 0em 0em 0.6em 0.4em var(--m2),inset 0em 0em 1em 0.7em var(--m1),inset 0em 0em 3em 0em var(--m2),inset 0em 0em 5em 1em var(--m3),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.glass-tube::before{content:"";display:block;width:6%;opacity:0.9;height:60%;box-shadow:inset 1.5em 0em 1em -1em var(--mw1);position:absolute;left:4%;top:16%;filter:blur(0.6px);opacity:0.8;border-radius:50% 1% / 50% 100%}.glass-tube::after{content:"";display:block;width:30%;opacity:0.9;height:60%;box-shadow:inset -1em 0.5em 1em -1em var(--mw1);position:absolute;right:4%;top:4%;filter:blur(0.6px);opacity:1;border-radius:0% 100% / 10% 30%}.hex{position:absolute;width:17.7em;height:70em;translate:0 -7em;border-radius:1000px;overflow:hidden;z-index:-1;opacity:0.7;--_hex-cl1:#040909;--_hex-cl2:var(--_o1);--_hex-size:2.18em;background:radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl1) 23.5%,rgba(240,166,17,0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl2) 24%,rgba(240,166,17,0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),linear-gradient(var(--_hex-cl1) 14%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 85%,var(--_hex-cl1) 0)0 0,linear-gradient(150deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(30deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(90deg,var(--_hex-cl2) 2%,var(--_hex-cl1) 0,var(--_hex-cl1) 98%,var(--_hex-cl2) 0%)0 0 var(--_hex-cl1);background-size:calc(2*var(--_hex-size)) calc(3*var(--_hex-size))}.hex .overlay{position:absolute;background:#fff;mix-blend-mode:overlay;width:200%;left:-40%;height:12%;rotate:40deg;animation:5s electric ease-in infinite}@keyframes electric{0%{top:700%}100%{top:-20%}}.tube-base-container{position:absolute;width:34em;height:30em;translate:0 24em}.tube-base{position:absolute;bottom:4%;width:60%;height:20%;background:#040909;left:0;right:0;margin:auto;border-radius:80% / 40%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em var(--m3),inset 0em 3em 3.9em -2.3em var(--m2),inset 0em 3em 4em -2em var(--m1)}.tube-base::before{display:block;content:'';width:99%;height:42%;background:#040909;border-radius:50%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em var(--m3),inset 0em 0em 1.9em -0.3em var(--m2),inset 0em 0em 2em -0em var(--m1)}.tube-btm{width:40%;height:10%;position:absolute;left:0;right:0;margin:auto;bottom:34%;background-color:#040909;border-radius:20% 20% 100% 100%;box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em var(--m1),inset 0em 0.3em 1.2em 0.3em var(--m2),inset 0em 0.3em 1.2em 0.6em var(--m3)}.tube-btm::before{content:'';display:block;width:60%;height:40%;position:absolute;left:0;right:0;margin:auto;bottom:-158%;border-radius:30% 30% 100% 100%;background-color:#040909;box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.rods{width:50%;height:28%;position:absolute;left:0;right:0;margin:auto;bottom:14%;--_clip-btm:80%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.rods .left-rod{width:60%;height:12%;rotate:60deg;position:absolute;bottom:40%;left:0;background:#040909}.rods .center-rod{width:30%;height:12%;rotate:90deg;position:absolute;bottom:40%;right:0;left:0;margin:auto;background:#040909}.rods .right-rod{width:60%;height:12%;rotate:-60deg;position:absolute;bottom:40%;right:0;background:#040909}.rods .left-rod,.rods .center-rod,.rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.wires{width:100%;height:100%;z-index:-1}.wires div:nth-child(1),.wires div:nth-child(2){width:18%;height:18%;rotate:25deg;translate:14em -5em;position:absolute;bottom:0;box-shadow:inset 0em 0.1em 0.4em 0em var(--mw1),inset 0 0 0 0.5em #040909;border-radius:0% 100% / 50% 100%}.wires div:nth-child(2){translate:15em -8em;rotate:122deg;scale:0.7}.button{position:absolute;width:4em;height:4em;border-radius:50%;translate:0 0em;left:0;right:0;margin:auto;top:0;bottom:0;translate:0 43em;z-index:100;cursor:pointer;background:var(--_bloom);box-shadow:0em -0.1em 0.2em 0em var(--_o1),0em -0.1em 0.2em 0.1em var(--_o2),0em -0.1em 0.2em 0.2em var(--_o3),0em -0.1em 1em 0.5em var(--_bloom),inset 0em 0em 1em 0em var(--_o3),inset 0em 0em 1em 0.5em var(--_o2),inset 0em 0em 1em 1em var(--_o1);filter:blur(1px)}.power-cord{z-index:-1;scale:1.4 0.9;position:absolute;width:100%;height:50em;top:0;bottom:0;margin:auto;translate:-36em 44em;transform:rotateX(55deg) rotateZ(-64deg)}.power-cord div:nth-child(1){width:20em;height:18em;box-shadow:0.3em 0.3em 0.2em 0.1em rgba(255,255,255,0.2);border-bottom:6px solid #040909;border-right:4px solid #040909;position:absolute;left:0;right:0;translate:39.3em 0em;margin:auto;bottom:4%;border-radius:100% 30% / 100% 0}.power-cord div:nth-child(2){width:20em;height:12em;box-shadow:inset 0.3em 0.1em 0.2em -0.1em rgba(255,255,255,0.2);border-top:3px solid #04090977;border-left:4px solid #040909;position:absolute;translate:58em 0.2em;left:0;right:0;margin:auto;bottom:40%;border-radius:100% 30% / 100% 0}*,*:before,*:after{transition:box-shadow 0.2s ease-in-out,opacity 0.2s ease-in-out;user-select:none}.clock.off .hex{opacity:0.3;filter:grayscale(1)}.clock.off .hex .overlay{display:none}.clock.off .pipe-accents .top-tube,.clock.off .pipe-accents .top,.clock.off .pipe-accents .topinset{box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .topinset::before{box-shadow:inset 0 0 0em 0.1em #040909,-0.1em 0.2em 0.7em 0.1em rgba(255,255,255,0.4),inset 0 0 1.3em 0.2em rgba(0,0,0,0),inset 0 0 1.3em 0.4em rgba(0,0,0,0),inset 0 0 1.3em 0.6em rgba(0,0,0,0),inset 0 0 1.3em 2em rgba(0,0,0,0);animation-play-state:paused}.clock.off .pipe-accents .tube-holders div{box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .inner-pipe{box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em rgba(0,0,0,0),0em 1.2em 1em 0.5em rgba(0,0,0,0),0em 1.2em 0.5em 1.2em rgba(0,0,0,0),0em 1.2em 1.2em 1.5em rgba(0,0,0,0),0em 1.2em 2em 2em rgba(0,0,0,0),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em rgba(0,0,0,0),0em 1em 1em 0.5em rgba(0,0,0,0),0em 1em 0.5em 1.2em rgba(0,0,0,0),0em 1em 1.2em 1.5em rgba(0,0,0,0),0em 1em 2em 2em rgba(0,0,0,0),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .pipe-accents .bottom-left{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-left::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset -1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset -1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1)::before,.clock.off .pipe-accents .left div:nth-child(2)::before,.clock.off .pipe-accents .left div:nth-child(3)::before,.clock.off .pipe-accents .right div:nth-child(1)::before,.clock.off .pipe-accents .right div:nth-child(2)::before,.clock.off .pipe-accents .right div:nth-child(3)::before{box-shadow:inset 0em 0.3em 0.6em -0.3em var(--mw1),inset 1em -0.5em 0.3em -0.5em rgba(0,0,0,0),inset 1em -0.5em 0.4em -0.3em rgba(0,0,0,0),inset 1em -0.5em 0.6em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em rgba(0,0,0,0),inset -1em 0em 0.9em 0em rgba(0,0,0,0),inset -1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset -1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset -1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset 1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset 1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em rgba(0,0,0,0),inset 1em 0em 0.9em 0em rgba(0,0,0,0),inset 1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset 1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset 1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .base-container .base div::before{box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em rgba(0,0,0,0),inset 0em 0em 1em 2em rgba(0,0,0,0),inset 1em 0.3em 10em 10em rgba(0,0,0,0)}.clock.off .display .row .col>div:nth-child(2){opacity:0}.clock.off .display .row .col>div:nth-child(3){opacity:0}.clock.off .glass-tube{box-shadow:0em 0em 1em -0.2em rgba(0,0,0,0),0em 0em 2em -0.4em rgba(0,0,0,0),0em 0em 3em -0.4em rgba(0,0,0,0),inset 0em 0em 0.4em 0.2em rgba(0,0,0,0),inset 0em 0em 0.6em 0.4em rgba(0,0,0,0),inset 0em 0em 1em 0.7em rgba(0,0,0,0),inset 0em 0em 3em 0em rgba(0,0,0,0),inset 0em 0em 5em 1em rgba(0,0,0,0),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.clock.off .tube-base{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em rgba(0,0,0,0),inset 0em 3em 3.9em -2.3em rgba(0,0,0,0),inset 0em 3em 4em -2em rgba(0,0,0,0)}.clock.off .tube-base::before{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em rgba(0,0,0,0),inset 0em 0em 1.9em -0.3em rgba(0,0,0,0),inset 0em 0em 2em -0em rgba(0,0,0,0)}.clock.off .tube-btm{box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.3em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.6em rgba(0,0,0,0)}.clock.off .tube-btm::before{box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .rods .left-rod,.clock.off .rods .center-rod,.clock.off .rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .wires div:nth-child(1),.clock.off .wires div:nth-child(2){box-shadow:inset 0em 0.1em 0.4em -0.1em var(--mw1),inset 0 0 0 0.5em #040909}.clock.off .button{background:#8d8d8d;box-shadow:0em -0.1em 0.2em 0em #040909,0em -0.1em 0.2em 0.1em #040909,0em 0em 1em 0.5em var(--_bloom),0em -0.1em 1em 0.5em #040909,inset 0em 0em 1em 0em var(--mw1),inset 0em 0em 1em 0.5em var(--mw1),inset 0em 0em 1em 1em var(--mw1);filter:blur(0.7px);animation:5s flicker linear infinite} </style> </head> <body> <svg id="noise-svg"> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' /> </filter> <rect id="noise-rect" filter='url(#noiseFilter)' /> </svg> <div class="clock off"> <div class="shadow"></div> <div class="base-container"> <div class="base"> <div></div> </div> </div> <div class="small-outer-pipe"> <div class="small-inner-pipe"></div> </div> <div class="outer-pipe"> <div class="inner-pipe"></div> </div> <div class="pipe-accents"> <div class="top-tube"></div> <div class="tube-holders"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="top"></div> <div class="topinset"></div> <div class="left"> <div></div> <div></div> <div></div> </div> <div class="right"> <div></div> <div></div> <div></div> </div> <div class="bottom-left"></div> <div class="bottom-right"></div> </div> <div class="display"> <div class="row"> <div class="col"> <div>8</div> <div id="char01">0</div> <div id="char02">0</div> </div> <div class="col"> <div>8</div> <div id="char11">0</div> <div id="char12">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char21">0</div> <div id="char22">0</div> </div> <div class="col"> <div>8</div> <div id="char31">0</div> <div id="char32">0</div> </div> </div> <div style="height: 0.2em;"></div> <div class="small-row"> <div class="row"> <div class="col"> <div>8</div> <div id="char41">0</div> <div id="char42">0</div> </div> <div class="col"> <div>8</div> <div id="char51">0</div> <div id="char52">0</div> </div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char61">0</div> <div id="char62">0</div> </div> <div class="col"> <div>8</div> <div id="char71">0</div> <div id="char72">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char81">0</div> <div id="char82">0</div> </div> <div class="col"> <div>8</div> <div id="char91">0</div> <div id="char92">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char101">0</div> <div id="char102">0</div> </div> <div class="col"> <div>8</div> <div id="char111">0</div> <div id="char112">0</div> </div> </div> </div> <div class="glass-tube"></div> <div class="hex"> <div class="overlay"></div> </div> <div class="tube-base-container"> <div class="wires"> <div></div> <div></div> </div> <div class="tube-base"></div> <div class="rods"> <div class="left-rod"></div> <div class="center-rod"></div> <div class="right-rod"></div> </div> <div class="tube-btm"></div> </div> <div class="power-cord"> <div></div> <div></div> </div> <div class="button" onclick="body.querySelector('.clock').classList.toggle('off')"> <div></div> </div> </div> </body> <script> function updateTimeAndDate(){const now=new Date();let hours=now.getHours();const minutes=now.getMinutes().toString().padStart(2,'0');let amPm=hours>=12?'PM':'AM';if(hours>12){hours-=12}else if(hours===0){hours=12}let timeStr=hours.toString().padStart(2,'0')+minutes;if(timeStr.startsWith('0')){timeStr=' '+timeStr.slice(1)}let month=(now.getMonth()+1).toString().padStart(2,'0');let day=now.getDate().toString().padStart(2,'0');const year=now.getFullYear().toString().slice(-2);if(month.startsWith('0')){month=' '+month.slice(1)}if(day.startsWith('0')){day=' '+day.slice(1)}const displayStr=timeStr+amPm+month+day+year;for(let i=0;i<12;i++){document.getElementById('char'+i+'1').textContent=displayStr[i];document.getElementById('char'+i+'2').textContent=displayStr[i]}}updateTimeAndDate();setInterval(updateTimeAndDate,60000); </script> </html>
源码
# 时钟
站长可乐
1年前
0
288
0
2024-09-05
新手小白都能搭建的留言系统
今天给大家带来的教程是使用PHP和Bootstrap构建响应式布局，搭建一个简单的留言系统。 这个留言系统是早期博客给我的灵感，所以对于这个系统来说，并没有什么创新，但是对于新手小白来说可以借鉴一二。 图片 网页示例 上面这个网站是发布资源的一个网站，为了让人不登录就能发布留言，我首先设置了只带有昵称(nickname)、邮箱(email)、留言内容（message）的数据库： CREATE TABLE messages ( id INT AUTO_INCREMENT PRIMARY KEY, nickname VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, message TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );从上面不难看出，我也在留言数据上加了一个发布时间，这样方便排序和整理。 图片 留言列表 我们要获取数据的话，可以创建一个config.php文件用于保存数据库信息，具体操作可以看我之前的文章。然后后端调用这个config.php文件，如下： <?php // 引入数据库配置文件 include 'config.php'; // 检查是否是 POST 请求 if ($_SERVER["REQUEST_METHOD"] == "POST" && empty($_SESSION['form_submitted'])) { // 接收表单数据 $nickname = $conn->real_escape_string($_POST['nickname']); $email = $conn->real_escape_string($_POST['email']); $message = $conn->real_escape_string($_POST['message']); // 验证邮箱 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo '<script>showError("email", "无效的邮箱地址！");</script>'; exit; } // 检查昵称是否为空 if (empty($_POST['nickname'])) { echo '<script>showError("nickname", "昵称不能为空！");</script>'; exit; } // 检查邮箱是否为空 if (empty($_POST['email'])) { echo '<script>showError("email", "邮箱不能为空！");</script>'; exit; } // 检查留言是否为空 if (empty($_POST['message'])) { echo '<script>showError("message", "留言内容不能为空！");</script>'; exit; } // 准备 SQL 语句并绑定参数 $sql = "INSERT INTO messages (nickname, email, message) VALUES (?, ?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("sss", $nickname, $email, $message); // 执行 SQL 语句 if ($stmt->execute()) { echo '<script>showSuccess("留言成功！");</script>'; } else { echo '<script>showError("server", "留言失败：" . ' . json_encode($conn->error) . ');</script>'; } $stmt->close(); } // 获取留言总数 $total_sql = "SELECT COUNT(*) AS total FROM messages"; $total_result = $conn->query($total_sql); $total_row = $total_result->fetch_assoc(); $total_messages = $total_row['total']; // 获取留言列表 $page = isset($_GET['page']) ? $_GET['page'] : 1; $limit = 5; // 每页显示10条留言 $start = ($page - 1) * $limit; $sql = "SELECT id, nickname, email, message, created_at FROM messages ORDER BY id DESC LIMIT $start, $limit"; $result = $conn->query($sql); ?>在这里我对留言为空的状态，都做了相应的提示，其实这里直接也可以在input组件上设置“required”属性就行了，我只是习惯这样去写。 然后为了跟主站保持统一，也是使用的bootstrap来布局。 图片 (代码详见：新手小白都能搭建的留言系统 ) 这里我设计了一个小技巧，只有管理员才能查看到留言人的邮箱。这里的登录是检测是否登录主站，大家用来测试的时候就不用加条件了。 <?php if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) { ?> <small class="text-muted"><?php echo htmlspecialchars($row['email']); ?></small> <?php } ?>显示效果如下： 图片 登录网站会显示留言人邮箱 需要知道的是，留言多了之后，页面就会显得很长很杂，一般都是设置分页，保证页面整洁有规划。 <!-- 分页导航 --> <nav> <ul class="pagination justify-content-center mt-2"> <?php $sql = "SELECT COUNT(*) as count FROM messages"; $result = $conn->query($sql); $row = $result->fetch_assoc(); $total_pages = ceil($row['count'] / $limit); // 计算上一页和下一页的链接 $prev_page = $page - 1; $next_page = $page + 1; // 生成上一页链接 if ($prev_page > 0) { echo "<li class='page-item'><a class='page-link' href='?page=$prev_page'>上一页</a></li>"; } else { echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>上一页</a></li>"; } // 生成页码链接 for ($i = 1; $i <= $total_pages; $i++) { $class = $i == $page ? "active" : ""; echo "<li class='page-item $class'><a class='page-link' href='?page=$i'>$i</a></li>"; } // 生成下一页链接 if ($next_page <= $total_pages) { echo "<li class='page-item'><a class='page-link' href='?page=$next_page'>下一页</a></li>"; } else { echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>下一页</a></li>"; } ?> </ul> </nav>效果如下： 图片 留言列表的分页系统 其实这个小界面都是比较简单的，主要是看人前期怎么去设计，需要考虑人性化、合理化、个性化。
技术
# 留言
# bootstrap
站长可乐
1年前
0
407
0
2024-08-10
全自动申请、更新、续期 SSL 证书的开源平台
项目介绍 CertD 是一款极具创新性的工具，它专注于提供免费的全自动申请和自动部署更新 SSL 证书的服务。其命名风格巧妙地借鉴了 Linux 守护进程的命名方式，“CertD”中的“D”代表着证书守护进程（Certificate Daemon）的含义，这一命名不仅体现了其技术渊源，还暗示了它在后台默默守护证书安全的重要角色。 图片 它支持私有化部署，这意味着用户可以将证书和相关的授权信息等敏感数据存储在自己的私有环境中，极大地降低了数据泄露的风险。这种私有化部署的方式为用户的数据安全提供了强有力的保障，让用户能够放心地使用 SSL 证书来保护网站的安全。 特性亮点 1、全自动申请与部署更新：不仅支持证书申请过程自动化，还能自动化部署更新证书，确保证书永不过期。 2、广泛的域名支持：支持阿里云、腾讯云、华为云、Cloudflare等各种途径注册的域名，包括通配符域名和多个域名打到一个证书上的情况。 3、邮件通知：及时向用户发送相关通知，确保用户了解证书的状态。 4、私有化部署：高度重视数据安全，用户可进行私有化部署，保障证书和授权信息等敏感数据的安全。 5、免费：相较于阿里云单个通配符域名证书每年最低1800元的费用，CertD免费为用户提供服务。 图片 添加证书自动化 项目仓库 开源项目地址： https://github.com/certd/certd 详细的使用教程： https://github.com/certd/certd/blob/v2/step.md 体验地址： https://certd.handsfree.work 私有化部署教程 # 随便创建一个目录 mkdir certd # 进入目录 cd certd # 下载docker-compose.yaml文件，或者手动下载放到certd目录下 wget https://gitee.com/certd/certd/raw/v2/docker/run/docker-compose.yaml # 可以根据需要修改里面的配置 # 1.修改镜像版本号【可选】 # 2.配置数据保存路径【可选】 # 3.修改端口号【可选】 vi docker-compose.yaml # 【可选】 # 启动certd docker compose up -d默认账户密码：admin/123456 访问地址：http://your_server_ip:7001 转自：青檬小栈
技术
# SSL
# 证书
站长可乐
1年前
0
342
0
2024-07-10
某宝同款度盘不限速后台系统源码 开心版
资源简介 搭建某宝同款度盘不限速后台系统源码开心版，验证已被我去除，两个后端系统，账号和卡密系统 第一步安装宝塔，部署卡密系统，需要环境php7.4 把源码丢进去，设置php7.4，和伪静态为thinkphp直接访问安装就行 第二步然后接着部署账号系统，这个更加简单，赋予执行权限后 直接./start.sh直接就启动了 卡密验证系统可正常搭建，但账号管理系统看着是java的。 有需要的自己下载瞅瞅吧 下载地址 蓝奏云
电脑软件
# 下载
# 百度网盘
# 后台
站长可乐
1年前
0
386
0
2024-06-17
免费获取永久高配大宽带虚拟主机
美国公益虚拟主机旗舰型 环境：PHP/MYSQL 空间容量 9999M 数据库容量 9999M 子目录：支持 绑定域名：无限 带宽限制：无限 流量：无限 地区：美国洛杉矶 备案：无需备案 售后客服QQ ；3198732689 售后QQ群 ；805058641 注；请加QQ群联系群主开通获取即可！ 免费永久高配大宽带虚拟主机速度来（邮件注册即可） https://www.zywlk.cn/cart?fid=10&gid=180 教程地址：https://b23.tv/zRc3B9A
技术
# 服务器
站长可乐
1年前
0
445
0
上一页
1
...
5
6
7
...
13
下一页
