{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzQ5ODk1ODk1LCJpYXQiOjE3NDk4OTIyOTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.gcMmwV9WwfUQmL93iReAEmKPW339FY7QCIlkHecQmXlL7sQatNYg9wiqvd4c1lKALpvIXJgpy_fJbulagOg2Zt33V5yFODz-RMWHN6jstHNyjx7IaPHgd-F-8EEzw7xGugHfsqvM5b3rQnM3HWHbQQNdbk3WWl0pAJjswaRmbCEkdzWYwnCpNAlkm7dvyLrSLpG5YSZLcipnhA7SD8x0JUyNfNiies_RK8w3KRlhU3W3Bq4NyAYzuqjirDbo6JVHGirwxtPt29EFDUpAYPRUmchm2XvWCR7tkym7w1oNgiifRPZurEjsneDfwZCly2XlL2Wzbw36xMFHmxYj4azJQQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":76821230,\"user_id\":252820,\"html\":\"<a href=\\\"https:\\/\\/www.uiguy.dev\\\" rel=\\\"author\\\" class=\\\"seo-author-link\\\">Peter Benoit<\\/a>\\n<!-- Sidebar -->\\n<aside class=\\\"fixed md:block hidden top-0 left-0 w-36 h-full bg-gray-800 p-4 flex flex-col justify-between sidebar\\\">\\n\\n\\t<img src=\\\"https:\\/\\/avatars.githubusercontent.com\\/u\\/492000?v=4\\\" alt=\\\"Profile\\\" class=\\\"rounded-full w-20 mb-4 mx-auto\\\">\\n\\t<h2 class=\\\"text-sm font-bold text-center\\\">Pete Benoit<\\/h2>\\n\\t<nav class=\\\"mt-4\\\">\\n <ul>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-user mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Profile<\\/span><\\/li>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-compass mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Discover<\\/span><\\/li>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bx-trending-up mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Trending<\\/span><\\/li>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-doughnut-chart mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Analytics<\\/span><\\/li>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-heart mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Favorites<\\/span><\\/li>\\n <li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-message-square-dots mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Reviews<\\/span><\\/li>\\n <\\/ul>\\n<\\/nav>\\n\\n\\t<!-- Settings and Logout Links -->\\n\\t<div class=\\\"mt-auto space-y-2\\\">\\n\\t\\t<ul>\\n\\t\\t\\t<li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-cog mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Settings<\\/span><\\/li>\\n\\t\\t\\t<li class=\\\"flex items-center p-2 nav-hover rounded-md\\\"><i class=\\\"bx bxs-log-out mr-2\\\"><\\/i> <span class=\\\"text-sm\\\">Logout<\\/span><\\/li>\\n\\t\\t<\\/ul>\\n\\t<\\/div>\\n<\\/aside>\\n\\n<!-- Main Content -->\\n<div class=\\\"md:ml-36 flex-grow flex flex-col md:flex-row main-content min-h-screen\\\">\\n\\n\\t<!-- Center Section for Events -->\\n\\t<div class=\\\"flex-grow p-8 scrollable events\\\">\\n\\t\\t<!-- Search Bar and Icons -->\\n\\t\\t<div class=\\\"flex mb-8 justify-center\\\">\\n\\t\\t\\t<div class=\\\"relative w-full md:w-2\\/3\\\">\\n\\t\\t\\t\\t<input type=\\\"text\\\" placeholder=\\\"Search events...\\\" class=\\\"p-2 rounded fancyborder w-full bg-gray-700 text-white pr-10\\\">\\n\\t\\t\\t\\t<i class=\\\"bx bx-search absolute right-2 top-1\\/2 transform -translate-y-1\\/2 text-white\\\"><\\/i>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\n\\t\\t<!-- Events Section -->\\n\\t\\t<section>\\n\\t\\t\\t<div class=\\\"flex justify-center mb-4\\\">\\n\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/party.webp\\\" alt=\\\"party\\\" class=\\\"w-2\\/3\\\" \\/>\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<h2 class=\\\"text-2xl font-bold mb-4\\\">Upcoming Events<\\/h2>\\n\\t\\t\\t<div class=\\\"grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4\\\">\\n\\t\\t\\t\\t<!-- Event Card 1 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/stars.webp\\\" alt=\\\"Acoustic Serenade Under the Stars\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tMarch 19, 8:00 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Acoustic Serenade Under the Stars<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Skyline <span class=\\\"text-white\\\">Amphitheater<\\/span><\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-yellow-500 text-xs px-2 py-1 rounded-full text-black\\\">Concert<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 2 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/latin.webp\\\" alt=\\\"Latin Rhythms Fusion\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tMarch 22, 8:00 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Latin Rhythms Fusion<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Dance Studio X<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-purple-500 text-xs px-2 py-1 rounded-full text-white\\\">Workshop<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 3 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/jazz.webp\\\" alt=\\\"Jazz Fusion Night\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tMarch 26, 10:00 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Jazz Fusion Night<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Jazz Haven Lounge<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-yellow-500 text-xs px-2 py-1 rounded-full text-black\\\">Concert<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 4 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/clay.webp\\\" alt=\\\"Clay Sculpting Class\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tMarch 28, 3:00 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Clay Sculpting Class<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Artisan Workshop Space<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-purple-500 text-xs px-2 py-1 rounded-full text-white\\\">Workshop<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 5 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/timeless.webp\\\" alt=\\\"Timeless Tales Revived\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tApril 4, 8:30 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Timeless Tales Revived<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Epoch Theater<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-red-500 text-xs px-2 py-1 rounded-full text-white\\\">Theatre<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 6 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/artclass.webp\\\" alt=\\\"Abstract Art Class\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tApril 5, 6:45 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Abstract Art Class<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Artistic Horizon Studio<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-purple-500 text-xs px-2 py-1 rounded-full text-white\\\">Workshop<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 7 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/harrypotter.webp\\\" alt=\\\"Harry Potter Film Concert Series\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tApril 6, 9:00 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Harry Potter Film Concert Series<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Overture Hall<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-yellow-500 text-xs px-2 py-1 rounded-full text-black\\\">Concert<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Event Card 8 -->\\n\\t\\t\\t\\t<div class=\\\"event-card p-4 rounded-lg shadow-md relative fancyborder\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/wimbledon.webp\\\" alt=\\\"Wimbledon Championships\\\" class=\\\"rounded-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 right-2 bg-black bg-opacity-60 text-white text-sm px-2 py-1 rounded\\\">\\n\\t\\t\\t\\t\\t\\t\\tJune 23, 1:30 PM\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"absolute top-2 left-2\\\">\\n\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-heart heart-icon text-white cursor-pointer\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"mt-4\\\">\\n\\t\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-bold\\\">Wimbledon Championships - 2024<\\/h3>\\n\\t\\t\\t\\t\\t\\t<p class=\\\"text-gray-400 mb-4\\\">Tennis & Croquet Club<\\/p>\\n\\t\\t\\t\\t\\t\\t<div class=\\\"flex justify-between items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t<span class=\\\"bg-yellow-500 text-xs px-2 py-1 rounded-full text-black\\\">Sport<\\/span>\\n\\t\\t\\t\\t\\t\\t\\t<button class=\\\"bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 rounded-full flex items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\tBuy Ticket\\n\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-share-alt ml-2\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t\\t<\\/button>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/section>\\n\\n\\t\\t<!-- Past Event Reviews Section -->\\n\\t\\t<section class=\\\"mt-8\\\">\\n\\t\\t\\t<h2 class=\\\"text-xl font-bold mb-4 text-white\\\">Past Event Reviews<\\/h2>\\n\\t\\t\\t<div class=\\\"grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4\\\">\\n\\t\\t\\t\\t<!-- Review Card 1 -->\\n\\t\\t\\t\\t<div class=\\\"review-card p-4 rounded-xl shadow-md border fancyborder\\\">\\n\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-semibold mb-2\\\">Metal Sculpture Workshop<\\/h3>\\n\\t\\t\\t\\t\\t<div class=\\\"flex items-center mb-2\\\">\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bx-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<p class=\\\"text-gray-400\\\">The metal sculpture workshop was a bit tough because shaping the metal was harder than expected. It would have been better with simpler materials...<\\/p>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Review Card 2 -->\\n\\t\\t\\t\\t<div class=\\\"review-card p-4 rounded-xl shadow-md border fancyborder\\\">\\n\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-semibold mb-2\\\">Electro Groove Night<\\/h3>\\n\\t\\t\\t\\t\\t<div class=\\\"flex items-center mb-2\\\">\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<p class=\\\"text-gray-400\\\">The Electro Groove Night was so much fun! The music was awesome, and everyone had a great time dancing – a fantastic night out for sure!<\\/p>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<!-- Review Card 3 -->\\n\\t\\t\\t\\t<div class=\\\"review-card p-4 rounded-xl shadow-md border fancyborder\\\">\\n\\t\\t\\t\\t\\t<h3 class=\\\"text-white text-lg font-semibold mb-2\\\">Wimbledon Championships - 2023 (Final)<\\/h3>\\n\\t\\t\\t\\t\\t<div class=\\\"flex items-center mb-2\\\">\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t\\t<i class=\\\"bx bxs-star text-green-400\\\"><\\/i>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<p class=\\\"text-gray-400\\\">Watching the Wimbledon final between Novak Djokovic and Carlos Alcaraz was so exciting! The intense match and incredible skills of the players...<\\/p>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/section>\\n\\t<\\/div>\\n\\n\\t<!-- Right Sidebar for Analytics -->\\n\\t<aside class=\\\"w-full md:w-[300px] lg:w-[400px] bg-gray-800 p-4 scrollable analytics flex-shrink-0\\\">\\n\\t\\t<div class=\\\"flex justify-between items-center mb-4\\\">\\n\\t\\t\\t<h2 class=\\\"text-xl font-bold mb-4\\\">Analytics<\\/h2>\\n\\t\\t\\t<div class=\\\"flex space-x-4\\\">\\n\\t\\t\\t\\t<i class=\\\"bx bx-bell\\\"><\\/i>\\n\\t\\t\\t\\t<i class=\\\"bx bx-cog\\\"><\\/i>\\n\\t\\t\\t\\t<i id=\\\"theme-toggle\\\" class=\\\"bx bx-moon cursor-pointer\\\"><\\/i>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\n\\t\\t<!-- Analytics Content -->\\n\\t\\t<div class=\\\"grid grid-cols-2 gap-4 mb-4\\\">\\n\\t\\t\\t<!-- Past Events Container -->\\n\\t\\t\\t<div class=\\\"bg-gray-800 p-4 rounded-lg shadow-md fancyborder\\\">\\n\\t\\t\\t\\t<h3 class=\\\"text-md font-semibold text-white mb-2\\\">Previous<\\/h3>\\n\\t\\t\\t\\t<div class=\\\"flex justify-between\\\">\\n\\t\\t\\t\\t\\t<span class=\\\"text-2xl text-purple-400\\\">20<\\/span>\\n\\t\\t\\t\\t\\t<i class=\\\"bx bx-check-circle text-4xl text-white\\\"><\\/i>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t<!-- Upcoming Events Container -->\\n\\t\\t\\t<div class=\\\"bg-gray-800 p-4 rounded-lg shadow-md fancyborder\\\">\\n\\t\\t\\t\\t<h3 class=\\\"text-md font-semibold text-white mb-2\\\">Upcoming<\\/h3>\\n\\t\\t\\t\\t<div class=\\\"flex justify-between\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"text-2xl text-purple-400\\\">3<\\/div>\\n\\t\\t\\t\\t\\t<i class=\\\"bx bx-time text-4xl text-white\\\"><\\/i>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t\\t<!-- Chart Section -->\\n\\t\\t<div class=\\\"fancyborder p-4 rounded\\\">\\n\\t\\t\\t<h3 class=\\\"text-lg font-semibold mb-2 text-center\\\">Distribution of Attended Events<\\/h3>\\n\\t\\t\\t<div class=\\\"relative\\\">\\n\\t\\t\\t\\t<canvas id=\\\"eventChart\\\"><\\/canvas>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\n\\t\\t<!-- Contacts Section -->\\n\\t\\t<div class=\\\"fancyborder p-4 rounded mt-4\\\">\\n\\t\\t\\t<h3 class=\\\"text-lg font-semibold mb-4\\\">Contacts<\\/h3>\\n\\t\\t\\t<div class=\\\"flex items-center mb-4\\\">\\n\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/latin.webp\\\" alt=\\\"Contact\\\" class=\\\"w-10 h-10 rounded-full mr-2\\\">\\n\\t\\t\\t\\t<div>\\n\\t\\t\\t\\t\\t<p>Matt favored <span class=\\\"text-purple-400\\\">Jazz Fusion Night<\\/span><\\/p>\\n\\t\\t\\t\\t\\t<span class=\\\"text-xs text-gray-400\\\">1 hour ago<\\/span>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<div class=\\\"flex items-center\\\">\\n\\t\\t\\t\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/stars.webp\\\" alt=\\\"Contact\\\" class=\\\"w-10 h-10 rounded-full mr-2\\\">\\n\\t\\t\\t\\t<div>\\n\\t\\t\\t\\t\\t<p>Bella bought a ticket for <span class=\\\"text-purple-400\\\">Acoustic Serenade Under the Stars<\\/span><\\/p>\\n\\t\\t\\t\\t\\t<span class=\\\"text-xs text-gray-400\\\">4 hours ago<\\/span>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t<\\/aside>\\n<\\/div>\",\"css\":\"html,\\nbody {\\n\\tscrollbar-width: thin;\\n\\tscrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);\\n}\\n\\nbody {\\n\\tdisplay: flex;\\n\\tfont-family: Nunito, sans-serif;\\n}\\n\\n.main-content {\\n\\tdisplay: flex;\\n\\tflex-direction: row;\\n}\\n\\n@media (max-width: 768px) {\\n\\t.main-content {\\n\\t\\tflex-direction: column;\\n\\t}\\n\\t.analytics {\\n\\t\\twidth: 100%;\\n\\t}\\n\\t.scrollable {\\n\\t\\toverflow-y: visible;\\n\\t}\\n}\\n\\nhtml.dark {\\n --bg-color: #1f2937;\\n --text-color: #ffffff;\\n --icon-color: #ffffff;\\n --card-bg: #1e2139;\\n --text-white: #ffffff;\\n --hover-bg-color: #ffffff; \\n --hover-text-color: #1f2937;\\n\\t--scrollbar-color: #f59e0c;\\n\\t--scrollbar-track-color: #1f2937;\\n}\\n\\nhtml {\\n --bg-color: #ffffff;\\n --text-color: #1f2937;\\n --icon-color: #1f2937;\\n --card-bg: #ffffff;\\n --text-white: #000000;\\n --hover-bg-color: #1f2937;\\n --hover-text-color: #ffffff;\\n\\t--scrollbar-color: #f59e0c;\\n\\t--scrollbar-track-color: #fff;\\n}\\n\\n.text-white {\\n\\tcolor: var(--text-white) !important;\\n}\\n\\nbutton.text-white,\\n.bg-purple-500.text-white,\\n.bg-black.text-white,\\n.heart-icon.text-white {\\n\\tcolor: #fff !important;\\n\\ti {\\n\\t\\tcolor: #fff !important;\\n\\t}\\n}\\n\\n.hover:bg-gray-700 {\\n\\t&:hover {\\n\\t\\tcolor: #fff;\\n\\t}\\n}\\n\\nbody,\\n.bg-gray-800,\\n.bg-gray-700,\\n.scrollable {\\n\\tbackground-color: var(--bg-color) !important;\\n\\tcolor: var(--text-color) !important;\\n}\\n\\ni {\\n\\tcolor: var(--icon-color);\\n}\\n\\n.nav-hover {\\n padding: 12px 16px;\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n justify-content: flex-start;\\n transition: background-color 0.2s, color 0.2s;\\n border-radius: 8px;\\n\\tcursor: pointer;\\n}\\n\\n.nav-hover:hover {\\n background-color: var(--hover-bg-color);\\n color: var(--hover-text-color);\\n}\\n\\n.nav-hover:hover i {\\n color: var(--hover-text-color);\\n}\\n\\n.event-card {\\n\\tbackground-color: var(--card-bg);\\n\\tborder-radius: 12px;\\n\\tposition: relative;\\n\\tborder: var(--fancy-border);\\n\\tbox-shadow: var(--fancy-shadow);\\n}\\n\\n.event-card img {\\n\\tborder-radius: 8px;\\n\\tborder: var(--fancy-border);\\n\\tbox-shadow: var(--fancy-shadow);\\n}\\n.event-card img {\\n\\tborder-radius: 10px;\\n\\twidth: 100%;\\n}\\n.event-card .bg-black {\\n\\tbackground-color: rgba(0, 0, 0, 0.6);\\n}\\n.text-white {\\n\\tcolor: #ffffff;\\n}\\n.event-card .text-gray-400 {\\n\\tcolor: #b0b3c3;\\n}\\n.event-card button {\\n\\ttransition: background-color 0.2s;\\n}\\n\\n.heart-icon {\\n\\tbackground-color: rgba(0, 0, 0, 0.5);\\n\\tborder-radius: 50%;\\n\\tpadding: 6px;\\n\\ttransition: background-color 0.2s, color 0.2s;\\n\\tcursor: pointer;\\n}\\n.heart-icon:hover {\\n\\tbackground-color: rgba(255, 255, 255, 0.2);\\n}\\n.heart-icon.active {\\n\\tcolor: #fff;\\n\\tbackground-color: rgba(255, 255, 255, 0.2);\\n}\\n.events {\\n\\tborder-left: var(--fancy-border);\\n\\tborder-right: var(--fancy-border);\\n}\\n\\n.sidebar {\\n\\tli {\\n\\t\\tpadding: 12px 16px;\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tgap: 5px;\\n\\t\\tjustify-content: flex-start;\\n\\t\\ttransition: background-color 0.2s;\\n\\t\\tborder-radius: 8px;\\n\\t}\\n}\\n.sidebar-item:hover {\\n\\tbackground-color: rgba(255, 255, 255, 0.1);\\n\\tborder-radius: 8px;\\n}\\n\\n.review-card {\\n\\tbackground-color: var(--card-bg);\\n\\tborder-radius: 12px;\\n\\tborder: 1px solid rgba(138, 43, 226, 0.8);\\n\\tbox-shadow: 0 0 15px 5px rgba(138, 43, 226, 0.2);\\n}\\n.review-card h3 {\\n\\tcolor: #ffffff;\\n}\\n.review-card p {\\n\\tcolor: #b0b3c3;\\n}\\n.review-card .bx-star {\\n\\tcolor: #9ca3af;\\n}\\n.review-card .bxs-star {\\n\\tcolor: #22c55e;\\n}\\n\\n.analytics .bg-gray-700 {\\n\\tbackground-color: #2b2d42;\\n\\tborder-radius: 12px;\\n\\tpadding: 1.25rem;\\n\\tmargin-bottom: 1rem;\\n\\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\\n}\\n\\n.analytics h2 {\\n\\tfont-size: 1.5rem;\\n\\tfont-weight: bold;\\n\\tmargin-bottom: 1rem;\\n}\\n.analytics h3 {\\n\\tfont-size: 1.125rem;\\n\\tfont-weight: 600;\\n\\tmargin-bottom: 0.5rem;\\n}\\n\\n.analytics .text-2xl {\\n\\tfont-size: 2rem;\\n\\tcolor: #9f7aea;\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: 0.5rem;\\n}\\n\\n.analytics #eventChart {\\n\\twidth: 100%;\\n}\\n\\n.analytics .flex.items-center {\\n\\tmargin-bottom: 1rem;\\n}\\n.analytics .text-purple-400 {\\n\\tcolor: #9f7aea;\\n}\\n:root {\\n\\t--fancy-border: 2px solid rgba(43, 162, 255, 0.2);\\n\\t--fancy-shadow: 0 0 10px 4px rgba(138, 43, 226, 0.3);\\n}\\n.fancyborder {\\n\\tborder: var(--fancy-border);\\n\\tbox-shadow: var(--fancy-shadow);\\n}\\n\\n\\/* Scrollbar styling *\\/\\n.scrollable {\\n\\tscrollbar-width: thin;\\n\\tscrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);\\n\\toverflow-y: auto;\\n\\theight: 100vh;\\n}\\n\\n.scrollable::-webkit-scrollbar {\\n\\twidth: 8px;\\n}\\n\\n.scrollable::-webkit-scrollbar-track {\\n\\tbackground: #6466f1;\\n\\tborder-radius: 8px;\\n}\\n\\n.scrollable::-webkit-scrollbar-thumb {\\n\\tbackground-color: red;\\n\\tborder-radius: 8px;\\n\\tborder: 2px solid #6466f1;\\n}\\n\",\"js\":\"const ctx = document.getElementById(\\\"eventChart\\\").getContext(\\\"2d\\\");\\nconst eventChart = new Chart(ctx, {\\n\\ttype: \\\"doughnut\\\",\\n\\tdata: {\\n\\t\\tlabels: [\\\"Workshop\\\", \\\"Theater\\\", \\\"Concert\\\", \\\"Sport\\\"],\\n\\t\\tdatasets: [\\n\\t\\t\\t{\\n\\t\\t\\t\\tdata: [40, 15, 25, 20],\\n\\t\\t\\t\\tbackgroundColor: [\\\"#f59e0b\\\", \\\"#e11d48\\\", \\\"#6366f1\\\", \\\"#10b981\\\"]\\n\\t\\t\\t}\\n\\t\\t]\\n\\t},\\n\\toptions: {\\n\\t\\tresponsive: true,\\n\\t\\tmaintainAspectRatio: false,\\n\\t\\tplugins: {\\n\\t\\t\\tlegend: {\\n\\t\\t\\t\\tposition: \\\"top\\\"\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n});\\n\\nconst themeToggle = document.getElementById(\\\"theme-toggle\\\");\\n\\nthemeToggle.addEventListener(\\\"click\\\", () => {\\n\\tconst html = document.documentElement;\\n\\thtml.classList.toggle(\\\"dark\\\");\\n\\n\\tif (html.classList.contains(\\\"dark\\\")) {\\n\\t\\tthemeToggle.classList.replace(\\\"bx-moon\\\", \\\"bx-sun\\\");\\n\\t\\thtml.classList.add(\\\"bg-gray-900\\\", \\\"text-white\\\");\\n\\t\\thtml.classList.remove(\\\"bg-white\\\", \\\"text-black\\\");\\n\\t} else {\\n\\t\\tthemeToggle.classList.replace(\\\"bx-sun\\\", \\\"bx-moon\\\");\\n\\t\\thtml.classList.add(\\\"bg-white\\\", \\\"text-black\\\");\\n\\t\\thtml.classList.remove(\\\"bg-gray-900\\\", \\\"text-white\\\");\\n\\t}\\n});\\n\\ndocument.querySelectorAll(\\\".heart-icon\\\").forEach((icon) => {\\n\\ticon.addEventListener(\\\"click\\\", () => {\\n\\t\\ticon.classList.toggle(\\\"active\\\");\\n\\t\\ticon.classList.toggle(\\\"bx-heart\\\");\\n\\t\\ticon.classList.toggle(\\\"bxs-heart\\\");\\n\\t});\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"bg-gray-900 text-white dark\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-09-04T23:09:42.856Z\",\"updated_at\":\"2025-06-04T13:58:16.092Z\",\"title\":\"Chart.js: Fancy Responsive Events Dashboard\",\"description\":\"I saw the fantastic work done by @ecemgo, and wanted to see how fast I could replicate it using tailwind and chart.js. It's not a perfect replication, but I added a little bit of my own flair and built it in an evening, so...\\n\\nHere's the original: https:\\/\\/codepen.io\\/ecemgo\\/full\\/rNbLodN\",\"slug_hash\":\"KKjreLw\",\"head\":\"<script src=\\\"https:\\/\\/peterbenoit.com\\/js\\/badge.js\\\" defer><\\/script><script src=\\\"https:\\/\\/uiguy.dev\\/libs\\/console.js\\\"><\\/script>\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n<meta name=\\\"author\\\" content=\\\"Peter Benoit\\\">\",\"private\":false,\"slug_hash_private\":\"cb1fb96bdfcba237545ca5d69c126c7f\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":4,\"pick\":false,\"popularity\":103,\"views_count\":833,\"pick_visible_at\":null,\"cpid\":\"0191bf4d-0a48-7aae-9a56-95e68fa64dbb\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"KKjreLw\"}"}