jafreli/Linktree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jafreli:7a7c4b70b272cf542935b4837ba1565c3b684958
Branches Tags
jafreli:main jafreli:jbin jafreli:message_board
...
compare: jafreli:main
Branches Tags
jafreli:jbin jafreli:main jafreli:message_board

18 Commits
7a7c4b70b2 ... main

Author SHA1 Message Date
jafreli
915d8493f4 Merge pull request 'char counter in mesage box' (#8) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 4s
Details 
Reviewed-on: #8
 2025-01-17 01:35:24 +00:00
jafreli
f4e06bc29a char counter in mesage box 2025-01-17 02:35:03 +01:00
jafreli
1efe5792d2 Merge pull request 'char counter in mesage box' (#7) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #7
 2025-01-17 01:32:56 +00:00
jafreli
a47d56b8c8 char counter in mesage box 2025-01-17 02:32:20 +01:00
jafreli
1647e6ab1b Merge pull request 'message_board' (#6) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #6
 2025-01-17 01:21:54 +00:00
jafreli
36787704d7 Merge branch 'message_board' of https://git.out.jafre.li/jafreli/Linktree into message_board 2025-01-17 02:19:24 +01:00
jafreli
5f51e4930d changed style 2025-01-17 02:18:58 +01:00
jafreli
f556fda1c8 Merge pull request 'changed style' (#5) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #5
 2025-01-17 01:14:28 +00:00
jafreli
4c3acfa2d0 Merge branch 'main' into message_board 2025-01-17 01:13:46 +00:00
jafreli
231c2160d6 changed style 2025-01-17 02:13:10 +01:00
jafreli
73354440c7 Merge pull request 'changed style' (#4) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #4
 2025-01-17 00:59:07 +00:00
jafreli
226deb4df3 changed style 2025-01-17 01:57:17 +01:00
jafreli
4a88a5c810 Merge pull request 'changed to extern CDN' (#3) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 4s
Details 
Reviewed-on: #3
 2025-01-17 00:52:59 +00:00
jafreli
cc8166b6b8 changed to extern CDN 2025-01-17 01:51:01 +01:00
jafreli
482bea6721 Merge pull request 'changed to module' (#2) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #2
 2025-01-17 00:49:15 +00:00
jafreli
755ecd6d4a changed to module 2025-01-17 01:46:55 +01:00
jafreli
095628939f Merge pull request 'add first message board' (#1) from message_board into main
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 5s
Details 
Reviewed-on: #1
 2025-01-17 00:38:27 +00:00
jafreli
8c38847610 add first message board 2025-01-17 01:31:56 +01:00
5 changed files with 148 additions and 1 deletions
Expand all files Collapse all files

1
.gitea/workflows/build-docker.yaml
View File

@@ -4,6 +4,7 @@ on:
push:
branches:
- main
- massage_board
jobs:
build-and-push:

2
view/index.html
View File

@@ -24,6 +24,8 @@
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg" alt="Gitea Logo" class="link-icon"> Gitea by jafreli
</a>
<br><br><br>
<a class="link" href="message-board.html">Message Board</a>
<br><br><br>
<!-- Links für Impressum und Datenschutzerklärung ohne Icons -->

28
view/message-board.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message Board</title>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="logos/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="logos/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="logos/favicon/favicon-16x16.png">
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
</head>
<body>
<div class="container">
<h1>Message Board</h1>
<form id="messageForm">
<input type="text" id="name" placeholder="Your Name" required>
<textarea id="message" placeholder="Your Message" maxlength="100" required></textarea>
<div id="charCount">0 / 100</div>
<button type="submit">Send</button>
</form>
<div id="messages">
<!-- Nachrichten werden hier dynamisch geladen -->
</div>
</div>
<script src="message-board.js"></script>
</body>
</html>

51
view/message-board.js Normal file
View File

@@ -0,0 +1,51 @@
const pb = new PocketBase('https://db.out.jafre.li');
const messageContainer = document.getElementById('messages');
const messageForm = document.getElementById('messageForm');
// Funktion, um die letzten 10 Nachrichten zu laden
async function loadMessages() {
const result = await pb.collection('message_board').getList(1, 8, {
sort: '-created', // Sortiert nach Erstellungsdatum absteigend
});
messageContainer.innerHTML = ''; // Löscht vorherige Inhalte
result.items.forEach((item) => {
const messageElement = document.createElement('div');
messageElement.className = 'message';
messageElement.innerHTML = `
<strong>${item.name}</strong>
<p>${item.message}</p>
<small>${new Date(item.created).toLocaleString()}</small>
`;
messageContainer.appendChild(messageElement);
});
}
// Event-Listener für das Formular
messageForm.addEventListener('submit', async (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
try {
await pb.collection('message_board').create({ name, message });
loadMessages(); // Aktualisiert die Nachrichtenanzeige
messageForm.reset(); // Löscht das Formular
} catch (error) {
console.error('Error creating message:', error);
}
});
// Nachrichten beim Laden der Seite anzeigen
loadMessages();
const messageInput = document.getElementById('message');
const charCount = document.getElementById('charCount');
// Event-Listener für Eingaben im Textfeld
messageInput.addEventListener('input', () => {
const currentLength = messageInput.value.length;
charCount.textContent = `${currentLength} / 100`;
});

67
view/styles.css
View File

@@ -19,7 +19,7 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center; /* Zentriert die Links im Container */
align-items: center; /* Zentriert die Inhalte im Container */
}
h1 {
@@ -50,3 +50,68 @@ h1 {
height: 20px; /* Höhe des Logos */
margin-right: 8px; /* Abstand zwischen Logo und Text */
}
.message {
background: #f9f9f9;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message strong {
font-size: 16px;
color: #007BFF;
}
.message p {
margin: 5px 0;
}
.message small {
color: #666;
font-size: 12px;
}
form {
display: flex;
flex-direction: column;
align-items: center; /* Zentriert die Form-Inhalte horizontal */
gap: 10px;
width: 100%; /* Maximale Breite der Form */
}
form input, form textarea {
width: 90%; /* Eingabefelder nehmen 90% der Breite ein */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Verhindert, dass Padding die Größe beeinflusst */
}
form textarea {
height: 100px; /* Größeres Textfeld */
resize: none; /* Deaktiviert Größenänderungen durch den Benutzer */
}
form button {
width: 50%; /* Sende-Knopf nimmt 50% der Form-Breite ein */
padding: 10px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
form button:hover {
background: #0056b3;
}
#charCount {
font-size: 12px;
color: #666;
text-align: right; /* Rechtsbündig unter dem Textfeld */
width: 90%;
}