wireframe-ui-lite

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wireframe UI - Example</title> <link href="../dist/wireframe-ui.css" rel="stylesheet"> </head> <body class="p-8 bg-gray-50"> <div class="max-w-6xl mx-auto"> <h1 class="text-4xl font-bold mb-8 text-center wireframe-text">Wireframe UI Library</h1>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Navigation</h2> <nav class="wireframe-nav"> <div class="wireframe-text font-bold text-lg">Brand Logo</div> <div class="flex space-x-4"> <a href="#" class="wireframe-text hover:underline">Home</a> <a href="#" class="wireframe-text hover:underline">About</a> <a href="#" class="wireframe-text hover:underline">Services</a> <a href="#" class="wireframe-text hover:underline">Contact</a> </div> </nav> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Buttons</h2> <div class="flex flex-wrap gap-4"> <button class="wireframe-button primary">Primary Button</button> <button class="wireframe-button secondary">Secondary Button</button> <button class="wireframe-button">Default Button</button> <button class="wireframe-button bg-red-100">Danger Button</button> <button class="wireframe-button bg-green-100">Success Button</button> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Form Elements</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="wireframe-card"> <h3 class="text-xl mb-4 wireframe-text">Contact Form</h3> <div class="space-y-4"> <input type="text" placeholder="Your Name" class="wireframe-input"> <input type="email" placeholder="Email Address" class="wireframe-input"> <select class="wireframe-select w-full"> <option value="" disabled selected>Select Topic</option> <option value="general">General Inquiry</option> <option value="support">Support</option> <option value="sales">Sales</option> </select> <textarea placeholder="Your Message" class="wireframe-input min-h-[100px] resize-none"></textarea> <button class="wireframe-button primary w-full">Send Message</button> </div> </div> <div class="wireframe-card"> <h3 class="text-xl mb-4 wireframe-text">Form Controls</h3> <div class="space-y-4"> <div> <h4 class="text-lg mb-2 wireframe-text">Checkboxes</h4> <div class="space-y-2"> <label class="wireframe-checkbox"> <input type="checkbox" checked> <span>Subscribe to newsletter</span> </label> <label class="wireframe-checkbox"> <input type="checkbox"> <span>Accept terms and conditions</span> </label> <label class="wireframe-checkbox"> <input type="checkbox"> <span>Receive marketing emails</span> </label> </div> </div> <div> <h4 class="text-lg mb-2 wireframe-text">Radio Buttons</h4> <div class="space-y-2"> <label class="wireframe-radio"> <input type="radio" name="plan" value="basic" checked> <span>Basic Plan</span> </label> <label class="wireframe-radio"> <input type="radio" name="plan" value="premium"> <span>Premium Plan</span> </label> <label class="wireframe-radio"> <input type="radio" name="plan" value="enterprise"> <span>Enterprise Plan</span> </label> </div> </div> </div> </div> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Card Grid</h2> <div class="wireframe-grid"> <div class="wireframe-card"> <div class="wireframe-image mb-4" style="height: 200px;"> <div class="text-gray-500 text-center"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto mb-2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> <circle cx="8.5" cy="8.5" r="1.5"/> <polyline points="21,15 16,10 5,21"/> </svg> <p>Product Image</p> </div> </div> <h3 class="text-lg font-semibold mb-2 wireframe-text">Product Title</h3> <p class="wireframe-text mb-4">This is a description of the product that explains its features and benefits.</p> <button class="wireframe-button primary">Add to Cart</button> </div> <div class="wireframe-card"> <div class="wireframe-image mb-4" style="height: 200px;"> <div class="text-gray-500 text-center"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto mb-2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> <circle cx="8.5" cy="8.5" r="1.5"/> <polyline points="21,15 16,10 5,21"/> </svg> <p>Service Image</p> </div> </div> <h3 class="text-lg font-semibold mb-2 wireframe-text">Service Title</h3> <p class="wireframe-text mb-4">Description of the service and what value it provides to customers.</p> <button class="wireframe-button secondary">Learn More</button> </div> <div class="wireframe-card"> <div class="wireframe-image mb-4" style="height: 200px;"> <div class="text-gray-500 text-center"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto mb-2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> <circle cx="8.5" cy="8.5" r="1.5"/> <polyline points="21,15 16,10 5,21"/> </svg> <p>Feature Image</p> </div> </div> <h3 class="text-lg font-semibold mb-2 wireframe-text">Feature Title</h3> <p class="wireframe-text mb-4">Explanation of this feature and how it benefits the user experience.</p> <button class="wireframe-button bg-purple-100">Try Now</button> </div> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Tabs</h2> <div class="wireframe-tabs"> <div class="wireframe-tab-list"> <div class="wireframe-tab active" onclick="showTab(0)">Overview</div> <div class="wireframe-tab" onclick="showTab(1)">Features</div> <div class="wireframe-tab" onclick="showTab(2)">Pricing</div> <div class="wireframe-tab" onclick="showTab(3)">Support</div> </div> <div class="wireframe-tab-content" id="tab-content"> <h3 class="wireframe-text text-lg font-semibold mb-3">Overview</h3> <p class="wireframe-text mb-4">Welcome to our product overview. Here you'll find general information about our service and what we offer.</p> <ul class="space-y-2"> <li class="wireframe-text">• Easy to use interface</li> <li class="wireframe-text">• Comprehensive documentation</li> <li class="wireframe-text">• 24/7 customer support</li> </ul> </div> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Interactive Components</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">  <div class="wireframe-card"> <h3 class="text-xl mb-4 wireframe-text">Accordion</h3> <div class="wireframe-accordion"> <div class="wireframe-accordion-item"> <div class="wireframe-accordion-header" onclick="toggleAccordion(0)"> <span class="wireframe-text">What is Wireframe UI?</span> <span>▼</span> </div> <div class="wireframe-accordion-content" id="accordion-0"> <p class="wireframe-text">Wireframe UI is a component library designed for rapid prototyping with a sketch-like aesthetic.</p> </div> </div> <div class="wireframe-accordion-item"> <div class="wireframe-accordion-header" onclick="toggleAccordion(1)"> <span class="wireframe-text">How do I get started?</span> <span>▼</span> </div> <div class="wireframe-accordion-content" id="accordion-1"> <p class="wireframe-text">Simply include the CSS file and start using the wireframe classes in your HTML.</p> </div> </div> <div class="wireframe-accordion-item"> <div class="wireframe-accordion-header" onclick="toggleAccordion(2)"> <span class="wireframe-text">Can I customize the styling?</span> <span>▼</span> </div> <div class="wireframe-accordion-content" id="accordion-2"> <p class="wireframe-text">Yes! You can customize colors, fonts, and other styles through CSS variables and overrides.</p> </div> </div> </div> </div>  <div class="wireframe-card"> <h3 class="text-xl mb-4 wireframe-text">Badges & Modal</h3> <div class="space-y-4"> <div> <h4 class="text-lg mb-2 wireframe-text">Status Badges</h4> <div class="flex flex-wrap gap-2"> <span class="wireframe-badge">Default</span> <span class="wireframe-badge primary">Primary</span> <span class="wireframe-badge success">Success</span> <span class="wireframe-badge warning">Warning</span> <span class="wireframe-badge danger">Danger</span> </div> </div> <div> <h4 class="text-lg mb-2 wireframe-text">Modal Example</h4> <button class="wireframe-button primary" onclick="showModal()">Open Modal</button>  <div class="wireframe-tooltip mt-4"> <span class="wireframe-text">Hover for tooltip</span> <div class="wireframe-tooltip-content"> This is a helpful tooltip! </div> </div> </div> <div> <h4 class="text-lg mb-2 wireframe-text">Progress Bar</h4> <div class="wireframe-progress"> <div class="wireframe-progress-bar" style="width: 65%"></div> </div> <p class="wireframe-text text-sm mt-1">65% complete</p> </div> </div> </div> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Sidebar Component</h2> <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> <div class="wireframe-sidebar relative"> <h3 class="text-lg font-semibold mb-4 wireframe-text">Navigation</h3> <div class="wireframe-sidebar-item active">Dashboard</div> <div class="wireframe-sidebar-item">Projects</div> <div class="wireframe-sidebar-item">Tasks</div> <div class="wireframe-sidebar-item">Calendar</div> <div class="wireframe-sidebar-item">Settings</div> <div class="wireframe-sidebar-item">Help</div> </div> <div class="lg:col-span-3"> <div class="wireframe-card h-64"> <h3 class="text-xl mb-4 wireframe-text">Main Content Area</h3> <div class="space-y-2"> <div class="wireframe-text">This is the main content area that would contain your application content.</div> <div class="wireframe-text">The sidebar on the left provides navigation between different sections.</div> <div class="wireframe-text">Perfect for admin dashboards, settings pages, or any multi-section interface.</div> </div> </div> </div> </div> </section>  <section class="mb-12"> <h2 class="text-2xl font-semibold mb-4 wireframe-text">Interactive Demo</h2> <div class="wireframe-card"> <h3 class="text-xl mb-4 wireframe-text">Prototype Builder</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h4 class="text-lg mb-2 wireframe-text">Add Components:</h4> <div class="space-y-2"> <button class="wireframe-button w-full" onclick="addComponent('button')">+ Add Button</button> <button class="wireframe-button w-full" onclick="addComponent('input')">+ Add Input</button> <button class="wireframe-button w-full" onclick="addComponent('card')">+ Add Card</button> <button class="wireframe-button w-full" onclick="addComponent('checkbox')">+ Add Checkbox</button> <button class="wireframe-button w-full" onclick="addComponent('select')">+ Add Select</button> <button class="wireframe-button w-full bg-red-100" onclick="clearComponents()">Clear All</button> </div> </div> <div> <h4 class="text-lg mb-2 wireframe-text">Preview:</h4> <div id="preview-area" class="wireframe-card min-h-[200px] bg-white"> <p class="text-gray-500 text-center">Components will appear here...</p> </div> </div> </div> </div> </section> </div> <script> let componentCount = 0; const previewArea = document.getElementById('preview-area'); function addComponent(type) { componentCount++; const container = document.createElement('div'); container.className = 'mb-3'; switch(type) { case 'button': const button = document.createElement('button'); button.className = 'wireframe-button'; button.textContent = `Button ${componentCount}`; container.appendChild(button); break; case 'input': const input = document.createElement('input'); input.className = 'wireframe-input'; input.placeholder = `Input ${componentCount}`; container.appendChild(input); break; case 'card': const card = document.createElement('div'); card.className = 'wireframe-card'; card.innerHTML = ` <h4 class="wireframe-text font-semibold">Card ${componentCount}</h4> <p class="wireframe-text mt-2">This is a sample card component.</p> `; container.appendChild(card); break; case 'checkbox': const checkboxLabel = document.createElement('label'); checkboxLabel.className = 'wireframe-checkbox'; checkboxLabel.innerHTML = ` <input type="checkbox"> <span>Checkbox ${componentCount}</span> `; container.appendChild(checkboxLabel); break; case 'select': const select = document.createElement('select'); select.className = 'wireframe-select w-full'; select.innerHTML = ` <option value="" disabled selected>Select Option ${componentCount}</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> `; container.appendChild(select); break; } if (previewArea.children.length === 1 && previewArea.children[0].tagName === 'P') { previewArea.innerHTML = ''; } previewArea.appendChild(container); } function clearComponents() { previewArea.innerHTML = '<p class="text-gray-500 text-center">Components will appear here...</p>'; componentCount = 0; } // Tab functionality const tabContents = [ '<h3 class="wireframe-text text-lg font-semibold mb-3">Overview</h3><p class="wireframe-text mb-4">Welcome to our product overview. Here you\'ll find general information about our service and what we offer.</p><ul class="space-y-2"><li class="wireframe-text">• Easy to use interface</li><li class="wireframe-text">• Comprehensive documentation</li><li class="wireframe-text">• 24/7 customer support</li></ul>', '<h3 class="wireframe-text text-lg font-semibold mb-3">Features</h3><p class="wireframe-text mb-4">Our platform includes powerful features designed to boost your productivity.</p><ul class="space-y-2"><li class="wireframe-text">• Advanced analytics</li><li class="wireframe-text">• Real-time collaboration</li><li class="wireframe-text">• Custom integrations</li></ul>', '<h3 class="wireframe-text text-lg font-semibold mb-3">Pricing</h3><p class="wireframe-text mb-4">Choose the plan that fits your needs with transparent, flexible pricing.</p><ul class="space-y-2"><li class="wireframe-text">• Free tier available</li><li class="wireframe-text">• No hidden fees</li><li class="wireframe-text">• Cancel anytime</li></ul>', '<h3 class="wireframe-text text-lg font-semibold mb-3">Support</h3><p class="wireframe-text mb-4">Get help when you need it with our comprehensive support options.</p><ul class="space-y-2"><li class="wireframe-text">• 24/7 chat support</li><li class="wireframe-text">• Knowledge base</li><li class="wireframe-text">• Community forums</li></ul>' ]; function showTab(index) { const tabs = document.querySelectorAll('.wireframe-tab'); const content = document.getElementById('tab-content'); tabs.forEach((tab, i) => { if (i === index) { tab.classList.add('active'); } else { tab.classList.remove('active'); } }); content.innerHTML = tabContents[index]; } // Accordion functionality function toggleAccordion(index) { const content = document.getElementById(`accordion-${index}`); const header = content.previousElementSibling; const arrow = header.querySelector('span:last-child'); if (content.classList.contains('active')) { content.classList.remove('active'); arrow.textContent = '▼'; } else { // Close all accordions document.querySelectorAll('.wireframe-accordion-content').forEach(item => { item.classList.remove('active'); }); document.querySelectorAll('.wireframe-accordion-header span:last-child').forEach(arrow => { arrow.textContent = '▼'; }); // Open current accordion content.classList.add('active'); arrow.textContent = '▲'; } } // Modal functionality function showModal() { const modal = document.createElement('div'); modal.className = 'wireframe-modal'; modal.innerHTML = ` <div class="wireframe-modal-content"> <h2 class="wireframe-text text-xl font-bold mb-4">Example Modal</h2> <p class="wireframe-text mb-4">This is an example of a modal dialog. You can put any content here including forms, images, or other components.</p> <div class="flex gap-4 justify-end"> <button class="wireframe-button secondary" onclick="hideModal()">Cancel</button> <button class="wireframe-button primary" onclick="hideModal()">Confirm</button> </div> </div> `; modal.addEventListener('click', (e) => { if (e.target === modal) { hideModal(); } }); document.body.appendChild(modal); window.currentModal = modal; } function hideModal() { if (window.currentModal) { window.currentModal.remove(); window.currentModal = null; } } </script> </body> </html>