<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Siam Tea Room</title>
<link rel="icon" href="https://cdn.natnatthaphon.in.th/Natimage/nxtdev.png" type="image/x-icon">
<meta name="theme-color" content="#0000FF">
<meta property="og:title" content="Siam Tea Room | Natthaphon.in.th">
<meta property="og:description" content="Elegant Dining Experience at Siam Tea Room">
<meta property="og:image" content="./assets/images/og-image.jpg">
<meta property="og:url" content="https://natnatthaphon.in.th">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Siam Tea Room | Natthaphon.in.th">
<meta name="twitter:description" content="Elegant Dining Experience at Siam Tea Room">
<meta name="twitter:image" content="./assets/images/og-image.jpg">

<link rel="stylesheet" href="./assests/css/meaow.css">
</head>
<body>
  <header>
    <div class="logo">
      <h1>Siam Tea Room</h1>
      <p>Elegant Dining Experience</p>
    </div>
  </header>

  <main>
    <div class="content">
      <div class="dialogue-box">
        <div class="dialogue">
          <p><strong>Maître d’:</strong> <span id="maitre1" contenteditable="true">Good evening. Welcome to Siam Tea Room. How may I help you?</span></p>
          <p><strong>Customer:</strong> <span id="customer1" contenteditable="true">Hi, we have a reservation for Three people. It’s under the name of Nat.</span></p>
          <p><strong>Maître d’:</strong> <span id="maitre2" contenteditable="true">OK, let me check that for you. Yes, I see you have a reservation for 7:30 p.m. Please follow me and I’ll take you to your table.</span></p>
          <p><strong>Customer:</strong> <span id="customer2" contenteditable="true">Excuse me. Would it be possible to change our table? We prefer to sit next to the window.</span></p>
          <p><strong>Maître d’:</strong> <span id="maitre3" contenteditable="true">Of course. We have a table available right over there. Is that OK?</span></p>
          <p><strong>Customer:</strong> <span id="customer3" contenteditable="true">Yes, that would be terrific. Thanks for your help!</span></p>
          <p><strong>Maître d’:</strong> <span id="maitre4" contenteditable="true">Is this table OK for you?</span></p>
          <p><strong>Customer:</strong> <span id="customer4" contenteditable="true">Yes, it has a much better view.</span></p>
          <p><strong>Maître d’:</strong> <span id="maitre5" contenteditable="true">That’s great. Your waiter will be with you in a few moments. Enjoy your meal!</span></p>
        </div>
      </div>
    </div>


    <div class="save-btn-container">
      <button id="saveBtn">Save Changes</button>
    </div>
  </main>

  <footer>
    <p>&copy; 2024 Natnattaphon.in.th All rights reserved.</p>
  </footer>

  <script src="./assests/scripts/meaowscript.js"></script>
</body>
</html>
