Endpoint Services

Tom Larkworthy

webcode.run

Korakot C.

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>稻禾屋日式丼飯菜單</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <style>
    body {
      font-family: 'Noto Sans TC', 'Inter', sans-serif;
      background-color: #f0f4f8;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }
    .container {
      max-width: 650px;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      padding: 2rem;
      width: 100%;
    }
    footer {
      margin-top: 3rem;
      font-size: 0.9rem;
      color: #777;
    }
    .hidden {
      display: none;
    }
    .tab-button.active {
      background-color: #3182ce;
      color: white;
    }
    .menu-item {
      border: 1px solid #ccc;
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1rem;
      cursor: pointer;
    }
    .menu-item-expanded-content {
      margin-top: 1rem;
    }
    .combo-details-content {
      background-color: #f0f8ff;
      padding: 0.75rem;
      border-radius: 0.5rem;
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1 class="text-2xl font-bold mb-2 text-center">歡迎光臨稻禾屋！</h1>
    <h2 class="text-xl font-semibold mb-4 text-center">日式丼飯菜單</h2>

    <div class="tabs-container flex gap-2 justify-center mb-4">
      <button class="tab-button active" onclick="showTab('mainDonburi')">主食丼飯</button>
      <button class="tab-button" onclick="showTab('sideDishes')">精選小菜</button>
      <button class="tab-button" onclick="showTab('drinks')">飲品</button>
    </div>

    <div id="mainDonburi" class="tab-content">
      <div class="menu-item" onclick="toggleMenuItem(this)">
        <div class="menu-item-header flex justify-between">
          <div class="menu-item-name font-semibold text-left">經典牛丼</div>
          <div class="menu-item-price text-red-500 font-bold">NT$180</div>
        </div>
        <div class="menu-item-expanded-content hidden">
          <img src="https://placehold.co/350x200/FFDDC1/804000?text=牛肉丼飯" alt="經典牛丼" class="w-full rounded mb-2" />
          <div class="menu-item-description-detail text-sm text-gray-700 mb-2">
            特選美國牛肉片150克、香Q白飯250克、洋蔥、青蔥。<br>
            醬汁甘甜，牛肉軟嫩，不辣。
          </div>
          <div class="combo-details-content hidden">
            搭配套餐：日式綠茶一杯 (+NT$35)
          </div>
        </div>
      </div>
    </div>

    
  </div>

  <footer id="pageFooter" class="text-center text-sm text-gray-500">
    
  </footer>

  <script>
    const footer = document.getElementById("pageFooter");
    if (footer) {
      footer.innerHTML = "© 2025 稻禾屋日式丼飯｜本頁由 Gemini + ChatGPT 協作製作";
    }

    function showTab(tabId) {
      document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
      document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
      document.getElementById(tabId).classList.remove('hidden');
      const matchingBtn = Array.from(document.querySelectorAll('.tab-button')).find(b => b.onclick.toString().includes(tabId));
      if (matchingBtn) matchingBtn.classList.add('active');
    }

    function toggleMenuItem(itemEl) {
      const content = itemEl.querySelector('.menu-item-expanded-content');
      content.classList.toggle('hidden');
    }
  </script>
</body>
</html>

Y2kvbn

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>나나의 첫 번째 웹사이트</title>
    <style>
        /* 간단한 디자인을 추가했어요 */
        body { font-family: sans-serif; text-align: center; padding-top: 50px; background-color: #f0f8ff; }
        h1 { color: #333; }
        p { color: #666; }
    </style>
</head>
<body>
    <h1>안녕하세요, 나나입니다! 🚀</h1>
    <p>저의 첫 번째 코딩 결과물이에요. 여기서부터 시작입니다!</p>
    <button onclick="alert('반가워요, 나나님!')">클릭해보세요</button>
</body>
</html>

Nana yu

image@9.png

image@8.png

image@4.png

image@5.png

image@6.png

image@7.png

image@2.png

insertcell.png

login.png

publish.png

addcomment.png

link.png

image@10.png

iframe_html.png

WEBcode.run

Quickstart