Refactor: Implement SmartCube renderer, improve UI styling, and fix gaps

dist/assets/index-GD5U86y_.css

@@ -0,0 +1 @@
+:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-gradient: radial-gradient(circle at center, #2b2b2b 0%, #000000 100%);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-color: #ffffff;--text-strong: #ffffff;--text-secondary: rgba(255, 255, 255, .85);--text-muted: rgba(255, 255, 255, .7);--accent-cyan: #00f2fe;--accent-purple: #4facfe;--primary-accent: #00f2fe;--title-glow: rgba(0, 255, 255, .2);--toggle-btn-border: rgba(255, 255, 255, .2);--panel-bg: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--panel-shadow: 0 4px 15px rgba(0, 0, 0, .2)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;height:100vh;flex-direction:column;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-color);overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.smart-cube-container[data-v-dec8c361]{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:transparent;perspective:1000px}.scene[data-v-dec8c361]{position:relative;width:0;height:0;transform-style:preserve-3d}.cube[data-v-dec8c361]{position:relative;transform-style:preserve-3d}.cubie[data-v-dec8c361]{position:absolute;width:100px;height:100px;margin-left:-50px;margin-top:-50px;transform-style:preserve-3d}.sticker[data-v-dec8c361]{position:absolute;width:98px;height:98px;top:1px;left:1px;border-radius:8px;box-shadow:inset 0 0 10px #00000080;border:1px solid rgba(0,0,0,.2);backface-visibility:hidden}.sticker.up[data-v-dec8c361]{transform:rotateX(90deg) translateZ(50px)}.sticker.down[data-v-dec8c361]{transform:rotateX(-90deg) translateZ(50px)}.sticker.front[data-v-dec8c361]{transform:translateZ(50px)}.sticker.back[data-v-dec8c361]{transform:rotateY(180deg) translateZ(50px)}.sticker.left[data-v-dec8c361]{transform:rotateY(-90deg) translateZ(50px)}.sticker.right[data-v-dec8c361]{transform:rotateY(90deg) translateZ(50px)}.white[data-v-dec8c361]{background:#e0e0e0}.yellow[data-v-dec8c361]{background:#ffd500}.green[data-v-dec8c361]{background:#009e60}.blue[data-v-dec8c361]{background:#0051ba}.orange[data-v-dec8c361]{background:#ff5800}.red[data-v-dec8c361]{background:#c41e3a}.black[data-v-dec8c361]{background:#111;display:none}.navbar[data-v-bc85c255]{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:50px;width:100%;box-sizing:border-box;position:absolute;top:0;left:0;z-index:100;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none}.logo-container[data-v-bc85c255]{display:flex;align-items:center;gap:10px}.logo-text[data-v-bc85c255]{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,242,254,.5)}.nav-container[data-v-bc85c255]{display:flex;gap:15px;align-items:center}.nav-btn[data-v-bc85c255]{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;padding:8px;border-radius:50%;transition:all .3s ease}.nav-btn[data-v-bc85c255]:hover{background:#fff3}.app-footer[data-v-651f6ae4]{width:100%;padding:0 20px;height:40px;display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;z-index:10;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:none;box-shadow:none;color:var(--text-muted);box-sizing:border-box}.footer-content[data-v-651f6ae4]{display:flex;align-items:center;gap:10px}p[data-v-651f6ae4]{font-size:.8rem;letter-spacing:.5px;margin:0}.app-content[data-v-c7d7a511]{flex:1;display:flex;justify-content:center;align-items:center;width:100%;padding:0;position:relative;z-index:1;user-select:none;-webkit-user-select:none}

dist/assets/rubic-cube-6wQ3YEkf.svg

@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .face { stroke: #000; stroke-width: 6; stroke-linejoin: round; }
+      .top { fill: #ffffff; }
+      .left { fill: #009e60; }
+      .right { fill: #c41e3a; }
+    </style>
+  </defs>
+  
+  <!-- Top Face -->
+  <g class="face top">
+    <path d="M256 80 L309.33 106.67 L256 133.33 L202.67 106.67 Z" />
+    <path d="M309.33 106.67 L362.67 133.33 L309.33 160 L256 133.33 Z" />
+    <path d="M362.67 133.33 L416 160 L362.67 186.67 L309.33 160 Z" />
+    
+    <path d="M202.67 106.67 L256 133.33 L202.67 160 L149.33 133.33 Z" />
+    <path d="M256 133.33 L309.33 160 L256 186.67 L202.67 160 Z" />
+    <path d="M309.33 160 L362.67 186.67 L309.33 213.33 L256 186.67 Z" />
+    
+    <path d="M149.33 133.33 L202.67 160 L149.33 186.67 L96 160 Z" />
+    <path d="M202.67 160 L256 186.67 L202.67 213.33 L149.33 186.67 Z" />
+    <path d="M256 186.67 L309.33 213.33 L256 240 L202.67 213.33 Z" />
+  </g>
+
+  <!-- Left Face -->
+  <g class="face left">
+    <path d="M96 160 L149.33 186.67 L149.33 248 L96 221.33 Z" />
+    <path d="M149.33 186.67 L202.67 213.33 L202.67 274.67 L149.33 248 Z" />
+    <path d="M202.67 213.33 L256 240 L256 301.33 L202.67 274.67 Z" />
+    
+    <path d="M96 221.33 L149.33 248 L149.33 309.33 L96 282.67 Z" />
+    <path d="M149.33 248 L202.67 274.67 L202.67 336 L149.33 309.33 Z" />
+    <path d="M202.67 274.67 L256 301.33 L256 362.67 L202.67 336 Z" />
+    
+    <path d="M96 282.67 L149.33 309.33 L149.33 370.67 L96 344 Z" />
+    <path d="M149.33 309.33 L202.67 336 L202.67 397.33 L149.33 370.67 Z" />
+    <path d="M202.67 336 L256 362.67 L256 424 L202.67 397.33 Z" />
+  </g>
+
+  <!-- Right Face -->
+  <g class="face right">
+    <path d="M256 240 L309.33 213.33 L309.33 274.67 L256 301.33 Z" />
+    <path d="M309.33 213.33 L362.67 186.67 L362.67 248 L309.33 274.67 Z" />
+    <path d="M362.67 186.67 L416 160 L416 221.33 L362.67 248 Z" />
+    
+    <path d="M256 301.33 L309.33 274.67 L309.33 336 L256 362.67 Z" />
+    <path d="M309.33 274.67 L362.67 248 L362.67 309.33 L309.33 336 Z" />
+    <path d="M362.67 248 L416 221.33 L416 282.67 L362.67 309.33 Z" />
+    
+    <path d="M256 362.67 L309.33 336 L309.33 397.33 L256 424 Z" />
+    <path d="M309.33 336 L362.67 309.33 L362.67 370.67 L309.33 397.33 Z" />
+    <path d="M362.67 309.33 L416 282.67 L416 344 L362.67 370.67 Z" />
+  </g>
+</svg>

dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/rubic-cube-6wQ3YEkf.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rubic Cube</title>
+    <script type="module" crossorigin src="/assets/index-D2BDE6sW.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-GD5U86y_.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>