admin/38682-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding ads.php

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-23 07:31:09 +00:00
parent 21321721fc
commit 4451897e8d
1 changed files with 134 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

355
ads.php
View File

@ -9,7 +9,6 @@ $ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Get current outlet (default to 1 if not specified) // Get current outlet (default to 1 if not specified)
$outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1; $outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
$debug = isset($_GET['debug']) ? true : false;
// Fetch company settings for branding // Fetch company settings for branding
$stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1"); $stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
@ -21,7 +20,7 @@ $companyName = $company['company_name'] ?? 'Foody';
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Now Serving & Ads - <?= htmlspecialchars($companyName) ?></title> <title>Now Serving & Promo - <?= htmlspecialchars($companyName) ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -33,304 +32,218 @@ $companyName = $company['company_name'] ?? 'Foody';
--ready-color: #198754; --ready-color: #198754;
--preparing-color: #0dcaf0; --preparing-color: #0dcaf0;
--bg-dark: #121212; --bg-dark: #121212;
--card-bg: #1a1a1a;
} }
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
background-color: var(--bg-dark); background-color: var(--bg-dark);
color: white; color: white;
overflow: hidden; overflow: hidden;
height: 100vh !important; height: 100vh;
width: 100vw !important; width: 100vw;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.main-container { .main-container {
display: flex; display: flex;
height: 100vh !important; height: 100vh;
width: 100vw !important; width: 100vw;
transition: all 0.5s ease; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
border: <?= $debug ? '10px solid orange' : 'none' ?>;
box-sizing: border-box; box-sizing: border-box;
} }
.serving-board { .serving-board {
flex: 0 0 35%; flex: 0 0 35%;
background-color: #1a1a1a; background-color: var(--card-bg);
border-right: 2px solid #333; border-right: 2px solid #333;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem; padding: 2.5rem;
transition: all 0.5s ease; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 20; z-index: 20;
overflow: hidden; overflow: hidden;
} }
.ads-slider { .promo-slider-container {
flex: 1; flex: 1;
position: relative; position: relative;
background-color: <?= $debug ? '#222' : '#000' ?>; background-color: #000;
overflow: hidden; overflow: hidden;
height: 100vh !important; height: 100vh;
z-index: 10; z-index: 10;
border: <?= $debug ? '10px solid lime' : 'none' ?>;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
#adCarousel, .carousel-inner { #promoCarousel, .carousel-inner, .carousel-item {
height: 100% !important; height: 100% !important;
width: 100% !important; width: 100% !important;
position: relative; position: relative;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
}
.carousel-item {
height: 100% !important;
width: 100% !important;
background-color: <?= $debug ? '#440044' : '#000' ?>;
}
.carousel-item.active {
display: block !important; /* Ensure active item is visible */
}
.carousel-item img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
opacity: 1 !important;
visibility: visible !important;
border: <?= $debug ? '8px solid cyan' : 'none' ?>;
box-sizing: border-box; box-sizing: border-box;
background-color: <?= $debug ? 'deeppink' : 'transparent' ?>;
position: relative;
z-index: 50;
} }
/* Fullscreen Ads Class */ .promo-image-element {
.fullscreen-ads .serving-board { display: block;
width: 100%;
height: 100%;
object-fit: contain;
background-color: #000;
}
/* Fullscreen Promo View */
.fullscreen-promo .serving-board {
flex: 0 0 0% !important; flex: 0 0 0% !important;
width: 0 !important; width: 0 !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
overflow: hidden !important;
opacity: 0 !important; opacity: 0 !important;
}
.fullscreen-ads .ads-slider { flex: 0 0 100% !important; width: 100% !important; }
/* Debug styling */
.debug-panel {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255,0,0,0.95);
color: white;
padding: 15px;
font-family: monospace;
font-size: 14px;
z-index: 999999;
border-radius: 8px;
max-width: 500px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#on-screen-console {
position: absolute;
bottom: 20px;
left: 20px;
width: 550px;
max-height: 400px;
background: rgba(0,0,0,0.95);
color: #0f0;
font-size: 13px;
padding: 15px;
overflow-y: auto;
z-index: 999999;
border: 3px solid #0f0;
display: <?= $debug ? 'block' : 'none' ?>;
}
.debug-marker {
position: absolute;
top: 40px;
right: 40px;
font-size: 4rem;
font-weight: 900;
color: #fff;
z-index: 1000;
background: rgba(0,0,0,0.7);
padding: 20px;
pointer-events: none; pointer-events: none;
border: 4px solid white;
} }
.fullscreen-promo .promo-slider-container {
flex: 0 0 100% !important;
width: 100% !important;
}
/* Order Status Styling */
.board-header { margin-bottom: 2.5rem; }
.board-title { font-weight: 800; font-size: 2.5rem; margin-bottom: 0.5rem; }
.section-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px; }
.order-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.order-number {
font-size: 2.5rem;
font-weight: 800;
padding: 12px 24px;
border-radius: 12px;
min-width: 100px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.empty-msg { font-style: italic; color: #555; }
</style> </style>
</head> </head>
<body class="split-view"> <body class="split-view">
<?php if ($debug): ?>
<div class="debug-panel">
<strong>STRICT DEBUG PANEL</strong><br>
Ads Found: <?= count($ads) ?><br>
Viewport: <span id="vp-info">?</span><br>
<hr>
<div class="d-flex flex-wrap gap-1">
<button onclick="checkAllImages()" class="btn btn-warning btn-sm">FORCE DIMENSION CHECK</button>
<button onclick="location.href='?'" class="btn btn-light btn-sm">Exit Debug</button>
<button onclick="location.reload()" class="btn btn-info btn-sm">Reload</button>
</div>
</div>
<div id="on-screen-console"></div>
<?php endif; ?>
<div class="main-container" id="main-view"> <div class="main-container" id="main-view">
<div class="serving-board"> <div class="serving-board">
<div class="board-header"> <div class="board-header">
<h1 class="board-title">Order Status</h1> <h1 class="board-title">Order Status</h1>
<p class="text-muted"><?= htmlspecialchars($companyName) ?> #<?= $outlet_id ?></p> <p class="text-muted"><?= htmlspecialchars($companyName) ?> • Outlet #<?= $outlet_id ?></p>
</div> </div>
<div class="mb-5"> <div class="mb-5">
<h2 class="section-title text-success"><i class="bi bi-bell-fill"></i> Ready</h2> <h2 class="section-title text-success"><i class="bi bi-check-circle-fill"></i> Ready</h2>
<div id="ready-orders" class="order-grid"><div class="empty-msg">...</div></div> <div id="ready-orders" class="order-grid"><div class="empty-msg">Waiting for orders...</div></div>
</div> </div>
<div> <div>
<h2 class="section-title text-info"><i class="bi bi-hourglass-split"></i> Preparing</h2> <h2 class="section-title text-info"><i class="bi bi-clock-history"></i> Preparing</h2>
<div id="preparing-orders" class="order-grid"><div class="empty-msg">...</div></div> <div id="preparing-orders" class="order-grid"><div class="empty-msg">No active orders</div></div>
</div>
<div class="mt-auto pt-4 border-top border-dark text-center text-muted">
<h3 id="clock" class="mb-0 fw-bold"></h3>
</div> </div>
<div class="mt-auto pt-4 border-top border-dark text-center text-muted"><small id="clock"></small></div>
</div> </div>
<div class="ads-slider"> <div class="promo-slider-container">
<?php if (!empty($ads)): ?> <?php if (!empty($ads)): ?>
<div id="adCarousel" class="carousel slide" data-bs-ride="carousel"> <div id="promoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="8000">
<div class="carousel-inner"> <div class="carousel-inner">
<?php foreach ($ads as $index => $ad): ?> <?php foreach ($ads as $index => $ad): ?>
<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>"> <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
<?php if ($debug): ?> <img src="<?= htmlspecialchars($ad['image_path']) ?>"
<div class="debug-marker">SLIDE <?= $index ?></div> class="promo-image-element"
<?php endif; ?> alt="Promotion">
<img src="<?= htmlspecialchars($ad['image_path']) ?>?v=<?= time() ?>"
class="ad-image"
onload="imgLog(<?= $index ?>, this, 'OK')"
onerror="imgLog(<?= $index ?>, this, 'FAIL')">
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="h-100 d-flex align-items-center justify-content-center">No Ads Found</div> <div class="h-100 d-flex align-items-center justify-content-center text-muted">
<div class="text-center">
<i class="bi bi-image-fill display-1 opacity-25"></i>
<p class="mt-3">No active promotions</p>
</div>
</div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow" style="position:fixed; bottom:20px; right:20px; z-index:10000; opacity:0.5;"> <button id="toggle-view" class="btn btn-dark btn-lg rounded-circle shadow" style="position:fixed; bottom:30px; right:30px; z-index:10000; opacity:0.6; width:60px; height:60px; display:flex; align-items:center; justify-content:center;">
<i class="bi bi-fullscreen"></i> <i class="bi bi-arrows-fullscreen"></i>
</button> </button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
function imgLog(idx, el, status) {
if (status === 'OK') {
// Log immediately
console.log(`IMG ${idx}: LOADED (${el.naturalWidth}x${el.naturalHeight})`);
// Log again after a delay to catch rendered dimensions
setTimeout(() => {
console.log(`IMG ${idx} RENDERED SIZE: ${el.clientWidth}x${el.clientHeight}`);
if (el.clientWidth === 0 || el.clientHeight === 0) {
console.error(`CRITICAL: IMG ${idx} has ZERO rendered dimensions!`);
}
}, 1000);
} else {
console.error(`IMG ${idx}: FAILED TO LOAD - check path: ${el.src}`);
el.src = 'https://via.placeholder.com/1920x1080/cc0000/FFFFFF?text=ERROR+LOADING+IMAGE+'+idx;
}
}
function checkAllImages() {
console.log('--- MANUAL DIMENSION CHECK ---');
document.querySelectorAll('.ad-image').forEach((img, idx) => {
const parent = img.closest('.carousel-item');
const isActive = parent.classList.contains('active');
console.log(`[${idx}] Active: ${isActive} | Natural: ${img.naturalWidth}x${img.naturalHeight} | Rendered: ${img.clientWidth}x${img.clientHeight}`);
});
}
function toggleTest() {
document.body.classList.toggle('fullscreen-ads');
console.log('View Toggled');
}
// Debugging logic
<?php if ($debug): ?>
(function() {
const consoleDiv = document.getElementById('on-screen-console');
const originalLog = console.log;
const originalError = console.error;
function logToScreen(msg, color = '#0f0') {
const div = document.createElement('div');
div.style.marginBottom = '4px';
div.style.color = color;
div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
consoleDiv.appendChild(div);
consoleDiv.scrollTop = consoleDiv.scrollHeight;
}
console.log = function() {
originalLog.apply(console, arguments);
logToScreen(Array.from(arguments).join(' '), '#0f0');
};
console.error = function() {
originalError.apply(console, arguments);
logToScreen(Array.from(arguments).join(' '), '#f55');
};
window.addEventListener('load', () => {
document.getElementById('vp-info').textContent = window.innerWidth + 'x' + window.innerHeight;
console.log('Window Load Complete');
const slider = document.querySelector('.ads-slider');
console.log('Slider Container Viewport Size: ' + slider.clientWidth + 'x' + slider.clientHeight);
// Auto check after 2 seconds
setTimeout(checkAllImages, 2000);
});
})();
<?php endif; ?>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const el = document.querySelector('#adCarousel'); // Initialize Carousel
const el = document.querySelector('#promoCarousel');
if (el) { if (el) {
new bootstrap.Carousel(el, { interval: 5000, ride: 'carousel', pause: false }); new bootstrap.Carousel(el, {
console.log('Bootstrap Carousel Initialized'); interval: 8000,
ride: 'carousel',
pause: false
});
} }
// Toggle View Functionality
const toggleBtn = document.getElementById('toggle-view');
const mainView = document.getElementById('main-view');
const toggleIcon = toggleBtn.querySelector('i');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('fullscreen-promo');
if (document.body.classList.contains('fullscreen-promo')) {
toggleIcon.className = 'bi bi-fullscreen-exit';
} else {
toggleIcon.className = 'bi bi-arrows-fullscreen';
}
});
// Fetch Orders Logic
async function fetchOrders() {
try {
const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
if (!res.ok) throw new Error('API Error');
const orders = await res.json();
const rContainer = document.getElementById('ready-orders');
const pContainer = document.getElementById('preparing-orders');
const ready = orders.filter(o => o.status === 'ready');
const prep = orders.filter(o => o.status === 'preparing');
rContainer.innerHTML = ready.length ? ready.map(o =>
`<div class="order-number" style="background:var(--ready-color); color:white;">${o.id}</div>`
).join('') : '<div class="empty-msg">Waiting for orders...</div>';
pContainer.innerHTML = prep.length ? prep.map(o =>
`<div class="order-number" style="background:var(--preparing-color); color:black;">${o.id}</div>`
).join('') : '<div class="empty-msg">No active orders</div>';
} catch(e) {
console.error('Fetch Orders Failed:', e);
}
}
setInterval(fetchOrders, 5000);
fetchOrders();
// Clock Logic
setInterval(() => {
const clock = document.getElementById('clock');
if (clock) {
clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
}, 1000);
}); });
document.getElementById('toggle-view').addEventListener('click', toggleTest);
// Orders polling
async function fetchOrders() {
try {
const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
if (!res.ok) throw new Error('API Error');
const orders = await res.json();
const r = document.getElementById('ready-orders');
const p = document.getElementById('preparing-orders');
const ready = orders.filter(o => o.status === 'ready');
const prep = orders.filter(o => o.status === 'preparing');
r.innerHTML = ready.length ? ready.map(o => `<div class="order-number order-ready" style="background:#198754; color:white; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders ready</div>';
p.innerHTML = prep.length ? prep.map(o => `<div class="order-number order-preparing" style="background:#0dcaf0; color:black; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders preparing</div>';
} catch(e) {
if (typeof console.error === 'function') console.error('Fetch Orders Failed: ' + e.message);
}
}
setInterval(fetchOrders, 5000);
fetchOrders();
setInterval(() => {
const clock = document.getElementById('clock');
if (clock) clock.textContent = new Date().toLocaleTimeString();
}, 1000);
</script> </script>
</body> </body>
</html> </html>