<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppOverlay Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
p {
color: #666;
margin-bottom: 30px;
line-height: 1.6;
}
.demo-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.demo-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.demo-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.demo-btn:active {
transform: translateY(0);
}
/* Style for active slides in overlay */
.app-slide {
display: none;
}
.app-slide.is-active {
display: block;
}
.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;
}
</style>
</head>
<body>
<div class="container">
<h1>đ¨ AppOverlay Demo</h1>
<p>Click any button below to see the overlay system with toolbar buttons and nested overlays in action!</p>
<div class="demo-buttons">
<button class="demo-btn" onclick="openSimpleExample()">
đ Simple Example
</button>
<button class="demo-btn" onclick="openNestedExample()">
đ Nested Overlays Example
</button>
<button class="demo-btn" onclick="openComplexExample()">
⥠Complex Multi-Level Example
</button>
<button class="demo-btn" onclick="openGalleryExample()">
đŧī¸ Gallery with Details
</button>
<button class="demo-btn" onclick="openSizePositionExample()">
đ Size & Position Demo
</button>
</div>
</div>
<!-- Include the AppOverlay script -->
<!-- <script src="/core/overlay_extra.js"></script>-->
<script src="<?= asset('/core/overlay_extra.js') ?>" defer></script>
<!-- Demo functions -->
<script>
// Simple example with toolbar buttons
function openSimpleExample() {
AppOverlay.open([
{
title: 'Welcome to AppOverlay',
html: `
<div style="line-height: 1.8;">
<h2 style="margin-bottom: 16px; color: #e0e0e0;">Getting Started</h2>
<p>This is a simple overlay with toolbar buttons at the top. Click the buttons above to explore more!</p>
<p style="margin-top: 16px;">Features include:</p>
<ul style="margin-left: 20px; margin-top: 12px;">
<li>đą Mobile-friendly design</li>
<li>â¨ī¸ Keyboard navigation (ESC to close)</li>
<li>đ¨ Customizable appearance</li>
<li>đ Nested overlay support</li>
</ul>
</div>
`,
buttons: [
{
label: 'đ Documentation',
overlay: {
title: 'Documentation',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">How to Use</h2>
<div class="feature-card">
<h3>Basic Usage</h3>
<p>Call AppOverlay.open() with an array of slide objects.</p>
</div>
<div class="feature-card">
<h3>Toolbar Buttons</h3>
<p>Add a 'buttons' array to any slide to show toolbar buttons.</p>
</div>
<div class="feature-card">
<h3>Nested Overlays</h3>
<p>Use the 'overlay' property on any button to open a nested overlay.</p>
</div>
`
}
},
{
label: 'âšī¸ About',
overlay: {
title: 'About AppOverlay',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">About This Component</h2>
<p>AppOverlay is a flexible, lightweight overlay system that supports:</p>
<ul style="margin: 20px; line-height: 2;">
<li>⨠Beautiful dark theme</li>
<li>đ Toolbar buttons with actions or nested overlays</li>
<li>đ Multi-level nesting (overlays within overlays)</li>
<li>đ¯ Focus management</li>
<li>âŋ Accessibility features</li>
</ul>
`
}
},
{
label: 'đ Action',
action: () => {
alert('This is a custom action button!');
}
}
]
}
]);
}
// Nested overlays example
function openNestedExample() {
AppOverlay.open([
{
title: 'Nested Overlays Demo',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Multi-Level Navigation</h2>
<p>Click the buttons above to open nested overlays. Each level can have its own set of buttons!</p>
<p style="margin-top: 16px; padding: 16px; background: #2a2a2a; border-radius: 8px; border-left: 4px solid #667eea;">
đĄ <strong>Tip:</strong> Press ESC to close the topmost overlay, or click the X button on each level.
</p>
`,
buttons: [
{
label: 'Level 1',
overlay: {
title: 'First Level',
html: '<p>This is the first nested level. Click "Level 2" to go deeper!</p>',
buttons: [
{
label: 'Level 2',
overlay: {
title: 'Second Level',
html: '<p>Now we\'re at level 2! One more to go...</p>',
buttons: [
{
label: 'Level 3',
overlay: {
title: 'Third Level',
html: `
<div style="text-align: center; padding: 40px;">
<h2 style="color: #667eea; margin-bottom: 16px;">đ You made it!</h2>
<p>This is the deepest level in this demo.</p>
<p style="margin-top: 20px;">Close these overlays one by one with ESC or the X buttons.</p>
</div>
`
}
}
]
}
}
]
}
}
]
}
]);
}
// Complex example with multiple options
function openComplexExample() {
AppOverlay.open([
{
title: 'Dashboard',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 20px;">Project Dashboard</h2>
<div class="feature-card">
<h3>đ Analytics</h3>
<p>View detailed analytics and reports for your project.</p>
</div>
<div class="feature-card">
<h3>âī¸ Settings</h3>
<p>Configure your project settings and preferences.</p>
</div>
<div class="feature-card">
<h3>đĨ Team</h3>
<p>Manage team members and permissions.</p>
</div>
`,
buttons: [
{
label: 'đ Analytics',
overlay: {
title: 'Analytics Dashboard',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Analytics Overview</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px;">
<div style="background: #2a2a2a; padding: 20px; border-radius: 8px; text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #667eea;">1,234</div>
<div style="color: #999; margin-top: 8px;">Total Users</div>
</div>
<div style="background: #2a2a2a; padding: 20px; border-radius: 8px; text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #52c41a;">89%</div>
<div style="color: #999; margin-top: 8px;">Satisfaction</div>
</div>
<div style="background: #2a2a2a; padding: 20px; border-radius: 8px; text-align: center;">
<div style="font-size: 32px; font-weight: bold; color: #faad14;">567</div>
<div style="color: #999; margin-top: 8px;">Active Now</div>
</div>
</div>
`,
buttons: [
{
label: 'Export Report',
action: () => alert('Exporting analytics report...')
}
]
}
},
{
label: 'âī¸ Settings',
overlay: {
title: 'Project Settings',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Configuration</h2>
<div class="feature-card">
<h3>General Settings</h3>
<p>Project name, description, and basic configuration.</p>
</div>
<div class="feature-card">
<h3>Advanced Options</h3>
<p>API keys, webhooks, and integration settings.</p>
</div>
`,
buttons: [
{
label: 'Advanced',
overlay: {
title: 'Advanced Settings',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Advanced Configuration</h2>
<p style="padding: 16px; background: #2a2a2a; border-radius: 8px;">
â ī¸ <strong>Warning:</strong> These settings are for advanced users only.
</p>
`
}
}
]
}
},
{
label: 'đĨ Team',
overlay: {
title: 'Team Management',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Team Members</h2>
<div style="margin-top: 20px;">
<div style="background: #2a2a2a; padding: 16px; border-radius: 8px; margin-bottom: 12px;">
<div style="font-weight: bold;">John Doe</div>
<div style="color: #999; font-size: 14px; margin-top: 4px;">Admin âĸ
[email protected]</div>
</div>
<div style="background: #2a2a2a; padding: 16px; border-radius: 8px; margin-bottom: 12px;">
<div style="font-weight: bold;">Jane Smith</div>
<div style="color: #999; font-size: 14px; margin-top: 4px;">Developer âĸ
[email protected]</div>
</div>
<div style="background: #2a2a2a; padding: 16px; border-radius: 8px;">
<div style="font-weight: bold;">Bob Johnson</div>
<div style="color: #999; font-size: 14px; margin-top: 4px;">Designer âĸ
[email protected]</div>
</div>
</div>
`,
buttons: [
{
label: 'â Add Member',
action: () => alert('Opening add member dialog...')
}
]
}
}
]
}
]);
}
// Gallery example
function openGalleryExample() {
const images = [
{ title: 'Mountain Sunset', description: 'Beautiful sunset over the mountains' },
{ title: 'Ocean Waves', description: 'Peaceful waves on the beach' },
{ title: 'Forest Path', description: 'A path through the dense forest' }
];
AppOverlay.open([
{
title: 'Photo Gallery',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 20px;">Image Gallery</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
${images.map((img, i) => `
<div style="background: #2a2a2a; padding: 16px; border-radius: 8px;">
<div style="background: #3a3a3a; height: 150px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 48px;">
đŧī¸
</div>
<div style="font-weight: bold; margin-bottom: 8px;">${img.title}</div>
<div style="color: #999; font-size: 14px;">${img.description}</div>
</div>
`).join('')}
</div>
`,
buttons: images.map((img, i) => ({
label: `${i + 1}. ${img.title}`,
overlay: {
title: img.title,
html: `
<div style="text-align: center;">
<div style="background: #2a2a2a; height: 400px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 120px;">
đŧī¸
</div>
<h2 style="color: #e0e0e0; margin-bottom: 12px;">${img.title}</h2>
<p style="color: #999;">${img.description}</p>
</div>
`,
buttons: [
{
label: 'âšī¸ Info',
overlay: {
title: 'Image Information',
html: `
<h3 style="color: #e0e0e0; margin-bottom: 16px;">Details</h3>
<div class="feature-card">
<p><strong>Title:</strong> ${img.title}</p>
</div>
<div class="feature-card">
<p><strong>Description:</strong> ${img.description}</p>
</div>
<div class="feature-card">
<p><strong>Resolution:</strong> 1920x1080</p>
</div>
<div class="feature-card">
<p><strong>Size:</strong> 2.4 MB</p>
</div>
`
}
},
{
label: 'đž Download',
action: () => alert(`Downloading ${img.title}...`)
}
]
}
}))
}
]);
}
// Size and Position example
function openSizePositionExample() {
AppOverlay.open([
{
title: 'Size & Position Options',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Customize Overlay Size & Position</h2>
<p>Click any button below to see different sizes and positions!</p>
<div style="margin-top: 20px;">
<div class="feature-card">
<h3>Available Options</h3>
<ul style="margin: 10px 0 0 20px;">
<li><strong>width:</strong> Set custom width (e.g., '50%', '600px')</li>
<li><strong>maxWidth:</strong> Maximum width constraint</li>
<li><strong>height:</strong> Set custom height</li>
<li><strong>maxHeight:</strong> Maximum height constraint</li>
<li><strong>minHeight:</strong> Minimum height constraint</li>
<li><strong>align:</strong> Position ('center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right')</li>
<li><strong>fullscreen:</strong> Set to true for fullscreen mode</li>
<li><strong>borderColor:</strong> Custom border color (e.g., '#ff0000', 'rgb(255,0,0)')</li>
<li><strong>borderRadius:</strong> Custom border radius (e.g., '0', '16px')</li>
</ul>
</div>
</div>
`,
buttons: [
{
label: 'đĨī¸ Fullscreen',
overlay: {
title: 'Fullscreen Overlay',
html: `
<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<h2 style="color: #667eea; margin-bottom: 16px; font-size: 48px;">đē</h2>
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Fullscreen Mode</h2>
<p>This overlay takes up the entire screen!</p>
<p style="margin-top: 12px; color: #999;">No borders, no padding, just content.</p>
</div>
`,
fullscreen: true
}
},
{
label: 'đ´ Red Border',
overlay: {
title: 'Custom Red Border',
html: '<p>This overlay has a red border.</p><p style="margin-top: 12px;">borderColor: #ff0000</p>',
width: '500px',
borderColor: '#ff0000',
align: 'center'
}
},
{
label: 'đ Green Border',
overlay: {
title: 'Green Glow',
html: '<p>This overlay has a bright green border with rounded corners.</p><p style="margin-top: 12px;">borderColor: #00ff00<br>borderRadius: 20px</p>',
width: '500px',
borderColor: '#00ff00',
borderRadius: '20px',
align: 'center'
}
},
{
label: 'đˇ Blue Accent',
overlay: {
title: 'Blue Themed',
html: '<p>A professional blue border for corporate themes.</p><p style="margin-top: 12px;">borderColor: #4a90e2</p>',
width: '550px',
borderColor: '#4a90e2',
align: 'center'
}
},
{
label: 'Small Center',
overlay: {
title: 'Small Centered Overlay',
html: '<p>This is a small overlay centered on the screen.</p><p style="margin-top: 12px;">Width: 400px<br>Align: center</p>',
width: '400px',
maxWidth: '400px',
align: 'center'
}
},
{
label: 'Top Right',
overlay: {
title: 'Top Right Positioned',
html: '<p>This overlay appears in the top-right corner.</p><p style="margin-top: 12px;">Width: 50%<br>Align: top-right</p>',
width: '50%',
maxWidth: '500px',
align: 'top-right'
}
},
{
label: 'Bottom Left',
overlay: {
title: 'Bottom Left Positioned',
html: '<p>This overlay appears in the bottom-left corner.</p><p style="margin-top: 12px;">Width: 60%<br>Align: bottom-left</p>',
width: '60%',
maxWidth: '600px',
align: 'bottom-left'
}
},
{
label: 'Full Width Top',
overlay: {
title: 'Full Width at Top',
html: '<p>This overlay spans nearly the full width at the top of the screen.</p><p style="margin-top: 12px;">Width: 96%<br>MaxWidth: 1400px<br>Align: top</p>',
width: '96%',
maxWidth: '1400px',
align: 'top'
}
},
{
label: 'Tall Sidebar',
overlay: {
title: 'Sidebar Style',
html: `
<div style="height: 100%;">
<p>This creates a sidebar-like overlay on the right.</p>
<div style="margin-top: 20px;">
<div class="feature-card">
<h3>Menu Item 1</h3>
<p>Content here</p>
</div>
<div class="feature-card">
<h3>Menu Item 2</h3>
<p>Content here</p>
</div>
<div class="feature-card">
<h3>Menu Item 3</h3>
<p>Content here</p>
</div>
</div>
</div>
`,
width: '400px',
maxWidth: '400px',
height: '100vh',
maxHeight: '100vh',
align: 'right',
buttons: [
{
label: 'Nested Small',
overlay: {
title: 'Nested Small Dialog',
html: '<p>Even nested overlays can have custom sizes!</p>',
width: '300px',
maxWidth: '300px',
align: 'center'
}
},
{
label: 'Nested Fullscreen',
overlay: {
title: 'Nested Fullscreen',
html: `
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<div style="text-align: center;">
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Nested Fullscreen!</h2>
<p>Even nested overlays can be fullscreen.</p>
</div>
</div>
`,
fullscreen: true
}
}
]
}
},
{
label: 'Large Full',
overlay: {
title: 'Large Full Overlay',
html: `
<h2 style="color: #e0e0e0; margin-bottom: 16px;">Maximum Space</h2>
<p>This overlay uses maximum available space.</p>
<div style="margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
${Array.from({length: 9}, (_, i) => `
<div class="feature-card">
<h3>Section ${i + 1}</h3>
<p>Content for section ${i + 1}</p>
</div>
`).join('')}
</div>
`,
width: '98%',
maxWidth: '1800px',
maxHeight: '95vh',
align: 'center'
}
},
{
label: 'đ Rainbow Border',
overlay: {
title: 'Rainbow Gradient',
html: `
<p>This demonstrates a custom purple border with extra rounded corners.</p>
<p style="margin-top: 12px;">borderColor: #9b59b6<br>borderRadius: 24px</p>
<div style="margin-top: 20px; padding: 20px; background: #2a2a2a; border-radius: 12px;">
<h3 style="color: #9b59b6;">Styled Content</h3>
<p style="margin-top: 8px;">You can match your content styling to the border color for a cohesive look.</p>
</div>
`,
width: '600px',
borderColor: '#9b59b6',
borderRadius: '24px',
align: 'center'
}
}
]
}
]);
}
</script>
</body>
</html>