deploy: 53bcc28443
This commit is contained in:
rodydavis
@@ -0,0 +1,636 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lit Web Components Showcase</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-gradient: linear-gradient(135deg, #090d16 0%, #111827 100%);
|
||||
--glass-bg: rgba(17, 24, 39, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #f3f4f6;
|
||||
--text-secondary: #9ca3af;
|
||||
--accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
||||
--accent-hover: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
|
||||
--shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
--font-main: 'Plus Jakarta Sans', 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
background: var(--bg-gradient);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-right: 1px solid var(--glass-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.sidebar-header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
background: var(--accent);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sidebar-header p {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-main);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.project-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
.project-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.project-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.project-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-item:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.project-item.active {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.project-emoji {
|
||||
font-size: 22px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project-item.active .project-emoji {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.project-item.active .project-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
.project-item.active .project-meta {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Main Area Styles */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Empty/Hero State */
|
||||
.hero-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
animation: fadeIn 0.6s ease;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
max-width: 600px;
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 24px;
|
||||
display: inline-block;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
background: var(--accent);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #6366f1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Viewport Styles */
|
||||
.viewport {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
animation: fadeIn 0.4s ease;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport-header {
|
||||
background: rgba(17, 24, 39, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.viewport-title-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
margin-right: 16px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.viewport-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.viewport-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.size-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-secondary);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.size-btn:hover, .size-btn.active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: var(--text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.external-link-btn {
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.external-link-btn:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
|
||||
}
|
||||
|
||||
/* Preview Content Container */
|
||||
.viewport-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #05070c;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Container for direct Lit component rendering */
|
||||
.render-container {
|
||||
background: #0d1117;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Fallback Iframe container for Standalone previews */
|
||||
.iframe-wrapper {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.iframe-wrapper.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* Sizing transitions */
|
||||
.render-container, .iframe-wrapper {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* Desktop Viewport */
|
||||
.render-container.desktop, .iframe-wrapper.desktop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Tablet Viewport (768px wide, 1024px high) */
|
||||
.render-container.tablet, .iframe-wrapper.tablet {
|
||||
width: 768px;
|
||||
height: 1024px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
|
||||
border: 8px solid #1e293b;
|
||||
}
|
||||
|
||||
/* Mobile Viewport (375px wide, 667px high) */
|
||||
.render-container.mobile, .iframe-wrapper.mobile {
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
|
||||
border: 12px solid #1e293b;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
</style>
|
||||
<script type="module" crossorigin src="/rodydavis/lit-examples/assets/main-Dy7OaPgN.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/rodydavis/lit-examples/assets/modulepreload-polyfill-B5Qt9EMX.js">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h1>Lit Showcase</h1>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" class="search-input" placeholder="Search components..." id="search">
|
||||
</div>
|
||||
<div class="project-list" id="projectList">
|
||||
|
||||
<!-- Modular Lit Components (Rendered natively on page) -->
|
||||
<a class="project-item" href="#lit-3d-piano" data-name="Lit 3D Piano" data-slug="lit-3d-piano" data-type="native">
|
||||
<span class="project-emoji">🎹</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit 3D Piano</div>
|
||||
<div class="project-meta">Modular Instrument</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-calculator" data-name="Lit Calculator" data-slug="lit-calculator" data-type="native">
|
||||
<span class="project-emoji">🧮</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Calculator</div>
|
||||
<div class="project-meta">Mathematical Engine</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-code-editor" data-name="Lit Code Editor" data-slug="lit-code-editor" data-type="native">
|
||||
<span class="project-emoji">💻</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Code Editor</div>
|
||||
<div class="project-meta">Monaco Editor Integrator</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-draggable-dom" data-name="Lit Draggable Dom" data-slug="lit-draggable-dom" data-type="native">
|
||||
<span class="project-emoji">🖐️</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Draggable Dom</div>
|
||||
<div class="project-meta">Layout Manager</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-file-based-routing" data-name="Lit File Based Routing" data-slug="lit-file-based-routing" data-type="native">
|
||||
<span class="project-emoji">🚦</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit File Based Routing</div>
|
||||
<div class="project-meta">Application Router</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-force-graph" data-name="Lit Force Graph" data-slug="lit-force-graph" data-type="native">
|
||||
<span class="project-emoji">🕸️</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Force Graph</div>
|
||||
<div class="project-meta">3D Networking Engine</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-html-editor" data-name="Lit HTML Editor" data-slug="lit-html-editor" data-type="native">
|
||||
<span class="project-emoji">✍️</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit HTML Editor</div>
|
||||
<div class="project-meta">Real-time Markdown & code</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-html-table" data-name="Lit HTML Table" data-slug="lit-html-table" data-type="native">
|
||||
<span class="project-emoji">📊</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit HTML Table</div>
|
||||
<div class="project-meta">Spreadsheet Grid View</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-modules" data-name="Lit Modules" data-slug="lit-modules" data-type="native">
|
||||
<span class="project-emoji">📦</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Modules</div>
|
||||
<div class="project-meta">NPM Packaging Harness</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-node-editor" data-name="Lit Node Editor" data-slug="lit-node-editor" data-type="native">
|
||||
<span class="project-emoji">🪢</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Node Editor</div>
|
||||
<div class="project-meta">Visual Shader graph</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-sheet-music" data-name="Lit Sheet Music" data-slug="lit-sheet-music" data-type="native">
|
||||
<span class="project-emoji">🎼</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit Sheet Music</div>
|
||||
<div class="project-meta">OSMD Renderer</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="project-item" href="#lit-wmr" data-name="Lit WMR" data-slug="lit-wmr" data-type="native">
|
||||
<span class="project-emoji">⚡</span>
|
||||
<div class="project-info">
|
||||
<div class="project-title">Lit WMR</div>
|
||||
<div class="project-meta">WMR Bundled Prototype</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Showcase Content -->
|
||||
<div class="main-content">
|
||||
|
||||
<!-- Hero State -->
|
||||
<div class="hero-state" id="heroState">
|
||||
<div class="hero-card">
|
||||
<span class="hero-icon">⚡</span>
|
||||
<h2 class="hero-title">Lit Showcase Hub</h2>
|
||||
<p class="hero-desc">Explore a rich collection of modular Lit Web Components, prototypes, interactive instruments, databases, and custom UI modules. Select any example from the sidebar to preview natively or in a sandbox.</p>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-val">20</div>
|
||||
<div class="stat-lbl">Projects</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-val">Natively</div>
|
||||
<div class="stat-lbl">Rendered</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-val">Vitest</div>
|
||||
<div class="stat-lbl">Colocated</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Viewport -->
|
||||
<div class="viewport" id="viewport">
|
||||
<div class="viewport-header">
|
||||
<div class="viewport-title-area">
|
||||
<button class="back-btn" id="backBtn">←</button>
|
||||
<span class="viewport-title" id="viewportTitle">Project Name</span>
|
||||
</div>
|
||||
<div class="viewport-controls">
|
||||
<button class="size-btn active" data-size="desktop">💻 Desktop</button>
|
||||
<button class="size-btn" data-size="tablet">📟 Tablet</button>
|
||||
<button class="size-btn" data-size="mobile">📱 Mobile</button>
|
||||
<a href="#" target="_blank" class="external-link-btn" id="extLink">🌐 Open Direct</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Wrapper that centers Tablet/Mobile mockups -->
|
||||
<div class="viewport-content" id="viewportContent">
|
||||
<!-- Native rendering viewport -->
|
||||
<div class="render-container desktop" id="renderContainer"></div>
|
||||
|
||||
<!-- Iframe fallback viewport -->
|
||||
<div class="iframe-wrapper desktop" id="iframeWrapper">
|
||||
<iframe id="previewIframe" src="about:blank"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user