detall post amb uikit 3 definitiu
Created at: 2024-12-30 14:59:34 | Updated at: 2024-12-31 14:59:34
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Detall del Post - UIKit</title> <link href="/img/xampp.png" rel="icon"> <!-- UIKit CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/css/uikit.min.css" /> <!-- FontAwesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Clipboard.js --> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script> <!-- NanoGallery --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script> <!-- Fancybox CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" /> <!-- Fancybox JS --> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script> <!-- COPY CSS --> <link rel="stylesheet" href="copy/style.css"> <style> .post-container { background-color: #000; color: #fff; } .post-image { height: 300px; object-fit: cover; width: 100%; } .post-title { display: flex; align-items: center; justify-content: center; height: 300px; text-align: center; font-size: 1.5rem; } </style> </head> <body class="uk-background-secondary uk-light"> <div class="uk-container uk-padding post-container"> <div class="uk-margin" > <a href="/index.php" style="color: red; font-size: 3rem; font-weight: bold;"> <span class="uk-margin-small-right" uk-icon="icon: arrow-left; ratio: 2"></span> <span uk-icon="icon: check; ratio: 3.5"></span></a> </div> <?php $servername = "localhost"; $username = "joan"; $password = "queMm88/g62123"; $dbname = "postslar11"; // Crear conexión $conn = new mysqli($servername, $username, $password, $dbname); // Verificar conexión if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } if (isset($_GET['id'])) { $post_id = intval($_GET['id']); $sql = "SELECT * FROM posts WHERE id = $post_id"; $result = $conn->query($sql); if ($result->num_rows > 0) { $post = $result->fetch_assoc(); // Títol echo "<h1 class='uk-heading-medium uk-text-center uk-margin-small-bottom'>" . htmlspecialchars($post['title']) . "</h1>"; echo "<p class='uk-text-meta uk-text-center'>Created at: " . htmlspecialchars($post['created_at']) . " | Updated at: " . htmlspecialchars($post['updated_at']) . "</p>"; // Links socials echo "<div class='uk-flex uk-flex-center uk-margin-top'>"; if (!empty($post['url'])) { echo "<a href='" . htmlspecialchars($post['url']) . "' target='_blank' class='uk-icon-button' uk-icon='link'></a>"; } if (!empty($post['ins'])) { echo "<a href='" . htmlspecialchars($post['ins']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='instagram'></a>"; } if (!empty($post['face'])) { echo "<a href='" . htmlspecialchars($post['face']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='facebook'></a>"; } if (!empty($post['youtube'])) { echo "<a data-fancybox='gallery' href='" . htmlspecialchars($post['youtube']) . "' target='_blank' class='uk-icon-button uk-icon' uk-icon='youtube'></a>"; } echo "</div>"; // Contingut del post echo "<div id='post-content' class='uk-container uk-margin-large-top'>" . $post['content'] . "</div>"; // Galeria si la categoria és 7 if ($post['category_id'] == 7) { echo "<div id='nanogallery2' class='uk-margin-large-top' data-nanogallery2='{ \"thumbnailHeight\": 350, \"thumbnailWidth\": 350, \"itemsBaseURL\": \"img/people/" . urlencode($post['title']) . "/\" }'>"; for ($i = 1; $i <= 18; $i++) { echo "<a href='{$i}.jpg' data-ngThumb='{$i}.jpg'>{$post['title']} {$i}</a>"; } echo "</div>"; } // Imatge del post echo "<div class='uk-flex uk-flex-center uk-margin-large-top'>"; echo "<img src='img/" . htmlspecialchars($post['img']) . "' alt='" . htmlspecialchars($post['title']) . "' class='uk-border-rounded' style='max-height: 300px; object-fit: cover;'>"; echo "</div>"; } else { echo "<p class='uk-text-danger'>Post no trobat.</p>"; } } else { echo "<p class='uk-text-danger'>ID de post no proporcionat.</p>"; } $conn->close(); ?> </div> <script src='https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'></script> <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'></script> <script src="copy/script.js"></script> UIkit JS --> <script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit-icons.min.js"></script> </body> </html>
No valid image directory found or the category is not valid for the gallery.