index.html

3.86 KB
30/10/2025 03:13
HTML
index.html
Preview Raw Download
<!doctype html>
<html lang="th">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>CMMS AI Mockups — Index</title>
  <style>
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial;
      line-height: 1.5;
      margin: 0;
      background: #f6f8fa;
      color: #111
    }

    header {
      background: #0b5fff;
      color: #fff;
      padding: 24px 20px
    }

    header h1 {
      margin: 0;
      font-size: 20px
    }

    .container {
      max-width: 980px;
      margin: 28px auto;
      padding: 0 16px
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px
    }

    .card {
      background: #fff;
      border: 1px solid #e6e9ee;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04)
    }

    .card h3 {
      margin: 0 0 8px 0;
      font-size: 16px
    }

    .card p {
      margin: 0 0 12px 0;
      color: #445
    }

    .card a {
      display: inline-block;
      background: #0b5fff;
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      text-decoration: none
    }

    footer {
      max-width: 980px;
      margin: 28px auto;
      padding: 12px 16px;
      color: #445
    }
  </style>
</head>

<body>
  <header>
    <h1>CMMS AI Mockups — ตัวอย่างจาก AI แต่ละตัว</h1>
  </header>

  <main class="container">
    <p>หน้านี้เป็นดัชนีสำหรับตัวอย่าง mockup ที่ AI ต่างๆ สร้างขึ้น (static HTML) — คลิกที่ลิงก์เพื่อเปิดผลลัพธ์ของแต่ละ AI ในโฟลเดอร์ย่อย</p>
    <div style="text-align: center;margin-bottom: 16px;">
      <img src="image.png" alt="CMMS screenshot" style="max-width:100%;border:1px solid #ccc;border-radius:8px;">
      <p>รูปภาพต้นฉบับ</p>
    </div>

    <div class="grid">
      <div class="card">
        <h3>GLM</h3>
        <p>โครง HTML พื้นฐานและ layout ที่ได้จาก GLM</p>
        <a href="./glm/">เปิดตัวอย่าง</a>
      </div>

      <div class="card">
        <h3>Gemini</h3>
        <p>ผลลัพธ์จาก Gemini — layout ชัดเจน เหมาะกับการปรับแต่งต่อ</p>
        <a href="./gemini/">เปิดตัวอย่าง</a>
      </div>

      <div class="card">
        <h3>Claude (converted)</h3>
        <p>Claude ให้ React ตอนแรก แต่ไฟล์นี้ถูกแปลงเป็น static HTML เพื่อให้เทียบกันได้</p>
        <a href="./claude/">เปิดตัวอย่าง</a>
      </div>

      <div class="card">
        <h3>minimax</h3>
        <p>ช้าที่สุดในการประมวลผล และมี bug เล็กน้อย แต่เป็น mockup ที่ใช้งานได้</p>
        <a href="./minimax/">เปิดตัวอย่าง</a>
      </div>

      <div class="card">
        <h3>Google AI Studio</h3>
        <p>มีการจินตนาการส่วนประกอบเพิ่มเติม (interaction mockups) แต่ไม่แม่นยำเสมอ</p>
        <a href="./google/">เปิดตัวอย่าง</a>
      </div>

      <div class="card">
        <h3>Manus</h3>
        <p>เข้าใจองค์ประกอบดี และมีแนวโน้มถาม follow-up เพื่อพัฒนาต่อ</p>
        <a href="./manus/">เปิดตัวอย่าง</a>
      </div>
    </div>

  </main>
</body>

</html>