<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Overlay - Default Dark Theme</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #000;
color: #fff;
padding: 40px;
margin: 0;
}
h1 {
color: #fff;
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.subtitle {
color: #666;
margin-bottom: 40px;
}
.demo-section {
background: #0a0a0a;
padding: 30px;
border-radius: 0;
margin-bottom: 20px;
border: 1px solid #1a1a1a;
}
.demo-section h2 {
margin-top: 0;
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.demo-button {
background: #1a1a1a;
color: #fff;
border: 1px solid #2a2a2a;
padding: 16px 24px;
border-radius: 0;
cursor: pointer;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s;
}
.demo-button:hover {
background: #2a2a2a;
border-color: #3a3a3a;
}
</style>
</head>
<body>
<h1>Default Dark Theme</h1>
<p class="subtitle">All buttons now default to dark theme with no gradients</p>
<div class="demo-section">
<h2>Default Buttons (No Custom Styling)</h2>
<p style="color: #666; margin-bottom: 20px;">These use the system defaults - dark background, subtle border, no gradients</p>
<div class="demo-grid">
<button class="demo-button" onclick="showDefault()">Default Style</button>
<button class="demo-button" onclick="showGrid()">Grid Layout</button>
<button class="demo-button" onclick="showList()">List Layout</button>
<button class="demo-button" onclick="showTopBar()">Top Bar</button>
<button class="demo-button" onclick="showBottomBar()">Bottom Bar</button>
<button class="demo-button" onclick="showSidebar()">Sidebar</button>
</div>
</div>
<div class="demo-section">
<h2>Custom Styled Examples</h2>
<p style="color: #666; margin-bottom: 20px;">Examples showing how to customize from the dark base</p>
<div class="demo-grid">
<button class="demo-button" onclick="showBordered()">Bordered</button>
<button class="demo-button" onclick="showSolid()">Solid Colors</button>
<button class="demo-button" onclick="showMinimal()">Minimal</button>
<button class="demo-button" onclick="showAccent()">Accent Lines</button>
</div>
</div>
<script src="app-overlay.js"></script>
<script>
// ===== DEFAULT STYLES (NO CUSTOMIZATION) =====
function showDefault() {
AppOverlay.open([{
title: 'DEFAULT BUTTONS',
layout: 'grid',
buttons: [
{ label: 'Button 1', onClick: () => alert('Button 1') },
{ label: 'Button 2', onClick: () => alert('Button 2') },
{ label: 'Button 3', onClick: () => alert('Button 3') },
{ label: 'Button 4', onClick: () => alert('Button 4') },
{ label: 'Button 5', onClick: () => alert('Button 5') },
{ label: 'Button 6', onClick: () => alert('Button 6') }
]
}]);
}
function showGrid() {
AppOverlay.open([{
title: 'GRID LAYOUT',
layout: 'grid',
html: '<div style="padding: 20px; color: #666;">Default grid layout with dark theme buttons</div>',
buttons: [
{ label: 'Option 1', onClick: () => {} },
{ label: 'Option 2', onClick: () => {} },
{ label: 'Option 3', onClick: () => {} },
{ label: 'Option 4', onClick: () => {} }
]
}]);
}
function showList() {
AppOverlay.open([{
title: 'LIST LAYOUT',
layout: 'list',
buttons: [
{ label: 'Item 1', icon: '→', onClick: () => {} },
{ label: 'Item 2', icon: '→', onClick: () => {} },
{ label: 'Item 3', icon: '→', onClick: () => {} },
{ label: 'Item 4', icon: '→', onClick: () => {} }
]
}]);
}
function showTopBar() {
AppOverlay.open([{
title: 'TOP BAR',
layout: 'topbar',
html: `
<div style="padding: 40px 30px;">
<h2 style="font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 20px;">Content Area</h2>
<p style="color: #666;">Default dark theme top bar navigation</p>
</div>
`,
buttons: [
{ label: 'Home', onClick: () => {} },
{ label: 'About', onClick: () => {} },
{ label: 'Services', onClick: () => {} },
{ label: 'Contact', onClick: () => {} }
]
}]);
}
function showBottomBar() {
AppOverlay.open([{
title: 'BOTTOM BAR',
layout: 'bottombar',
html: `
<div style="padding: 40px 30px;">
<h2 style="font-weight: 700; text-transform: uppercase; letter-spacing: 2px;">Document</h2>
<p style="color: #666;">Actions at the bottom with default dark styling</p>
</div>
`,
buttons: [
{ label: 'Save', onClick: () => alert('Saved!') },
{ label: 'Export', onClick: () => {} },
{ label: 'Share', onClick: () => {} }
]
}]);
}
function showSidebar() {
AppOverlay.open([{
title: 'SIDEBAR',
layout: 'sidebar',
html: `
<div style="padding: 40px; flex: 1;">
<h2 style="font-weight: 700; text-transform: uppercase; letter-spacing: 2px;">Main Content</h2>
<p style="color: #666;">Sidebar with default dark buttons</p>
</div>
`,
buttons: [
{ label: 'Dashboard', onClick: () => {} },
{ label: 'Analytics', onClick: () => {} },
{ label: 'Reports', onClick: () => {} },
{ label: 'Settings', onClick: () => {} }
]
}]);
}
// ===== CUSTOM STYLED EXAMPLES =====
function showBordered() {
AppOverlay.open([{
title: 'BORDERED STYLE',
layout: 'grid',
buttonCSS: {
background: 'transparent',
border: '2px solid #fff',
color: '#fff'
},
buttons: [
{ label: 'Bordered 1', onClick: () => {} },
{ label: 'Bordered 2', onClick: () => {} },
{ label: 'Bordered 3', onClick: () => {} },
{ label: 'Bordered 4', onClick: () => {} }
]
}]);
}
function showSolid() {
AppOverlay.open([{
title: 'SOLID COLORS',
layout: 'grid',
buttonCSS: {
border: 'none'
},
buttons: [
{ label: 'Red', background: '#c92a2a', onClick: () => {} },
{ label: 'Green', background: '#2b8a3e', onClick: () => {} },
{ label: 'Blue', background: '#1864ab', onClick: () => {} },
{ label: 'Orange', background: '#e67700', onClick: () => {} },
{ label: 'Purple', background: '#6741d9', onClick: () => {} },
{ label: 'Teal', background: '#0b7285', onClick: () => {} }
]
}]);
}
function showMinimal() {
AppOverlay.open([{
title: 'MINIMAL',
layout: 'list',
containerCSS: {
gap: '0',
padding: '0'
},
buttonCSS: {
background: 'transparent',
border: 'none',
borderBottom: '1px solid #1a1a1a',
padding: '20px 30px',
textAlign: 'left'
},
buttons: [
{ label: 'Profile', icon: '→', onClick: () => {} },
{ label: 'Settings', icon: '→', onClick: () => {} },
{ label: 'Privacy', icon: '→', onClick: () => {} },
{ label: 'Help', icon: '→', onClick: () => {} }
]
}]);
}
function showAccent() {
AppOverlay.open([{
title: 'ACCENT LINES',
layout: 'list',
buttonCSS: {
background: 'transparent',
border: 'none',
borderLeft: '3px solid #1a1a1a',
padding: '18px 24px',
textAlign: 'left'
},
buttons: [
{ label: 'Active', css: { borderLeftColor: '#fff', background: '#0a0a0a' }, onClick: () => {} },
{ label: 'Option 2', onClick: () => {} },
{ label: 'Option 3', onClick: () => {} },
{ label: 'Option 4', onClick: () => {} }
]
}]);
}
</script>
</body>
</html>