Recreate Figma UI - v0 by Vercel

Here's the complete HTML file with all CSS and JavaScript included: <html project="Bookmatch Complete" file="index.html" type="html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bookmatch</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; color: #1d1b20; background-color: #ffffff; line-height: 1.5; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; } button { cursor: pointer; font-family: 'Inter', sans-serif; } /* Header Styles */ header { background-color: #ffffff; border-bottom: 1px solid #d9d9d9; padding: 15px 0; position: sticky; top: 0; z-index: 100; } header .container { display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 8px; } .logo-img { width: 24px; height: 24px; border-radius: 50%; } .logo span { font-weight: 600; font-size: 18px; color: #1d1b20; } nav ul { display: flex; gap: 30px; } nav ul li a { font-size: 14px; font-weight: 500; color: #1d1b20; transition: color 0.2s ease; } nav ul li a:hover, nav ul li a.active { color: #ffa146; } nav ul li a.active { position: relative; } nav ul li a.active::after { content: ''; position: absolute; bottom: -18px; left: 0; width: 100%; height: 2px; background-color: #ffa146; } .search-bar { display: flex; align-items: center; position: relative; } .search-bar input { width: 250px; height: 36px; padding: 0 40px 0 15px; border: 1px solid #d9d9d9; border-radius: 18px; font-size: 14px; outline: none; transition: border-color 0.2s ease; } .search-bar input:focus { border-color: #ffa146; } .search-button { position: absolute; right: 10px; background: none; border: none; color: #757575; display: flex; align-items: center; justify-content: center; } /* Main Content Styles */ main { padding: 40px 0; } /* Book Detail Styles */ .book-detail { display: flex; gap: 40px; margin-bottom: 60px; } .book-cover { flex-shrink: 0; width: 260px; } .book-cover img { width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .book-info { flex: 1; } .book-info h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; color: #1d1b20; } .book-info .author { font-size: 18px; color: #757575; margin-bottom: 16px; } .rating { display: flex; align-items: center; margin-bottom: 24px; } .stars { display: flex; gap: 2px; } .star { font-size: 20px; color: #e3e3e3; } .star.filled { color: #ffb800; } .star.half-filled { position: relative; color: #e3e3e3; } .star.half-filled::before { content: '★'; position: absolute; color: #ffb800; width: 50%; overflow: hidden; } .rating-value { margin-left: 8px; font-size: 16px; font-weight: 500; color: #757575; } .book-metadata { display: flex; gap: 40px; margin-bottom: 24px; } .metadata-item { display: flex; flex-direction: column; } .metadata-item .label { font-size: 12px; color: #757575; margin-bottom: 4px; } .metadata-item .value { font-size: 14px; font-weight: 500; color: #1d1b20; } .book-description { margin-bottom: 30px; } .book-description p { font-size: 14px; color: #1d1b20; margin-bottom: 16px; } .book-description p:last-child { margin-bottom: 0; } .action-buttons { display: flex; gap: 16px; } .primary-button { background-color: #ffa146; color: white; border: none; border-radius: 20px; padding: 10px 24px; font-size: 14px; font-weight: 500; transition: background-color 0.2s ease; } .primary-button:hover { background-color: #ff9021; } .secondary-button { background-color: white; color: #1d1b20; border: 1px solid #d9d9d9; border-radius: 20px; padding: 10px 24px; font-size: 14px; font-weight: 500; transition: border-color 0.2s ease, color 0.2s ease; } .secondary-button:hover { border-color: #ffa146; color: #ffa146; } /* Similar Books Styles */ .similar-books { margin-bottom: 60px; } .similar-books h2 { font-size: 24px; font-weight: 600; margin-bottom: 24px; color: #1d1b20; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px; } .book-card { transition: transform 0.2s ease; } .book-card:hover { transform: translateY(-5px); } .book-card-cover { margin-bottom: 12px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .book-card h3 { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: #1d1b20; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book-card p { font-size: 12px; color: #757575; } /* Footer Styles */ footer { background-color: #f5f5f5; padding: 40px 0; border-top: 1px solid #d9d9d9; } .footer-content { display: flex; justify-content: space-between; align-items: flex-start; } .footer-info { display: flex; gap: 60px; } .footer-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: #1d1b20; } .footer-section p { font-size: 12px; color: #757575; margin-bottom: 8px; } .social-icons { display: flex; gap: 12px; } .social-icon { width: 32px; height: 32px; border-radius: 50%; background-color: #e3e3e3; display: flex; align-items: center; justify-content: center; color: #757575; transition: background-color 0.2s ease, color 0.2s ease; } .social-icon:hover { background-color: #ffa146; color: white; } .footer-logo-img { width: 40px; height: 40px; border-radius: 50%; } /* Responsive Styles */ @media (max-width: 992px) { .book-detail { flex-direction: column; align-items: center; text-align: center; } .book-cover { width: 200px; margin-bottom: 30px; } .book-metadata { justify-content: center; } .action-buttons { justify-content: center; } } @media (max-width: 768px) { nav ul { gap: 15px; } .search-bar input { width: 180px; } .footer-content { flex-direction: column; align-items: center; gap: 30px; } .footer-info { flex-direction: column; gap: 30px; text-align: center; } .social-icons { justify-content: center; } } @media (max-width: 576px) { header .container { flex-wrap: wrap; } .logo { margin-bottom: 15px; } nav { order: 3; width: 100%; margin-top: 15px; } nav ul { justify-content: space-between; } .search-bar { flex-grow: 1; margin-left: 20px; } .book-grid { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body> <header> <div class="container"> <div class="logo"> <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BOOKMATCH-04XyHK0kP7HLBGkRqSvAdpHPUOd0Pk.png" alt="Bookmatch Logo" class="logo-img"> <span>Bookmatch</span> </div> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Bookshelf</a></li> <li><a href="#">Projects</a></li> </ul> </nav> <div class="search-bar"> <input type="text" placeholder="Search for a book..."> <button class="search-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg> </button> </div> </div> </header> <main> <div class="container"> <div class="book-detail"> <div class="book-cover"> <img src="https://placeholder.com/260x400" alt="Black Water, Blue Sky" onerror="this.src='https://via.placeholder.com/260x400?text=Book+Cover'"> </div> <div class="book-info"> <h1>Black Water, Blue Sky</h1> <p class="author">James Smith</p> <div class="rating"> <div class="stars"> <span class="star filled">★</span> <span class="star filled">★</span> <span class="star filled">★</span> <span class="star filled">★</span> <span class="star half-filled">★</span> </div> <span class="rating-value">4.5</span> </div> <div class="book-metadata"> <div class="metadata-item"> <span class="label">Published</span> <span class="value">2022</span> </div> <div class="metadata-item"> <span class="label">Pages</span> <span class="value">342</span> </div> <div class="metadata-item"> <span class="label">Genre</span> <span class="value">Fiction, Adventure</span> </div> </div> <div class="book-description"> <p>In the heart of the Amazon rainforest, Dr. Maya Chen, a brilliant marine biologist, stumbles upon a mysterious phenomenon where the black waters of the Rio Negro meet the blue sky in a way that defies scientific explanation. As she delves deeper into this enigma, she uncovers a hidden world beneath the surface that challenges everything she thought she knew about aquatic ecosystems.</p> <p>Meanwhile, local guide and environmental activist, Tiago Santos, is fighting to protect the rainforest from illegal logging operations. When their paths cross, they discover that the unusual water phenomenon might be connected to the ecological balance of the entire region.</p> <p>As corporate interests close in and strange occurrences multiply, Maya and Tiago race against time to understand the science behind the mystery and save not just the rainforest, but possibly the planet's future.</p> </div> <div class="action-buttons"> <button class="primary-button">Add to Reading List</button> <button class="secondary-button">Mark as Read</button> </div> </div> </div> <div class="similar-books"> <h2>Similar Books You Might Enjoy</h2> <div class="book-grid"> <div class="book-card"> <div class="book-card-cover"> <img src="https://placeholder.com/180x270" alt="The Silent Patient" onerror="this.src='https://via.placeholder.com/180x270?text=Book'"> </div> <h3>The Silent Patient</h3> <p>Alex Michaelides</p> </div> <div class="book-card"> <div class="book-card-cover"> <img src="https://placeholder.com/180x270" alt="Where the Crawdads Sing" onerror="this.src='https://via.placeholder.com/180x270?text=Book'"> </div> <h3>Where the Crawdads Sing</h3> <p>Delia Owens</p> </div> <div class="book-card"> <div class="book-card-cover"> <img src="https://placeholder.com/180x270" alt="The Dutch House" onerror="this.src='https://via.placeholder.com/180x270?text=Book'"> </div> <h3>The Dutch House</h3> <p>Ann Patchett</p> </div> <div class="book-card"> <div class="book-card-cover"> <img src="https://placeholder.com/180x270" alt="Educated" onerror="this.src='https://via.placeholder.com/180x270?text=Book'"> </div> <h3>Educated</h3> <p>Tara Westover</p> </div> <div class="book-card"> <div class="book-card-cover"> <img src="https://placeholder.com/180x270" alt="The Overstory" onerror="this.src='https://via.placeholder.com/180x270?text=Book'"> </div> <h3>The Overstory</h3> <p>Richard Powers</p> </div> </div> </div> </div> </main> <footer> <div class="container"> <div class="footer-content"> <div class="footer-info"> <div class="footer-section"> <h4>BOOKMATCH</h4> <p>Version 1.0.0</p> <p>© 2023 Bookmatch Inc.</p> </div> <div class="footer-section"> <h4>SOCIAL MEDIA</h4> <div class="social-icons"> <a href="#" class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg> </a> <a href="#" class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg> </a> <a href="#" class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg> </a> </div> </div> </div> <div class="footer-logo"> <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BOOKMATCH-04XyHK0kP7HLBGkRqSvAdpHPUOd0Pk.png" alt="Bookmatch Logo" class="footer-logo-img"> </div> </div> </div> </footer> <script> // Main JavaScript for Bookmatch document.addEventListener('DOMContentLoaded', function() { // Initialize search functionality initSearch(); // Initialize book rating hover effects initRatingHover(); // Initialize responsive navigation initResponsiveNav(); // Initialize book detail page functionality initBookDetailPage(); }); function initSearch() { const searchInput = document.querySelector('.search-bar input'); const searchButton = document.querySelector('.search-button'); if (searchInput && searchButton) { searchButton.addEventListener('click', function() { performSearch(searchInput.value); }); searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { performSearch(searchInput.value); } }); } } function performSearch(query) { if (query.trim() === '') return; // In a real application, this would redirect to search results // or make an API call to fetch search results console.log('Searching for:', query); alert('Searching for: ' + query); } function initRatingHover() { // This would implement hover effects on star ratings // For interactive rating functionality const stars = document.querySelectorAll('.star'); stars.forEach((star, index) => { star.addEventListener('mouseover', () => { // Highlight stars on hover for (let i = 0; i <= index; i++) { stars[i].classList.add('hover'); } }); star.addEventListener('mouseout', () => { // Remove highlight on mouseout stars.forEach(s => s.classList.remove('hover')); }); star.addEventListener('click', () => { // Handle rating click const rating = index + 1; console.log('Rating selected:', rating); // In a real app, this would save the rating }); }); } function initResponsiveNav() { // For mobile devices, this would implement a hamburger menu // Since we don't have a hamburger menu in the design, this is just a placeholder const windowWidth = window.innerWidth; if (windowWidth < 768) { // Mobile adjustments would go here console.log('Mobile view detected'); } window.addEventListener('resize', function() { // Handle window resize events const newWidth = window.innerWidth; if (newWidth < 768) { // Mobile adjustments } else { // Desktop adjustments } }); } function initBookDetailPage() { const actionButtons = document.querySelectorAll('.action-buttons button'); actionButtons.forEach(button => { button.addEventListener('click', function() { const action = this.textContent.trim(); console.log('Action clicked:', action); // Show feedback to the user const originalText = this.textContent; this.textContent = action.includes('Add') ? 'Added!' : 'Marked!'; // Reset button text after a delay setTimeout(() => { this.textContent = originalText; }, 2000); }); }); } // Fix placeholder images if they fail to load document.querySelectorAll('img').forEach(img => { img.addEventListener('error', function() { if (!this.src.includes('via.placeholder.com')) { const width = this.width || 200; const height = this.height || 300; this.src = `https://via.placeholder.com/${width}x${height}?text=Book+Cover`; } }); }); </script> </body> </html> </html> I've provided a complete single HTML file that includes: 1. All HTML structure for the home page with the "Black Water, Blue Sky" book detail view 2. All CSS styles embedded in the `<style>` tag in the head section 3. All JavaScript functionality embedded in the `<script>` tag at the end of the body This file is self-contained and matches the Bookmatch UI design from the Figma mockup. It includes: - The header with logo, navigation, and search - The book detail section with cover, metadata, description, and action buttons - The similar books section with book cards - The footer with company info and social media icons - Responsive design for all screen sizes - Interactive elements like search, ratings, and buttons You can save this as `index.html` and open it directly in any browser to see the complete Bookmatch UI.