Rakit UI AI
by madebyaris
- rakitui-ai
- tmp
design-selection-1766577038155.html•48.3 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Component Selection</title>
<!-- Framework Detection Meta -->
<meta name="detected-frameworks" content="">
<!-- External Framework Links (if needed) -->
<style>
/* Base Reset and Layout */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
overflow-x: hidden;
}
/* Framework Compatibility Styles */
/* Layout-Specific Styles */
/* Gallery Layout: Large Components */
.designs-container.gallery-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 15px;
justify-content: center;
margin-bottom: 40px;
padding: 0 15px;
}
.design-container.gallery-layout {
padding: 15px;
margin-bottom: 0;
min-height: 350px;
border-radius: 12px;
}
.design-content.gallery-layout {
min-height: 200px;
max-height: 250px;
overflow: hidden;
position: relative;
}
.design-content.gallery-layout::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(transparent, rgba(255,255,255,0.9));
pointer-events: none;
}
.design-name.gallery-layout {
font-size: 18px;
margin-bottom: 10px;
padding-bottom: 8px;
}
.buttons-container.gallery-layout {
margin-top: 15px;
padding: 10px;
}
.buttons-container.gallery-layout button {
padding: 12px 24px;
font-size: 14px;
min-height: 44px;
min-width: 140px;
}
/* Component Isolation Styles */
.design-content {
margin-bottom: 20px;
min-height: 120px;
padding: 20px;
border: 2px dashed #e0e0e0;
border-radius: 8px;
background-color: #ffffff;
position: relative;
overflow: auto;
transition: all 0.3s ease;
/* Isolation for different frameworks */
contain: layout style;
}
.design-content[data-framework*="tailwind"] {
/* Tailwind-specific container adjustments */
font-size: 14px;
}
.design-content[data-framework*="bootstrap"] {
/* Bootstrap-specific container adjustments */
font-size: 16px;
}
.design-content[data-framework*="bulma"] {
/* Bulma-specific container adjustments */
font-size: 16px;
}
/* Enhanced Design Container */
.design-container {
flex: 1 1 350px;
max-width: 600px;
margin-bottom: 30px;
padding: 25px;
border: 2px solid #e8e8e8;
border-radius: 16px;
background-color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: pointer;
user-select: none;
}
.design-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.design-container:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
border-color: #667eea;
}
.design-container:hover::before {
opacity: 1;
}
.design-container.selected {
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 20px 40px rgba(16, 185, 129, 0.15);
background-color: #f0fdf4;
transform: translateY(-8px);
}
.design-container.selected::before {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
opacity: 1;
}
/* Click indicator */
.design-container::after {
content: '👆 Click to zoom or select';
position: absolute;
bottom: 10px;
right: 15px;
font-size: 12px;
color: #9ca3af;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.design-container:hover::after {
opacity: 1;
}
/* Layout Improvements */
.designs-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
justify-content: center;
margin-bottom: 60px;
padding: 0 20px;
}
.design-name {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f0;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: space-between;
}
.framework-badges {
display: flex;
gap: 6px;
margin: 10px 0;
flex-wrap: wrap;
}
.framework-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.framework-badge.tailwind { background: #38bdf8; color: white; }
.framework-badge.bootstrap { background: #7952b3; color: white; }
.framework-badge.bulma { background: #00d1b2; color: white; }
.framework-badge.foundation { background: #1779ba; color: white; }
.framework-badge.semantic-ui { background: #00b5ad; color: white; }
.framework-badge.vanilla { background: #6b7280; color: white; }
.layout-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 4px;
}
.layout-badge.gallery { background: #8b5cf6; color: white; }
.layout-badge.card { background: #06b6d4; color: white; }
/* Enhanced UI Elements */
.connection-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 16px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
z-index: 1000;
backdrop-filter: blur(10px);
}
.connection-status.connected {
background-color: rgba(16, 185, 129, 0.9);
color: white;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.connection-status.disconnected {
background-color: rgba(239, 68, 68, 0.9);
color: white;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.connection-status.connecting {
background-color: rgba(245, 158, 11, 0.9);
color: white;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
h1 {
text-align: center;
margin-bottom: 15px;
color: #1a1a1a;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
text-align: center;
margin-bottom: 40px;
color: #6b7280;
font-size: 18px;
font-weight: 500;
}
.instructions {
max-width: 800px;
margin: 0 auto 40px;
padding: 20px;
background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%);
border-radius: 12px;
color: #374151;
border: 1px solid #e5e7eb;
}
/* Button Improvements */
button {
padding: 18px 36px;
font-size: 18px;
font-weight: 700;
margin: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
min-height: 56px;
min-width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
transform: translateZ(0); /* Hardware acceleration */
}
button:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}
button:active {
transform: translateY(-2px) scale(0.98);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
button:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3), 0 12px 35px rgba(102, 126, 234, 0.5);
}
button.selected {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5);
animation: selectedPulse 0.6s ease-out;
}
button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}
button:disabled:hover {
transform: none;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}
/* Button ripple effect */
button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
pointer-events: none;
}
button:active::before {
width: 300px;
height: 300px;
}
/* Buttons container improvements */
.buttons-container {
text-align: center;
margin-top: 25px;
padding: 15px;
}
/* Enhanced keyboard hint */
.keyboard-hint {
font-size: 13px;
padding: 6px 12px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 8px;
color: #374151;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border: 1px solid #d1d5db;
}
/* Code View Improvements */
.code-toggle {
position: absolute;
top: 15px;
right: 15px;
padding: 8px 16px;
background: rgba(31, 41, 55, 0.9);
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
z-index: 20;
backdrop-filter: blur(5px);
}
.code-view {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: #e5e7eb;
padding: 20px;
overflow: auto;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
border-radius: 8px;
}
/* Enhanced Animations */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.design-container {
animation: slideUp 0.6s ease-out both;
}
.design-container:nth-child(1) { animation-delay: 0.1s; }
.design-container:nth-child(2) { animation-delay: 0.3s; }
.design-container:nth-child(3) { animation-delay: 0.5s; }
/* Responsive Design */
@media (max-width: 768px) {
.designs-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 10px;
}
h1 { font-size: 2rem; }
.subtitle { font-size: 16px; }
.design-container { padding: 20px; }
.design-content { padding: 15px; min-height: 100px; }
}
/* Framework-specific adjustments */
.design-component-1, .design-component-2, .design-component-3 {
width: 100%;
isolation: isolate;
}
/* Loading states */
.loading-state {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes selectedPulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
button {
min-height: 64px;
min-width: 220px;
font-size: 20px;
padding: 20px 40px;
}
button:active {
transform: scale(0.95);
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}
.design-container {
padding: 30px;
}
.code-toggle {
padding: 12px 20px;
font-size: 14px;
min-height: 44px;
}
}
/* Zoom overlay improvements */
.zoom-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
display: none;
z-index: 3000;
backdrop-filter: blur(5px);
padding: 40px;
overflow: auto;
}
.zoom-content {
background: white;
border-radius: 16px;
max-width: 95vw;
margin: 0 auto;
padding: 40px;
position: relative;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
/* Extracted styles for each design - will be injected dynamically */
</style>
</head>
<body>
<div class="connection-status connecting" id="connectionStatus">
<span class="loading-state"></span> Connecting...
</div>
<h1>UI Component Selection</h1>
<p class="subtitle">Compare designs with framework compatibility</p>
<div class="instructions">
<p><strong>Choose your preferred component design.</strong> Each design is isolated and framework-compatible.
No frameworks detected - vanilla CSS/HTML
<br><em>Using gallery layout for optimal large component viewing.</em>
</p>
</div>
<div class="designs-container gallery-layout">
<div class="design-container gallery-layout" data-design="Bella Vista - Hero Section" data-index="1" data-layout="gallery">
<div class="design-name gallery-layout">
Bella Vista - Hero Section
<span class="keyboard-hint">Press 1</span>
</div>
<div class="framework-badges">
<span class="framework-badge vanilla">Vanilla CSS</span>
<span class="layout-badge gallery">🖼️ Gallery</span>
</div>
<div class="design-content gallery-layout" data-framework="" data-index="1">
<button class="code-toggle" onclick="toggleCode(event, 1)">View Code</button>
<div class="design-component-1" data-framework="" data-isolation="true">
<style scoped>
</style>
<section style="height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: white;">
<div>
<h1 style="font-size: 4rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);">Bella Vista Restaurant</h1>
<p style="font-size: 1.5rem; margin-bottom: 2rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);">Experience Authentic Italian Cuisine in the Heart of the City</p>
<a href="#menu" style="display: inline-block; background: #d4af37; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 1.1rem; transition: all 0.3s ease;">View Our Menu</a>
</div>
</section>
</div>
<div class="code-view" id="codeView1">
<button class="copy-button" onclick="copyCode(event, 'JTNDc2VjdGlvbiUyMHN0eWxlJTNEJTIyaGVpZ2h0JTNBJTIwMTAwdmglM0IlMjBiYWNrZ3JvdW5kJTNBJTIwbGluZWFyLWdyYWRpZW50KHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC41KSUyQyUyMHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC41KSklMkMlMjB1cmwoJ2h0dHBzJTNBJTJGJTJGaW1hZ2VzLnVuc3BsYXNoLmNvbSUyRnBob3RvLTE1MTcyNDgxMzU0NjctNGM3ZWRjYWQzNGM0JTNGaXhsaWIlM0RyYi00LjAuMyUyNmF1dG8lM0Rmb3JtYXQlMjZmaXQlM0Rjcm9wJTI2dyUzRDIwNzAlMjZxJTNEODAnKSUzQiUyMGJhY2tncm91bmQtc2l6ZSUzQSUyMGNvdmVyJTNCJTIwYmFja2dyb3VuZC1wb3NpdGlvbiUzQSUyMGNlbnRlciUzQiUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTIwYWxpZ24taXRlbXMlM0ElMjBjZW50ZXIlM0IlMjBqdXN0aWZ5LWNvbnRlbnQlM0ElMjBjZW50ZXIlM0IlMjB0ZXh0LWFsaWduJTNBJTIwY2VudGVyJTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMiUzRSUwQSUyMCUyMCUzQ2RpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2gxJTIwc3R5bGUlM0QlMjJmb250LXNpemUlM0ElMjA0cmVtJTNCJTIwbWFyZ2luLWJvdHRvbSUzQSUyMDFyZW0lM0IlMjB0ZXh0LXNoYWRvdyUzQSUyMDJweCUyMDJweCUyMDRweCUyMHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC44KSUzQiUyMiUzRUJlbGxhJTIwVmlzdGElMjBSZXN0YXVyYW50JTNDJTJGaDElM0UlMEElMjAlMjAlMjAlMjAlM0NwJTIwc3R5bGUlM0QlMjJmb250LXNpemUlM0ElMjAxLjVyZW0lM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMnJlbSUzQiUyMHRleHQtc2hhZG93JTNBJTIwMXB4JTIwMXB4JTIwMnB4JTIwcmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjgpJTNCJTIyJTNFRXhwZXJpZW5jZSUyMEF1dGhlbnRpYyUyMEl0YWxpYW4lMjBDdWlzaW5lJTIwaW4lMjB0aGUlMjBIZWFydCUyMG9mJTIwdGhlJTIwQ2l0eSUzQyUyRnAlM0UlMEElMjAlMjAlMjAlMjAlM0NhJTIwaHJlZiUzRCUyMiUyM21lbnUlMjIlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0ElMjBpbmxpbmUtYmxvY2slM0IlMjBiYWNrZ3JvdW5kJTNBJTIwJTIzZDRhZjM3JTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMHBhZGRpbmclM0ElMjAxNXB4JTIwMzBweCUzQiUyMHRleHQtZGVjb3JhdGlvbiUzQSUyMG5vbmUlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwNXB4JTNCJTIwZm9udC1zaXplJTNBJTIwMS4xcmVtJTNCJTIwdHJhbnNpdGlvbiUzQSUyMGFsbCUyMDAuM3MlMjBlYXNlJTNCJTIyJTNFVmlldyUyME91ciUyME1lbnUlM0MlMkZhJTNFJTBBJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGc2VjdGlvbiUzRQ')">Copy HTML</button>
<pre><code><section style="height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: white;">
<div>
<h1 style="font-size: 4rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);">Bella Vista Restaurant</h1>
<p style="font-size: 1.5rem; margin-bottom: 2rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);">Experience Authentic Italian Cuisine in the Heart of the City</p>
<a href="#menu" style="display: inline-block; background: #d4af37; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 1.1rem; transition: all 0.3s ease;">View Our Menu</a>
</div>
</section></code></pre>
</div>
</div>
<div class="buttons-container gallery-layout">
<button id="btn1" onclick="selectDesign('Bella Vista - Hero Section', 'btn1', 'JTNDc2VjdGlvbiUyMHN0eWxlJTNEJTIyaGVpZ2h0JTNBJTIwMTAwdmglM0IlMjBiYWNrZ3JvdW5kJTNBJTIwbGluZWFyLWdyYWRpZW50KHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC41KSUyQyUyMHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC41KSklMkMlMjB1cmwoJ2h0dHBzJTNBJTJGJTJGaW1hZ2VzLnVuc3BsYXNoLmNvbSUyRnBob3RvLTE1MTcyNDgxMzU0NjctNGM3ZWRjYWQzNGM0JTNGaXhsaWIlM0RyYi00LjAuMyUyNmF1dG8lM0Rmb3JtYXQlMjZmaXQlM0Rjcm9wJTI2dyUzRDIwNzAlMjZxJTNEODAnKSUzQiUyMGJhY2tncm91bmQtc2l6ZSUzQSUyMGNvdmVyJTNCJTIwYmFja2dyb3VuZC1wb3NpdGlvbiUzQSUyMGNlbnRlciUzQiUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTIwYWxpZ24taXRlbXMlM0ElMjBjZW50ZXIlM0IlMjBqdXN0aWZ5LWNvbnRlbnQlM0ElMjBjZW50ZXIlM0IlMjB0ZXh0LWFsaWduJTNBJTIwY2VudGVyJTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMiUzRSUwQSUyMCUyMCUzQ2RpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2gxJTIwc3R5bGUlM0QlMjJmb250LXNpemUlM0ElMjA0cmVtJTNCJTIwbWFyZ2luLWJvdHRvbSUzQSUyMDFyZW0lM0IlMjB0ZXh0LXNoYWRvdyUzQSUyMDJweCUyMDJweCUyMDRweCUyMHJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC44KSUzQiUyMiUzRUJlbGxhJTIwVmlzdGElMjBSZXN0YXVyYW50JTNDJTJGaDElM0UlMEElMjAlMjAlMjAlMjAlM0NwJTIwc3R5bGUlM0QlMjJmb250LXNpemUlM0ElMjAxLjVyZW0lM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMnJlbSUzQiUyMHRleHQtc2hhZG93JTNBJTIwMXB4JTIwMXB4JTIwMnB4JTIwcmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjgpJTNCJTIyJTNFRXhwZXJpZW5jZSUyMEF1dGhlbnRpYyUyMEl0YWxpYW4lMjBDdWlzaW5lJTIwaW4lMjB0aGUlMjBIZWFydCUyMG9mJTIwdGhlJTIwQ2l0eSUzQyUyRnAlM0UlMEElMjAlMjAlMjAlMjAlM0NhJTIwaHJlZiUzRCUyMiUyM21lbnUlMjIlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0ElMjBpbmxpbmUtYmxvY2slM0IlMjBiYWNrZ3JvdW5kJTNBJTIwJTIzZDRhZjM3JTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMHBhZGRpbmclM0ElMjAxNXB4JTIwMzBweCUzQiUyMHRleHQtZGVjb3JhdGlvbiUzQSUyMG5vbmUlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwNXB4JTNCJTIwZm9udC1zaXplJTNBJTIwMS4xcmVtJTNCJTIwdHJhbnNpdGlvbiUzQSUyMGFsbCUyMDAuM3MlMjBlYXNlJTNCJTIyJTNFVmlldyUyME91ciUyME1lbnUlM0MlMkZhJTNFJTBBJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGc2VjdGlvbiUzRQ')">
Select This Design
</button>
</div>
</div>
<div class="design-container gallery-layout" data-design="Bella Vista - Menu Item Card" data-index="2" data-layout="gallery">
<div class="design-name gallery-layout">
Bella Vista - Menu Item Card
<span class="keyboard-hint">Press 2</span>
</div>
<div class="framework-badges">
<span class="framework-badge vanilla">Vanilla CSS</span>
<span class="layout-badge gallery">🖼️ Gallery</span>
</div>
<div class="design-content gallery-layout" data-framework="" data-index="2">
<button class="code-toggle" onclick="toggleCode(event, 2)">View Code</button>
<div class="design-component-2" data-framework="" data-isolation="true">
<style scoped>
</style>
<div style="background: #f8f8f8; padding: 2rem; border-radius: 10px; text-align: center; transition: transform 0.3s ease;">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?auto=format&fit=crop&w=1000&q=80" alt="Margherita Pizza" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem;">
<h3 style="font-size: 1.5rem; margin-bottom: 1rem; color: #333;">Margherita Pizza</h3>
<p style="color: #666; margin-bottom: 1rem;">Fresh mozzarella, San Marzano tomatoes, fresh basil, extra virgin olive oil</p>
<div style="font-size: 1.3rem; font-weight: bold; color: #d4af37;">$18</div>
</div>
</div>
<div class="code-view" id="codeView2">
<button class="copy-button" onclick="copyCode(event, 'JTNDZGl2JTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwJTIzZjhmOGY4JTNCJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlMjB0cmFuc2l0aW9uJTNBJTIwdHJhbnNmb3JtJTIwMC4zcyUyMGVhc2UlM0IlMjIlM0UlMEElMjAlMjAlM0NpbWclMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRmltYWdlcy51bnNwbGFzaC5jb20lMkZwaG90by0xNTY1Mjk5NjI0OTQ2LWIyOGY0MGEwY2E0YiUzRmF1dG8lM0Rmb3JtYXQlMjZmaXQlM0Rjcm9wJTI2dyUzRDEwMDAlMjZxJTNEODAlMjIlMjBhbHQlM0QlMjJNYXJnaGVyaXRhJTIwUGl6emElMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwaGVpZ2h0JTNBJTIwMjAwcHglM0IlMjBvYmplY3QtZml0JTNBJTIwY292ZXIlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAxcmVtJTNCJTIyJTNFJTBBJTIwJTIwJTNDaDMlMjBzdHlsZSUzRCUyMmZvbnQtc2l6ZSUzQSUyMDEuNXJlbSUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAxcmVtJTNCJTIwY29sb3IlM0ElMjAlMjMzMzMlM0IlMjIlM0VNYXJnaGVyaXRhJTIwUGl6emElM0MlMkZoMyUzRSUwQSUyMCUyMCUzQ3AlMjBzdHlsZSUzRCUyMmNvbG9yJTNBJTIwJTIzNjY2JTNCJTIwbWFyZ2luLWJvdHRvbSUzQSUyMDFyZW0lM0IlMjIlM0VGcmVzaCUyMG1venphcmVsbGElMkMlMjBTYW4lMjBNYXJ6YW5vJTIwdG9tYXRvZXMlMkMlMjBmcmVzaCUyMGJhc2lsJTJDJTIwZXh0cmElMjB2aXJnaW4lMjBvbGl2ZSUyMG9pbCUzQyUyRnAlM0UlMEElMjAlMjAlM0NkaXYlMjBzdHlsZSUzRCUyMmZvbnQtc2l6ZSUzQSUyMDEuM3JlbSUzQiUyMGZvbnQtd2VpZ2h0JTNBJTIwYm9sZCUzQiUyMGNvbG9yJTNBJTIwJTIzZDRhZjM3JTNCJTIyJTNFJTI0MTglM0MlMkZkaXYlM0UlMEElM0MlMkZkaXYlM0U')">Copy HTML</button>
<pre><code><div style="background: #f8f8f8; padding: 2rem; border-radius: 10px; text-align: center; transition: transform 0.3s ease;">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?auto=format&fit=crop&w=1000&q=80" alt="Margherita Pizza" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem;">
<h3 style="font-size: 1.5rem; margin-bottom: 1rem; color: #333;">Margherita Pizza</h3>
<p style="color: #666; margin-bottom: 1rem;">Fresh mozzarella, San Marzano tomatoes, fresh basil, extra virgin olive oil</p>
<div style="font-size: 1.3rem; font-weight: bold; color: #d4af37;">$18</div>
</div></code></pre>
</div>
</div>
<div class="buttons-container gallery-layout">
<button id="btn2" onclick="selectDesign('Bella Vista - Menu Item Card', 'btn2', 'JTNDZGl2JTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwJTIzZjhmOGY4JTNCJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlMjB0cmFuc2l0aW9uJTNBJTIwdHJhbnNmb3JtJTIwMC4zcyUyMGVhc2UlM0IlMjIlM0UlMEElMjAlMjAlM0NpbWclMjBzcmMlM0QlMjJodHRwcyUzQSUyRiUyRmltYWdlcy51bnNwbGFzaC5jb20lMkZwaG90by0xNTY1Mjk5NjI0OTQ2LWIyOGY0MGEwY2E0YiUzRmF1dG8lM0Rmb3JtYXQlMjZmaXQlM0Rjcm9wJTI2dyUzRDEwMDAlMjZxJTNEODAlMjIlMjBhbHQlM0QlMjJNYXJnaGVyaXRhJTIwUGl6emElMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwaGVpZ2h0JTNBJTIwMjAwcHglM0IlMjBvYmplY3QtZml0JTNBJTIwY292ZXIlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAxcmVtJTNCJTIyJTNFJTBBJTIwJTIwJTNDaDMlMjBzdHlsZSUzRCUyMmZvbnQtc2l6ZSUzQSUyMDEuNXJlbSUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAxcmVtJTNCJTIwY29sb3IlM0ElMjAlMjMzMzMlM0IlMjIlM0VNYXJnaGVyaXRhJTIwUGl6emElM0MlMkZoMyUzRSUwQSUyMCUyMCUzQ3AlMjBzdHlsZSUzRCUyMmNvbG9yJTNBJTIwJTIzNjY2JTNCJTIwbWFyZ2luLWJvdHRvbSUzQSUyMDFyZW0lM0IlMjIlM0VGcmVzaCUyMG1venphcmVsbGElMkMlMjBTYW4lMjBNYXJ6YW5vJTIwdG9tYXRvZXMlMkMlMjBmcmVzaCUyMGJhc2lsJTJDJTIwZXh0cmElMjB2aXJnaW4lMjBvbGl2ZSUyMG9pbCUzQyUyRnAlM0UlMEElMjAlMjAlM0NkaXYlMjBzdHlsZSUzRCUyMmZvbnQtc2l6ZSUzQSUyMDEuM3JlbSUzQiUyMGZvbnQtd2VpZ2h0JTNBJTIwYm9sZCUzQiUyMGNvbG9yJTNBJTIwJTIzZDRhZjM3JTNCJTIyJTNFJTI0MTglM0MlMkZkaXYlM0UlMEElM0MlMkZkaXYlM0U')">
Select This Design
</button>
</div>
</div>
<div class="design-container gallery-layout" data-design="Bella Vista - Reservation Form" data-index="3" data-layout="gallery">
<div class="design-name gallery-layout">
Bella Vista - Reservation Form
<span class="keyboard-hint">Press 3</span>
</div>
<div class="framework-badges">
<span class="framework-badge vanilla">Vanilla CSS</span>
<span class="layout-badge gallery">🖼️ Gallery</span>
</div>
<div class="design-content gallery-layout" data-framework="" data-index="3">
<button class="code-toggle" onclick="toggleCode(event, 3)">View Code</button>
<div class="design-component-3" data-framework="" data-isolation="true">
<style scoped>
</style>
<div style="background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 10px;">
<h3 style="margin-bottom: 1.5rem; color: #d4af37;">Make a Reservation</h3>
<form>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Name</label>
<input type="text" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Email</label>
<input type="email" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Phone</label>
<input type="tel" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<button type="submit" style="background: #d4af37; color: white; padding: 15px 30px; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease;">Request Reservation</button>
</form>
</div>
</div>
<div class="code-view" id="codeView3">
<button class="copy-button" onclick="copyCode(event, 'JTNDZGl2JTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwcmdiYSgyNTUlMkMlMjAyNTUlMkMlMjAyNTUlMkMlMjAwLjEpJTNCJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMiUzRSUwQSUyMCUyMCUzQ2gzJTIwc3R5bGUlM0QlMjJtYXJnaW4tYm90dG9tJTNBJTIwMS41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VNYWtlJTIwYSUyMFJlc2VydmF0aW9uJTNDJTJGaDMlM0UlMEElMjAlMjAlM0Nmb3JtJTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwc3R5bGUlM0QlMjJtYXJnaW4tYm90dG9tJTNBJTIwMS41cmVtJTNCJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGFiZWwlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0ElMjBibG9jayUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAwLjVyZW0lM0IlMjBjb2xvciUzQSUyMCUyM2Q0YWYzNyUzQiUyMiUzRU5hbWUlM0MlMkZsYWJlbCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwcGFkZGluZyUzQSUyMDEwcHglM0IlMjBib3JkZXIlM0ElMjBub25lJTNCJTIwYm9yZGVyLXJhZGl1cyUzQSUyMDVweCUzQiUyMGJhY2tncm91bmQlM0ElMjByZ2JhKDI1NSUyQyUyMDI1NSUyQyUyMDI1NSUyQyUyMDAuOSklM0IlMjIlMjByZXF1aXJlZCUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMHN0eWxlJTNEJTIybWFyZ2luLWJvdHRvbSUzQSUyMDEuNXJlbSUzQiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwc3R5bGUlM0QlMjJkaXNwbGF5JTNBJTIwYmxvY2slM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMC41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VFbWFpbCUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIyZW1haWwlMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwcGFkZGluZyUzQSUyMDEwcHglM0IlMjBib3JkZXIlM0ElMjBub25lJTNCJTIwYm9yZGVyLXJhZGl1cyUzQSUyMDVweCUzQiUyMGJhY2tncm91bmQlM0ElMjByZ2JhKDI1NSUyQyUyMDI1NSUyQyUyMDI1NSUyQyUyMDAuOSklM0IlMjIlMjByZXF1aXJlZCUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMHN0eWxlJTNEJTIybWFyZ2luLWJvdHRvbSUzQSUyMDEuNXJlbSUzQiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwc3R5bGUlM0QlMjJkaXNwbGF5JTNBJTIwYmxvY2slM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMC41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VQaG9uZSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIydGVsJTIyJTIwc3R5bGUlM0QlMjJ3aWR0aCUzQSUyMDEwMCUyNSUzQiUyMHBhZGRpbmclM0ElMjAxMHB4JTNCJTIwYm9yZGVyJTNBJTIwbm9uZSUzQiUyMGJvcmRlci1yYWRpdXMlM0ElMjA1cHglM0IlMjBiYWNrZ3JvdW5kJTNBJTIwcmdiYSgyNTUlMkMlMjAyNTUlMkMlMjAyNTUlMkMlMjAwLjkpJTNCJTIyJTIwcmVxdWlyZWQlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0NidXR0b24lMjB0eXBlJTNEJTIyc3VibWl0JTIyJTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwJTIzZDRhZjM3JTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMHBhZGRpbmclM0ElMjAxNXB4JTIwMzBweCUzQiUyMGJvcmRlciUzQSUyMG5vbmUlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwNXB4JTNCJTIwZm9udC1zaXplJTNBJTIwMS4xcmVtJTNCJTIwY3Vyc29yJTNBJTIwcG9pbnRlciUzQiUyMHRyYW5zaXRpb24lM0ElMjBhbGwlMjAwLjNzJTIwZWFzZSUzQiUyMiUzRVJlcXVlc3QlMjBSZXNlcnZhdGlvbiUzQyUyRmJ1dHRvbiUzRSUwQSUyMCUyMCUzQyUyRmZvcm0lM0UlMEElM0MlMkZkaXYlM0U')">Copy HTML</button>
<pre><code><div style="background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 10px;">
<h3 style="margin-bottom: 1.5rem; color: #d4af37;">Make a Reservation</h3>
<form>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Name</label>
<input type="text" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Email</label>
<input type="email" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; color: #d4af37;">Phone</label>
<input type="tel" style="width: 100%; padding: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.9);" required>
</div>
<button type="submit" style="background: #d4af37; color: white; padding: 15px 30px; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease;">Request Reservation</button>
</form>
</div></code></pre>
</div>
</div>
<div class="buttons-container gallery-layout">
<button id="btn3" onclick="selectDesign('Bella Vista - Reservation Form', 'btn3', 'JTNDZGl2JTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwcmdiYSgyNTUlMkMlMjAyNTUlMkMlMjAyNTUlMkMlMjAwLjEpJTNCJTIwcGFkZGluZyUzQSUyMDJyZW0lM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwMTBweCUzQiUyMiUzRSUwQSUyMCUyMCUzQ2gzJTIwc3R5bGUlM0QlMjJtYXJnaW4tYm90dG9tJTNBJTIwMS41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VNYWtlJTIwYSUyMFJlc2VydmF0aW9uJTNDJTJGaDMlM0UlMEElMjAlMjAlM0Nmb3JtJTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwc3R5bGUlM0QlMjJtYXJnaW4tYm90dG9tJTNBJTIwMS41cmVtJTNCJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGFiZWwlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0ElMjBibG9jayUzQiUyMG1hcmdpbi1ib3R0b20lM0ElMjAwLjVyZW0lM0IlMjBjb2xvciUzQSUyMCUyM2Q0YWYzNyUzQiUyMiUzRU5hbWUlM0MlMkZsYWJlbCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwcGFkZGluZyUzQSUyMDEwcHglM0IlMjBib3JkZXIlM0ElMjBub25lJTNCJTIwYm9yZGVyLXJhZGl1cyUzQSUyMDVweCUzQiUyMGJhY2tncm91bmQlM0ElMjByZ2JhKDI1NSUyQyUyMDI1NSUyQyUyMDI1NSUyQyUyMDAuOSklM0IlMjIlMjByZXF1aXJlZCUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMHN0eWxlJTNEJTIybWFyZ2luLWJvdHRvbSUzQSUyMDEuNXJlbSUzQiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwc3R5bGUlM0QlMjJkaXNwbGF5JTNBJTIwYmxvY2slM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMC41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VFbWFpbCUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIyZW1haWwlMjIlMjBzdHlsZSUzRCUyMndpZHRoJTNBJTIwMTAwJTI1JTNCJTIwcGFkZGluZyUzQSUyMDEwcHglM0IlMjBib3JkZXIlM0ElMjBub25lJTNCJTIwYm9yZGVyLXJhZGl1cyUzQSUyMDVweCUzQiUyMGJhY2tncm91bmQlM0ElMjByZ2JhKDI1NSUyQyUyMDI1NSUyQyUyMDI1NSUyQyUyMDAuOSklM0IlMjIlMjByZXF1aXJlZCUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMHN0eWxlJTNEJTIybWFyZ2luLWJvdHRvbSUzQSUyMDEuNXJlbSUzQiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwc3R5bGUlM0QlMjJkaXNwbGF5JTNBJTIwYmxvY2slM0IlMjBtYXJnaW4tYm90dG9tJTNBJTIwMC41cmVtJTNCJTIwY29sb3IlM0ElMjAlMjNkNGFmMzclM0IlMjIlM0VQaG9uZSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIydGVsJTIyJTIwc3R5bGUlM0QlMjJ3aWR0aCUzQSUyMDEwMCUyNSUzQiUyMHBhZGRpbmclM0ElMjAxMHB4JTNCJTIwYm9yZGVyJTNBJTIwbm9uZSUzQiUyMGJvcmRlci1yYWRpdXMlM0ElMjA1cHglM0IlMjBiYWNrZ3JvdW5kJTNBJTIwcmdiYSgyNTUlMkMlMjAyNTUlMkMlMjAyNTUlMkMlMjAwLjkpJTNCJTIyJTIwcmVxdWlyZWQlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0NidXR0b24lMjB0eXBlJTNEJTIyc3VibWl0JTIyJTIwc3R5bGUlM0QlMjJiYWNrZ3JvdW5kJTNBJTIwJTIzZDRhZjM3JTNCJTIwY29sb3IlM0ElMjB3aGl0ZSUzQiUyMHBhZGRpbmclM0ElMjAxNXB4JTIwMzBweCUzQiUyMGJvcmRlciUzQSUyMG5vbmUlM0IlMjBib3JkZXItcmFkaXVzJTNBJTIwNXB4JTNCJTIwZm9udC1zaXplJTNBJTIwMS4xcmVtJTNCJTIwY3Vyc29yJTNBJTIwcG9pbnRlciUzQiUyMHRyYW5zaXRpb24lM0ElMjBhbGwlMjAwLjNzJTIwZWFzZSUzQiUyMiUzRVJlcXVlc3QlMjBSZXNlcnZhdGlvbiUzQyUyRmJ1dHRvbiUzRSUwQSUyMCUyMCUzQyUyRmZvcm0lM0UlMEElM0MlMkZkaXYlM0U')">
Select This Design
</button>
</div>
</div>
</div>
<div class="zoom-overlay" id="zoomOverlay" onclick="closeZoom()">
<div class="zoom-content" onclick="event.stopPropagation()">
<button class="zoom-close" onclick="closeZoom()">✕</button>
<div id="zoomContentInner"></div>
</div>
</div>
<script>
function safeDecode(encoded) {
try {
// Reverse the safe encoding
const base64 = encoded
.replace(/-/g, '+')
.replace(/_/g, '/')
.padEnd(encoded.length + (4 - encoded.length % 4) % 4, '=');
return decodeURIComponent(atob(base64));
} catch (error) {
console.error('Decode error:', error);
return '';
}
}
let ws = null;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
let selectedDesignData = null;
// Enhanced WebSocket connection with better error handling
function connectWebSocket() {
const wsUrl = 'ws://' + window.location.host;
ws = new WebSocket(wsUrl);
ws.onopen = function() {
console.log('WebSocket connected');
reconnectAttempts = 0;
updateConnectionStatus('connected', '🟢 Connected');
};
ws.onclose = function() {
console.log('WebSocket disconnected');
updateConnectionStatus('disconnected', '🔴 Disconnected');
if (reconnectAttempts < maxReconnectAttempts) {
reconnectAttempts++;
setTimeout(connectWebSocket, 2000);
updateConnectionStatus('connecting', '🟡 Reconnecting...');
}
};
ws.onerror = function(error) {
console.error('WebSocket error:', error);
updateConnectionStatus('disconnected', '❌ Connection Error');
};
ws.onmessage = function(event) {
try {
const data = JSON.parse(event.data);
console.log('WebSocket message:', data);
if (data.type === 'selection-confirmed') {
showSuccessAnimation();
setTimeout(() => window.close(), 2000);
} else if (data.type === 'finalized') {
window.close();
}
} catch (error) {
console.error('Error parsing WebSocket message:', error);
}
};
}
function updateConnectionStatus(status, text) {
const statusEl = document.getElementById('connectionStatus');
statusEl.className = 'connection-status ' + status;
statusEl.innerHTML = status === 'connecting'
? '<span class="loading-state"></span> ' + text
: text;
}
function showSuccessAnimation() {
const feedback = document.createElement('div');
feedback.className = 'success-animation';
feedback.innerHTML = '🎉 Selection Confirmed!';
feedback.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 30px 50px;
border-radius: 20px;
font-size: 24px;
font-weight: 700;
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4);
z-index: 4000;
animation: successPulse 2s ease-out;
`;
document.body.appendChild(feedback);
setTimeout(() => feedback.remove(), 2000);
}
function toggleCode(event, index) {
event.stopPropagation();
const codeView = document.getElementById('codeView' + index);
const isShowing = codeView.style.display === 'block';
codeView.style.display = isShowing ? 'none' : 'block';
event.target.textContent = isShowing ? 'View Code' : 'Hide Code';
}
function copyCode(event, encodedHtml) {
event.stopPropagation();
const html = safeDecode(encodedHtml);
navigator.clipboard.writeText(html).then(() => {
const originalText = event.target.textContent;
event.target.textContent = '✅ Copied!';
event.target.style.background = '#10b981';
setTimeout(() => {
event.target.textContent = originalText;
event.target.style.background = '';
}, 2000);
}).catch(err => {
console.error('Copy failed:', err);
alert('Copy failed. Please try selecting the code manually.');
});
}
function selectDesign(name, btnId, encodedHtml) {
console.log('Design selected:', name);
selectedDesignData = {
name: name,
html: safeDecode(encodedHtml),
timestamp: new Date().toISOString(),
frameworks: document.querySelector(`[data-design="${name}"]`).dataset.framework
};
// Update UI immediately
document.querySelectorAll('.design-container').forEach(container => {
container.classList.remove('selected');
});
document.querySelector(`[data-design="${name}"]`).classList.add('selected');
document.querySelectorAll('button[id^="btn"]').forEach(btn => btn.disabled = true);
document.getElementById(btnId).innerHTML = '✅ Selected';
document.getElementById(btnId).classList.add('selected');
// Send selection
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
type: 'selection',
selectedDesign: name,
frameworks: selectedDesignData.frameworks
}));
} else {
// Fallback HTTP POST
fetch('/design-selection-result', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
selectedDesign: name,
frameworks: selectedDesignData.frameworks
})
})
.then(response => response.json())
.then(() => {
showSuccessAnimation();
setTimeout(() => window.close(), 2000);
})
.catch(error => {
console.error('Selection error:', error);
alert('Error submitting selection. Please try again.');
// Re-enable UI
document.querySelectorAll('button[id^="btn"]').forEach(btn => {
btn.disabled = false;
btn.innerHTML = 'Select This Design';
btn.classList.remove('selected');
});
});
}
}
// Enhanced keyboard shortcuts
document.addEventListener('keydown', function(event) {
if (event.key >= '1' && event.key <= '3') {
const index = parseInt(event.key);
const btn = document.getElementById('btn' + index);
if (btn && !btn.disabled) {
btn.click();
}
} else if (event.key === 'Escape') {
closeZoom();
}
});
// Zoom functionality with framework preservation
document.querySelectorAll('.design-container').forEach(container => {
container.addEventListener('click', function(event) {
if (event.target.closest('button') || event.target.closest('.code-view')) {
return;
}
const zoomOverlay = document.getElementById('zoomOverlay');
const zoomContent = document.getElementById('zoomContentInner');
const designContent = container.querySelector('.design-content');
zoomContent.innerHTML = designContent.innerHTML;
zoomOverlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
});
function closeZoom() {
document.getElementById('zoomOverlay').style.display = 'none';
document.body.style.overflow = '';
}
// Inject extracted styles dynamically
function injectDynamicStyles() {
const styles = [
{ id: 'design-1-styles', css: "" },
{ id: 'design-2-styles', css: "" },
{ id: 'design-3-styles', css: "" }
];
styles.forEach(styleData => {
const styleEl = document.createElement('style');
styleEl.id = styleData.id;
styleEl.textContent = styleData.css;
document.head.appendChild(styleEl);
});
}
// Initialize
injectDynamicStyles();
connectWebSocket();
// Add success animation CSS
const successStyle = document.createElement('style');
successStyle.textContent = `
@keyframes successPulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
`;
document.head.appendChild(successStyle);
console.log('UI Component Selection initialized with frameworks:', '');
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/madebyaris/rakitui-ai'
If you have feedback or need assistance with the MCP directory API, please join our Discord server