`data/artifacts/248ea25bf69b/qwen3-14b.html`

85 lines
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kyoto Silk Celadon</title>
  <style>
    body {
      font-family: 'Georgia', serif;
      background: #f9f9f9;
      color: #333;
      margin: 0;
      padding: 0;
    }
    .hero {
      background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
      padding: 120px 20px;
      text-align: center;
    }
    .product-name {
      font-size: 3.5em;
      margin: 0;
      color: #2e7d32;
    }
    .price {
      font-size: 1.8em;
      color: #555;
      margin: 25px 0 40px;
    }
    .add-to-cart {
      padding: 18px 40px;
      font-size: 1.2em;
      background: #80cbc4;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.3s ease;
    }
    .add-to-cart:hover {
      background: #4db6ac;
    }
    .spec-table {
      width: 100%;
      max-width: 600px;
      margin: 60px auto 40px;
      border-collapse: collapse;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }
    .spec-table th, .spec-table td {
      padding: 20px;
      border: 1px solid #ddd;
      text-align: left;
    }
    .spec-table th {
      background-color: #f1f1f1;
      font-weight: 600;
    }
    @media (max-width: 600px) {
      .product-name {
        font-size: 2.5em;
      }
      .price {
        font-size: 1.4em;
      }
      .add-to-cart {
        padding: 15px 30px;
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1 class="product-name">Kyoto Silk</h1>
    <div class="price">$148/roll</div>
    <button class="add-to-cart" onclick="alert('Added to cart: Kyoto Silk Celadon')">Add to Cart</button>
  </div>
  <table class="spec-table">
    <tr><th>Material</th><td>Grasscloth</td></tr>
    <tr><th>Width</th><td>36in</td></tr>
    <tr><th>Repeat</th><td>Random</td></tr>
    <tr><th>Origin</th><td>Japan</td></tr>
  </table>
</body>
</html>