OpenGuestbook/example.html

<link rel="stylesheet" href="https://unpkg.com/98.css">

<style>
    html{
        /* background-color: #008080; */
        background-image: url(https://i.imgur.com/98qaCGo.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
.guestBookMessageContainer{
width:400px;
margin:auto;
}
</style>

<div class="guestBookMessageContainer" style="margin-bottom: 10px;">
<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">New message</div>
    <div class="title-bar-controls">
      <button aria-label="Help"></button>
    </div>
  </div>
  
  <div class="window-body">
    <form id="gb-form">
      <div style="margin-bottom: 10px;">
        <label for="gb-name" style="display:block; margin-bottom:5px;">Name:</label>
        <input type="text" id="gb-name" placeholder="name" required style="width: 100%; box-sizing: border-box;height:40px;">
      </div>
      
      <div style="margin-bottom: 10px;">
        <label for="gb-site" style="display:block; margin-bottom:5px;">Your Website (Optional):</label>
        <input type="text" id="gb-site" placeholder="your website url (optional)" style="width: 100%; box-sizing: border-box; height:40px;">
      </div>

      <div style="margin-bottom: 10px;">
        <label for="gb-msg" style="display:block; margin-bottom:5px;">Message:</label>
        <textarea id="gb-msg" placeholder="write something" required rows="4" style="width: 100%; box-sizing: border-box; resize: vertical;"></textarea>
      </div>
       <!-- <label for="daily-limit" style="display:block; margin-bottom:5px;">Daily limit:</label>
      <div id="daily-limit"class="progress-indicator segmented">
  <span class="progress-indicator-bar" style="width: 80%;" />
</div>  -->
      <div style="display: flex; justify-content: center;  margin-top: 10px; ">
      <button type="submit">Sign Guestbook</button>
      </div>
      <span id="gb-status"></span>
    </form>
  </div>
  </div> 
            <div style="text-align: center; margin-top: 10px; margin-bottom: 30px; font-family: sans-serif; font-size: 12px; opacity: 0.8;">
          Powered by <a href="https://code.gorkyver.com/Gorkem/OpenGuestbook" target="_blank">OpenGuestbook</a>
        </div>


<div id="comment-section">
  <div id="gb-entries">
    <p>Loading entries...</p>
  </div>
</div>
</div>



<script>
(function() {
   const API_URL = 'http://127.0.0.1:5001/comments';  
  const form = document.getElementById('gb-form');
  const list = document.getElementById('gb-entries');
  const status = document.getElementById('gb-status');


  async function loadComments() {
    try {
      const res = await fetch(API_URL);
      if (!res.ok) throw new Error("Could not fetch guesbook server");
      
      const data = await res.json();
      
      if (data.length === 0) {
        list.innerHTML = "<p>No entries yet. Be the first!</p>";
        return;
      }

      list.innerHTML = data.map(c => {
        let nameDisplay = c.name
        if (c.website) {
            nameDisplay = `${c.name} (<a href="${c.website}" target="_blank" style="">${c.website}</a>)`;
        }

        return `
          <div class="window" style="margin-bottom: 20px;">
            <div class="title-bar grey">
              <div class="title-bar-text">
                <span>${nameDisplay}</span>
              </div>
              <div style="margin-right:0px" class="title-bar-text">
                <span>${c.date}</span>
              </div>

            </div>
            <div class="window-body">
                ${c.message}
            </div>
          </div>
        `;
      }).join('');

    } catch (err) {
      console.error(err);
      list.innerHTML = "<p style='color: red;'>Error loading guestbook.</p>";
    }
  }

  form.onsubmit = async (e) => {
    e.preventDefault();
    const btn = form.querySelector('button');
    const nameInput = document.getElementById('gb-name');
    const msgInput = document.getElementById('gb-msg');
    const siteInput = document.getElementById('gb-site');

    if (btn.disabled) return;

    btn.disabled = true;
    btn.innerText = "Sending...";
    status.innerText = "";

    try {
      const res = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: nameInput.value,
          message: msgInput.value,
          website: siteInput.value
        })
      });

      const data = await res.json();

      if (!res.ok) {
        alert(data.error || "Error posting comment");
      } else {
        form.reset();
        loadComments();
      }
    } catch (err) {
      alert("Network error.");
    } finally {
      btn.disabled = false;
      btn.innerText = "Post Comment";
    }
  };

  loadComments();
})();
</script>