-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | # |
+ عنوان جایزه |
+ مقدار |
+ عملیات |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
\ No newline at end of file
diff --git a/frontend/assets/css/style.css b/frontend/assets/css/style.css
index b183966..5f262d2 100644
--- a/frontend/assets/css/style.css
+++ b/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;
\ No newline at end of file
+@media (max-width: 550px) {
+ .wheel-wrapper {
+ width: 340px;
+ height: 340px;
+ }
+
+ .page h1 {
+ font-size: 26px;
+ }
+
+ #spin-btn {
+ font-size: 16px;
+ padding: 12px 36px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/assets/js/admin.js b/frontend/assets/js/admin.js
index 2058645..c81efca 100644
--- a/frontend/assets/js/admin.js
+++ b/frontend/assets/js/admin.js
@@ -1,33 +1,103 @@
-import { adminGetItems, createItem, deleteItem } from './api.js';
+import {
+ adminGetItems,
+ createItem,
+ deleteItem,
+ updateItem // 👈 باید اینو هم به api.js اضافه کنی
+} from './api.js';
-const list = document.getElementById('items-list');
-const input = document.getElementById('new-item');
+const tableBody = document.getElementById('items-table-body');
+const titleInput = document.getElementById('title-input');
+const valueInput = document.getElementById('value-input');
const addBtn = document.getElementById('add-btn');
+let editId = null; // 👈 حالت ویرایش
+
+// -------------------- Render --------------------
async function renderItems() {
const items = await adminGetItems();
- list.innerHTML = '';
- items.forEach(item => {
- const li = document.createElement('li');
- li.innerHTML = `
-
${item.title}
-
+
+ tableBody.innerHTML = '';
+
+ items.forEach((item, index) => {
+ const row = document.createElement('tr');
+
+ row.innerHTML = `
+
${index + 1} |
+
${item.title} |
+
${item.value} |
+
+
+
+
+
+
+ |
`;
- list.appendChild(li);
+
+ tableBody.appendChild(row);
});
}
+// -------------------- Delete --------------------
window.removeItem = async (id) => {
await deleteItem(id);
renderItems();
};
+// -------------------- Edit --------------------
+window.editItem = (id, title, value) => {
+ titleInput.value = title;
+ valueInput.value = value;
+
+ editId = id;
+
+ addBtn.textContent = 'آپدیت ✏️';
+};
+
+// -------------------- Add / Update --------------------
addBtn.onclick = async () => {
- const title = input.value.trim();
- if (!title) return;
- await createItem(title);
- input.value = '';
+ const title = titleInput.value.trim();
+ const value = valueInput.value.trim();
+
+ if (!title || !value) {
+ alert('همه فیلدها را پر کن');
+ return;
+ }
+
+ // حالت ویرایش
+ if (editId) {
+ await updateItem(editId, {
+ title,
+ value: parseInt(value)
+ });
+
+ editId = null;
+ addBtn.textContent = 'افزودن';
+ }
+
+ // حالت افزودن
+ else {
+ await createItem({
+ title,
+ value: parseInt(value)
+ });
+ }
+
+ titleInput.value = '';
+ valueInput.value = '';
+
renderItems();
};
+// -------------------- Init --------------------
renderItems();
\ No newline at end of file
diff --git a/frontend/assets/js/api.js b/frontend/assets/js/api.js
index a55795f..17958bc 100644
--- a/frontend/assets/js/api.js
+++ b/frontend/assets/js/api.js
@@ -1,20 +1,40 @@
const BASE = 'http://127.0.0.1:8000';
export const getItems = () =>
- fetch(`${BASE}/user/items`).then(r => r.json());
+ fetch(`${BASE}/user/items`)
+ .then(r => r.json());
export const spinWheel = () =>
- fetch(`${BASE}/user/spin`, { method: 'POST' }).then(r => r.json());
+ fetch(`${BASE}/user/spin`, {
+ method: 'POST'
+ }).then(r => r.json());
export const adminGetItems = () =>
- fetch(`${BASE}/admin/items`).then(r => r.json());
+ fetch(`${BASE}/admin/items`)
+ .then(r => r.json());
-export const createItem = (title) =>
+export const createItem = (data) =>
fetch(`${BASE}/admin/items`, {
method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ title })
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(data)
+ }).then(r => r.json());
+
+export const updateItem = (id, data) =>
+ fetch(`${BASE}/admin/items/${id}`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(data)
}).then(r => r.json());
export const deleteItem = (id) =>
- fetch(`${BASE}/admin/items/${id}`, { method: 'DELETE' }).then(r => r.json());
\ No newline at end of file
+ fetch(`${BASE}/admin/items/${id}`, {
+ method: 'DELETE'
+ }).then(r => {
+ if (r.status === 204) return {};
+ return r.json();
+ });
\ No newline at end of file
diff --git a/frontend/assets/js/wheel.js b/frontend/assets/js/wheel.js
index 83cc99b..e4ca45c 100644
--- a/frontend/assets/js/wheel.js
+++ b/frontend/assets/js/wheel.js
@@ -4,43 +4,309 @@ const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const btn = document.getElementById('spin-btn');
const result = document.getElementById('result');
-const colors = ['#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6','#1abc9c'];
+
+const DARK = { edge: '#6D0025', main: '#cb183d', highlight: '#E8005E', text: '#fff' };
+const LIGHT = { edge: '#D4889A', main: '#FAD4DC', highlight: '#FFF0F3', text: '#7B0030' };
let items = [];
let angle = 0;
let spinning = false;
+let lampOn = true;
async function init() {
items = await getItems();
- drawWheel(angle);
+ draw(angle);
+ setInterval(() => {
+ lampOn = !lampOn;
+ draw(angle);
+ }, 600);
}
-function drawWheel(rotation) {
+function getTheme(i, total) {
+ if (total % 2 === 0) {
+ return i % 2 === 0 ? DARK : LIGHT;
+ } else {
+ if (i === total - 1) return DARK;
+ return i % 2 === 0 ? DARK : LIGHT;
+ }
+}
+
+function drawSegment(cx, cy, r, start, end, theme) {
+ ctx.beginPath();
+ ctx.moveTo(cx, cy);
+ ctx.arc(cx, cy, r, start, end);
+ ctx.closePath();
+ ctx.fillStyle = theme.edge;
+ ctx.fill();
+
+ const mid = (start + end) / 2;
+ const gx = cx + r * 0.5 * Math.cos(mid);
+ const gy = cy + r * 0.5 * Math.sin(mid);
+ const grad = ctx.createRadialGradient(gx, gy, 0, cx, cy, r);
+ grad.addColorStop(0, theme.highlight);
+ grad.addColorStop(0.45, theme.main);
+ grad.addColorStop(1, theme.edge);
+
+ ctx.beginPath();
+ ctx.moveTo(cx, cy);
+ ctx.arc(cx, cy, r - 2, start, end);
+ ctx.closePath();
+ ctx.fillStyle = grad;
+ ctx.fill();
+
+ const hGrad = ctx.createRadialGradient(gx, gy, 0, gx, gy, r * 0.35);
+ hGrad.addColorStop(0, 'rgba(255,255,255,0.28)');
+ hGrad.addColorStop(1, 'rgba(255,255,255,0)');
+ ctx.beginPath();
+ ctx.moveTo(cx, cy);
+ ctx.arc(cx, cy, r - 2, start, end);
+ ctx.closePath();
+ ctx.fillStyle = hGrad;
+ ctx.fill();
+}
+
+function draw(rotation) {
if (items.length === 0) return;
const cx = canvas.width / 2;
const cy = canvas.height / 2;
- const r = cx - 10;
+ const r = cx - 40;
const slice = (2 * Math.PI) / items.length;
+ const total = items.length;
ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // ═══ سایه کلی ═══
+ ctx.save();
+ ctx.shadowColor = 'rgba(0,0,0,0.6)';
+ ctx.shadowBlur = 30;
+ ctx.shadowOffsetX = 5;
+ ctx.shadowOffsetY = 8;
+ ctx.beginPath();
+ ctx.arc(cx, cy, r + 40, 0, Math.PI * 2);
+ ctx.fillStyle = '#1A0008';
+ ctx.fill();
+ ctx.restore();
+
+ // ═══ حلقه بیرونی تیره ═══
+ const rimGrad = ctx.createRadialGradient(cx - 28, cy - 28, r, cx, cy, r + 40);
+ rimGrad.addColorStop(0, '#A0003A');
+ rimGrad.addColorStop(0.3, '#6D0025');
+ rimGrad.addColorStop(0.7, '#3D0015');
+ rimGrad.addColorStop(1, '#1A0008');
+ ctx.beginPath();
+ ctx.arc(cx, cy, r + 40, 0, Math.PI * 2);
+ ctx.fillStyle = rimGrad;
+ ctx.fill();
+
+ // ═══ بخشهای گردونه ═══
items.forEach((item, i) => {
const start = rotation + i * slice;
const end = start + slice;
+ drawSegment(cx, cy, r, start, end, getTheme(i, total));
+ });
+
+ // ═══ خطوط طلایی ═══
+ items.forEach((_, i) => {
+ const lineAngle = rotation + i * slice;
+ const lGrad = ctx.createLinearGradient(
+ cx, cy,
+ cx + r * Math.cos(lineAngle),
+ cy + r * Math.sin(lineAngle)
+ );
+ lGrad.addColorStop(0, 'rgba(700,550,0,5)');
+ lGrad.addColorStop(0.4, '#a2922e');
+ lGrad.addColorStop(1, '#c8b43b');
ctx.beginPath();
ctx.moveTo(cx, cy);
- ctx.arc(cx, cy, r, start, end);
- ctx.fillStyle = colors[i % colors.length];
- ctx.fill();
+ ctx.lineTo(cx + r * Math.cos(lineAngle), cy + r * Math.sin(lineAngle));
+ ctx.strokeStyle = lGrad;
+ ctx.lineWidth = 5;
ctx.stroke();
+ });
+
+ // ═══ متن آیتمها ═══
+ items.forEach((item, i) => {
+ const start = rotation + i * slice;
+ const theme = getTheme(i, total);
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(start + slice / 2);
ctx.textAlign = 'right';
- ctx.fillStyle = '#fff';
- ctx.font = 'bold 16px Tahoma';
- ctx.fillText(item.title, r - 10, 5);
+ ctx.fillStyle = theme.text;
+ ctx.font = 'bold 12px Tahoma';
+ ctx.shadowColor = 'rgba(0,0,0,0.6)';
+ ctx.shadowBlur = 4;
+ const text = item.title;
+ const maxWidth = r - 52;
+ if (ctx.measureText(text).width > maxWidth) {
+ const mid = Math.ceil(text.length / 2);
+ ctx.fillText(text.slice(0, mid), r - 20, -7);
+ ctx.fillText(text.slice(mid), r - 20, 9);
+ } else {
+ ctx.fillText(text, r - 20, 5);
+ }
ctx.restore();
});
+
+ // ═══ حلقه طلایی داخلی ═══
+ ctx.beginPath();
+ ctx.arc(cx, cy, r + 2, 0, Math.PI * 2);
+ ctx.strokeStyle = '#dfd498';
+ ctx.lineWidth = 4.5;
+ ctx.shadowColor = 'rgba(255,215,0,0.9)';
+ ctx.shadowBlur = 10;
+ ctx.stroke();
+ ctx.shadowBlur = 0;
+
+ // ═══ لامپها ═══
+ const lampCount = 24;
+ const lampR = r + 23;
+ for (let i = 0; i < lampCount; i++) {
+ const lampAngle = (i / lampCount) * Math.PI * 2;
+ const lx = cx + lampR * Math.cos(lampAngle);
+ const ly = cy + lampR * Math.sin(lampAngle);
+ const isOn = lampOn ? i % 2 === 0 : i % 2 !== 0;
+
+ if (isOn) {
+ const glowGrad = ctx.createRadialGradient(lx, ly, 0, lx, ly, 14);
+ glowGrad.addColorStop(0, 'rgba(255,220,80,0.55)');
+ glowGrad.addColorStop(1, 'rgba(255,220,80,0)');
+ ctx.beginPath();
+ ctx.arc(lx, ly, 14, 0, Math.PI * 2);
+ ctx.fillStyle = glowGrad;
+ ctx.fill();
+ }
+
+ const lGrad = ctx.createRadialGradient(lx - 2.5, ly - 2.5, 0.5, lx, ly, 7.5);
+ if (isOn) {
+ lGrad.addColorStop(0, '#FFFFF5');
+ lGrad.addColorStop(0.2, '#FFE566');
+ lGrad.addColorStop(0.6, '#FFB300');
+ lGrad.addColorStop(1, '#E65100');
+ ctx.shadowColor = 'rgba(255,180,0,1)';
+ ctx.shadowBlur = 14;
+ } else {
+ lGrad.addColorStop(0, '#B8954A');
+ lGrad.addColorStop(1, '#4A3010');
+ }
+
+ ctx.beginPath();
+ ctx.arc(lx, ly, 7.5, 0, Math.PI * 2);
+ ctx.fillStyle = lGrad;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+
+ ctx.beginPath();
+ ctx.arc(lx, ly, 7.5, 0, Math.PI * 2);
+ ctx.strokeStyle = isOn ? '#C8960C' : '#6A4A18';
+ ctx.lineWidth = 1.2;
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.arc(lx - 2.5, ly - 2.5, 2.5, 0, Math.PI * 2);
+ ctx.fillStyle = isOn ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.2)';
+ ctx.fill();
+ }
+
+ // ═══ حلقه طلایی بیرونی ═══
+ ctx.beginPath();
+ ctx.arc(cx, cy, r + 35, 0, Math.PI * 2);
+ ctx.strokeStyle = '#C8960C';
+ ctx.lineWidth = 4.5;
+ ctx.shadowColor = 'rgba(150,100,12,0.5)';
+ ctx.shadowBlur = 6;
+ ctx.stroke();
+ ctx.shadowBlur = 0;
+
+ // ═══ دایره مرکزی — هماهنگ با نشانگر ═══
+ const cGrad = ctx.createRadialGradient(cx - 8, cy - 8, 1, cx, cy, 22);
+ cGrad.addColorStop(0, '#FFFFF0');
+ cGrad.addColorStop(0.15, '#FFE566');
+ cGrad.addColorStop(0.45, '#FFD700');
+ cGrad.addColorStop(0.75, '#ff962a');
+ cGrad.addColorStop(1, '#b37900');
+
+ ctx.beginPath();
+ ctx.arc(cx, cy, 22, 0, Math.PI * 2);
+ ctx.fillStyle = cGrad;
+ ctx.shadowColor = 'rgba(0,0,0,0.6)';
+ ctx.shadowBlur = 14;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+
+ ctx.beginPath();
+ ctx.arc(cx, cy, 22, 0, Math.PI * 2);
+ ctx.strokeStyle = '#8B6914';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // بازتاب روی دایره مرکزی
+ ctx.beginPath();
+ ctx.arc(cx - 6, cy - 6, 7, 0, Math.PI * 2);
+ ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ ctx.fill();
+
+ // ═══ نشانگر ═══
+ drawPointer(cx);
+}
+
+function drawPointer(cx) {
+ // سایه
+ ctx.save();
+ ctx.shadowColor = 'rgba(0,0,0,0.4)';
+ ctx.shadowBlur = 8;
+ ctx.shadowOffsetX = 3;
+ ctx.shadowOffsetY = 4;
+ ctx.beginPath();
+ ctx.arc(cx, 20, 17, 0, Math.PI * 2);
+ ctx.fillStyle = 'rgba(0,0,0,0.1)';
+ ctx.fill();
+ ctx.restore();
+
+ // دایره طلایی — همرنگ مرکز
+ const pGrad = ctx.createRadialGradient(cx - 6, 14, 1, cx, 20, 18);
+ pGrad.addColorStop(0, '#FFFFF0');
+ pGrad.addColorStop(0.15, '#FFE566');
+ pGrad.addColorStop(0.45, '#FFD700');
+ pGrad.addColorStop(0.75, '#ff962a');
+ pGrad.addColorStop(1, '#b37900');
+
+ ctx.beginPath();
+ ctx.arc(cx, 20, 17, 0, Math.PI * 2);
+ ctx.fillStyle = pGrad;
+ ctx.shadowColor = 'rgba(200,150,0,0.8)';
+ ctx.shadowBlur = 12;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+ ctx.strokeStyle = '#8B6914';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // بازتاب
+ ctx.beginPath();
+ ctx.arc(cx - 5, 13, 6, 0, Math.PI * 2);
+ ctx.fillStyle = 'rgba(255,255,255,0.35)';
+ ctx.fill();
+
+ // مثلث — همرنگ
+ const triGrad = ctx.createLinearGradient(cx, 34, cx, 62);
+ triGrad.addColorStop(0, '#FFE566');
+ triGrad.addColorStop(0.35, '#FFD700');
+ triGrad.addColorStop(1, '#b37900');
+
+ ctx.beginPath();
+ ctx.moveTo(cx - 13, 35);
+ ctx.lineTo(cx + 13, 35);
+ ctx.lineTo(cx, 62);
+ ctx.closePath();
+ ctx.fillStyle = triGrad;
+ ctx.shadowColor = 'rgba(0,0,0,0.5)';
+ ctx.shadowBlur = 8;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+ ctx.strokeStyle = '#8B6914';
+ ctx.lineWidth = 1.5;
+ ctx.stroke();
}
btn.onclick = async () => {
@@ -53,26 +319,30 @@ btn.onclick = async () => {
const winner = data.winner;
const winnerIdx = items.findIndex(i => i.id === winner.id);
const slice = (2 * Math.PI) / items.length;
- const targetAngle = angle + (Math.PI * 2 * 5) +
- (Math.PI * 2 - (winnerIdx * slice + slice / 2));
- const duration = 4000;
- const start = performance.now();
+ const targetAngle =
+ angle +
+ Math.PI * 2 * 8 +
+ (-Math.PI / 2 - (winnerIdx * slice + slice / 2) - angle % (Math.PI * 2) + Math.PI * 2 * 3);
+
+ const duration = 5500;
+ const startTime = performance.now();
const from = angle;
function animate(now) {
- const elapsed = now - start;
+ const elapsed = now - startTime;
const t = Math.min(elapsed / duration, 1);
- const ease = 1 - Math.pow(1 - t, 3);
+ const ease = 1 - Math.pow(1 - t, 4);
angle = from + (targetAngle - from) * ease;
- drawWheel(angle);
+ draw(angle);
if (t < 1) {
requestAnimationFrame(animate);
} else {
spinning = false;
btn.disabled = false;
- result.textContent = `🎉 ${winner.title}`;
+ draw(angle);
+ result.innerHTML = `
🎉 ${winner.title} 🎉`;
}
}
diff --git a/frontend/index.html b/frontend/index.html
index 0713603..a2039d2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,12 +6,14 @@
-
گردونه شانس
-
-
-
-
-
+
+
گردونه شانس
+
+
+
+
+
+