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.

Back to Posts
detall post amb uikit 3 definitiu

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.