找到
43
篇与
源码
相关的结果
- 第 3 页
-
霓虹灯数字时钟（可复制源代码） nhd.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> <style> *{margin:0;padding:0;box-sizing:border}body{display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;background:#2f363e}.clock{position:relative;width:280px;height:280px;display:flex;justify-content:center;align-items:center;scale:2;box-shadow:inset 5px 5px 25px rgba(0,0,0,0.25);border-radius:50%}#time{position:relative;width:250px;height:250px;display:flex;justify-content:center;align-items:center}#time .circle{position:absolute;display:flex;justify-content:center;align-items:center}#time .circle svg{position:relative;transform:rotate(270deg)}#time .circle:nth-child(1) svg{width:250px;height:250px}#time .circle:nth-child(2) svg{width:210px;height:210px}#time .circle:nth-child(3) svg{width:170px;height:170px}#time .circle svg circle{width:100%;height:100%;fill:transparent;stroke-width:5;stroke:var(--clr);transform:translate(5px,5px);opacity:0.25}#time .circle:nth-child(1) svg circle{stroke-dasharray:760;stroke-dashoffset:760}#time .circle:nth-child(2) svg circle{stroke-dasharray:630;stroke-dashoffset:630}#time .circle:nth-child(3) svg circle{stroke-dasharray:510;stroke-dashoffset:510}.dots{position:absolute;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;z-index:10}.dots::before{content:"";position:absolute;top:-3px;width:15px;height:15px;background:var(--clr);border-radius:50%;box-shadow:0 0 20px var(--clr),0 0 40px var(--clr),0 0 60px var(--clr),0 0 80px var(--clr)}.niddles{position:absolute;width:200px;height:200px;border-radius:50%;display:flex;justify-content:center;align-items:flex-start;z-index:10}.niddles i{position:absolute;width:2px;background:var(--clr2);height:50%;opacity:0.75;border-radius:6px;transform-origin:bottom;transform:scaleY(0.5)}.niddles.niddles2{width:170px;height:170px;z-index:9}.niddles.niddles2 i{width:3px}.niddles.niddles3{width:140px;height:140px;z-index:8}.niddles.niddles3 i{width:4px}#time span{position:absolute;inset:55px;text-align:center;color:#999;font-family:Cambria,Cochin,Georgia,Times,"Times New Roman",serif;transform:rotate(calc(30deg * var(--i)))}#time span b{font-size:0.75em;font-weight:500;display:inline-block;transform:rotate(calc(-30deg * var(--i)))} </style> </head> <body> <div class="clock"> <div id="time"> <div class="circle" style="--clr:#ff2972"> <div class="dots sec_dot"></div> <svg> <circle cx="120" cy="120" r="120" id="ss"></circle> </svg> </div> <div class="circle" style="--clr:#fee800"> <div class="dots min_dot"></div> <svg> <circle cx="100" cy="100" r="100" id="mm"></circle> </svg> </div> <div class="circle" style="--clr:#04fc43"> <div class="dots hr_dot"></div> <svg> <circle cx="80" cy="80" r="80" id="hh"></circle> </svg> </div> <div class="niddles" style="--clr2:#ff2972;" id="sc"><i></i></div> <div class="niddles niddles2" style="--clr2:#fee800;" id="mn"><i></i></div> <div class="niddles niddles3" style="--clr2:#04fc43;" id="hr"><i></i></div> <span style="--i:1;"><b>1</b></span> <span style="--i:2;"><b>2</b></span> <span style="--i:3;"><b>3</b></span> <span style="--i:4;"><b>4</b></span> <span style="--i:5;"><b>5</b></span> <span style="--i:6;"><b>6</b></span> <span style="--i:7;"><b>7</b></span> <span style="--i:8;"><b>8</b></span> <span style="--i:9;"><b>9</b></span> <span style="--i:10;"><b>10</b></span> <span style="--i:11;"><b>11</b></span> <span style="--i:12;"><b>12</b></span> </div> </div> </body> <script> setInterval(()=>{let hh=document.getElementById("hh");let mm=document.getElementById("mm");let ss=document.getElementById("ss");let sec_dot=document.querySelector(".sec_dot");let min_dot=document.querySelector(".min_dot");let hr_dot=document.querySelector(".hr_dot");let hr=document.getElementById("hr");let mn=document.getElementById("mn");let sc=document.getElementById("sc");let h=new Date().getHours();let m=new Date().getMinutes();let s=new Date().getSeconds();hh.style.strokeDashoffset=510-(510*h)/12;mm.style.strokeDashoffset=630-(630*m)/60;ss.style.strokeDashoffset=760-(760*s)/60;sec_dot.style.transform=`rotateZ(${s*6}deg)`;min_dot.style.transform=`rotateZ(${m*6}deg)`;hr_dot.style.transform=`rotateZ(${h*30}deg)`;hr.style.transform=`rotateZ(${h*30}deg)`;mn.style.transform=`rotateZ(${m*6}deg)`;sc.style.transform=`rotateZ(${s*6}deg)`}); </script> </html>我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3c0nu17s7yck8
-
非常适合中小企业使用的开源ERP系统——JSH_ERP 今天，我想向大家推荐一个非常适合中小企业使用的开源ERP系统——JSH_ERP（原名：华夏ERP，英文名：jshERP）。这个项目不仅功能全面，还为开发者提供了极大的扩展和二次开发的空间。 2024-09-16T08:58:36.png图片 （首页） 项目概述 JSH_ERP 是一款基于 SpringBoot 和 Vue.js 的开源企业资源计划（ERP）系统，主要功能涵盖了进销存管理、财务管理以及生产管理。虽然目前功能集中在这些核心模块，但项目后续将推出更多完整的ERP功能。这个项目的开发初衷是为了帮助中小企业降低信息化成本，同时也为个人开发者提供了一个学习和二次开发的绝佳平台。 项目特点 1. 开源且灵活的架构 JSH_ERP 基于 SpringBoot 框架，结合 Mybatis 进行数据持久化，并且前端采用了流行的 Vue.js 框架和 Ant-Design-Vue 作为 UI 组件库。这种技术栈的选择不仅使得项目结构清晰、易于维护，同时也便于开发者根据需求进行二次开发。 2. 功能模块齐全 目前，JSH_ERP 主要提供以下功能模块： • 进销存管理：包括采购管理、销售管理、库存管理等，帮助企业高效管理供应链。 • 财务管理：实现了基本的财务报表功能，支持企业财务数据的录入和统计。 • 生产管理：覆盖了生产计划、生产进度等功能，适合制造业企业。 3. 前后端分离 JSH_ERP 采用前后端分离的架构，这使得前端开发者和后端开发者可以并行工作，提升开发效率。此外，前端使用的 Vue.js 框架与流行的单页应用（SPA）设计模式也使得用户体验更加流畅。 4. 易于二次开发 对于有二次开发需求的企业或个人开发者来说，JSH_ERP 提供了非常友好的扩展能力。你可以根据自身需求，灵活地修改或增加模块功能，而不必担心破坏原有系统的稳定性。 5. 全面的技术支持 项目不仅提供了详细的用户手册和接口文档，还分享了视频教程和部署指南，极大地方便了开发者快速上手和项目的实际部署。 功能截图 2024-09-16T09:01:47.png图片 （零售管理） 2024-09-16T09:01:50.png图片 （采购管理） 2024-09-16T09:01:56.png图片 （销售管理） 2024-09-16T09:02:04.png图片 （仓库管理） 2024-09-16T09:02:10.png图片 （财务管理） 2024-09-16T09:02:14.png图片 （报表查询） 2024-09-16T09:02:19.png图片 （商品管理） 2024-09-16T09:02:24.png图片 （基本资料） 2024-09-16T09:02:29.png图片 （系统管理） 总结 总的来说，JSH_ERP 是一个功能强大且灵活的开源ERP系统，特别适合中小企业。对于开发者来说，它提供了足够的二次开发空间，可以根据自己的需求进行定制。项目的技术栈也非常现代化，前后端分离的架构使得开发过程更加顺畅。如果你正在寻找一个易于上手的开源ERP系统，那么 JSH_ERP 绝对值得一试。希望这篇文章能够帮助大家更好地理解和使用这个项目，如果你对这个项目有兴趣，别忘了给它点个Star 哦！ 仓库地址：https://gitee.com/jishenghua/JSH_ERP 部署文档地址：https://www.kdocs.cn/l/skPA3WycWXxg
-
纸飞机（可复制源代码） 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>
-
小程序纯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>转载自枫瑞博客网
-
简单的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>
-
生活分享网站源码 博客风格分享小清新php源码 资源简介 这套模板是从站酷的设计作品里看到的，觉得很简介，所以就把他仿出来了。 模板分为头部、底部、主页、文章列表页、文章内容页、图集列表页和图集内容页。 可以用做美女站、博客站等。 运行环境 ph+mysql 注意事项 首页幻灯片和公告和广告图，都在后台“模块-广告管理”中修改！ 后台 “系统-数据库备份/还原” 还原数据，可以得到幻灯片等的代码和部分体验数据 ！因为广告代码中包含幻灯片的name编码数据！不还原数据库得到代码无法显示幻灯片！！切记切记 下载地址 https://lightweb.lanzout.com/ifhIX1sbeweb 图片
-
基于POSCMS架构开发的素材资源网平台整站全面修复版源码 资源简介 基于POSCMS架构开发的素材资源网平台整站全面修复版源码一键安装版 系统功能介绍 支持文章、论坛、下载、图片、小说、视频、商城、专题等等模块，所有模块都支持自定义字段，你想到的网站功能都能实现。 会 员 组 ：会员组价格+时间+权限，会员等级以及图标。 支付接口：微信 支付宝 以及本站对接的免签支付整套系统。 插件介绍：签到 打赏 百度推送 文章内链。 远程附件：腾讯云 百度云 阿里云。 系统缓存： 文件缓存、Memcached缓存、Redis缓存、WinCache缓存、APC缓存。 其他功能：自定义伪静态规则、生成静态页、自定义页面、上传投稿、评论、会员打折、短信邮件、多语言。 运行环境： PHP5.6～7.0+MYSQL5.5～5.6 添加伪静态规则 安装说明 一键安装：http://你的域名/install.php 默认用户名及密码：admin 下载地址： 点击下载 下载地址：https://lightweb.lanzout.com/ivp7K1mwwcmh 提取码： ls2tymlt.png图片
-
超强站群系统v9.0最新站群系统PHP源码 资源简介 超强站群系统v9.0-最新站群优化超级蜘蛛池+采集-全新一键安装版，蜘蛛池引流，站群蜘蛛池，SEO优化超级蜘蛛池，自动采集，网站优化必备；SEO优化站群特色 安全、高效，化的优化利用php性能，使得运行流畅稳定 独创内容无缓存刷新不变，节省硬盘。防止搜索引擎识别蜘蛛池 蜘蛛池算法，轻松构建站点（电影、资讯、图片、论坛等等） 可以个性化每个网站的风格、内容、站点模式、关键词、外链等 （自定义tkd、自定义外链关键词、自定义泛域名前缀）问题集锦 什么是蜘蛛池？ 蜘蛛池是一种通过利用大型平台权重来获得百度收录以及排名的一种程序，程序员常称为“蜘蛛池”。这是一种可以快速提升网站排名的一种程序，值得一提的是，它是自动提升网站的排名和网站的收录，这个效果是非常出众的。蜘蛛池程序可以帮助我们做什么？发了外链了帖子还不收录，可竞争对手人家一样是发同样的站，人家没发外链也收录了，是吧！答:（因为人家养有了数量庞大的百度收录蜘蛛爬虫，有了蜘蛛池你也可以做到） 有些老鸟会说，我自己也养有百度蜘蛛怎么我的也不收录呢？ 答：（因为你的百度收录蜘蛛不够多，不够广，来来回回都是那些低质量的百度收录爬虫，收录慢，而且甚至是根本不收录了！——-蜘蛛池拥有多服务器，多域名，正规内容站点养着百度收录蜘蛛，分布广，域名多，团队化养着蜘蛛，来源站点多，质量高，每天都有新来的蜘蛛进行爬取收录您的外推帖子） 蜘蛛池超级强大的功能，全自动采集，支持api二次开发！ 也可以当做站群的源程序使用。 支持给用户开账号，全自动发布，可用于租用蜘蛛池，发布外链使用！ 支持关键词跳转，全局跳转！ 自动采集（腾讯新闻（国内，军事），新浪新闻（国际，军事）） 新闻伪原创，加快收录！ 支持导入txt外推网址，蜘蛛日记，索引池，权重池等等等，更多功能自行发现！运行环境 PHP5.6+MYSQL5.7下载地址 https://lightweb.lanzout.com/iMjn61knb8fe lr6mk2s5.png图片 lr6mk5tp.png图片
-
最新全功能版在线WEB工具箱PHP源码 资源简介 一个多功能的 Web 工具 PHP 脚本，包含 45 种工具，适用于日常任务和开发人员。 功能简介 DNS 查找工具。IP 查找工具。SSL 查找工具。Whois 查询工具。Ping工具。MD5 生成器工具。Base64 转换工具。Base64 图像转换工具。 URL 转换工具。Lorem ipsum 生成器工具。Markdown 到 HTML 工具。案例转换器工具。UUID v4 生成器工具。Bcrypt 生成器工具。 密码生成器工具。密码强度检查工具。弹头生成器工具。HTML 压缩工具。CSS 缩小工具。JS 压缩工具。用户代理解析器工具。 网站托管检查工具。字符计数器工具。URL 解析器工具。颜色转换工具。HTTP 标头查找工具。重复线去除工具。文字转语音工具。 IDN punnycode 转换工具。JSON 验证器和美化工具。QR 码阅读器工具。元标记检查器工具。Exif 阅读器工具。SQL 格式化程序/美化工具。 HTML 实体转换器工具。二进制转换器工具。十六进制转换器工具。MailTo 链接生成器工具。YouTube 缩略图下载工具。谷歌安全网址检查器。 谷歌缓存检查器。URL 重定向检查器。Whatsapp 链接生成器。UTM 链接生成器。Youtube 时间戳链接生成器。 系统需求 运行环境 PHP7.4～8.1+MySQL5.7+伪静态 开启扩展：cURL, OpenSSL, mbstring, MySQLi 安装地址：/install/ 1、下载源码，解压缩，将文件夹下的内容上传到服务器。 2、建立MySQL数据库。 3、Nginx用户需要配置伪静态规则，具体伪静态代码请自行解压缩源码查看教程文档！ 5、打开你的域名/install进行安装。 6、根据提示，输入任意代码激活，配置数据库信息，完成安装。（安装时提示需要填写许可证密钥，随便填点数字就行了！） 7、安装成功后，默认后台用户名和密码均为admin，登录后修改。 lr6mai80.png图片 下载地址 最新全功能版在线WEB工具箱PHP源码 下载地址：https://lightweb.lanzout.com/iDe6V1knd6va 提取码：
