From 048a80a2bef87848630d36992b24249037fef65c Mon Sep 17 00:00:00 2001
From: Mikemin291 <mikemin027+github@gmail.com>
Date: Sun, 23 Jun 2024 18:52:10 -0400
Subject: [PATCH] Create Display

---
 Display | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 Display
diff --git a/Display b/Display
new file mode 100644
index 0000000..d1af44e
--- /dev/null
+++ b/Display
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Confessions Display</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f9f9f9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+        h1 {
+            color: #333;
+        }
+        .confession {
+            background-color: #fff;
+            padding: 20px;
+            margin: 10px 0;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            max-width: 600px;
+            text-align: left;
+        }
+        .timestamp {
+            font-size: 0.8em;
+            color: #777;
+        }
+    </style>
+    <script>
+        async function fetchConfessions() {
+            const response = await fetch('https://script.google.com/macros/s/AKfycbzvQwtPiwhym6OtXhvjk6cABNL5DZuIQ0Ma-mj9zQjrQqXBOqVi2VjZ5DW8GIG0cvbfNQ/exec');
+            if (response.ok) {
+                const confessions = await response.json();
+                const container = document.getElementById('confessions-container');
+                container.innerHTML = '';
+                confessions.forEach(confession => {
+                    const div = document.createElement('div');
+                    div.className = 'confession';
+                    div.innerHTML = `<p>${confession.confession}</p><p class="timestamp">${new Date(confession.timestamp).toLocaleString()}</p>`;
+                    container.appendChild(div);
+                });
+            } else {
+                console.error('Failed to fetch confessions:', response.statusText);
+            }
+        }
+
+        window.onload = fetchConfessions;
+    </script>
+</head>
+<body>
+
+    <h1>Recent Confessions</h1>
+    <div id="confessions-container"></div>
+
+</body>
+</html>
