{"html":"

▲

◀

▶

▼

\n\n

⌂

\n","css":".switch-card {\n display: flex;\n align-items: stretch;\n width: 470px;\n height: 196.5px; /* 104px * 3 */\n}\n.screen-outline {\n display: flex;\n align-items: stretch;\n padding: 10px 14px;\n justify-content: center;\n border-radius: 2px;\n background: rgb(71, 77, 79);\n background: linear-gradient(\n 180deg,\n rgba(71, 77, 79, 1) 0%,\n rgba(90, 97, 100, 1) 3%,\n rgba(46, 50, 51, 1) 5%,\n rgba(46, 50, 51, 1) 100%\n );\n}\n.screen-border {\n border-top: 17px solid black;\n border-bottom: 17px solid black;\n border-left: 25px solid black;\n border-right: 25px solid black;\n border-radius: 6px;\n flex: 1;\n background-color: black;\n width: 263px;\n display: flex;\n}\n.screen {\n border-radius: 2px;\n background: rgb(38, 39, 43);\n background: linear-gradient(\n 135deg,\n rgba(38, 39, 43, 1) 0%,\n rgba(49, 52, 62, 1) 49%,\n rgba(38, 39, 43, 1) 100%\n );\n flex: 1;\n overflow: hidden;\n cursor: pointer;\n}\n.screen img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n}\n.joy-con {\n background-color: pink;\n width: 65px;\n height: 196.5px;\n position: relative;\n}\n.joy-con.left {\n border-top-left-radius: 40px;\n border-bottom-left-radius: 40px;\n background: rgb(0, 186, 219);\n background: linear-gradient(\n 148deg,\n rgba(0, 186, 219, 1) 0%,\n rgba(0, 185, 220, 1) 100%\n );\n box-shadow:\n inset 3px -4px 10px #058ca5,\n inset 0px 5px 3px #6ad9ed;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.joy-con.right {\n border-top-right-radius: 40px;\n border-bottom-right-radius: 40px;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n background: rgb(250, 97, 93);\n background: linear-gradient(\n 148deg,\n rgba(250, 97, 93, 1) 0%,\n rgba(239, 79, 77, 1) 100%\n );\n box-shadow:\n inset -3px -4px 10px #d12621,\n inset 0px 5px 3px #fd877c;\n}\n\n.joy-con.left .minus {\n position: absolute;\n top: 18px;\n width: 10px;\n height: 2px;\n border: 0.8px solid #222;\n border-radius: 1px;\n right: 5px;\n background-color: #3c3d41;\n}\n\n.joy-con.left .joystick {\n left: 50%;\n transform: translate(-50%);\n top: 35px;\n}\n.joy-con.right .joystick {\n top: 87.5px;\n left: 14px;\n filter: contrast(130%) drop-shadow(0px 1px 2px #00000088);\n}\n.joystick {\n background-color: #2d2e33;\n border-radius: 100%;\n height: 28px;\n width: 28px;\n position: relative;\n border: 1px solid #2d2e33;\n overflow: hidden;\n cursor: pointer;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, 1fr);\n grid-column-gap: 1px;\n grid-row-gap: 1px;\n filter: drop-shadow(0px 1px 2px #00000088);\n}\n.joystick-edge {\n background-color: #444;\n}\n.joystick-inner-border {\n position: absolute;\n\n top: 50%;\n left: 50%;\n background-color: #2d2e33;\n padding: 1px;\n z-index: 2;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.joystick-inner {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background-color: #282c2f;\n box-shadow:\n inset 0px -4px 4px rgb(49, 49, 49),\n inset 0px 4px 12px rgb(124, 124, 124),\n inset 0px 4px 6px rgb(0, 0, 0);\n z-index: 3;\n position: relative;\n}\n\n.numpad-container {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n}\n.joy-con.left .numpad-container {\n top: 82px;\n left: 12px;\n color: #1b1b1c;\n font-size: 8px;\n}\n.joy-con.right .numpad-container {\n top: 28.5px;\n left: 8px;\n color: #d7d7d7;\n font-size: 7px;\n}\n\n.numpad-middle {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.plus-symbol {\n width: 10px;\n height: 10px;\n position: absolute;\n display: inline-block;\n top: 14.5px;\n left: 5px;\n cursor: pointer;\n}\n.plus-symbol-overlap-fixer {\n position: absolute;\n background-color: #333;\n width: 2px;\n height: calc(100% - 2px);\n border-radius: 1px;\n top: 50%;\n left: 50%;\n z-index: 3;\n transform: translate(-50%, -50%);\n}\n.plus-symbol::before,\n.plus-symbol::after {\n content: \"\";\n position: absolute;\n background-color: #333;\n border: 0.8px solid #222;\n border-radius: 1px;\n}\n\n.plus-symbol::before {\n width: 2px;\n height: 86.5%;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.plus-symbol::after {\n width: 86.5%;\n height: 2px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.numpad-button {\n width: 12px;\n height: 12px;\n background-color: #505050;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n border: 1px solid #2d2e33;\n box-shadow:\n inset -0.5px -0.5px 1.5px rgba(92, 92, 92, 0.5),\n /* İç gölgeler küçük boyuta uygun şekilde azaltıldı */ inset 0.2px 1px 0.8px\n rgba(143, 143, 143, 0.658),\n inset /* Üst kısımda hafif ışık efekti */ -1px -1px 2px\n rgba(31, 31, 31, 0.76),\n 0px 0px 3px #00000055;\n}\n.numpad-part {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.record-button {\n width: 10px;\n height: 10px;\n cursor: pointer;\n border: 1px solid #2d2e33;\n border-radius: 1px;\n position: absolute;\n top: 134px;\n left: 39px;\n background: rgb(96, 95, 101);\n background: linear-gradient(135deg, #605f65 0%, rgba(60, 61, 66, 1) 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.record-button-inner {\n width: 4px;\n height: 4px;\n background: rgb(96, 95, 101);\n background: linear-gradient(135deg, #605f65 0%, rgba(60, 61, 66, 1) 100%);\n border: 1px solid #2d2e33;\n border-radius: 50%;\n}\n\n.home-button-border {\n position: absolute;\n cursor: pointer;\n top: 132.5px;\n left: 12px;\n border: 1px solid #1b1b1c;\n background: linear-gradient(135deg, #a0a0a0 0%, #303030 100%);\n height: 14px;\n width: 14px;\n padding: 1px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.home-button {\n width: 12px;\n height: 12px;\n border: 0.9px solid #1b1b1c;\n background: linear-gradient(180deg, #6b6b6b 0%, #303030 100%);\n border-radius: 50%;\n display: flex;\n color: black;\n align-items: center;\n justify-content: center;\n font-size: 9px;\n}\n\n.button {\n cursor: pointer;\n}\n.heart-card {\n position: relative;\n width: 200px;\n height: 200px;\n background-color: #ff6b6b;\n transform: rotate(-45deg);\n margin-top: 50px;\n z-index: 2;\n}\n\n.heart-card::before,\n.heart-card::after {\n content: \"\";\n position: absolute;\n width: 200px;\n height: 200px;\n background-color: #ff6b6b;\n border-radius: 50%;\n z-index: -1;\n}\n\n.heart-card::before {\n top: -100px;\n left: 0;\n}\n\n.heart-card::after {\n left: 100px;\n top: 0;\n}\n\n.content {\n position: absolute;\n top: 50px;\n left: 50px;\n width: 100px;\n height: 100px;\n transform: rotate(40deg);\n text-align: center;\n color: white;\n}\n\n.content h2 {\n font-size: 18px;\n margin-bottom: 10px;\n}\n\n.content p {\n font-size: 14px;\n}\n"}

little-fly-45

👁 实时预览

📝 源代码