<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Overlay - Full Control Demo</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
color: #e0e0e0;
padding: 40px;
margin: 0;
}
h1 {
color: #fff;
margin-bottom: 10px;
}
.subtitle {
color: #999;
margin-bottom: 30px;
}
button {
background: #3a3a3a;
color: #e0e0e0;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
margin: 10px;
transition: background 0.2s;
}
button:hover {
background: #4a4a4a;
}
.demo-section {
background: #1e1e1e;
padding: 30px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #2a2a2a;
}
.demo-section h2 {
margin-top: 0;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-top: 20px;
}
.demo-grid button {
width: 100%;
margin: 0;
}
.app-slide {
display: none;
height: 100%;
}
.app-slide.is-active {
display: block;
}
.badge {
display: inline-block;
background: #667eea;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
margin-left: 10px;
}
.new {
background: #51cf66;
}
.code-example {
background: #0a0a0a;
border: 1px solid #333;
border-radius: 4px;
padding: 15px;
margin-top: 15px;
overflow-x: auto;
}
.code-example code {
color: #7dd3fc;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>đ¨ App Overlay - Full Control</h1>
<p class="subtitle">Control spacing, padding, overlay backdrop, and dialog appearance</p>
<div class="demo-section">
<h2>đ Button Spacing & Padding <span class="badge new">NEW</span></h2>
<p>Control the spacing between buttons and padding around the container using <code>containerCSS</code></p>
<div class="demo-grid">
<button onclick="showTightSpacing()">Tight Spacing</button>
<button onclick="showWideSpacing()">Wide Spacing</button>
<button onclick="showCustomPadding()">Custom Padding</button>
<button onclick="showNoGap()">No Gap</button>
</div>
</div>
<div class="demo-section">
<h2>đ Overlay Backdrop Styles <span class="badge new">NEW</span></h2>
<p>Customize the overlay background using <code>overlayCSS</code></p>
<div class="demo-grid">
<button onclick="showDarkBackdrop()">Dark Backdrop</button>
<button onclick="showBlurBackdrop()">Blur Backdrop</button>
<button onclick="showColoredBackdrop()">Colored Backdrop</button>
<button onclick="showTransparent()">Transparent</button>
</div>
</div>
<div class="demo-section">
<h2>đ Dialog Box Styles <span class="badge new">NEW</span></h2>
<p>Style the dialog container using <code>dialogCSS</code></p>
<div class="demo-grid">
<button onclick="showGlassDialog()">Glass Effect</button>
<button onclick="showNeonBorder()">Neon Border</button>
<button onclick="showShadowDialog()">Drop Shadow</button>
<button onclick="showColoredDialog()">Colored Theme</button>
</div>
</div>
<div class="demo-section">
<h2>đĒ Combined Styles</h2>
<p>Combine all styling options for unique designs</p>
<div class="demo-grid">
<button onclick="showRetroTheme()">đšī¸ Retro Gaming</button>
<button onclick="showCyberTheme()">đ¤ Cyberpunk</button>
<button onclick="showNatureTheme()">đŋ Nature</button>
<button onclick="showElegantTheme()">⨠Elegant</button>
</div>
</div>
<div class="demo-section">
<h2>đą Real-World Examples</h2>
<div class="demo-grid">
<button onclick="showMusicPlayer()">Music Player</button>
<button onclick="showPhotoGrid()">Photo Grid</button>
<button onclick="showCompactMenu()">Compact Menu</button>
<button onclick="showSpacedActions()">Spaced Actions</button>
</div>
</div>
<div class="demo-section">
<h2>đ Code Examples</h2>
<h3>Container Spacing</h3>
<div class="code-example">
<code>AppOverlay.open([{
containerCSS: {
gap: '30px', // Space between buttons
padding: '40px' // Padding around container
},
buttons: [/* ... */]
}]);</code>
</div>
<h3>Overlay Backdrop</h3>
<div class="code-example">
<code>AppOverlay.open([{
overlayCSS: {
background: 'rgba(0, 0, 0, 0.95)',
backdropFilter: 'blur(10px)'
},
buttons: [/* ... */]
}]);</code>
</div>
<h3>Dialog Styling</h3>
<div class="code-example">
<code>AppOverlay.open([{
dialogCSS: {
background: '#1a1a2e',
border: '2px solid #00ff00',
boxShadow: '0 0 30px rgba(0, 255, 0, 0.5)'
},
buttons: [/* ... */]
}]);</code>
</div>
</div>
<script src="app-overlay.js"></script>
<script>
// ===== BUTTON SPACING DEMOS =====
function showTightSpacing() {
AppOverlay.open([{
title: 'đ Tight Spacing',
layout: 'grid',
containerCSS: {
gap: '5px',
padding: '10px'
},
buttons: [
{ label: 'Button 1', onClick: () => {} },
{ label: 'Button 2', onClick: () => {} },
{ label: 'Button 3', onClick: () => {} },
{ label: 'Button 4', onClick: () => {} },
{ label: 'Button 5', onClick: () => {} },
{ label: 'Button 6', onClick: () => {} }
]
}]);
}
function showWideSpacing() {
AppOverlay.open([{
title: 'đ Wide Spacing',
layout: 'grid',
containerCSS: {
gap: '40px',
padding: '50px'
},
buttons: [
{ label: 'Button 1', background: '#e74c3c', onClick: () => {} },
{ label: 'Button 2', background: '#3498db', onClick: () => {} },
{ label: 'Button 3', background: '#2ecc71', onClick: () => {} },
{ label: 'Button 4', background: '#f39c12', onClick: () => {} }
]
}]);
}
function showCustomPadding() {
AppOverlay.open([{
title: 'đ Custom Padding',
layout: 'list',
containerCSS: {
padding: '60px 100px'
},
buttons: [
{ label: 'Lots of padding around me', onClick: () => {} },
{ label: 'Me too!', onClick: () => {} },
{ label: 'Same here', onClick: () => {} }
]
}]);
}
function showNoGap() {
AppOverlay.open([{
title: 'đ No Gap',
layout: 'list',
containerCSS: {
gap: '0',
padding: '0'
},
buttonCSS: {
borderRadius: '0'
},
buttons: [
{ label: 'Button 1', background: '#e74c3c', onClick: () => {} },
{ label: 'Button 2', background: '#3498db', onClick: () => {} },
{ label: 'Button 3', background: '#2ecc71', onClick: () => {} },
{ label: 'Button 4', background: '#f39c12', onClick: () => {} }
]
}]);
}
// ===== OVERLAY BACKDROP DEMOS =====
function showDarkBackdrop() {
AppOverlay.open([{
title: 'đ Dark Backdrop',
layout: 'grid',
overlayCSS: {
background: 'rgba(0, 0, 0, 0.95)'
},
buttons: [
{ label: 'Very dark backdrop', onClick: () => {} },
{ label: 'Almost black', onClick: () => {} },
{ label: 'High contrast', onClick: () => {} }
]
}]);
}
function showBlurBackdrop() {
AppOverlay.open([{
title: 'đ Blur Backdrop',
layout: 'hero',
overlayCSS: {
background: 'rgba(0, 0, 0, 0.6)',
backdropFilter: 'blur(20px)'
},
buttons: [
{ label: 'Blurred background', onClick: () => {} },
{ label: 'Glassmorphism effect', onClick: () => {} }
]
}]);
}
function showColoredBackdrop() {
AppOverlay.open([{
title: 'đ Colored Backdrop',
layout: 'grid',
overlayCSS: {
background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%)'
},
buttons: [
{ label: 'Purple gradient', onClick: () => {} },
{ label: 'Colored overlay', onClick: () => {} },
{ label: 'Beautiful!', onClick: () => {} }
]
}]);
}
function showTransparent() {
AppOverlay.open([{
title: 'đ Transparent',
layout: 'hero',
overlayCSS: {
background: 'rgba(0, 0, 0, 0.3)'
},
dialogCSS: {
background: 'rgba(30, 30, 30, 0.95)',
backdropFilter: 'blur(10px)'
},
buttons: [
{ label: 'Light overlay', onClick: () => {} },
{ label: 'See through', onClick: () => {} }
]
}]);
}
// ===== DIALOG BOX STYLES =====
function showGlassDialog() {
AppOverlay.open([{
title: 'đ Glass Effect',
layout: 'grid',
dialogCSS: {
background: 'rgba(255, 255, 255, 0.05)',
backdropFilter: 'blur(20px)',
border: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)'
},
buttons: [
{ label: 'Glass 1', onClick: () => {} },
{ label: 'Glass 2', onClick: () => {} },
{ label: 'Glass 3', onClick: () => {} },
{ label: 'Glass 4', onClick: () => {} }
]
}]);
}
function showNeonBorder() {
AppOverlay.open([{
title: 'đ Neon Border',
layout: 'grid',
dialogCSS: {
background: '#0a0a0a',
border: '3px solid #00ff00',
boxShadow: '0 0 30px rgba(0, 255, 0, 0.5), inset 0 0 30px rgba(0, 255, 0, 0.1)',
outline: '1px solid #00ff00'
},
buttonCSS: {
background: 'transparent',
border: '2px solid #00ff00',
color: '#00ff00',
boxShadow: '0 0 10px rgba(0, 255, 0, 0.3)'
},
buttons: [
{ label: 'Matrix Style', onClick: () => {} },
{ label: 'Cyber Neon', onClick: () => {} },
{ label: 'Green Glow', onClick: () => {} }
]
}]);
}
function showShadowDialog() {
AppOverlay.open([{
title: 'đ Drop Shadow',
layout: 'grid',
dialogCSS: {
boxShadow: '0 30px 90px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2)'
},
buttons: [
{ label: 'Deep Shadow', onClick: () => {} },
{ label: 'Floating Effect', onClick: () => {} },
{ label: '3D Depth', onClick: () => {} }
]
}]);
}
function showColoredDialog() {
AppOverlay.open([{
title: 'đ Colored Theme',
layout: 'grid',
dialogCSS: {
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
border: '2px solid #0f4c75',
boxShadow: '0 10px 40px rgba(15, 76, 117, 0.4)'
},
buttonCSS: {
background: '#0f4c75',
border: '1px solid #3282b8'
},
buttons: [
{ label: 'Blue Theme', onClick: () => {} },
{ label: 'Dark Blue', onClick: () => {} },
{ label: 'Ocean Colors', onClick: () => {} }
]
}]);
}
// ===== THEMED COMBINATIONS =====
function showRetroTheme() {
AppOverlay.open([{
title: 'đšī¸ RETRO GAMING',
layout: 'grid',
overlayCSS: {
background: 'rgba(10, 0, 20, 0.95)'
},
dialogCSS: {
background: '#1a0033',
border: '4px solid #ff00ff',
boxShadow: '0 0 40px rgba(255, 0, 255, 0.6), inset 0 0 40px rgba(255, 0, 255, 0.1)'
},
containerCSS: {
gap: '20px',
padding: '30px'
},
buttonCSS: {
background: 'linear-gradient(135deg, #ff00ff 0%, #00ffff 100%)',
border: '2px solid #fff',
boxShadow: '0 4px 15px rgba(255, 0, 255, 0.5)',
fontWeight: '900',
textTransform: 'uppercase',
letterSpacing: '2px'
},
buttons: [
{ label: 'START', onClick: () => alert('GAME START!') },
{ label: 'OPTIONS', onClick: () => alert('OPTIONS') },
{ label: 'HIGH SCORES', onClick: () => alert('HIGH SCORES') },
{ label: 'QUIT', onClick: () => alert('GAME OVER') }
]
}]);
}
function showCyberTheme() {
AppOverlay.open([{
title: 'đ¤ CYBERPUNK 2077',
layout: 'grid',
overlayCSS: {
background: 'rgba(0, 0, 0, 0.9)'
},
dialogCSS: {
background: '#0a0a0a',
border: '2px solid #00ffff',
boxShadow: '0 0 50px rgba(0, 255, 255, 0.3)'
},
containerCSS: {
gap: '15px',
padding: '25px'
},
buttonCSS: {
background: 'linear-gradient(135deg, #00ffff 0%, #ff00ff 100%)',
border: 'none',
boxShadow: '0 0 20px rgba(0, 255, 255, 0.5)',
color: '#000',
fontWeight: '800'
},
buttons: [
{ label: 'HACK', icon: 'âĄ', onClick: () => {} },
{ label: 'SCAN', icon: 'đī¸', onClick: () => {} },
{ label: 'UPLOAD', icon: 'đĄ', onClick: () => {} },
{ label: 'DECRYPT', icon: 'đ', onClick: () => {} }
]
}]);
}
function showNatureTheme() {
AppOverlay.open([{
title: 'đŋ Nature Zen',
layout: 'grid',
overlayCSS: {
background: 'linear-gradient(135deg, rgba(76, 175, 80, 0.6) 0%, rgba(139, 195, 74, 0.6) 100%)',
backdropFilter: 'blur(10px)'
},
dialogCSS: {
background: 'rgba(255, 255, 255, 0.95)',
border: '2px solid #8bc34a',
boxShadow: '0 10px 40px rgba(76, 175, 80, 0.3)',
color: '#2e7d32'
},
containerCSS: {
gap: '25px',
padding: '40px'
},
buttonCSS: {
background: 'linear-gradient(135deg, #66bb6a 0%, #8bc34a 100%)',
borderRadius: '25px',
boxShadow: '0 4px 15px rgba(76, 175, 80, 0.3)',
color: '#fff'
},
buttons: [
{ label: 'Breathe', icon: 'đą', onClick: () => {} },
{ label: 'Meditate', icon: 'đ§', onClick: () => {} },
{ label: 'Relax', icon: 'âŽī¸', onClick: () => {} },
{ label: 'Peace', icon: 'đī¸', onClick: () => {} }
]
}]);
}
function showElegantTheme() {
AppOverlay.open([{
title: '⨠Elegant',
layout: 'hero',
overlayCSS: {
background: 'rgba(0, 0, 0, 0.85)',
backdropFilter: 'blur(15px)'
},
dialogCSS: {
background: 'linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%)',
border: '1px solid #d4af37',
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5), 0 0 1px rgba(212, 175, 55, 0.5)'
},
containerCSS: {
gap: '30px',
padding: '60px'
},
buttonCSS: {
background: 'linear-gradient(135deg, #d4af37 0%, #f4e5c2 100%)',
color: '#1a1a1a',
borderRadius: '30px',
padding: '20px 50px',
fontSize: '18px',
fontWeight: '600',
boxShadow: '0 4px 20px rgba(212, 175, 55, 0.4)'
},
buttons: [
{ label: 'Premium', icon: 'đ', onClick: () => {} },
{ label: 'Luxury', icon: 'đ', onClick: () => {} },
{ label: 'Elite', icon: 'â', onClick: () => {} }
]
}]);
}
// ===== REAL-WORLD EXAMPLES =====
function showMusicPlayer() {
AppOverlay.open([{
title: 'đĩ Now Playing',
layout: 'bottombar',
dialogCSS: {
background: 'linear-gradient(180deg, #1e1e1e 0%, #121212 100%)'
},
containerCSS: {
gap: '15px',
padding: '20px 30px',
justifyContent: 'center'
},
buttonCSS: {
borderRadius: '50%',
width: '55px',
height: '55px',
padding: '0',
fontSize: '22px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
html: `
<div style="padding: 60px; text-align: center;">
<div style="font-size: 150px; margin: 40px 0;">đĩ</div>
<h2 style="margin: 20px 0 10px;">Electronic Dreams</h2>
<p style="color: #999; margin: 0;">Synthwave Artist</p>
<div style="margin: 40px auto; max-width: 700px; height: 6px; background: #3a3a3a; border-radius: 3px;">
<div style="width: 60%; height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 3px;"></div>
</div>
<p style="color: #999;">3:42 / 6:15</p>
</div>
`,
buttons: [
{ label: 'đ', background: '#2d2d2d', onClick: () => {} },
{ label: 'âŽī¸', background: '#2d2d2d', onClick: () => {} },
{
label: 'â¸ī¸',
background: 'linear-gradient(135deg, #667eea, #764ba2)',
css: { width: '70px', height: '70px', fontSize: '26px' },
onClick: () => {}
},
{ label: 'âī¸', background: '#2d2d2d', onClick: () => {} },
{ label: 'đ', background: '#2d2d2d', onClick: () => {} }
]
}]);
}
function showPhotoGrid() {
const photos = ['đī¸', 'đ
', 'đ', 'đ˛', 'đī¸', 'đ', 'đē', 'đĻ', 'đ'];
AppOverlay.open([{
title: 'đˇ Photo Gallery',
layout: 'grid',
containerCSS: {
gap: '8px',
padding: '15px'
},
buttonCSS: {
fontSize: '60px',
padding: '30px',
background: '#2d2d2d',
aspectRatio: '1'
},
buttons: photos.map(photo => ({
label: photo,
onClick: () => alert(`Viewing ${photo}`)
}))
}]);
}
function showCompactMenu() {
AppOverlay.open([{
title: 'đ Compact Menu',
layout: 'list',
containerCSS: {
gap: '2px',
padding: '0',
maxWidth: '400px'
},
buttonCSS: {
borderRadius: '0',
background: '#2d2d2d',
borderBottom: '1px solid #1a1a1a',
padding: '16px 24px',
textAlign: 'left'
},
buttons: [
{ label: 'Profile Settings', icon: 'đ¤', onClick: () => {} },
{ label: 'Privacy & Security', icon: 'đ', onClick: () => {} },
{ label: 'Notifications', icon: 'đ', onClick: () => {} },
{ label: 'Appearance', icon: 'đ¨', onClick: () => {} },
{ label: 'Language', icon: 'đ', onClick: () => {} },
{ label: 'About', icon: 'âšī¸', onClick: () => {} }
]
}]);
}
function showSpacedActions() {
AppOverlay.open([{
title: 'đ Document Actions',
layout: 'bottombar',
containerCSS: {
gap: '30px',
padding: '25px 50px',
justifyContent: 'center'
},
buttonCSS: {
padding: '16px 40px',
fontSize: '16px',
fontWeight: '600',
borderRadius: '8px'
},
html: `
<div style="padding: 60px; max-width: 800px; margin: 0 auto;">
<h2>Document Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
`,
buttons: [
{
label: 'Save',
icon: 'đž',
background: '#2ecc71',
onClick: () => alert('Saved!')
},
{
label: 'Share',
icon: 'đ¤',
background: '#3498db',
onClick: () => alert('Shared!')
},
{
label: 'Export',
icon: 'đĨ',
background: '#95a5a6',
onClick: () => alert('Exported!')
}
]
}]);
}
</script>
</body>
</html>