<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppOverlay - Declarative API Demo</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: 800px;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
h2 {
color: #555;
margin: 30px 0 15px;
font-size: 20px;
border-bottom: 2px solid #667eea;
padding-bottom: 8px;
}
p {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.demo-section {
margin-bottom: 30px;
}
.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);
text-align: left;
}
.demo-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.demo-btn:active {
transform: translateY(0);
}
.code-block {
background: #2d2d2d;
color: #e0e0e0;
padding: 16px;
border-radius: 8px;
margin: 12px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
.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 Declarative API</h1>
<p>A powerful, component-based approach to creating overlays with minimal code!</p>
<div class="demo-section">
<h2>📋 Simple Declarative Overlays</h2>
<div class="demo-buttons">
<button class="demo-btn" onclick="simpleDeclarative()">
🎯 openOverlay() - Simple Usage
</button>
<button class="demo-btn" onclick="multiSectionOverlay()">
📚 Multiple Sections with Navigation
</button>
<button class="demo-btn" onclick="functionContentOverlay()">
⚡ Dynamic Content with Functions
</button>
</div>
</div>
<div class="demo-section">
<h2>🧩 Reusable Components</h2>
<div class="demo-buttons">
<button class="demo-btn" onclick="registerComponents()">
📝 Register Components
</button>
<button class="demo-btn" onclick="showHelpComponent()">
❓ Show "Help" Component
</button>
<button class="demo-btn" onclick="showSettingsComponent()">
⚙️ Show "Settings" Component
</button>
<button class="demo-btn" onclick="listAllComponents()">
📜 List All Components
</button>
</div>
</div>
<div class="demo-section">
<h2>⚡ Quick Helpers</h2>
<div class="demo-buttons">
<button class="demo-btn" onclick="showAlert()">
⚠️ AppOverlay.alert()
</button>
<button class="demo-btn" onclick="showConfirm()">
✅ AppOverlay.confirm()
</button>
</div>
</div>
<div class="demo-section">
<h2>🏗️ Complex Examples</h2>
<div class="demo-buttons">
<button class="demo-btn" onclick="userSettingsExample()">
👤 User Settings Dashboard
</button>
<button class="demo-btn" onclick="nestedComponentsExample()">
🔗 Nested Overlays with Actions
</button>
</div>
</div>
</div>
<!-- Include the AppOverlay script -->
<script src="/core/overlay_extra.js?v=<?php echo time(); ?>" defer></script>
<!-- Demo functions -->
<script>
// Wait for DOM and script to load
window.addEventListener('DOMContentLoaded', function() {
console.log('AppOverlay API available:', AppOverlay);
});
// Simple declarative overlay
function simpleDeclarative() {
AppOverlay.openOverlay({
title: 'Simple Declarative Overlay',
content: `
<h2 style="color: #667eea; margin-bottom: 16px;">Welcome! 👋</h2>
<p>This overlay was created with just a simple config object.</p>
<div class="code-block">
AppOverlay.openOverlay({
title: 'Simple Declarative Overlay',
content: '<p>Your content here</p>',
width: '600px',
buttons: [...]
});
</div>
`,
width: '600px',
buttons: [
{ label: 'Close', action: () => AppOverlay.close() }
]
});
}
// Multi-section overlay
function multiSectionOverlay() {
AppOverlay.openOverlay({
title: 'Documentation',
fullscreen: false,
width: '90%',
maxWidth: '1000px',
sections: [
{
title: 'Getting Started',
content: `
<h2 style="color: #667eea;">Getting Started</h2>
<p>Welcome to the AppOverlay system! Here's what you need to know:</p>
<div class="feature-card">
<h3>Installation</h3>
<p>Include the script and you're ready to go!</p>
</div>
<div class="feature-card">
<h3>Basic Usage</h3>
<p>Use AppOverlay.openOverlay() with a config object.</p>
</div>
`,
buttons: [
{ label: 'Next Section →', action: () => AppOverlay.next() }
]
},
{
title: 'API Reference',
content: `
<h2 style="color: #667eea;">API Methods</h2>
<div class="feature-card">
<h3>AppOverlay.openOverlay(config)</h3>
<p>Open an overlay with declarative configuration</p>
</div>
<div class="feature-card">
<h3>AppOverlay.defineComponent(name, config)</h3>
<p>Register a reusable overlay component</p>
</div>
<div class="feature-card">
<h3>AppOverlay.show(name)</h3>
<p>Display a predefined component</p>
</div>
`,
buttons: [
{ label: '← Previous', action: () => AppOverlay.prev() },
{ label: 'Next →', action: () => AppOverlay.next() }
]
},
{
title: 'Examples',
content: `
<h2 style="color: #667eea;">Code Examples</h2>
<p>Here are some common patterns:</p>
<div class="code-block">
// Simple alert
AppOverlay.alert('Hello World!');
// Confirmation dialog
AppOverlay.confirm(
'Are you sure?',
() => console.log('Confirmed'),
() => console.log('Cancelled')
);
// Custom overlay
AppOverlay.openOverlay({
title: 'My Overlay',
content: '<p>Content</p>',
fullscreen: true
});
</div>
`,
buttons: [
{ label: '← Previous', action: () => AppOverlay.prev() },
{ label: 'Close', action: () => AppOverlay.close() }
]
}
]
});
// Enable navigation arrows
AppOverlay.configure({ showArrows: true });
}
// Function-based content
function functionContentOverlay() {
AppOverlay.openOverlay({
title: 'Dynamic Content Example',
content: (body) => {
// Dynamically generate content
const now = new Date();
body.innerHTML = `
<h2 style="color: #667eea;">Dynamic Content</h2>
<p>This content was generated by a function!</p>
<div class="feature-card">
<h3>Current Time</h3>
<p>${now.toLocaleString()}</p>
</div>
<div class="feature-card">
<h3>Random Number</h3>
<p>${Math.floor(Math.random() * 1000)}</p>
</div>
<p style="margin-top: 20px;">The function receives the body element and can manipulate it directly!</p>
`;
},
width: '600px',
buttons: [
{
label: 'Refresh',
action: () => {
AppOverlay.close();
functionContentOverlay();
}
},
{ label: 'Close', action: () => AppOverlay.close() }
]
});
}
// Register reusable components
function registerComponents() {
// Define Help component
AppOverlay.defineComponent('help', {
title: 'Help Center',
content: `
<h2 style="color: #667eea;">How Can We Help?</h2>
<div class="feature-card">
<h3>📖 Documentation</h3>
<p>Read our comprehensive guides and API reference.</p>
</div>
<div class="feature-card">
<h3>💬 Support</h3>
<p>Contact our support team for assistance.</p>
</div>
<div class="feature-card">
<h3>🎥 Video Tutorials</h3>
<p>Watch step-by-step video guides.</p>
</div>
`,
width: '600px',
buttons: [
{ label: 'Close', action: () => AppOverlay.close() }
]
});
// Define Settings component
AppOverlay.defineComponent('settings', {
title: 'Settings',
sections: [
{
title: 'Profile',
content: (body) => {
body.innerHTML = `
<h2 style="color: #667eea;">Profile Settings</h2>
<div class="feature-card">
<h3>User Name</h3>
<p>John Doe</p>
</div>
<div class="feature-card">
<h3>Email</h3>
<p>
[email protected]</p>
</div>
`;
},
buttons: [
{ label: 'Edit Profile', action: () => alert('Edit functionality here') }
]
},
{
title: 'Preferences',
content: `
<h2 style="color: #667eea;">User Preferences</h2>
<div class="feature-card">
<h3>Theme</h3>
<p>Dark Mode: Enabled</p>
</div>
<div class="feature-card">
<h3>Language</h3>
<p>English (US)</p>
</div>
<div class="feature-card">
<h3>Notifications</h3>
<p>Email: Enabled, Push: Disabled</p>
</div>
`
}
],
width: '700px'
});
AppOverlay.alert('Components registered! Try "Show Help" or "Show Settings" buttons.');
}
function showHelpComponent() {
AppOverlay.show('help');
}
function showSettingsComponent() {
AppOverlay.show('settings');
AppOverlay.configure({ showArrows: true });
}
function listAllComponents() {
const components = AppOverlay.listComponents();
AppOverlay.openOverlay({
title: 'Registered Components',
content: `
<h2 style="color: #667eea;">Available Components</h2>
<p>Currently registered: <strong>${components.length}</strong> components</p>
${components.length > 0 ? `
<ul style="margin: 20px; line-height: 2;">
${components.map(name => `<li>📦 ${name}</li>`).join('')}
</ul>
` : '<p style="color: #999;">No components registered yet. Click "Register Components" first!</p>'}
`,
width: '500px',
buttons: [
{ label: 'Close', action: () => AppOverlay.close() }
]
});
}
function showAlert() {
AppOverlay.alert('This is a simple alert dialog!', 'Alert Example');
}
function showConfirm() {
AppOverlay.confirm(
'Do you want to proceed with this action?',
() => AppOverlay.alert('You clicked Confirm!'),
() => AppOverlay.alert('You clicked Cancel!'),
'Confirmation'
);
}
// User Settings Dashboard
function userSettingsExample() {
AppOverlay.openOverlay({
title: 'User Settings',
fullscreen: true,
sections: [
{
title: 'Profile',
content: (body) => {
body.innerHTML = `
<h2 style="color: #667eea; margin-bottom: 20px;">User Profile</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
<div class="feature-card">
<h3>Personal Information</h3>
<p><strong>Name:</strong> John Doe</p>
<p><strong>Email:</strong>
[email protected]</p>
<p><strong>Phone:</strong> +1 (555) 123-4567</p>
</div>
<div class="feature-card">
<h3>Account Status</h3>
<p><strong>Member Since:</strong> January 2024</p>
<p><strong>Subscription:</strong> Premium</p>
<p><strong>Status:</strong> Active</p>
</div>
</div>
`;
},
buttons: [
{
label: 'Edit Profile',
overlay: {
title: 'Edit Profile',
content: '<p>Profile editing form would go here...</p>',
width: '500px',
buttons: [
{ label: 'Save', action: () => AppOverlay.close() },
{ label: 'Cancel', action: () => AppOverlay.close() }
]
}
}
]
},
{
title: 'Preferences',
content: `
<h2 style="color: #667eea; margin-bottom: 20px;">Preferences</h2>
<div class="feature-card">
<h3>Display Settings</h3>
<p>Theme: Dark Mode</p>
<p>Font Size: Medium</p>
<p>Layout: Comfortable</p>
</div>
<div class="feature-card">
<h3>Privacy Settings</h3>
<p>Profile Visibility: Public</p>
<p>Activity Status: Visible</p>
<p>Data Collection: Minimal</p>
</div>
`
},
{
title: 'Security',
content: `
<h2 style="color: #667eea; margin-bottom: 20px;">Security Settings</h2>
<div class="feature-card">
<h3>Password</h3>
<p>Last changed: 30 days ago</p>
</div>
<div class="feature-card">
<h3>Two-Factor Authentication</h3>
<p>Status: Enabled ✅</p>
</div>
<div class="feature-card">
<h3>Active Sessions</h3>
<p>2 active sessions detected</p>
</div>
`,
buttons: [
{
label: 'Change Password',
overlay: {
title: 'Change Password',
content: '<p>Password change form...</p>',
width: '450px'
}
}
]
}
]
});
AppOverlay.configure({ showArrows: true });
}
// Nested components example
function nestedComponentsExample() {
AppOverlay.openOverlay({
title: 'Project Manager',
content: `
<h2 style="color: #667eea;">Your Projects</h2>
<div class="feature-card">
<h3>🚀 Project Alpha</h3>
<p>Status: In Progress | Due: Dec 15, 2024</p>
</div>
<div class="feature-card">
<h3>🎨 Project Beta</h3>
<p>Status: Planning | Due: Jan 20, 2025</p>
</div>
<div class="feature-card">
<h3>⚡ Project Gamma</h3>
<p>Status: Completed | Finished: Oct 10, 2024</p>
</div>
`,
width: '700px',
buttons: [
{
label: 'View Details',
overlay: {
title: 'Project Details',
content: `
<h2 style="color: #667eea;">Project Alpha - Details</h2>
<div class="feature-card">
<h3>Team Members</h3>
<p>John, Sarah, Mike, Lisa</p>
</div>
<div class="feature-card">
<h3>Progress</h3>
<p>75% Complete</p>
</div>
`,
width: '600px',
buttons: [
{
label: 'Team Info',
overlay: {
title: 'Team Information',
content: `
<h2 style="color: #667eea;">Team Members</h2>
<div class="feature-card">
<h3>John Doe - Lead Developer</h3>
<p>Email:
[email protected]</p>
</div>
<div class="feature-card">
<h3>Sarah Smith - Designer</h3>
<p>Email:
[email protected]</p>
</div>
`,
width: '500px'
}
}
]
}
},
{
label: 'Create New',
action: () => AppOverlay.alert('Create new project form would appear here!')
}
]
});
}
</script>
</body>
</html>