feat: implement advanced reward management and wheel customization
- Add customizable background color - Add wheel animations and sound effects - Add reward description field and winner modal - Change font to Dana - Add configurable reward probabilities - Support reward types (Empty, Discount Code, LiveCoin) - Replace reward title with reward type selector - Allow wheel page title customization from admin panel
This commit is contained in:
@@ -1,92 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>پنل مدیریت</title>
|
||||
|
||||
<link rel="icon" href="data:,">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<body id="main-body">
|
||||
<div class="admin-container">
|
||||
|
||||
<div class="admin-header">
|
||||
<h1> مدیریت گردونه شانس</h1>
|
||||
<h1>مدیریت گردونه شانس</h1>
|
||||
<p>مدیریت آیتمها و جوایز گردونه</p>
|
||||
</div>
|
||||
|
||||
<!-- تنظیمات رنگ پسزمینه -->
|
||||
<div class="card">
|
||||
<h2>تنظیمات ظاهری</h2>
|
||||
<div class="color-section">
|
||||
<label>رنگ پسزمینه:</label>
|
||||
<div class="color-presets">
|
||||
<div class="preset" style="background:#7B241C" data-color="#7B241C"></div>
|
||||
<div class="preset" style="background:#1a237e" data-color="#1a237e"></div>
|
||||
<div class="preset" style="background:#1b5e20" data-color="#1b5e20"></div>
|
||||
<div class="preset" style="background:#4a148c" data-color="#4a148c"></div>
|
||||
<div class="preset" style="background:#e65100" data-color="#e65100"></div>
|
||||
<div class="preset" style="background:#006064" data-color="#006064"></div>
|
||||
<div class="preset" style="background:#212121" data-color="#212121"></div>
|
||||
<div class="preset" style="background:#880e4f" data-color="#880e4f"></div>
|
||||
</div>
|
||||
<div class="color-custom">
|
||||
<label>رنگ دلخواه:</label>
|
||||
<input type="color" id="bg-color-picker" value="#7B241C">
|
||||
<button id="apply-color">اعمال</button>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<span>پیشنمایش:</span>
|
||||
<div id="color-preview-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- عنوان صفحه گردونه -->
|
||||
<div class="title-section">
|
||||
<h3>عنوان صفحه گردونه</h3>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>متن عنوان:</label>
|
||||
<input type="text" id="title-text-input" placeholder="گردونه شانس">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>رنگ عنوان:</label>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<input type="color" id="title-color-picker" value="#FFD700">
|
||||
<span id="title-preview" style="font-size:20px; font-weight:bold; color:#FFD700;">گردونه شانس</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<button id="apply-title" class="btn-primary">اعمال</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- افزودن آیتم -->
|
||||
<div class="add-section">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="title-input"
|
||||
placeholder="عنوان جایزه"
|
||||
>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
id="value-input"
|
||||
placeholder="مقدار جایزه"
|
||||
>
|
||||
|
||||
<button id="add-btn">
|
||||
افزودن
|
||||
</button>
|
||||
|
||||
<div class="card">
|
||||
<h2>افزودن آیتم جدید</h2>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>نوع جایزه:</label>
|
||||
<select id="new-prize-type">
|
||||
<option value="پوچ">پوچ</option>
|
||||
<option value="کد تخفیف">کد تخفیف</option>
|
||||
<option value="لایوکوین">لایوکوین (LC)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>عنوان:</label>
|
||||
<input type="text" id="new-title" placeholder="مثلاً: تخفیف ۲۰٪">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>مقدار جایزه:</label>
|
||||
<input type="text" id="new-prize" placeholder="مثلاً: DISC20">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>احتمال (۱ = عادی):</label>
|
||||
<input type="number" id="new-probability" value="1" min="0.1" step="0.1">
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label>توضیحات:</label>
|
||||
<textarea id="new-description" placeholder="توضیحاتی که بعد از برنده شدن نمایش داده میشه..."></textarea>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<button id="add-btn" class="btn-primary">افزودن آیتم</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- جدول -->
|
||||
<div class="table-wrapper">
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>عنوان جایزه</th>
|
||||
<th>مقدار</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="items-table-body">
|
||||
|
||||
<!-- ردیف نمونه (دینامیک توسط JS ساخته میشود) -->
|
||||
<!--
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>جایزه تست</td>
|
||||
<td>100</td>
|
||||
<td class="actions">
|
||||
|
||||
<button class="edit-btn" data-id="1">
|
||||
✏️ ویرایش
|
||||
</button>
|
||||
|
||||
<button class="delete-btn" data-id="1">
|
||||
🗑 حذف
|
||||
</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
-->
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<div class="card">
|
||||
<h2>لیست آیتمها</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>نوع جایزه</th>
|
||||
<th>عنوان</th>
|
||||
<th>مقدار</th>
|
||||
<th>احتمال</th>
|
||||
<th>توضیحات</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="items-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- مودال ویرایش -->
|
||||
<div id="edit-modal" class="modal hidden">
|
||||
<div class="modal-content admin-modal">
|
||||
<h2>ویرایش آیتم</h2>
|
||||
<input type="hidden" id="edit-id">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>نوع جایزه:</label>
|
||||
<select id="edit-prize-type">
|
||||
<option value="پوچ">پوچ</option>
|
||||
<option value="کد تخفیف">کد تخفیف</option>
|
||||
<option value="لایوکوین">لایوکوین (LC)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>عنوان:</label>
|
||||
<input type="text" id="edit-title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>مقدار جایزه:</label>
|
||||
<input type="text" id="edit-prize">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>احتمال:</label>
|
||||
<input type="number" id="edit-probability" min="0.1" step="0.1">
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label>توضیحات:</label>
|
||||
<textarea id="edit-description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button id="save-edit" class="btn-primary">ذخیره</button>
|
||||
<button id="cancel-edit" class="btn-secondary">انصراف</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="assets/js/admin.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user