JIT
Designing a jewelry shop website with a stylish layout
Log in
@muthu27072007
create a website for to show the jewels in the jewellery shop ,in the website we have a header in #333 colour and all the cirriculum about jewels in the sidebar and it shows description about each of the designs in the sidebar in the middle
DeepSeek V3
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jewelry Shop</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar main";
      grid-template-columns: 250px 1fr;
      grid-template-rows: 60px 1fr;
      height: 100vh;
    }
    
    header {
      grid-area: header;
      background-color: #333;
      color: white;
      padding: 0 20px;
      display: flex;
      align-items: center;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #f4f4f4;
      padding: 20px;
      overflow-y: auto;
    }
    
    .main {
      grid-area: main;
      padding: 20px;
      overflow-y: auto;
    }
    
    .jewel-item {
      margin-bottom: 15px;
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #ddd;
    }
    
    .jewel-item:hover {
      background-color: #e9e9e9;
    }
    
    .jewel-detail {
      display: none;
    }
    
    .jewel-detail.active {
      display: block;
    }
    
    .jewel-image {
      max-width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Luxury Jewelry Collection</h1>
  </header>
  
  <div class="sidebar">
    <div class="jewel-item" onclick="showDetail('ring')">Diamond Ring</div>
    <div class="jewel-item" onclick="showDetail('necklace')">Pearl Necklace</div>
    <div class="jewel-item" onclick="showDetail('bracelet')">Gold Bracelet</div>
    <div class="jewel-item" onclick="showDetail('earrings')">Sapphire Earrings</div>
    <div class="jewel-item" onclick="showDetail('watch')">Platinum Watch</div>
  </div>
  
  <div class="main">
    <div id="ring" class="jewel-detail active">
      <h2>Diamond Ring</h2>
      <img src="https://via.placeholder.com/400x300?text=Diamond+Ring" alt="Diamond Ring" class="jewel-image">
      <p>Our signature diamond ring features a 1.5 carat center stone with 0.5 carat accent diamonds. Handcrafted in 18k white gold with a classic solitaire setting that never goes out of style.</p>
      <p>Price: $5,999</p>
    </div>
    
    <div id="necklace" class="jewel-detail">
      <h2>Pearl Necklace</h2>
      <img src="https://via.placeholder.com/400x300?text=Pearl+Necklace" alt="Pearl Necklace" class="jewel-image">
      <p>Elegant 18-inch pearl necklace featuring 8mm cultured pearls with a sterling silver clasp. Each pearl is hand-selected for its perfect luster and round shape.</p>
      <p>Price: $1,299</p>
    </div>
    
    <div id="bracelet" class="jewel-detail">
      <h2>Gold Bracelet</h2>
      <img src="https://via.placeholder.com/400x300?text=Gold+Bracelet" alt="Gold Bracelet" class="jewel-image">
      <p>18k yellow gold bracelet with a delicate chain design. The bracelet is 7 inches long with a secure lobster clasp and can be adjusted for a perfect fit.</p>
      <p>Price: $2,499</p>
    </div>
    
    <div id="earrings" class="jewel-detail">
      <h2>Sapphire Earrings</h2>
      <img src="https://via.placeholder.com/400x300?text=Sapphire+Earrings" alt="Sapphire Earrings" class="jewel-image">
      <p>Exquisite blue sapphire earrings set in 14k white gold. Each earring features a 0.75 carat oval-cut sapphire surrounded by 0.25 carat diamonds.</p>
      <p>Price: $3,199</p>
    </div>
    
    <div id="watch" class="jewel-detail">
      <h2>Platinum Watch</h2>
      <img src="https://via.placeholder.com/400x300?text=Platinum+Watch" alt="Platinum Watch" class="jewel-image">
      <p>Luxury automatic watch with a platinum case and genuine alligator leather strap. Swiss-made movement with 48-hour power reserve and sapphire crystal face.</p>
      <p>Price: $8,999</p>
    </div>
  </div>
  
  <script>
    function showDetail(id) {
      // Hide all details
      document.querySelectorAll('.jewel-detail').forEach(item => {
        item.classList.remove('active');
      });
      
      // Show selected detail
      document.getElementById(id).classList.add('active');
    }
  </script>
</body>
</html>
@muthu27072007
please improve the sidebar from top to bottom
DeepSeek V3
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jewelry Shop</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar main";
      grid-template-columns: 280px 1fr;
      grid-template-rows: 80px 1fr;
      height: 100vh;
      color: #333;
    }
    
    header {
      grid-area: header;
      background-color: #333;
      color: white;
      padding: 0 30px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #f8f8f8;
      padding: 20px 0;
      overflow-y: auto;
      border-right: 1px solid #e0e0e0;
    }
    
    .sidebar-header {
      padding: 0 20px 15px;
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 15px;
    }
    
    .sidebar-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .sidebar-subtitle {
      font-size: 14px;
      color: #666;
      margin: 5px 0 0;
    }
    
    .jewel-category {
      padding: 0 20px;
      margin-bottom: 20px;
    }
    
    .category-title {
      font-size: 15px;
      font-weight: 500;
      color: #444;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .jewel-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-radius: 4px;
      margin: 2px 0;
      display: flex;
      align-items: center;
    }
    
    .jewel-item:hover {
      background-color: #e9e9e9;
    }
    
    .jewel-item.active {
      background-color: #e0e0e0;
      font-weight: 500;
    }
    
    .jewel-item .icon {
      margin-right: 10px;
      color: #666;
      font-size: 18px;
    }
    
    .main {
      grid-area: main;
      padding: 30px;
      overflow-y: auto;
      background-color: #fff;
    }
    
    .jewel-detail {
      display: none;
    }
    
    .jewel-detail.active {
      display: block;
    }
    
    .jewel-header {
      margin-bottom: 25px;
    }
    
    .jewel-title {
      font-size: 28px;
      margin: 0 0 10px;
      color: #222;
    }
    
    .jewel-subtitle {
      font-size: 16px;
      color: #666;
      margin: 0 0 20px;
    }
    
    .jewel-image {
      max-width: 100%;
      height: auto;
      margin-bottom: 25px;
      border-radius: 4px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    
    .jewel-description {
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .jewel-price {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }
    
    .jewel-meta {
      display: flex;
      margin-top: 20px;
      font-size: 14px;
      color: #666;
    }
    
    .jewel-meta span {
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Luxury Jewelry Collection</h1>
  </header>
  
  <div class="sidebar">
    <div class="sidebar-header">
      <h2 class="sidebar-title">Jewelry Categories</h2>
      <p class="sidebar-subtitle">Browse our premium collection</p>
    </div>
    
    <div class="jewel-category">
      <h3 class="category-title">Rings</h3>
      <div class="jewel-item active" onclick="showDetail('ring')">
        <span class="icon">💍</span>
        Diamond Ring
      </div>
      <div class="jewel-item" onclick="showDetail('eternity-ring')">
        <span class="icon">💎</span>
        Eternity Ring
      </div>
      <div class="jewel-item" onclick="showDetail('engagement-ring')">
        <span class="icon">💍</span>
        Engagement Ring
      </div>
    </div>
    
    <div class="jewel-category">
      <h3 class="category-title">Necklaces</h3>
      <div class="jewel-item" onclick="showDetail('necklace')">
        <span class="icon">📿</span>
        Pearl Necklace
      </div>
      <div class="jewel-item" onclick="showDetail('pendant')">
        <span class="icon">🔶</span>
        Diamond Pendant
      </div>
      <div class="jewel-item" onclick="showDetail('choker')">
        <span class="icon">🔶</span>
        Gold Choker
      </div>
    </div>
    
    <div class="jewel-category">
      <h3 class="category-title">Bracelets</h3>
      <div class="jewel-item" onclick="showDetail('bracelet')">
        <span class="icon">📿</span>
        Gold Bracelet
      </div>
      <div class="jewel-item" onclick="showDetail('bangle')">
        <span class="icon">🔶</span>
        Diamond Bangle
      </div>
    </div>
    
    <div class="jewel-category">
      <h3 class="category-title">Earrings</h3>
      <div class="jewel-item" onclick="showDetail('earrings')">
        <span class="icon">💎</span>
        Sapphire Earrings
      </div>
      <div class="jewel-item" onclick="showDetail('studs')">
        <span class="icon">🔶</span>
        Diamond Studs
      </div>
    </div>
    
    <div class="jewel-category">
      <h3 class="category-title">Watches</h3>
      <div class="jewel-item" onclick="showDetail('watch')">
        <span class="icon">⌚</span>
        Platinum Watch
      </div>
      <div class="jewel-item" onclick="showDetail('dress-watch')">
        <span class="icon">⌚</span>
        Diamond Dress Watch
      </div>
    </div>
  </div>
  
  <div class="main">
    <div id="ring" class="jewel-detail active">
      <div class="jewel-header">
        <h2 class="jewel-title">Diamond Ring</h2>
        <p class="jewel-subtitle">Classic solitaire setting with brilliant cut diamond</p>
      </div>
      <img src="https://via.placeholder.com/600x400?text=Diamond+Ring" alt="Diamond Ring" class="jewel-image">
      <div class="jewel-description">
        <p>Our signature diamond ring features a 1.5 carat center stone with 0.5 carat accent diamonds. Handcrafted in 18k white gold with a classic solitaire setting that never goes out of style. The center diamond is G color, VS2 clarity, with excellent cut, polish and symmetry.</p>
        <p>This timeless piece is perfect for engagements, anniversaries, or as a special gift. The ring comes with a certificate of authenticity and a lifetime warranty on craftsmanship.</p>
      </div>
      <div class="jewel-price">$5,999</div>
      <div class="jewel-meta">
        <span>Material: 18k White Gold</span>
        <span>Center Stone: 1.5ct Diamond</span>
        <span>Accent Stones: 0.5ct Diamonds</span>
      </div>
    </div>
    
    <div id="necklace" class="jewel-detail">
      <div class="jewel-header">
        <h2 class="jewel-title">Pearl Necklace</h2>
        <p class="jewel-subtitle">Elegant strand of cultured pearls</p>
      </div>
      <img src="https://via.placeholder.com/600x400?text=Pearl+Necklace" alt="Pearl Necklace" class="jewel-image">
      <div class="jewel-description">
        <p>This elegant 18-inch pearl necklace features 8mm cultured pearls with a sterling silver clasp. Each pearl is hand-selected for its perfect luster and round shape. The necklace has a classic design that complements both casual and formal attire.</p>
        <p>The pearls are sustainably sourced and come with a certificate of authenticity. The necklace can be adjusted to different lengths with the included extender chain.</p>
      </div>
      <div class="jewel-price">$1,299</div>
      <div class="jewel-meta">
        <span>Material: Cultured Pearls</span>
        <span>Length: 18 inches</span>
        <span>Clasp: Sterling Silver</span>
      </div>
    </div>
    
    <div id="bracelet" class="jewel-detail">
      <div class="jewel-header">
        <h2 class="jewel-title">Gold Bracelet</h2>
        <p class="jewel-subtitle">Handcrafted 18k gold chain bracelet</p>
      </div>
      <img src="https://via.placeholder.com/600x400?text=Gold+Bracelet" alt="Gold Bracelet" class="jewel-image">
      <div class="jewel-description">
        <p>This 18k yellow gold bracelet features a delicate chain design with a secure lobster clasp. The bracelet is 7 inches long with an additional 1-inch extender for adjustability. The links are handcrafted for durability and comfort.</p>
        <p>Perfect for everyday wear or special occasions, this bracelet makes an excellent gift. It comes with a polishing cloth and a certificate of authenticity.</p>
      </div>
      <div class="jewel-price">$2,499</div>
      <div class="jewel-meta">
        <span>Material: 18k Yellow Gold</span>
        <span>Length: 7 inches</span>
        <span>Clasp: Lobster Clasp</span>
      </div>
    </div>
    
    <div id="earrings" class="jewel-detail">
      <div class="jewel-header">
        <h2 class="jewel-title">Sapphire Earrings</h2>
        <p class="jewel-subtitle">Blue sapphire and diamond stud earrings</p>
      </div>
      <img src="https://via.placeholder.com/600x400?text=Sapphire+Earrings" alt="Sapphire Earrings" class="jewel-image">
      <div class="jewel-description">
        <p>These exquisite blue sapphire earrings are set in 14k white gold. Each earring features a 0.75 carat oval-cut sapphire surrounded by 0.25 carat diamonds. The sapphires are ethically sourced from Sri Lanka with excellent color saturation.</p>
        <p>The earrings come with secure screw-back posts for safety and comfort. They are perfect for adding a pop of color to any outfit, from casual to formal.</p>
      </div>
      <div class="jewel-price">$3,199</div>
      <div class="jewel-meta">
        <span>Material: 14k White Gold</span>
        <span>Center Stone: 0.75ct Sapphire</span>
        <span>Accent Stones: 0.25ct Diamonds</span>
      </div>
    </div>
    
    <div id="watch" class="jewel-detail">
      <div class="jewel-header">
        <h2 class="jewel-title">Platinum Watch</h2>
        <p class="jewel-subtitle">Luxury automatic watch with platinum case</p>
      </div>
      <img src="https://via.placeholder.com/600x400?text=Platinum+Watch" alt="Platinum Watch" class="jewel-image">
      <div class="jewel-description">
        <p>This luxury automatic watch features a platinum case and genuine alligator leather strap. The Swiss-made movement has a 48-hour power reserve and is visible through the sapphire crystal case back. The watch face features luminescent hands and markers for easy reading.</p>
        <p>With its classic design and superior craftsmanship, this watch is an heirloom piece that will last for generations. It comes with a 5-year warranty and complimentary servicing.</p>
      </div>
      <div class="jewel-price">$8,999</div>
      <div class="jewel-meta">
        <span>Material: Platinum</span>
        <span>Movement: Swiss Automatic</span>
        <span>Power Reserve: 48 hours</span>
      </div>
    </div>
    
    <!-- Additional jewel details for other items would go here -->
  </div>
  
  <script>
    function showDetail(id) {
      // Remove active class from all items
      document.querySelectorAll('.jewel-item').forEach(item => {
        item.classList.remove('active');
      });
      
      // Add active class to clicked item
      event.currentTarget.classList.add('active');
      
      // Hide all details
      document.querySelectorAll('.jewel-detail').forEach(detail => {
        detail.classList.remove('active');
      });
      
      // Show selected detail
      document.getElementById(id).classList.add('active');
    }
  </script>
</body>
</html>
Preview not available