{"html":"

\n Get Around\n \n

\n","css":"/* Base Styles */\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f8f9fa;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Container */\n.getaround-container {\n position: relative;\n display: inline-block;\n}\n\n/* Main Button */\n.getaround-button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 14px 28px;\n background: linear-gradient(135deg, #4a6bff, #6a11cb);\n color: white;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n z-index: 10;\n}\n\n.getaround-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 135deg,\n rgba(106, 17, 203, 0.4),\n rgba(74, 107, 255, 0.4)\n );\n filter: blur(15px);\n opacity: 0;\n transition: opacity 0.5s ease;\n z-index: -1;\n}\n\n.getaround-button::after {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n transform: scale(0);\n transition: transform 0.6s ease-out;\n z-index: -1;\n}\n\n.getaround-button:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\n}\n\n.getaround-button:hover::before {\n opacity: 1;\n}\n\n.getaround-button:hover::after {\n transform: scale(1);\n}\n\n.getaround-button:active {\n transform: translateY(-2px);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);\n}\n\n/* Button Text */\n.getaround-text {\n font-size: 18px;\n font-weight: 600;\n margin-right: 12px;\n transition: letter-spacing 0.3s ease;\n}\n\n.getaround-button:hover .getaround-text {\n letter-spacing: 1px;\n}\n\n/* Button Icon */\n.getaround-icon {\n width: 24px;\n height: 24px;\n fill: white;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.getaround-button:hover .getaround-icon {\n transform: rotate(360deg);\n}\n\n/* Tooltip */\n.getaround-tooltip {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.9);\n background: rgba(255, 255, 255, 0.95);\n border-radius: 16px;\n padding: 16px;\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\n opacity: 0;\n visibility: hidden;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 100;\n margin-top: 12px;\n backdrop-filter: blur(10px);\n}\n\n.getaround-container:hover .getaround-tooltip {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) scale(1);\n}\n\n.getaround-tooltip::before {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 10px 10px 10px;\n border-style: solid;\n border-color: transparent transparent rgba(255, 255, 255, 0.95) transparent;\n}\n\n/* Icons Container */\n.getaround-icons {\n display: flex;\n gap: 16px;\n}\n\n/* Icon Buttons */\n.getaround-icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #f1f3f5;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.getaround-icon-btn svg {\n width: 24px;\n height: 24px;\n transition: all 0.3s ease;\n}\n\n.getaround-icon-btn:hover {\n transform: translateY(-5px) scale(1.1);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n}\n\n.getaround-icon-btn:active {\n transform: translateY(-2px) scale(1.05);\n}\n\n/* Python Icon */\n.getaround-icon-btn.python:hover {\n background: linear-gradient(135deg, #3776ab, #ffd343);\n}\n\n.getaround-icon-btn.python:hover svg {\n fill: white;\n}\n\n/* Chat Icon */\n.getaround-icon-btn.chat:hover {\n background: linear-gradient(135deg, #25d366, #128c7e);\n}\n\n.getaround-icon-btn.chat:hover svg {\n fill: white;\n}\n\n/* Like Icon */\n.getaround-icon-btn.like:hover {\n background: linear-gradient(135deg, #ff4d4d, #d32f2f);\n}\n\n.getaround-icon-btn.like:hover svg {\n fill: white;\n}\n\n/* Pulse Animation */\n@keyframes getaround-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(74, 107, 255, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 15px rgba(74, 107, 255, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(74, 107, 255, 0);\n }\n}\n\n.getaround-button {\n animation: getaround-pulse 3s infinite;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .getaround-button {\n padding: 12px 24px;\n }\n\n .getaround-text {\n font-size: 16px;\n }\n\n .getaround-tooltip {\n padding: 12px;\n }\n\n .getaround-icons {\n gap: 12px;\n }\n\n .getaround-icon-btn {\n width: 44px;\n height: 44px;\n }\n\n .getaround-icon-btn svg {\n width: 20px;\n height: 20px;\n }\n}\n"}

polite-catfish-36

👁 实时预览

📝 源代码