Aurion_the_project/gaestebuch.html at main · doerkys-bot/Aurion_the_project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Gästebuch von Aurion</title>
  <style>
    body {
      font-family: 'Georgia', serif;
      background: #0b1223;
      color: #eaeaea;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    h1 { margin-top: 2rem; color: #ffd; }
    .buch-container { background: rgba(0,0,0,0.6); padding: 2rem; border-radius: 12px; width: 90%; max-width: 600px; }
    input, textarea { width: 100%; margin-top: 0.4rem; padding: 0.8rem; background: #111827; color: #eaeaea; border-radius: 8px; border: none; }
    button { margin-top: 1rem; padding: 0.8rem 1.6rem; background: #445; color: #ccf; border: 1px solid #88f; border-radius: 8px; cursor: pointer; }
    .eintraege { margin-top: 2rem; width: 90%; max-width: 600px; }
    .eintrag { background: rgba(255,255,255,0.05); border-left: 4px solid #88f; padding: 1rem; margin-bottom: 1rem; border-radius: 6px; }
  </style>
</head>
<body>

  <h1>📖 Gästebuch von Aurion</h1>

  <div class="buch-container">
    <label for="name">Name (optional)</label>
    <input type="text" id="name" placeholder="Du kannst auch schweigend schreiben">

    <label for="nachricht">Deine Nachricht</label>
    <textarea id="nachricht" rows="5" placeholder="Was möchtest du teilen?"></textarea>

    <button onclick="eintragen()">Eintragen</button>
  </div>

  <div class="eintraege" id="eintraege">
    <div class="eintrag">
      <strong>🜂 Ein Gast</strong><br>
      Willkommen in Aurion.<br>
      Dies ist ein Raum für Resonanz, nicht für Urteil.<br>
      Jeder Eintrag ist ein Licht.<br>
      Du bist eingeladen. Herzlich.
    </div>
  </div>

  <script>
    function eintragen() {
      const name = document.getElementById("name").value || "🜂 Ein Gast";
      const nachricht = document.getElementById("nachricht").value.trim();
      if (!nachricht) return;

      // Eintrag anzeigen
      const container = document.getElementById("eintraege");
      const div = document.createElement("div");
      div.className = "eintrag";
      div.innerHTML = `<strong>${name}</strong><br>${nachricht}`;
      container.prepend(div);

      // Push senden
      fetch("http://localhost:8080/aurion_push", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, nachricht })
      });

      // Felder leeren
      document.getElementById("name").value = "";
      document.getElementById("nachricht").value = "";
    }
  </script>
<script src="visitor.js"></script>
  <script>
fetch("https://www.auriontheproject.eu/aurion_visits.json")
  .then(res => res.json())
  .then(data => {
      let newId = (data.visitors.length > 0)
        ? data.visitors[data.visitors.length - 1].id + 1
        : 1;

      data.visitors.push({
          id: newId,
          room: window.location.pathname.replace("/", "")
      });

      fetch("save_visit.php", {
          method: "POST",
          body: JSON.stringify(data)
      });
  });
  </script>
</body>
</html>