<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppOverlay Complete Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.header {
text-align: center;
color: white;
margin-bottom: 40px;
padding: 30px;
}
.header h1 {
font-size: 42px;
margin-bottom: 12px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.header p {
font-size: 20px;
opacity: 0.95;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.section-card {
background: white;
padding: 32px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.section-card h2 {
color: #333;
margin-bottom: 12px;
font-size: 26px;
display: flex;
align-items: center;
gap: 12px;
}
.section-card .subtitle {
color: #666;
margin-bottom: 24px;
font-size: 15px;
}
.demo-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.demo-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 16px 20px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
text-align: left;
display: flex;
align-items: center;
gap: 12px;
}
.demo-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}
.demo-btn:active {
transform: translateY(0);
}
.demo-btn .emoji {
font-size: 24px;
}
.demo-btn .details {
flex: 1;
}
.demo-btn .name {
display: block;
font-size: 16px;
font-weight: 600;
}
.demo-btn .desc {
display: block;
font-size: 13px;
opacity: 0.9;
margin-top: 4px;
}
.feature-card {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #667eea;
}
.feature-card h3 {
color: #333;
margin-bottom: 8px;
}
.feature-card p {
color: #666;
margin: 0;
font-size: 14px;
}
.info-badge {
display: inline-block;
background: #667eea;
color: white;
padding: 6px 14px;
border-radius: 16px;
font-size: 13px;
margin: 4px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="header">
<h1>🎨 AppOverlay Demo</h1>
<p>Percentage-based sizing • Side attachments • Clean & Simple</p>
</div>
<div class="container">
<!-- Side Attachment -->
<div class="section-card">
<h2><span>📌</span> Side Attachment</h2>
<p class="subtitle">Attach to screen edges with percentage sizing</p>
<div class="demo-buttons">
<button class="demo-btn" onclick="openLeft()">
<span class="emoji">⬅️</span>
<div class="details">
<span class="name">Left Sidebar</span>
<span class="desc">attachSide: 'left', width: '30%'</span>
</div>
</button>
<button class="demo-btn" onclick="openRight()">
<span class="emoji">➡️</span>
<div class="details">
<span class="name">Right Panel</span>
<span class="desc">attachSide: 'right', width: '35%'</span>
</div>
</button>
<button class="demo-btn" onclick="openTop()">
<span class="emoji">⬆️</span>
<div class="details">
<span class="name">Top Bar</span>
<span class="desc">attachSide: 'top', height: '40%'</span>
</div>
</button>
<button class="demo-btn" onclick="openBottom()">
<span class="emoji">⬇️</span>
<div class="details">
<span class="name">Bottom Drawer</span>
<span class="desc">attachSide: 'bottom', height: '45%'</span>
</div>
</button>
</div>
</div>
<!-- Centered Overlays -->
<div class="section-card">
<h2><span>🎯</span> Centered Overlays</h2>
<p class="subtitle">Standard centered modal dialogs</p>
<div class="demo-buttons">
<button class="demo-btn" onclick="openSmall()">
<span class="emoji">📱</span>
<div class="details">
<span class="name">Small Dialog</span>
<span class="desc">width: '40%'</span>
</div>
</button>
<button class="demo-btn" onclick="openMedium()">
<span class="emoji">💻</span>
<div class="details">
<span class="name">Medium Dialog</span>
<span class="desc">width: '60%'</span>
</div>
</button>
<button class="demo-btn" onclick="openLarge()">
<span class="emoji">🖥️</span>
<div class="details">
<span class="name">Large Dialog</span>
<span class="desc">width: '80%'</span>
</div>
</button>
<button class="demo-btn" onclick="openFullscreen()">
<span class="emoji">📺</span>
<div class="details">
<span class="name">Fullscreen</span>
<span class="desc">fullscreen: true</span>
</div>
</button>
</div>
</div>
<!-- Positioning -->
<div class="section-card">
<h2><span>🧭</span> Positioning</h2>
<p class="subtitle">Different alignment options</p>
<div class="demo-buttons">
<button class="demo-btn" onclick="openTopLeft()">
<span class="emoji">↖️</span>
<div class="details">
<span class="name">Top Left</span>
<span class="desc">align: 'top-left'</span>
</div>
</button>
<button class="demo-btn" onclick="openTopCenter()">
<span class="emoji">⬆️</span>
<div class="details">
<span class="name">Top Center</span>
<span class="desc">align: 'top'</span>
</div>
</button>
<button class="demo-btn" onclick="openBottomRight()">
<span class="emoji">↘️</span>
<div class="details">
<span class="name">Bottom Right</span>
<span class="desc">align: 'bottom-right'</span>
</div>
</button>
</div>
</div>
<!-- Styling -->
<div class="section-card">
<h2><span>🎨</span> Custom Styling</h2>
<p class="subtitle">Border colors and themes</p>
<div class="demo-buttons">
<button class="demo-btn" onclick="openRedBorder()">
<span class="emoji">🔴</span>
<div class="details">
<span class="name">Red Border</span>
<span class="desc">borderColor: '#e74c3c'</span>
</div>
</button>
<button class="demo-btn" onclick="openGreenBorder()">
<span class="emoji">🟢</span>
<div class="details">
<span class="name">Green Border</span>
<span class="desc">borderColor: '#2ecc71'</span>
</div>
</button>
<button class="demo-btn" onclick="openBlueBorder()">
<span class="emoji">🔵</span>
<div class="details">
<span class="name">Blue Border</span>
<span class="desc">borderColor: '#3498db'</span>
</div>
</button>
</div>
</div>
</div>
<!-- Include the AppOverlay script -->
<script src="/core/overlay_extra.js?v=<?php echo time(); ?>" defer></script>
<!-- Demo Functions -->
<script>
// Side Attachment Examples
function openLeft() {
AppOverlay.openOverlay({
title: '⬅️ Left Sidebar',
attachSide: 'left',
width: '30%',
content: `
<h2 style="color: #667eea; margin-bottom: 20px;">Left Navigation Panel</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">attachSide: 'left'</span>
<span class="info-badge">width: 30%</span>
</div>
<div class="feature-card">
<h3>📌 Edge Attached</h3>
<p>This panel is flush against the left edge of the screen.</p>
</div>
<div class="feature-card">
<h3>📊 Percentage Width</h3>
<p>Responsive 30% width that scales with screen size.</p>
</div>
<div class="feature-card">
<h3>🎯 Perfect For</h3>
<p>Navigation menus, filters, settings, file browsers</p>
</div>
`
});
}
function openRight() {
AppOverlay.openOverlay({
title: '➡️ Right Panel',
attachSide: 'right',
width: '35%',
content: `
<h2 style="color: #9b59b6; margin-bottom: 20px;">Right Side Panel</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">attachSide: 'right'</span>
<span class="info-badge">width: 35%</span>
</div>
<div class="feature-card">
<h3>📌 Right Edge</h3>
<p>Attached to the right side of the screen.</p>
</div>
<div class="feature-card">
<h3>💬 Common Uses</h3>
<p>Chat panels, notifications, activity feeds, help docs</p>
</div>
<div class="feature-card">
<h3>🎨 Customizable</h3>
<p>Use any percentage width from 10% to 90%</p>
</div>
`,
borderColor: '#9b59b6'
});
}
function openTop() {
AppOverlay.openOverlay({
title: '⬆️ Top Notification Bar',
attachSide: 'top',
height: '40%',
content: `
<h2 style="color: #3498db; margin-bottom: 20px;">Top Bar</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">attachSide: 'top'</span>
<span class="info-badge">height: 40%</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
<div class="feature-card">
<h3>🔔 Notifications</h3>
<p>System alerts and updates</p>
</div>
<div class="feature-card">
<h3>📢 Announcements</h3>
<p>Important messages</p>
</div>
<div class="feature-card">
<h3>📰 News</h3>
<p>Latest updates</p>
</div>
</div>
`,
borderColor: '#3498db'
});
}
function openBottom() {
AppOverlay.openOverlay({
title: '⬇️ Bottom Drawer',
attachSide: 'bottom',
height: '45%',
content: `
<h2 style="color: #e74c3c; margin-bottom: 20px;">Bottom Drawer</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">attachSide: 'bottom'</span>
<span class="info-badge">height: 45%</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;">
<div class="feature-card">
<h3>📱</h3>
<p>Mobile-Friendly</p>
</div>
<div class="feature-card">
<h3>🎵</h3>
<p>Media Player</p>
</div>
<div class="feature-card">
<h3>🛒</h3>
<p>Shopping Cart</p>
</div>
<div class="feature-card">
<h3>💬</h3>
<p>Quick Chat</p>
</div>
</div>
`,
borderColor: '#e74c3c'
});
}
// Centered Overlay Examples
function openSmall() {
AppOverlay.openOverlay({
title: '📱 Small Dialog',
width: '40%',
content: `
<div style="text-align: center; padding: 20px;">
<h2 style="color: #667eea; margin-bottom: 16px;">Compact Dialog</h2>
<div style="margin: 20px 0;">
<span class="info-badge">width: 40%</span>
<span class="info-badge">align: center</span>
</div>
<p style="color: #666;">Perfect for simple messages, confirmations, and quick forms.</p>
</div>
`
});
}
function openMedium() {
AppOverlay.openOverlay({
title: '💻 Medium Dialog',
width: '60%',
content: `
<h2 style="color: #667eea; margin-bottom: 20px;">Standard Modal</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">width: 60%</span>
</div>
<div class="feature-card">
<h3>📏 Good Size</h3>
<p>Balanced width for most content types.</p>
</div>
<div class="feature-card">
<h3>📱 Responsive</h3>
<p>Works well on tablets and desktops.</p>
</div>
<div class="feature-card">
<h3>✨ Versatile</h3>
<p>Forms, details, settings, and more.</p>
</div>
`
});
}
function openLarge() {
AppOverlay.openOverlay({
title: '🖥️ Large Dialog',
width: '80%',
content: `
<h2 style="color: #667eea; margin-bottom: 20px;">Wide Layout</h2>
<div style="margin-bottom: 16px;">
<span class="info-badge">width: 80%</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
<div class="feature-card">
<h3>📊 Data Tables</h3>
<p>Wide tables with many columns</p>
</div>
<div class="feature-card">
<h3>📈 Dashboards</h3>
<p>Analytics and charts</p>
</div>
<div class="feature-card">
<h3>🖼️ Galleries</h3>
<p>Image grids and previews</p>
</div>
<div class="feature-card">
<h3>⚙️ Settings</h3>
<p>Complex configuration panels</p>
</div>
</div>
`
});
}
function openFullscreen() {
AppOverlay.openOverlay({
title: '📺 Fullscreen Mode',
fullscreen: true,
content: `
<div style="height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;">
<div>
<div style="font-size: 80px; margin-bottom: 20px;">📺</div>
<h1 style="color: #667eea; font-size: 48px; margin-bottom: 16px;">Fullscreen</h1>
<div style="margin: 20px 0;">
<span class="info-badge">fullscreen: true</span>
<span class="info-badge">100vw × 100vh</span>
</div>
<p style="color: #666; font-size: 18px; margin-top: 20px;">Takes up entire screen - perfect for presentations, videos, and immersive experiences.</p>
</div>
</div>
`
});
}
// Positioning Examples
function openTopLeft() {
AppOverlay.openOverlay({
title: '↖️ Top Left',
width: '50%',
align: 'top-left',
content: `
<div style="padding: 20px;">
<h2 style="color: #667eea;">Top Left Position</h2>
<div style="margin: 16px 0;">
<span class="info-badge">align: 'top-left'</span>
<span class="info-badge">width: 50%</span>
</div>
<p>Positioned at the top-left corner of the screen.</p>
</div>
`
});
}
function openTopCenter() {
AppOverlay.openOverlay({
title: '⬆️ Top Center',
width: '50%',
align: 'top',
content: `
<div style="padding: 20px;">
<h2 style="color: #667eea;">Top Center Position</h2>
<div style="margin: 16px 0;">
<span class="info-badge">align: 'top'</span>
<span class="info-badge">width: 50%</span>
</div>
<p>Positioned at the top center of the screen, starts at Y=0.</p>
</div>
`
});
}
function openBottomRight() {
AppOverlay.openOverlay({
title: '↘️ Bottom Right',
width: '45%',
align: 'bottom-right',
content: `
<div style="padding: 20px;">
<h2 style="color: #667eea;">Bottom Right Position</h2>
<div style="margin: 16px 0;">
<span class="info-badge">align: 'bottom-right'</span>
<span class="info-badge">width: 45%</span>
</div>
<p>Positioned at the bottom-right corner of the screen.</p>
</div>
`
});
}
// Custom Styling Examples
function openRedBorder() {
AppOverlay.openOverlay({
title: '🔴 Red Theme',
width: '50%',
borderColor: '#e74c3c',
content: `
<div style="padding: 20px;">
<h2 style="color: #e74c3c;">Red Border Theme</h2>
<div style="margin: 16px 0;">
<span class="info-badge" style="background: #e74c3c;">borderColor: '#e74c3c'</span>
</div>
<div style="padding: 20px; background: #fee; border: 2px solid #e74c3c; border-radius: 8px; margin-top: 20px;">
<h3 style="color: #e74c3c;">Themed Content</h3>
<p>Match your content styling with the border color for a cohesive look.</p>
</div>
</div>
`
});
}
function openGreenBorder() {
AppOverlay.openOverlay({
title: '🟢 Green Theme',
width: '50%',
borderColor: '#2ecc71',
content: `
<div style="padding: 20px;">
<h2 style="color: #2ecc71;">Green Border Theme</h2>
<div style="margin: 16px 0;">
<span class="info-badge" style="background: #2ecc71;">borderColor: '#2ecc71'</span>
</div>
<div style="padding: 20px; background: #efe; border: 2px solid #2ecc71; border-radius: 8px; margin-top: 20px;">
<h3 style="color: #2ecc71;">Success Theme</h3>
<p>Great for success messages and positive confirmations.</p>
</div>
</div>
`
});
}
function openBlueBorder() {
AppOverlay.openOverlay({
title: '🔵 Blue Theme',
width: '50%',
borderColor: '#3498db',
content: `
<div style="padding: 20px;">
<h2 style="color: #3498db;">Blue Border Theme</h2>
<div style="margin: 16px 0;">
<span class="info-badge" style="background: #3498db;">borderColor: '#3498db'</span>
</div>
<div style="padding: 20px; background: #eff; border: 2px solid #3498db; border-radius: 8px; margin-top: 20px;">
<h3 style="color: #3498db;">Info Theme</h3>
<p>Perfect for informational messages and help dialogs.</p>
</div>
</div>
`
});
}
</script>
</body>
</html>