{"html":"

moov

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n

\n\n

\n 10:50\n PM
\n Sat, 04 Nov\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n\n

back

\n \n \n \n \n

\n","css":".card {\n perspective: 1000px;\n transform-style: preserve-3d;\n position: relative;\n}\n\n.phone {\n /* transform: rotateX(40deg); */\n position: relative;\n perspective: 1000px;\n width: 150px;\n height: 254px;\n transform-style: preserve-3d;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg);\n transition: all 1s;\n /* animation: rotate 5s linear infinite; */\n}\n\n.phone:hover {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5);\n}\n.front {\n width: 100%;\n height: 100%;\n background: lightgrey;\n border: solid 5px rgb(0, 0, 0);\n border-radius: 10px;\n border-top: 15px solid;\n border-bottom: 15px solid;\n background: lightblue;\n padding: 0.5rem;\n text-align: center;\n transform: translateY(20px);\n background: radial-gradient(\n circle,\n rgb(170, 162, 162),\n rgb(44, 8, 102) 30%,\n rgba(26, 78, 189, 0.226) 0%\n ),\n radial-gradient(\n circle at 40px 40px,\n rgb(233, 228, 228),\n rgb(41, 35, 49) 30%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 200px,\n rgb(233, 228, 228),\n rgb(27, 26, 26) 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 800px 100px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 700px 500px,\n rgb(233, 228, 228),\n #333 2%,\n rgba(88, 84, 84, 0.123) 0%\n ),\n radial-gradient(\n circle at 200px 400px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 300px 700px,\n rgb(233, 228, 228),\n #333 15%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 650px 400px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 600px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0.959) 0%\n );\n position: absolute;\n top: 0;\n left: 0;\n /* outline: 2px solid rgb(116, 115, 115); */\n}\n.front .home {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 10px;\n grid-template-rows: repeat(2, 1fr);\n}\n\n.home2 {\n grid-template-rows: repeat(1, 1fr) !important;\n margin-bottom: 0.5rem;\n}\n\n.front .home .app {\n display: inline-block;\n width: 15px;\n height: 15px;\n background-color: rgb(255, 255, 255);\n border-radius: 30%;\n text-align: center;\n position: relative;\n}\n.front .home .app .logo-app {\n width: 70%;\n height: 70%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.full-logo {\n background-color: transparent !important;\n}\n\n.full-logo .logo-app {\n width: 100% !important;\n height: 100% !important;\n}\n\n.search {\n position: relative;\n margin-top: 0.2rem;\n margin-bottom: 1rem;\n}\n\n.logo-google {\n position: absolute;\n width: 10px;\n left: 5px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.search-google {\n width: 100%;\n border-radius: 20px;\n padding: 0.3rem;\n padding-left: 1rem;\n font-size: 9px;\n height: 1.5rem;\n border: none;\n outline: none;\n}\n\n.date {\n color: white;\n position: relative;\n margin-bottom: 1rem;\n text-align: left;\n}\n\n.date .hour {\n font-size: large;\n}\n\n.date * {\n display: inline-block;\n}\n\n.date .period,\n.date .day {\n font-size: 9px;\n line-height: 10px;\n}\n\n.bullet {\n display: inline-block;\n width: 30%;\n height: 0;\n border-bottom: 5px dotted rgba(255, 255, 255, 0.651);\n}\n\n.navigation {\n display: flex;\n justify-content: space-around;\n}\n\n.navigation .btn {\n display: inline-block;\n width: 10px;\n height: 10px;\n}\n\n.navigation .btn-home {\n border-radius: 50%;\n border: solid 1px white;\n}\n\n.navigation .btn-back {\n border-radius: 35%;\n border: solid 1px white;\n border-left: 1px solid transparent;\n}\n\n.navigation .btn-task {\n border-radius: 35%;\n border: solid 1px white;\n}\n\n.face {\n position: absolute;\n border-radius: 10px;\n width: 100%;\n height: 100%;\n background-color: rgb(24, 23, 24);\n top: 50%;\n left: 50%;\n}\n\n.head {\n font-size: 6px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n height: 10px;\n display: flex;\n justify-content: space-between;\n}\n\n.head .h-left {\n color: white;\n margin: 0 2px;\n}\n.head .h-right span {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 1px;\n}\n\n.logo-head {\n width: 100%;\n height: 100%;\n}\n\n.top,\n.bottom {\n width: 150px;\n height: 10px;\n}\n\n.right,\n.left {\n height: 254px;\n width: 10px;\n}\n\n.front {\n transform: translate(-50%, -50%) translateZ(5px);\n}\n.back {\n transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px);\n}\n.left {\n transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px);\n}\n.right {\n transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px);\n}\n.top {\n transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px);\n}\n.bottom {\n transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px);\n}\n\n.bottom .elements {\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.bottom .elements .headphone {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .microphone {\n display: inline-block;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .charge {\n display: inline-block;\n width: 20px;\n height: 6px;\n position: relative;\n border-radius: 3px 3px 10px 10px;\n background-color: #333;\n}\n\n.charge::before {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 2px;\n position: absolute;\n border-radius: 3px 3px 10px 10px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(26, 25, 25);\n}\n\n.bottom .elements .speaker {\n display: inline-block;\n width: 30px;\n height: 0;\n border-top: #333 dotted 5px;\n}\n\n.front-camera {\n width: 10px;\n height: 10px;\n background-color: rgb(26, 25, 25);\n border-radius: 50%;\n position: absolute;\n top: -11px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.front-camera::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle at 6px 2px,\n rgba(255, 255, 255, 0.726),\n rgb(0, 0, 0)\n );\n}\n\n.front-camera::before {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 25%;\n height: 25%;\n z-index: 2;\n transform: translate(-50%, -50%);\n background-color: #212121;\n}\n\n.menu {\n background-color: transparent !important;\n}\n\n.logo-menu {\n width: 100%;\n height: 100%;\n}\n\n.logo-phone {\n background-color: #33ff77 !important;\n}\n\n.message {\n /* background-color: blue!important; */\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

tender-deer-30

👁 实时预览

📝 源代码