{"html":"

\n \n

\n \n \n

Wi-Fi

\n Connect to wireless networks\n

\n \n \n

Bluetooth

\n Manage Bluetooth devices\n

\n \n

\n \n \n

Cellular

\n Configure mobile data & SIM\n

\n \n

\n \n \n

Battery

\n View battery usage & settings\n

\n \n

\n \n \n \n \n

Display & Brightness

\n Adjust brightness & text size\n

\n \n

\n \n \n

Sounds & Haptics

\n Manage ringtones & vibrations\n

\n \n

\n \n \n

Notifications

Manage app alerts

\n \n

\n \n \n \n \n

Privacy & Security

\n Manage permissions & tracking\n

\n \n\n","css":".ios-modern-settings__container {\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro\", sans-serif;\n max-width: 300px;\n width: 100%;\n height: 380px;\n background-color: rgba(255, 255, 255, 0.92);\n backdrop-filter: blur(20px);\n border-radius: 18px;\n padding: 14px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n overflow-y: auto;\n position: relative;\n scrollbar-width: none; /* Firefox */\n}\n\n.ios-modern-settings__container::-webkit-scrollbar {\n display: none; /* Chrome, Safari */\n}\n\n.ios-modern-settings__header {\n font-size: 20px;\n font-weight: 600;\n color: #000000;\n margin: 8px 0 14px 12px;\n letter-spacing: -0.4px;\n}\n\n.ios-modern-settings__card {\n display: flex;\n align-items: center;\n background-color: #ffffff;\n border-radius: 12px;\n padding: 12px 14px;\n margin: 4px 0;\n cursor: pointer;\n transition:\n transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1),\n background-color 0.25s ease,\n box-shadow 0.25s ease;\n}\n\n.ios-modern-settings__card:hover {\n background-color: #f7f7f8;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);\n}\n\n.ios-modern-settings__card:active {\n transform: scale(0.96);\n transition: transform 0.1s ease;\n}\n\n.ios-modern-settings__icon {\n width: 34px;\n height: 34px;\n margin-right: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1);\n}\n\n.ios-modern-settings__card:hover .ios-modern-settings__icon {\n transform: scale(1.05);\n}\n\n.ios-modern-settings__icon svg {\n width: 22px;\n height: 22px;\n}\n\n.ios-modern-settings__content {\n flex: 1;\n}\n\n.ios-modern-settings__title {\n font-size: 16px;\n font-weight: 500;\n color: #000000;\n margin: 0;\n letter-spacing: -0.3px;\n}\n\n.ios-modern-settings__description {\n font-size: 13px;\n color: #6b7280;\n margin: 2px 0 0;\n line-height: 1.3;\n}\n\n/* Fade-in animation for cards */\n.ios-modern-settings__card {\n opacity: 0;\n transform: translateY(12px);\n animation: ios-modern-settings__fadeInUp 0.35s\n cubic-bezier(0.28, 0.11, 0.32, 1) forwards;\n}\n\n.ios-modern-settings__card:nth-child(1) {\n animation-delay: 0.05s;\n}\n.ios-modern-settings__card:nth-child(2) {\n animation-delay: 0.1s;\n}\n.ios-modern-settings__card:nth-child(3) {\n animation-delay: 0.15s;\n}\n.ios-modern-settings__card:nth-child(4) {\n animation-delay: 0.2s;\n}\n.ios-modern-settings__card:nth-child(5) {\n animation-delay: 0.25s;\n}\n.ios-modern-settings__card:nth-child(6) {\n animation-delay: 0.3s;\n}\n.ios-modern-settings__card:nth-child(7) {\n animation-delay: 0.35s;\n}\n.ios-modern-settings__card:nth-child(8) {\n animation-delay: 0.4s;\n}\n\n@keyframes ios-modern-settings__fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n"}

shy-dingo-61

👁 实时预览

📝 源代码