From a41457e54f0f7a7acabd6ea9dff8ad3117348e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20P=C3=A9rez=20Arcas?=
 <pablo.perez.arcas@student.tuke.sk>
Date: Mon, 30 Mar 2026 08:24:02 +0000
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20z1/frontend/index.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 z1/frontend/index.html | 250 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 z1/frontend/index.html
diff --git a/z1/frontend/index.html b/z1/frontend/index.html
new file mode 100644
index 0000000..f74674d
--- /dev/null
+++ b/z1/frontend/index.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Notes App</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      background: linear-gradient(135deg, #eef2ff, #f8fafc);
+      color: #1f2937;
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 50px auto;
+      background: white;
+      padding: 30px;
+      border-radius: 18px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+    }
+
+    h1 {
+      margin-top: 0;
+      font-size: 42px;
+    }
+
+    p {
+      color: #4b5563;
+      margin-bottom: 25px;
+    }
+
+    .form {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 25px;
+    }
+
+    input {
+      flex: 1;
+      padding: 14px;
+      border: 1px solid #d1d5db;
+      border-radius: 10px;
+      font-size: 16px;
+    }
+
+    button {
+      padding: 14px 18px;
+      border: none;
+      border-radius: 10px;
+      background: #2563eb;
+      color: white;
+      font-size: 15px;
+      cursor: pointer;
+      transition: 0.2s;
+    }
+
+    button:hover {
+      background: #1d4ed8;
+    }
+
+    .status {
+      margin-bottom: 20px;
+      font-size: 14px;
+      color: #047857;
+      min-height: 20px;
+    }
+
+    h2 {
+      margin-top: 10px;
+      font-size: 32px;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 12px;
+      padding: 14px 16px;
+      margin-bottom: 12px;
+    }
+
+    .note-text {
+      word-break: break-word;
+      padding-right: 12px;
+    }
+
+    .note-id {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 4px;
+    }
+
+    .empty {
+      color: #6b7280;
+      background: #f9fafb;
+      border: 1px dashed #cbd5e1;
+      padding: 20px;
+      border-radius: 12px;
+      text-align: center;
+    }
+
+    .delete-btn {
+      background: #dc2626;
+      padding: 10px 14px;
+      font-size: 14px;
+    }
+
+    .delete-btn:hover {
+      background: #b91c1c;
+    }
+
+    .footer {
+      margin-top: 25px;
+      font-size: 13px;
+      color: #6b7280;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Notes App</h1>
+    <p>Simple Docker project with Nginx, Flask and PostgreSQL.</p>
+
+    <div class="form">
+      <input id="noteInput" type="text" placeholder="Write a note..." />
+      <button onclick="addNote()">Add Note</button>
+    </div>
+
+    <div class="status" id="statusMessage"></div>
+
+    <h2>Saved notes</h2>
+    <ul id="notesList"></ul>
+
+    <div class="footer">
+      Data is stored in PostgreSQL using a persistent Docker volume.
+    </div>
+  </div>
+
+  <script>
+    const API_URL = "/api";
+
+    function setStatus(message, isError = false) {
+      const status = document.getElementById("statusMessage");
+      status.textContent = message;
+      status.style.color = isError ? "#b91c1c" : "#047857";
+      setTimeout(() => {
+        status.textContent = "";
+      }, 2500);
+    }
+
+    async function loadNotes() {
+      const list = document.getElementById("notesList");
+
+      try {
+        const res = await fetch(`${API_URL}/notes`);
+        const notes = await res.json();
+
+        list.innerHTML = "";
+
+        if (!notes.length) {
+          list.innerHTML = `<div class="empty">No notes yet. Add your first one.</div>`;
+          return;
+        }
+
+        notes.forEach(note => {
+          const li = document.createElement("li");
+          li.innerHTML = `
+            <div>
+              <div class="note-text">${escapeHtml(note.content)}</div>
+              <div class="note-id">Note ID: ${note.id}</div>
+            </div>
+            <button class="delete-btn" onclick="deleteNote(${note.id})">Delete</button>
+          `;
+          list.appendChild(li);
+        });
+      } catch (error) {
+        list.innerHTML = `<div class="empty">Could not load notes.</div>`;
+      }
+    }
+
+    async function addNote() {
+      const input = document.getElementById("noteInput");
+      const content = input.value.trim();
+
+      if (!content) {
+        setStatus("Please write a note first.", true);
+        return;
+      }
+
+      try {
+        const res = await fetch(`${API_URL}/notes`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content })
+        });
+
+        if (!res.ok) {
+          throw new Error("Failed to save note");
+        }
+
+        input.value = "";
+        setStatus("Note saved successfully.");
+        loadNotes();
+      } catch (error) {
+        setStatus("Could not save the note.", true);
+      }
+    }
+
+    async function deleteNote(id) {
+      try {
+        const res = await fetch(`${API_URL}/notes/${id}`, {
+          method: "DELETE"
+        });
+
+        if (!res.ok) {
+          throw new Error("Failed to delete note");
+        }
+
+        setStatus("Note deleted successfully.");
+        loadNotes();
+      } catch (error) {
+        setStatus("Could not delete the note.", true);
+      }
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement("div");
+      div.innerText = text;
+      return div.innerHTML;
+    }
+
+    loadNotes();
+  </script>
+</body>
+</html>
\ No newline at end of file
