Anahita-Mahmoudi
ec86cdc528
- 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
162 lines
5.9 KiB
HTML
162 lines
5.9 KiB
HTML
<!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 id="main-body">
|
||
<div class="admin-container">
|
||
<div class="admin-header">
|
||
<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="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="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>
|