admin/marcel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update link.php

Browse Source 
neu versaion
This commit is contained in:
Metacube
2024-12-22 09:06:03 +01:00
committed by GitHub
parent 26e8b5b11b
commit 131fd5c6bd
1 changed files with 149 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
link.php
+149 -77
View File
@@ -1,13 +1,14 @@
<?php <?php
/*************************************************************** /***************************************************************
* Einseiten-Anwendung (index.php) für eine Linkliste * Einseiten-Anwendung (index.php) für eine Linkliste
* mit Login-/Logout-Funktion und einfacher JSON-Datenspeicherung. * mit Login-/Logout-Funktion, einfacher JSON-Datenspeicherung
* und optionalem Vorschaubild pro Link (mit YouTube-Icon).
***************************************************************/ ***************************************************************/
// ---------------------- Konfiguration -------------------------
session_start(); session_start();
// Beispiel-Nutzer (Benutzername: admin / Passwort: demo) // ---------------------- Konfiguration -------------------------
// Beispiel-Nutzer (Benutzername: admin / Passwort: gradio)
$USER_CREDENTIALS = [ $USER_CREDENTIALS = [
'admin' => 'gradio' 'admin' => 'gradio'
]; ];
@@ -15,8 +16,6 @@ $USER_CREDENTIALS = [
// Dateiname, in dem unsere Links gespeichert werden // Dateiname, in dem unsere Links gespeichert werden
$LINKS_FILE = __DIR__ . '/links.json'; $LINKS_FILE = __DIR__ . '/links.json';
// ---------------------- Funktionen ----------------------------
/** /**
* Lädt die Linkliste aus dem JSON-File * Lädt die Linkliste aus dem JSON-File
* *
@@ -52,13 +51,12 @@ function isLoggedIn()
return isset($_SESSION['username']); return isset($_SESSION['username']);
} }
// ---------------------- Login/Logout -------------------------- // ---------------------- Login/Logout-Prozess ------------------
if (isset($_POST['action']) && $_POST['action'] === 'login') { if (isset($_POST['action']) && $_POST['action'] === 'login') {
// Login-Formular wurde abgeschickt // Login-Formular wurde abgeschickt
$username = trim($_POST['username'] ?? ''); $username = trim($_POST['username'] ?? '');
$password = trim($_POST['password'] ?? ''); $password = trim($_POST['password'] ?? '');
// Check Benutzername und Passwort
global $USER_CREDENTIALS; global $USER_CREDENTIALS;
if (array_key_exists($username, $USER_CREDENTIALS) && if (array_key_exists($username, $USER_CREDENTIALS) &&
$USER_CREDENTIALS[$username] === $password $USER_CREDENTIALS[$username] === $password
@@ -82,13 +80,15 @@ if (isLoggedIn()) {
// Link hinzufügen // Link hinzufügen
if (isset($_POST['action']) && $_POST['action'] === 'add_link') { if (isset($_POST['action']) && $_POST['action'] === 'add_link') {
$newTitle = trim($_POST['title'] ?? ''); $newTitle = trim($_POST['title'] ?? '');
$newUrl = trim($_POST['url'] ?? ''); $newUrl = trim($_POST['url'] ?? '');
$newImgUrl = trim($_POST['image'] ?? ''); // Bild-URL (optional)
if ($newTitle !== '' && $newUrl !== '') { if ($newTitle !== '' && $newUrl !== '') {
$links[] = [ $links[] = [
'title' => $newTitle, 'title' => $newTitle,
'url' => $newUrl 'url' => $newUrl,
'image' => $newImgUrl
]; ];
saveLinks($links, $LINKS_FILE); saveLinks($links, $LINKS_FILE);
header("Location: {$_SERVER['PHP_SELF']}"); header("Location: {$_SERVER['PHP_SELF']}");
@@ -101,10 +101,12 @@ if (isLoggedIn()) {
$editIndex = intval($_POST['index'] ?? -1); $editIndex = intval($_POST['index'] ?? -1);
$editTitle = trim($_POST['title'] ?? ''); $editTitle = trim($_POST['title'] ?? '');
$editUrl = trim($_POST['url'] ?? ''); $editUrl = trim($_POST['url'] ?? '');
$editImg = trim($_POST['image'] ?? '');
if ($editIndex >= 0 && isset($links[$editIndex])) { if ($editIndex >= 0 && isset($links[$editIndex])) {
$links[$editIndex]['title'] = $editTitle; $links[$editIndex]['title'] = $editTitle;
$links[$editIndex]['url'] = $editUrl; $links[$editIndex]['url'] = $editUrl;
$links[$editIndex]['image'] = $editImg;
saveLinks($links, $LINKS_FILE); saveLinks($links, $LINKS_FILE);
header("Location: {$_SERVER['PHP_SELF']}"); header("Location: {$_SERVER['PHP_SELF']}");
exit; exit;
@@ -123,8 +125,6 @@ if (isLoggedIn()) {
} }
} }
} }
// ---------------------- HTML-Ausgabe --------------------------
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
@@ -133,24 +133,35 @@ if (isLoggedIn()) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amateurfunk-Linkliste</title> <title>Amateurfunk-Linkliste</title>
<style> <style>
/* -------- Reset ein wenig anpassen -------- */ /* -------- Reset -------- */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* -------- Körperhintergrund (Beispiel) -------- */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: #f0f7ff; /* Beispiel mit Farbverlauf:
color: #333; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
*/
/* Oder mit Bild (z. B. ein Funkgerät, Antenne etc.):
Bitte Pfad/URL anpassen! */
background: url('https://via.placeholder.com/1200x800/404040/FFFFFF?text=-')
no-repeat center center fixed;
background-size: cover;
color: #f0f0f0;
padding: 20px; padding: 20px;
} }
/* -------- Container und Layout -------- */
.container { .container {
max-width: 600px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
background-color: rgba(0, 0, 0, 0.65); /* dunkle Transparenz, damit Schrift lesbar bleibt */
padding: 20px;
border-radius: 10px;
} }
header, footer { header, footer {
@@ -160,67 +171,92 @@ if (isLoggedIn()) {
header h1 { header h1 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.5em; font-size: 1.6em;
color: #0066cc; color: #66c2ff;
} }
/* -------- Amateurfunk-Logo/Text -------- */ /* -------- Amateurfunk-Logo/Text -------- */
header .radio-icon { header .radio-icon {
font-size: 2em; font-size: 2.2em;
color: #0066cc; color: #66c2ff;
margin-bottom: 10px;
} }
/* -------- Navigation / Login-Bereich -------- */ /* -------- Login/Logout-Bereich -------- */
.nav, .login { .login, .nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.nav form, .login form { .login form, .nav form {
display: inline; display: inline;
} }
.nav button, .login button { .login button, .nav button {
padding: 8px 15px; padding: 8px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background-color: #0066cc; background-color: #66c2ff;
color: #fff; color: #333;
cursor: pointer; cursor: pointer;
} }
.nav button:hover, .login button:hover {
background-color: #004999; .login button:hover, .nav button:hover {
background-color: #3399ff;
} }
/* -------- Linkliste -------- */ /* -------- Fehlermeldung -------- */
.error {
color: #ffaaaa;
text-align: center;
margin-bottom: 10px;
}
/* -------- Linkliste und einzelner Link-Eintrag -------- */
.links-list { .links-list {
list-style: none; list-style: none;
margin-bottom: 30px; margin-bottom: 30px;
} }
.links-list li { .links-list li {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
padding: 10px; padding: 10px;
margin-bottom: 5px; margin-bottom: 10px;
background: #fff; display: flex;
border: 1px solid #ddd; align-items: center;
border-radius: 4px; flex-wrap: wrap; /* Für mobiles Umfließen */
} }
.links-list li a { /* -------- Vorschaubild rechts neben dem Text -------- */
.links-list .thumbnail {
width: 60px;
height: 60px;
object-fit: cover;
border: 2px solid #66c2ff;
border-radius: 8px;
margin-left: auto;
margin-right: 0;
margin-left: 10px; /* etwas Abstand zum Text */
}
.links-list a {
text-decoration: none; text-decoration: none;
color: #0066cc; color: #66c2ff;
word-wrap: break-word; /* Für Mobile besser bei langen URLs */ font-weight: bold;
word-wrap: break-word;
} }
/* -------- Buttons zum Bearbeiten/Löschen -------- */
.admin-buttons { .admin-buttons {
margin-top: 5px; margin-top: 5px;
} }
.admin-buttons form { .admin-buttons form {
display: inline; display: inline;
} }
.admin-buttons button { .admin-buttons button {
background-color: #ff6600; background-color: #ff6600;
padding: 5px 8px; padding: 5px 8px;
@@ -237,19 +273,21 @@ if (isLoggedIn()) {
/* -------- Formulare (Hinzufügen/Bearbeiten) -------- */ /* -------- Formulare (Hinzufügen/Bearbeiten) -------- */
.form-container { .form-container {
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; background-color: rgba(255,255,255,0.1);
border: 1px solid #ddd; border: 1px solid rgba(255,255,255,0.2);
padding: 15px; padding: 15px;
border-radius: 4px; border-radius: 6px;
} }
.form-container h2 { .form-container h2 {
margin-bottom: 10px; margin-bottom: 10px;
color: #66c2ff;
} }
.form-container label { .form-container label {
display: block; display: block;
margin: 10px 0 5px; margin: 8px 0 4px;
color: #f0f0f0;
} }
.form-container input[type="text"], .form-container input[type="text"],
@@ -259,33 +297,26 @@ if (isLoggedIn()) {
padding: 8px; padding: 8px;
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px;
} }
.form-container .submit-button { .form-container .submit-button {
background-color: #0066cc; background-color: #66c2ff;
color: #fff; color: #333;
padding: 10px 15px; padding: 10px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
margin-top: 10px; margin-top: 10px;
} }
.form-container .submit-button:hover { .form-container .submit-button:hover {
background-color: #004999; background-color: #3399ff;
} }
/* -------- Fehlermeldung -------- */
.error {
color: red;
margin: 10px 0;
}
/* -------- Footer -------- */
footer { footer {
margin-top: 30px; margin-top: 30px;
font-size: 0.9em; font-size: 0.9em;
color: #666; color: #ccc;
} }
/* -------- Responsives Design -------- */ /* -------- Responsives Design -------- */
@@ -293,9 +324,16 @@ if (isLoggedIn()) {
body { body {
padding: 10px; padding: 10px;
} }
.nav, .login { .login, .nav {
flex-direction: column; flex-direction: column;
} }
.links-list li {
flex-direction: column;
align-items: flex-start;
}
.links-list .thumbnail {
margin: 10px 0 0 0;
}
} }
</style> </style>
</head> </head>
@@ -306,7 +344,7 @@ if (isLoggedIn()) {
<h1>Amateurfunk-Linkliste</h1> <h1>Amateurfunk-Linkliste</h1>
</header> </header>
<!-- Login/Logout --> <!-- Login/Logout-Bereich -->
<?php if (!isLoggedIn()) : ?> <?php if (!isLoggedIn()) : ?>
<div class="login"> <div class="login">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
@@ -337,26 +375,51 @@ if (isLoggedIn()) {
<ul class="links-list"> <ul class="links-list">
<?php foreach ($links as $index => $link): ?> <?php foreach ($links as $index => $link): ?>
<li> <li>
<a href="<?php echo htmlspecialchars($link['url']); ?>" target="_blank"> <div>
<?php echo htmlspecialchars($link['title']); ?> <a href="<?php echo htmlspecialchars($link['url']); ?>" target="_blank">
</a> <?php echo htmlspecialchars($link['title']); ?>
<?php if (isLoggedIn()) : ?> </a>
<div class="admin-buttons"> <?php if (isLoggedIn()) : ?>
<!-- Edit Button --> <div class="admin-buttons">
<button onclick="document.getElementById('editForm<?php echo $index; ?>').style.display='block'"> <!-- Edit Button -->
Bearbeiten <button onclick="document.getElementById('editForm<?php echo $index; ?>').style.display='block'">
</button> Bearbeiten
<!-- Delete Form --> </button>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" style="display:inline;"> <!-- Delete Form -->
<input type="hidden" name="action" value="delete_link"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" style="display:inline;">
<input type="hidden" name="index" value="<?php echo $index; ?>"> <input type="hidden" name="action" value="delete_link">
<button type="submit" onclick="return confirm('Diesen Link wirklich löschen?');"> <input type="hidden" name="index" value="<?php echo $index; ?>">
Löschen <button type="submit" onclick="return confirm('Diesen Link wirklich löschen?');">
</button> Löschen
</form> </button>
</form>
</div>
<?php endif; ?>
</div> </div>
<!-- Bildanzeige (entweder benutzerdefiniertes Bild oder YouTube-Icon) -->
<?php
$imgSrc = trim($link['image'] ?? '');
// Falls kein eigenes Bild vorhanden, prüfen, ob es sich um eine YouTube-URL handelt
if (empty($imgSrc)) {
$host = parse_url($link['url'], PHP_URL_HOST) ?: '';
if (strpos($host, 'youtube.com') !== false || strpos($host, 'youtu.be') !== false) {
// YouTube-Icon verwenden (hier beispielhaft Logo von Wikipedia)
// Du kannst auch eine andere URL oder ein eigenes Icon nehmen
$imgSrc = 'https://upload.wikimedia.org/wikipedia/commons/7/75/YouTube_social_white_squircle_%282017%29.svg';
}
}
?>
<?php if (!empty($imgSrc)): ?>
<img class="thumbnail"
src="<?php echo htmlspecialchars($imgSrc); ?>"
alt="Preview">
<?php endif; ?>
<!-- Bearbeiten-Formular (wird per Knopfdruck eingeblendet) --> <!-- Bearbeiten-Formular (wird per Knopfdruck eingeblendet) -->
<?php if (isLoggedIn()) : ?>
<div class="form-container" id="editForm<?php echo $index; ?>" style="display:none;"> <div class="form-container" id="editForm<?php echo $index; ?>" style="display:none;">
<h2>Link bearbeiten</h2> <h2>Link bearbeiten</h2>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
@@ -376,7 +439,13 @@ if (isLoggedIn()) {
id="editUrl<?php echo $index; ?>" id="editUrl<?php echo $index; ?>"
value="<?php echo htmlspecialchars($link['url']); ?>" value="<?php echo htmlspecialchars($link['url']); ?>"
required> required>
<label for="editImg<?php echo $index; ?>">Bild-URL</label>
<input type="url"
name="image"
id="editImg<?php echo $index; ?>"
value="<?php echo htmlspecialchars($link['image']); ?>">
<button type="submit" class="submit-button">Speichern</button> <button type="submit" class="submit-button">Speichern</button>
</form> </form>
</div> </div>
@@ -398,13 +467,16 @@ if (isLoggedIn()) {
<label for="newUrl">URL</label> <label for="newUrl">URL</label>
<input type="url" name="url" id="newUrl" required> <input type="url" name="url" id="newUrl" required>
<label for="newImg">Bild-URL (optional)</label>
<input type="url" name="image" id="newImg" placeholder="https://...">
<button type="submit" class="submit-button">Hinzufügen</button> <button type="submit" class="submit-button">Hinzufügen</button>
</form> </form>
</div> </div>
<?php endif; ?> <?php endif; ?>
<footer> <footer>
<p>© <?php echo date('Y'); ?> Amateurfunk-Linkliste.</p> <p>© <?php echo date('Y'); ?> Amateurfunk-Linkliste </p>
</footer> </footer>
</div> </div>
</body> </body>