Skip to content

Instantly share code, notes, and snippets.

@engineeramany1-cmd

engineeramany1-cmd/index.html

Created May 5, 2026 08:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save engineeramany1-cmd/b7d9242d2d6e42222ea2ccb9df64b0de to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save engineeramany1-cmd/b7d9242d2d6e42222ea2ccb9df64b0de to your computer and use it in GitHub Desktop.
Download ZIP
أريد أن أشغلة وأريد رابط
Raw
index.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مطعم Shatec King</title>
<style>
:root { --main-blue: #003399; }
body { background-color: #222; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: white; }
/* إطار الهاتف */
.phone-frame { width: 360px; height: 720px; background: black; border: 8px solid #333; border-radius: 50px; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.screen { display: none; height: 100%; padding: 20px; box-sizing: border-box; flex-direction: column; align-items: center; text-align: center; }
.active { display: flex; }
/* الصفحة 1: التحميل */
.logo-box { background: var(--main-blue); width: 85%; padding: 30px 10px; border-radius: 40px; margin-top: 40px; font-size: 24px; }
.loading-bar-container { width: 85%; height: 25px; background: white; margin: 50px 0; border-radius: 0px; position: relative; }
.progress-fill { width: 0%; height: 100%; background: #007bff; transition: width 2s linear; }
/* الأزرار والتصاميم */
.blue-button { background: var(--main-blue); color: white; width: 85%; padding: 15px; border-radius: 30px; border: none; font-size: 20px; font-weight: bold; margin: 8px 0; cursor: pointer; }
.circle-group { display: flex; gap: 10px; margin: 15px 0; }
.circle-btn { width: 70px; height: 70px; background: #0055ff; border: none; border-radius: 50%; color: white; font-size: 16px; font-weight: bold; cursor: pointer; }
.circle-btn.selected { border: 4px solid white; box-shadow: 0 0 10px white; }
input, select { width: 85%; padding: 12px; border-radius: 10px; border: none; background: #1a1a1a; color: white; text-align: center; margin: 10px 0; font-size: 16px; }
.selection-box { background: var(--main-blue); width: 85%; padding: 10px; border-radius: 10px; display: flex; justify-content: space-around; font-size: 18px; }
/* صفحة الوقت (5) */
.time-display { background: white; color: black; padding: 10px 40px; border-radius: 15px; font-size: 32px; font-weight: bold; border: 4px solid var(--main-blue); margin: 20px 0; }
.stop-circle { width: 100px; height: 60px; background: red; border-radius: 50px; border: none; color: white; font-size: 22px; font-weight: bold; margin-top: 30px; cursor: pointer; }
/* لوحة المشرف */
.admin-screen { background: #333; overflow-y: auto; width: 100%; }
.order-card { background: var(--main-blue); border-radius: 25px; padding: 15px; width: 95%; margin: 10px 0; box-sizing: border-box; text-align: right; }
.badge { background: white; color: var(--main-blue); padding: 2px 8px; border-radius: 8px; font-size: 14px; font-weight: bold; }
</style>
</head>
<body>
<div class="phone-frame">
<!-- 1: شاشة التحميل -->
<div id="p1" class="screen active">
<div class="logo-box"><h1>مطعم</h1><h2 style="text-transform: uppercase;">shatec king</h2></div>
<div class="loading-bar-container"><div id="bar1" class="progress-fill"></div></div>
<p>جاري التحميل ...</p>
</div>
<!-- 2: شاشة الطلب -->
<div id="p2" class="screen">
<button class="blue-button">أطلب order</button>
<input type="number" id="phoneInp" placeholder="أدخل رقم الهاتف">
<div class="circle-group">
<button class="circle-btn" onclick="setFlavor('حار', this)">حار</button>
<button class="circle-btn" onclick="setFlavor('مكس', this)">مكس</button>
<button class="circle-btn" onclick="setFlavor('عادي', this)">عادي</button>
</div>
<select id="meal">
<option value="0">اختر نوع الطلب</option>
<option value="0.100">١- سندوتش فلافل</option>
<option value="0.100">٢- سندوتش بطاطس</option>
<option value="6.230">٣- وجبة عائلية</option>
<option value="0.150">٤- عصير</option>
<option value="2.000">٥- وجبة خفيفة</option>
<option value="3.250">٦- دجاج بالبطاطس</option>
<option value="1.070">٧- رز أبيض</option>
<option value="0.150">٨- أيس كريم</option>
<option value="1.000">٩- بيتزا</option>
<option value="2.050">١٠- مسخن دجاج</option>
</select>
<div class="selection-box">
<label><input type="radio" name="loc" value="طاولة" checked> طاولة</label>
<label><input type="radio" name="loc" value="سفري"> سفري</label>
</div>
<div style="font-size: 22px; margin: 15px 0;">الكمية:
<button onclick="changeQty(-1)" style="border:none;background:none;color:white;font-size:25px;cursor:pointer;">-</button>
<span id="qtyVal">1</span>
<button onclick="changeQty(1)" style="border:none;background:none;color:white;font-size:25px;cursor:pointer;">+</button>
</div>
<button class="blue-button" style="border-radius: 40px;" onclick="handleGo()">Order go</button>
</div>
<!-- 3: شاشة الدفع -->
<div id="p3" class="screen">
<button class="blue-button">الدفع</button>
<div id="finalPrice" class="logo-box" style="background:#111; color:#4CAF50; padding:15px; margin:10px 0;">0.000</div>
<img src="https://imgur.com" width="90%">
<button class="blue-button" onclick="startOrderTimer()">دفع كي نت</button>
<button class="blue-button" onclick="startOrderTimer()">دفع كاش</button>
</div>
<!-- 5: شاشة الوقت -->
<div id="p5" class="screen">
<div class="blue-button">الوقت المتبقي</div>
<div class="loading-bar-container" style="height:40px;"><div id="bar5" class="progress-fill" style="background:var(--main-blue);"></div></div>
<div class="time-display" id="timerClock">1.00</div>
<button class="stop-circle" onclick="stopOrder()">stop</button>
</div>
<!-- لوحة المشرف -->
<div id="pAdmin" class="screen admin-screen">
<div class="blue-button" style="width:120px; align-self: flex-start;">الطلبات</div>
<div id="ordersList" style="width:100%;"></div>
<button class="blue-button" onclick="location.reload()">خروج</button>
</div>
</div>
<script>
let currentQty = 1;
let selectedFlavor = "عادي";
let timerInterval;
window.onload = () => {
document.getElementById('bar1').style.width = '100%';
setTimeout(() => { showScreen('p2'); }, 2200);
}
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function changeQty(n) {
currentQty = Math.min(Math.max(1, currentQty + n), 10);
document.getElementById('qtyVal').innerText = currentQty;
}
function setFlavor(f, btn) {
selectedFlavor = f;
document.querySelectorAll('.circle-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
}
function handleGo() {
let phone = document.getElementById('phoneInp').value;
if(phone === "60492128") {
showScreen('pAdmin');
} else {
let price = parseFloat(document.getElementById('meal').value);
if(price === 0 || !phone) return alert("يرجى إكمال البيانات ورقم الهاتف");
document.getElementById('finalPrice').innerText = (price * currentQty).toFixed(3) + " د.ك";
showScreen('p3');
}
}
function startOrderTimer() {
// إضافة الطلب للمشرف أولاً
addOrderToAdmin();
showScreen('p5');
let isFamily = document.getElementById('meal').value == "6.230";
let timeLeft = isFamily ? 120 : 60;
let total = timeLeft;
timerInterval = setInterval(() => {
timeLeft--;
document.getElementById('bar5').style.width = ((total - timeLeft) / total * 100) + "%";
document.getElementById('timerClock').innerText = (timeLeft / 60).toFixed(2);
if(timeLeft <= 0) {
clearInterval(timerInterval);
alert("تم تم الطلب بنجاح!");
location.reload();
}
}, 1000);
}
function addOrderToAdmin() {
let mealName = document.getElementById('meal').options[document.getElementById('meal').selectedIndex].text;
let phone = document.getElementById('phoneInp').value;
let loc = document.querySelector('input[name="loc"]:checked').value;
let list = document.getElementById('ordersList');
list.innerHTML += `
<div class="order-card">
<div style="display:flex; justify-content:space-between; margin-bottom:10px;">
<span style="font-size:20px; font-weight:bold;">${currentQty} - ${mealName}</span>
<span class="badge">${loc}</span>
</div>
<div style="font-size:16px; margin-bottom:10px;">
المذاق: <span style="color:#ffcc00">${selectedFlavor}</span> | الهاتف: ${phone}
</div>
<div style="display:flex; gap:10px;">
<button class="blue-button" style="background:#0055ff; margin:0; padding:8px; font-size:16px;" onclick="alert('تم البدء')">تم</button>
<button class="blue-button" style="background:red; margin:0; padding:8px; font-size:16px;" onclick="this.parentElement.parentElement.remove()">حذف</button>
</div>
</div>`;
}
function stopOrder() {
clearInterval(timerInterval);
showScreen('p2');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment