git add .

git commit -m "feat: improve wheel UI with gold pointer and center circle sync"

frontend/assets/css/style.css

@@ -1,61 +1,325 @@
+/* =========================
+   ADMIN PANEL
+========================= */
+
+.admin-container {
+  width: 100%;
+  max-width: 1200px;
+  padding: 30px;
+}
+
+.admin-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.admin-header h1 {
+  color: #FFD700;
+  font-size: 38px;
+  text-shadow: 0 0 15px rgba(255,215,0,0.5);
+}
+
+.admin-header p {
+  color: #f5d6a0;
+  margin-top: 10px;
+  font-size: 18px;
+}
+
+.add-section {
+  background: rgba(0,0,0,0.25);
+  backdrop-filter: blur(8px);
+
+  border: 1px solid rgba(255,255,255,0.1);
+
+  border-radius: 20px;
+
+  padding: 20px;
+
+  display: flex;
+  gap: 15px;
+
+  margin-bottom: 30px;
+
+  box-shadow:
+    0 10px 30px rgba(0,0,0,0.4),
+    inset 0 0 20px rgba(255,255,255,0.03);
+}
+
+.add-section input {
+  flex: 1;
+
+  padding: 14px;
+
+  border: none;
+
+  border-radius: 12px;
+
+  background: rgba(255,255,255,0.08);
+
+  color: white;
+
+  font-size: 16px;
+
+  outline: none;
+}
+
+.add-section input::placeholder {
+  color: rgba(255,255,255,0.5);
+}
+
+#add-btn {
+  padding: 14px 28px;
+
+  background: linear-gradient(
+    135deg,
+    #FFD700,
+    #D4AC0D
+  );
+
+  color: #4a0f0f;
+
+  border: none;
+
+  border-radius: 14px;
+
+  font-weight: bold;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+
+  box-shadow:
+    0 4px 20px rgba(255,215,0,0.3);
+}
+
+#add-btn:hover {
+  transform: translateY(-2px);
+
+  box-shadow:
+    0 8px 25px rgba(255,215,0,0.45);
+}
+
+.table-wrapper {
+  background: rgba(0,0,0,0.25);
+
+  backdrop-filter: blur(10px);
+
+  border-radius: 22px;
+
+  overflow: hidden;
+
+  border: 1px solid rgba(255,255,255,0.08);
+
+  box-shadow:
+    0 10px 40px rgba(0,0,0,0.45);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background:
+    linear-gradient(
+      135deg,
+      #FFD700,
+      #D4AC0D
+    );
+
+  color: #4a0f0f;
+}
+
+th {
+  padding: 18px;
+  font-size: 17px;
+}
+
+td {
+  padding: 18px;
+  text-align: center;
+  color: white;
+}
+
+tbody tr {
+  border-bottom:
+    1px solid rgba(255,255,255,0.06);
+
+  transition: 0.2s;
+}
+
+tbody tr:hover {
+  background:
+    rgba(255,255,255,0.05);
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.edit-btn,
+.delete-btn {
+  border: none;
+
+  padding: 10px 16px;
+
+  border-radius: 10px;
+
+  cursor: pointer;
+
+  font-weight: bold;
+
+  transition: 0.2s;
+}
+
+.edit-btn {
+  background:
+    linear-gradient(
+      135deg,
+      #9B59B6,
+      #7D3C98
+    );
+
+  color: white;
+}
+
+.delete-btn {
+  background:
+    linear-gradient(
+      135deg,
+      #E74C3C,
+      #922B21
+    );
+
+  color: white;
+}
+
+.edit-btn:hover,
+.delete-btn:hover {
+  transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+
+  .add-section {
+    flex-direction: column;
+  }
+
+  table {
+    font-size: 14px;
+  }
+
+  th,
+  td {
+    padding: 12px;
+  }
+}
+
+
+/* =========================
+   WHEEL PAGE
+========================= */
+
 * {
-  box-sizing: border-box;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #8B0000 0%, #4a0f0f 50%, #2d0000 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-family: Tahoma, sans-serif;
-  background: #f5f5f5;
+}
+
+.page {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 40px 20px;
-  gap: 20px;
+  gap: 24px;
+  padding: 30px;
 }
 
-h1 {
-  color: #2c3e50;
-  margin-bottom: 10px;
+.page h1 {
+  color: #FFD700;
+  font-size: 36px;
+  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+  letter-spacing: 2px;
 }
 
-canvas {
-  border-radius: 50%;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+.wheel-wrapper {
+  position: relative;
+  width: 500px;
+  height: 500px;
 }
 
-button {
-  padding: 12px 30px;
-  font-size: 18px;
+.wheel-wrapper canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+#spin-btn {
+  padding: 16px 48px;
+  font-size: 20px;
+  font-weight: bold;
   font-family: Tahoma, sans-serif;
-  background: #e74c3c;
-  color: white;
+  background: linear-gradient(135deg, #FFD700, #D4AC0D);
+  color: #4a0f0f;
   border: none;
-  border-radius: 8px;
+  border-radius: 50px;
   cursor: pointer;
+  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
+  transition: 0.2s;
 }
 
-button:hover {
-  background: #c0392b;
+#spin-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.55);
 }
 
-button:disabled {
-  background: #aaa;
+#spin-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
 }
 
 #result {
-  font-size: 24px;
+  min-height: 50px;
+  text-align: center;
+}
+
+.winner-text {
+  font-size: 28px;
   font-weight: bold;
-  color: #2c3e50;
+  color: #FFD700;
+  text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
+  animation: pop 0.4s ease;
 }
 
-/* ادمین */
-#add-section {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+@keyframes pop {
+  0% { transform: scale(0.5); opacity: 0; }
+  70% { transform: scale(1.1); }
+  100% { transform: scale(1); opacity: 1; }
 }
 
-input {
-  padding: 10px;
+@media (max-width: 550px) {
+  .wheel-wrapper {
+    width: 340px;
+    height: 340px;
+  }
+
+  .page h1 {
+    font-size: 26px;
+  }
+
+  #spin-btn {
+    font-size: 16px;
+    padding: 12px 36px;
+  }
+}