Skip to content

E
el3ab-Player
Commit 2b842330 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

feat: add layout control sliders to admin branding page 

Adds range slider sections for HUD, Tab Bar, Home Page, Quick Actions,
Game Tiles, Game Menu Sheet, Menu Buttons, Menu Chips, and Bot Cards —
covering all sizing, spacing, padding, margin, and font controls.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent e8043f26
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 0 deletions
admin/branding.php
View file @ 2b842330
......@@ -155,6 +155,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) {
.upload-box img { max-width: 80px; max-height: 80px; border-radius: 4px; }
button[type="submit"] { background: linear-gradient(135deg, #E4AC38, #FFCC66); color: #1a1a1a; border: none; padding: 12px 32px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 16px; }
.saved { background: #34D399; color: #000; padding: 8px 16px; border-radius: 6px; margin: 8px 0; font-size: 13px; font-weight: 600; }
.range-row { display:flex; align-items:center; gap:8px; }
.range-row input[type="range"] { flex:1; height:6px; -webkit-appearance:none; background:#2a2a4a; border-radius:3px; outline:none; }
.range-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#E4AC38; cursor:pointer; }
.range-row .range-val { min-width:40px; text-align:right; font-size:12px; color:#E4AC38; font-family:'IBM Plex Mono',monospace; }
</style>
</head>
<body>
......@@ -203,6 +207,287 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) {
</div>
</div>
<!-- LAYOUT: HUD BAR -->
<h2>📐 HUD Bar Layout</h2>
<div class="section">
<div class="grid">
<?php
$hudLayout = [
['key' => 'hud_height', 'label' => 'HUD Height', 'default' => '56', 'min' => 40, 'max' => 80, 'hint' => 'Top bar height (px)'],
['key' => 'hud_avatar_size', 'label' => 'Avatar Size', 'default' => '34', 'min' => 24, 'max' => 56, 'hint' => 'Profile avatar circle'],
['key' => 'hud_avatar_border', 'label' => 'Avatar Border', 'default' => '2', 'min' => 0, 'max' => 6, 'hint' => 'Gold ring width'],
['key' => 'hud_icon_size', 'label' => 'Coin/Gem Icon', 'default' => '16', 'min' => 10, 'max' => 28, 'hint' => 'HUD emoji icon size'],
['key' => 'hud_bell_size', 'label' => 'Bell Icon', 'default' => '18', 'min' => 12, 'max' => 32, 'hint' => 'Notification bell'],
['key' => 'hud_stat_font', 'label' => 'Stat Font Size', 'default' => '14', 'min' => 10, 'max' => 22, 'hint' => 'Coin/gem numbers'],
['key' => 'hud_stat_gap', 'label' => 'Stats Gap', 'default' => '16', 'min' => 4, 'max' => 32, 'hint' => 'Space between coin & gem'],
['key' => 'hud_btn_size', 'label' => 'Action Button', 'default' => '44', 'min' => 32, 'max' => 64, 'hint' => 'Bell button size'],
['key' => 'hud_badge_size', 'label' => 'Badge Size', 'default' => '16', 'min' => 10, 'max' => 24, 'hint' => 'Notification dot'],
['key' => 'hud_badge_font', 'label' => 'Badge Font', 'default' => '9', 'min' => 7, 'max' => 14, 'hint' => 'Badge number size'],
['key' => 'hud_padding_x', 'label' => 'Horizontal Padding', 'default' => '16', 'min' => 8, 'max' => 32, 'hint' => 'Left/right padding'],
];
foreach ($hudLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: TAB BAR -->
<h2>📐 Tab Bar Layout</h2>
<div class="section">
<div class="grid">
<?php
$tabLayout = [
['key' => 'tab_height', 'label' => 'Tab Bar Height', 'default' => '64', 'min' => 48, 'max' => 88, 'hint' => 'Bottom bar height'],
['key' => 'tab_icon_size', 'label' => 'Tab Icon Size', 'default' => '24', 'min' => 16, 'max' => 36, 'hint' => 'Icon width/height'],
['key' => 'tab_label_font', 'label' => 'Tab Label Font', 'default' => '11', 'min' => 8, 'max' => 16, 'hint' => 'Text under icons'],
['key' => 'tab_item_gap', 'label' => 'Icon-Label Gap', 'default' => '3', 'min' => 0, 'max' => 12, 'hint' => 'Between icon & text'],
['key' => 'tab_item_padding_x', 'label' => 'Item Padding X', 'default' => '12', 'min' => 4, 'max' => 24, 'hint' => 'Horizontal padding'],
['key' => 'tab_item_padding_y', 'label' => 'Item Padding Y', 'default' => '8', 'min' => 2, 'max' => 20, 'hint' => 'Vertical padding'],
['key' => 'tab_item_min_size', 'label' => 'Touch Target', 'default' => '48', 'min' => 36, 'max' => 64, 'hint' => 'Min tap area'],
];
foreach ($tabLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: HOME PAGE -->
<h2>📐 Home Page Layout</h2>
<div class="section">
<div class="grid">
<?php
$homeLayout = [
['key' => 'home_padding', 'label' => 'Page Padding', 'default' => '16', 'min' => 8, 'max' => 32, 'hint' => 'Content edge spacing'],
['key' => 'home_max_width', 'label' => 'Content Max Width', 'default' => '340', 'min' => 280, 'max' => 500, 'hint' => 'Grid/widget max width'],
['key' => 'home_greeting_font', 'label' => 'Greeting Font', 'default' => '16', 'min' => 12, 'max' => 24, 'hint' => 'Welcome text size'],
['key' => 'home_greeting_margin', 'label' => 'Greeting Margin', 'default' => '12', 'min' => 4, 'max' => 32, 'hint' => 'Space below greeting'],
];
foreach ($homeLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: QUICK ACTIONS -->
<h2>📐 Quick Action Buttons</h2>
<div class="section">
<div class="grid">
<?php
$quickLayout = [
['key' => 'quick_btn_icon_size', 'label' => 'Icon Box Size', 'default' => '42', 'min' => 28, 'max' => 64, 'hint' => 'Circle icon container'],
['key' => 'quick_btn_icon_radius', 'label' => 'Icon Radius', 'default' => '12', 'min' => 4, 'max' => 32, 'hint' => 'Corner rounding'],
['key' => 'quick_btn_icon_font', 'label' => 'Icon Font Size', 'default' => '20', 'min' => 12, 'max' => 36, 'hint' => 'Emoji/icon in circle'],
['key' => 'quick_btn_label_font', 'label' => 'Label Font', 'default' => '10', 'min' => 7, 'max' => 16, 'hint' => 'Text under icon'],
['key' => 'quick_btn_gap', 'label' => 'Icon-Label Gap', 'default' => '8', 'min' => 0, 'max' => 16, 'hint' => 'Space inside button'],
['key' => 'quick_btn_padding', 'label' => 'Button Padding', 'default' => '6', 'min' => 0, 'max' => 16, 'hint' => 'Outer padding'],
['key' => 'quick_row_gap', 'label' => 'Row Gap', 'default' => '8', 'min' => 4, 'max' => 24, 'hint' => 'Between buttons'],
['key' => 'quick_row_margin', 'label' => 'Row Bottom Margin', 'default' => '16', 'min' => 4, 'max' => 32, 'hint' => 'Below quick actions'],
];
foreach ($quickLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: GAME TILES -->
<h2>📐 Game Tiles</h2>
<div class="section">
<div class="grid">
<?php
$tileLayout = [
['key' => 'game_tile_radius', 'label' => 'Tile Radius', 'default' => '18', 'min' => 0, 'max' => 40, 'hint' => 'Corner rounding'],
['key' => 'game_tile_gap', 'label' => 'Grid Gap', 'default' => '12', 'min' => 4, 'max' => 24, 'hint' => 'Space between tiles'],
['key' => 'game_tile_icon_size', 'label' => 'Icon Size (asset)', 'default' => '48', 'min' => 24, 'max' => 80, 'hint' => 'Game icon img size'],
['key' => 'game_tile_icon_font', 'label' => 'Icon Size (emoji)', 'default' => '42', 'min' => 20, 'max' => 72, 'hint' => 'Fallback emoji size'],
['key' => 'game_tile_name_font', 'label' => 'Name Font', 'default' => '16', 'min' => 10, 'max' => 24, 'hint' => 'Game title text'],
['key' => 'game_tile_content_gap', 'label' => 'Content Gap', 'default' => '8', 'min' => 0, 'max' => 20, 'hint' => 'Icon to name space'],
];
foreach ($tileLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
<div class="field">
<label>Tile Aspect Ratio</label>
<div class="range-row">
<input type="range" name="theme[game_tile_aspect]" value="<?= $theme['game_tile_aspect'] ?? '1.1' ?>" min="0.7" max="1.6" step="0.05" oninput="this.nextElementSibling.textContent=this.value">
<span class="range-val"><?= $theme['game_tile_aspect'] ?? '1.1' ?></span>
</div>
<div class="hint">Width:height ratio (1.0 = square)</div>
</div>
</div>
</div>
<!-- LAYOUT: GAME MENU SHEET -->
<h2>📐 Game Menu (Bottom Sheet)</h2>
<div class="section">
<div class="grid">
<?php
$sheetLayout = [
['key' => 'sheet_radius', 'label' => 'Sheet Radius', 'default' => '28', 'min' => 0, 'max' => 48, 'hint' => 'Top corner rounding'],
['key' => 'sheet_padding_x', 'label' => 'Padding X', 'default' => '20', 'min' => 8, 'max' => 40, 'hint' => 'Left/right space'],
['key' => 'sheet_padding_top', 'label' => 'Padding Top', 'default' => '28', 'min' => 12, 'max' => 48, 'hint' => 'Top space'],
['key' => 'menu_close_size', 'label' => 'Close Button Size', 'default' => '36', 'min' => 24, 'max' => 56, 'hint' => 'X button circle'],
['key' => 'menu_close_font', 'label' => 'Close Icon Font', 'default' => '20', 'min' => 12, 'max' => 32, 'hint' => 'X character size'],
['key' => 'menu_header_icon_size', 'label' => 'Header Icon Size', 'default' => '42', 'min' => 28, 'max' => 64, 'hint' => 'Game icon box'],
['key' => 'menu_header_icon_radius', 'label' => 'Header Icon Radius', 'default' => '12', 'min' => 0, 'max' => 32, 'hint' => 'Icon corner rounding'],
['key' => 'menu_header_icon_font', 'label' => 'Header Icon Font', 'default' => '22', 'min' => 12, 'max' => 36, 'hint' => 'Emoji size in icon'],
['key' => 'menu_header_title_font', 'label' => 'Title Font', 'default' => '22', 'min' => 14, 'max' => 32, 'hint' => 'Game name size'],
['key' => 'menu_header_gap', 'label' => 'Header Gap', 'default' => '10', 'min' => 4, 'max' => 24, 'hint' => 'Icon to title space'],
['key' => 'menu_header_margin', 'label' => 'Header Margin', 'default' => '20', 'min' => 8, 'max' => 40, 'hint' => 'Below header space'],
];
foreach ($sheetLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: MENU BUTTONS -->
<h2>📐 Menu Play Buttons</h2>
<div class="section">
<div class="grid">
<?php
$gmBtnLayout = [
['key' => 'gm_btn_padding_y', 'label' => 'Button Padding Y', 'default' => '18', 'min' => 8, 'max' => 32, 'hint' => 'Top/bottom space'],
['key' => 'gm_btn_padding_x', 'label' => 'Button Padding X', 'default' => '16', 'min' => 8, 'max' => 32, 'hint' => 'Left/right space'],
['key' => 'gm_btn_gap', 'label' => 'Icon-Body Gap', 'default' => '14', 'min' => 4, 'max' => 28, 'hint' => 'Between icon & text'],
['key' => 'gm_btn_radius', 'label' => 'Button Radius', 'default' => '16', 'min' => 0, 'max' => 32, 'hint' => 'Corner rounding'],
['key' => 'gm_btn_margin_bottom', 'label' => 'Button Spacing', 'default' => '10', 'min' => 4, 'max' => 24, 'hint' => 'Between buttons'],
['key' => 'gm_btn_icon_size', 'label' => 'Icon Size', 'default' => '52', 'min' => 32, 'max' => 72, 'hint' => 'Gradient icon box'],
['key' => 'gm_btn_icon_radius', 'label' => 'Icon Radius', 'default' => '14', 'min' => 0, 'max' => 36, 'hint' => 'Icon corner rounding'],
['key' => 'gm_btn_icon_font', 'label' => 'Icon Font', 'default' => '26', 'min' => 14, 'max' => 40, 'hint' => 'Emoji in icon box'],
['key' => 'gm_btn_title_font', 'label' => 'Title Font', 'default' => '17', 'min' => 12, 'max' => 24, 'hint' => 'Button title text'],
['key' => 'gm_btn_sub_font', 'label' => 'Subtitle Font', 'default' => '11', 'min' => 8, 'max' => 16, 'hint' => 'Description text'],
['key' => 'gm_btn_arrow_font', 'label' => 'Arrow Font', 'default' => '22', 'min' => 12, 'max' => 32, 'hint' => 'Chevron size'],
];
foreach ($gmBtnLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: MENU CHIPS -->
<h2>📐 Menu Chips (Secondary)</h2>
<div class="section">
<div class="grid">
<?php
$chipLayout = [
['key' => 'gm_chip_padding_y', 'label' => 'Chip Padding Y', 'default' => '14', 'min' => 4, 'max' => 28, 'hint' => 'Top/bottom'],
['key' => 'gm_chip_padding_x', 'label' => 'Chip Padding X', 'default' => '8', 'min' => 4, 'max' => 24, 'hint' => 'Left/right'],
['key' => 'gm_chip_gap', 'label' => 'Icon-Label Gap', 'default' => '4', 'min' => 0, 'max' => 16, 'hint' => 'Inside chip'],
['key' => 'gm_chip_radius', 'label' => 'Chip Radius', 'default' => '12', 'min' => 0, 'max' => 24, 'hint' => 'Corner rounding'],
['key' => 'gm_chip_font', 'label' => 'Chip Font', 'default' => '11', 'min' => 8, 'max' => 16, 'hint' => 'Label text size'],
['key' => 'gm_chip_icon_font', 'label' => 'Chip Icon', 'default' => '18', 'min' => 12, 'max' => 32, 'hint' => 'Emoji size'],
['key' => 'gm_chips_grid_gap', 'label' => 'Grid Gap', 'default' => '8', 'min' => 4, 'max' => 20, 'hint' => 'Between chips'],
['key' => 'gm_chips_margin_top', 'label' => 'Top Margin', 'default' => '14', 'min' => 4, 'max' => 32, 'hint' => 'Above chip row'],
];
foreach ($chipLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- LAYOUT: BOT CARDS -->
<h2>📐 Bot Selection Cards</h2>
<div class="section">
<div class="grid">
<?php
$botLayout = [
['key' => 'bot_card_avatar_size', 'label' => 'Avatar Size', 'default' => '56', 'min' => 32, 'max' => 80, 'hint' => 'Bot portrait circle'],
['key' => 'bot_card_avatar_border', 'label' => 'Avatar Border', 'default' => '2', 'min' => 0, 'max' => 6, 'hint' => 'Color ring width'],
['key' => 'bot_card_name_font', 'label' => 'Name Font', 'default' => '14', 'min' => 10, 'max' => 20, 'hint' => 'Bot name size'],
['key' => 'bot_card_sub_font', 'label' => 'Subtitle Font', 'default' => '11', 'min' => 8, 'max' => 16, 'hint' => 'Style & ELO text'],
['key' => 'bot_card_accent_height', 'label' => 'Top Accent Bar', 'default' => '3', 'min' => 0, 'max' => 8, 'hint' => 'Colored bar height'],
['key' => 'bot_grid_gap', 'label' => 'Grid Gap', 'default' => '12', 'min' => 4, 'max' => 24, 'hint' => 'Between cards'],
['key' => 'bot_back_btn_size', 'label' => 'Back Button Size', 'default' => '44', 'min' => 32, 'max' => 56, 'hint' => 'Arrow button'],
['key' => 'bot_back_btn_font', 'label' => 'Back Button Font', 'default' => '18', 'min' => 12, 'max' => 28, 'hint' => 'Arrow character size'],
['key' => 'bot_title_font', 'label' => 'Page Title Font', 'default' => '18', 'min' => 14, 'max' => 28, 'hint' => 'Select bot heading'],
];
foreach ($botLayout as $s):
$val = $theme[$s['key']] ?? $s['default'];
?>
<div class="field">
<label><?= $s['label'] ?></label>
<div class="range-row">
<input type="range" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>" min="<?= $s['min'] ?>" max="<?= $s['max'] ?>" oninput="this.nextElementSibling.textContent=this.value+'px'">
<span class="range-val"><?= $val ?>px</span>
</div>
<div class="hint"><?= $s['hint'] ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- GAME COLORS -->
<h2>🎮 Game Colors</h2>
<div class="section">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment