uikit definitiu pagina amb un nav de competicio

Created at: 2024-12-30 14:08:46 | Updated at: 2024-12-30 14:08:46

<?php
$mysqli = new mysqli("localhost", "root", "", "postslar11");
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
}

$category_filter = isset($_GET['category']) ? $_GET['category'] : null;
$etiqueta_filter = isset($_GET['etiqueta']) ? $_GET['etiqueta'] : null;
$search_filter = isset($_GET['search']) ? trim($_GET['search']) : null;
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PHP Blog UIKIT</title> 
<link href="/img/xampp.png" rel="icon">
  <link href="https://cdn.jsdelivr.net/npm/uikit@3.6.21/dist/css/uikit.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="copy/style.css">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script> 

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">

  <style>
    h1 {
      font-family: "Monsieur La Doulaise", serif;
      font-weight: 400;
      color: white;
      font-style: normal;
      text-align: center;
      padding: 20px;
    }

    .card-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .card-footer a {
      display: inline-flex;
      align-items: center;
    }

    .card-footer svg {
      width: 24px;
      height: 24px;
    }

    h2 {
      font-size: 1.2rem;
      margin: 0;
    }

    p {
      font-size: 0.8rem;
      margin: 0.5rem 0;
    }

    .uk-navbar-dropbar {
      background: #252121;
    }

    .uk-navbar-container:not(.uk-navbar-transparent) {
      background: #252121;
    }

    body {
      background-color: #2E2E2E;
      color: white;
    }

    form.search-form {
      display: flex;
      align-items: center;
      border-bottom: 1px solid white;
      padding-bottom: 5px;
      margin-bottom: 20px;
    }

    form.search-form input[type="text"] {
      border: none;
      background: transparent;
      color: white;
      flex: 1;
      font-size: 1rem;
      outline: none;
    }

    form.search-form button {
      display: none;
    }
  </style>
</head>

<body>
<div class="uk-position-relative ">

    <nav class="uk-navbar-container uk-background-secondary">
        <div class="uk-container uk-background-secondary">
            <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container uk-background-secondary">

                <div class="uk-navbar-left uk-background-secondary">

                    <ul class="uk-navbar-nav uk-background-secondary">
			
				<a href="/" class="uk-navbar-item uk-logo"><svg xmlns="http://www.w3.org/2000/svg" width="1.99em" height="2em" viewBox="0 0 256 258"><g fill="none" fill-rule="evenodd"><path fill="#fb7a24" d="M127.929.002Q177.77.002 227.61 0c4.17 0 8.3.362 12.301 1.582c8.675 2.644 13.268 8.865 15.068 17.438c.715 3.4.918 6.865.925 10.33c.053 23.27.092 46.542.094 69.814c.002 42.384.007 84.768-.08 127.151c-.012 5.933-.328 11.931-3.257 17.336c-3.249 5.994-7.697 10.738-14.45 12.824c-1.22.377-2.494.806-3.745.806c-2.882.002-5.687.716-8.56.716c-65.067-.005-130.133.033-195.2-.07c-5.292-.01-10.67-.395-15.697-2.548c-1-.43-2.01-.79-2.89-1.46c-6.4-4.877-10.746-10.96-11.678-19.191c-.335-2.968-.442-5.92-.442-8.889c.01-65.952.016-131.904.05-197.856c.003-3.826.042-7.718 1.219-11.38C4.403 6.846 11.261 1.519 21.427.437C23.79.185 26.173.022 28.547.02C61.672-.007 94.801.002 127.928.002"/><path fill="#fff" d="M128.775 164.113c-.727 4.454-1.238 8.48-2.838 12.19c-7.49 17.384-20.256 27.977-39.394 30.086c-22.621 2.492-43.515-11.47-49.797-33.154c-2.277-7.858-2.049-15.869-1.223-23.867c.881-8.546 3.399-16.65 7.33-24.296c.563-1.093.552-1.918-.152-2.977c-6.036-9.078-8.378-19.107-7.528-29.932c.455-5.786 1.86-11.32 4.483-16.504c7.689-15.185 24.57-28.072 47.179-25.932c19.88 1.88 38.293 19.029 41.167 38.315c.145.968.417 1.918.735 3.346c.476-2.586.82-4.72 1.265-6.834c3.703-17.521 20.854-35.855 45.164-36.082c24.64-.228 42.887 19.097 46.33 37.045c1.455 7.585 1.202 15.163.002 22.738a81 81 0 0 1-6.672 21.775c-.716 1.529-.642 2.63.275 4.05c5.307 8.224 7.649 17.252 7.349 27.056c-.628 20.457-15.097 38.802-35.002 43.6c-27.79 6.697-49.093-9.923-56.262-30.031c-1.17-3.273-1.723-6.69-2.41-10.592m50.489-35.94c.297-1.157 1.193-1.85 1.837-2.706c6.968-9.26 10.633-19.603 9.815-31.25c-.596-8.5-7.587-14.488-16.05-14.171c-8.469.317-14.85 6.848-14.97 15.322c-.009.694.033 1.389-.01 2.078c-.583 9.031-5.566 13.978-13.117 14.53c-1.379.101-2.762.224-4.143.228c-9.8.022-19.599.018-29.4.009c-4.28-.004-8.524.462-12.6 1.72c-19.027 5.87-30.122 18.882-33.796 38.275c-.728 3.837-1.383 7.819-.125 11.76c1.805 5.653 5.17 9.857 11.126 11.263c6.173 1.457 11.55-.155 15.822-5.004c2.761-3.135 3.632-6.86 3.838-10.948c.534-10.515 6.26-15.771 15.81-15.692c14.649.122 29.3.026 43.951.037c2.6.001 2.624.036 2.637 2.608c.025 4.75-.121 9.507.062 14.252c.298 7.747 7.114 14.186 15.016 14.413c8.148.233 15.411-5.794 15.942-13.661c.458-6.81.429-13.661-.018-20.476c-.346-5.275-3.2-9.035-8.036-11.217c-1.16-.522-2.38-.913-3.591-1.37m-91.832-15.984c3.151 0 5.723-.029 8.293.013c1.274.02 1.746-.528 1.736-1.777c-.042-4.943.213-9.902-.102-14.827c-.416-6.497-3.871-11.194-9.92-13.563c-6.202-2.429-11.878-1.043-16.678 3.538c-4.821 4.603-5.464 10.232-3.777 16.392c1.55 5.662 5.21 8.878 10.968 9.85c3.344.563 6.707.293 9.48.374"/></g></svg></a>		
					
					
			<a href="/uikit_ia.php" class="uk-navbar-item uk-logo"><svg xmlns="http://www.w3.org/2000/svg" width="1.73em" height="2em" viewBox="0 0 256 297"><path fill="#2396f3" d="M174.656 28.438L125.717 0L74.646 31.723l49.621 27.414zm23.403 12.245L147.52 71.424l57.28 33.109V192l-77.248 43.904L51.2 192v-68.267L0 98.304v123.563l125.717 74.666L256 222.422V74.155z"/></svg></a>		
					
					
					
					<?php
      $categories_query = "SELECT name FROM categories ORDER BY name ASC";
      $categories_result = $mysqli->query($categories_query);
      if ($categories_result->num_rows > 0) {
          while ($category = $categories_result->fetch_assoc()) {
              echo "<li><a href='?category=" . urlencode($category['name']) . "'>" . htmlspecialchars($category['name']) . "</a></li>";
          }
      }
      ?>
					
         
                        
                        <li class="uk-background-secondary">
                            <a href="#">DIRECTORIS</a>
                            <div class="uk-background-secondary uk-navbar-dropdown uk-navbar-dropdown-width-4">
                                <div class="uk-background-secondary uk-drop-grid uk-child-width-1-4" uk-grid>
 



<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">php</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/PHP";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>									

</ul>
</div>

  

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">codeigniter</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/CODEIGNITER";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>					

</ul>
</div>

  <!-- 5 -->   

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">laravel</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/LARAVEL";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>										

</ul>
</div>

  <!-- 6 -->   

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">wordpress</li>
<li class="uk-nav-divider"></li>

<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/WORDPRESS";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);   
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://NOMBRE-DIRECTORIO.test
            $url = "http://" . $dir . ".test";
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>											

</ul>
</div>
									
									
									
                                </div>
                            </div>
                        </li>
						
						 <li class="uk-background-secondary">
                            <a href="#">PROJECTES</a>
                            <div class="uk-background-secondary uk-navbar-dropdown uk-navbar-dropdown-width-4">
                                <div class="uk-background-secondary uk-drop-grid uk-child-width-1-4" uk-grid>
 

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">HTML</li>
<li class="uk-nav-divider"></li>

	<?php
// Directorio a explorar
$directory = "C:/xampp/htdocs/HTML";

// Abrir el directorio
if (is_dir($directory)) {
    // Leer el contenido del directorio
    $dirs = scandir($directory);    
    foreach ($dirs as $dir) {
        // Ignorar los directorios especiales "." y ".."
        if ($dir !== '.' && $dir !== '..' && is_dir($directory . '/' . $dir)) {
            // Generar el enlace con formato http://localhost/NOMBRE-DIRECTORIO
            $url = "http://localhost/HTML/" . $dir;
            echo "<li><a href=\"$url\">$dir</a></li>";
        }
    }   
} else {
    echo "El directorio no existe o no se puede leer.";
}
?>

</ul>
</div>

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">patro uikit arrel htdocs</li>
<li class="uk-nav-divider"></li>

	<!-- Aquest codi PHP genera una llista no ordenada (<ul>) amb enllaços (<a>) per a tots els fitxers del directori actual que compleixen un patró específic. -->								  
<?php
$directory = __DIR__;
$phpFiles = array_filter(glob($directory . '/uikit*.php', ));
foreach ($phpFiles as $file) {
$fileName = basename($file);
echo '<li><a href="' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
?>			

</ul>
</div>

 

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">directori arrel localhost</li>
<li class="uk-nav-divider"></li>

	<?php
$directory = __DIR__;
$phpFiles = array_filter(glob($directory . '/*.php'), function ($file) {
    $excludedFiles = ['footer.php', 'eliminar_img_noutils.php', 'navbar.php', 'navbar_devdojo.php'];
    return !in_array(basename($file), $excludedFiles);
});

foreach ($phpFiles as $file) {
    $fileName = basename($file);
    echo '<li><a href="' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
?>				

</ul>
</div>

  

<div>
<ul class="uk-background-secondary uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header uk-text-primary uk-text-bold">hosts</li>
<li class="uk-nav-divider"></li>

<?php
$hostsFile = 'C:\Windows\System32\drivers\etc\hosts';
if (file_exists($hostsFile)) {
$lines = file($hostsFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$validHosts = [];

foreach ($lines as $line) {
$line = trim($line);

// Procesar líneas válidas de hosts
if (!empty($line) && strpos($line, '#') !== 0) {
$parts = preg_split('/\s+/', $line);
if (isset($parts[1])) {
$validHosts[] = $parts[1]; // Agregar solo el dominio
}
}
}

foreach ($validHosts as $host) {
echo '<li><a href="http://' . htmlspecialchars($host, ENT_QUOTES, 'UTF-8') . '" class="active">' . htmlspecialchars($host, ENT_QUOTES, 'UTF-8') . '</a></li>';
}
} else {
echo '<li><span class="text-gray-500">Archivo hosts no encontrado.</span></li>';
}
?>						

</ul>
</div>
									
								
                                </div>
                            </div>
                        </li>
					
                    </ul>

                </div>

                <div class="uk-navbar-right uk-background-secondary">

                    <ul class="uk-navbar-nav uk-background-secondary">
                        <li>
                            <a href="#">1</a>
                            <div class="uk-navbar-dropdown uk-background-secondary">
                                <ul class="uk-nav uk-navbar-dropdown-nav">                                    
                                    <li class="uk-nav-header uk-text-primary uk-text-bold">1</li>                           
                                    <li class="uk-nav-divider"></li>
                                    
                                </ul>
								
                            </div>
                        </li>
						
						<li>
                            <a href="#">admin</a>
                            <div class="uk-navbar-dropdown uk-background-secondary">
                                <ul class="uk-nav uk-navbar-dropdown-nav">                                    
                                    <li class="uk-nav-header uk-text-primary uk-text-bold">localhost</li>
                                    
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="http://localhost/phpmyadmin/index.php?route=/">phpmyadmin</a></li>
									 <li><a href="http://administracio.test/admin/posts">projecte administracio laravel</a></li>
                                </ul>
                            </div>
                        </li>
						
                    </ul>

                </div>

            </div>
        </div>
    </nav>

</div>

<div class="uk-container uk-container-expand">
  <h1>Hola, aquests son els meus apunts de Disseny Web</h1>

  <form method="GET" class="search-form">
    <input type="text" name="search" placeholder="Busca títols..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
    <button type="submit">Buscar</button>
  </form>

  <?php
    $query = "
      SELECT 
          p.id, p.title, p.excerpt, p.img, p.url, p.ins, p.face, p.youtube, 
          c.name AS category_name, 
          GROUP_CONCAT(DISTINCT CONCAT(e.name, '|', e.svg) ORDER BY e.name) AS etiquetas 
      FROM posts p 
      JOIN categories c ON p.category_id = c.id 
      LEFT JOIN post_etiquetas pe ON p.id = pe.post_id 
      LEFT JOIN etiquetas e ON pe.etiqueta_id = e.id
    ";

    $conditions = [];
    if ($category_filter) {
        $conditions[] = "c.name = '" . $mysqli->real_escape_string($category_filter) . "'";
    }
    if ($etiqueta_filter) {
        $conditions[] = "e.name = '" . $mysqli->real_escape_string($etiqueta_filter) . "'";
    }
    if ($search_filter) {
        $conditions[] = "p.title LIKE '%" . $mysqli->real_escape_string($search_filter) . "%'";
    }
    if (!empty($conditions)) {
        $query .= " WHERE " . implode(" AND ", $conditions);
    }
    $query .= " GROUP BY p.id";

    $result = $mysqli->query($query);

    if ($result && $result->num_rows > 0) {
        echo "<div class='uk-grid-collapse uk-grid-match uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l' uk-grid='masonry: true'>";
        while ($row = $result->fetch_assoc()) {
            echo "<div>";
            echo "<div class='uk-card uk-card-body'>";
            echo "<img data-fancybox='gallery' src='img/" . htmlspecialchars($row["img"]) . "' alt='" . htmlspecialchars($row["title"]) . "' uk-img>";
            echo "<h3 class='uk-card-title uk-margin-small-bottom'><a href='post_detail.php?id=" . $row["id"] . "'>" . htmlspecialchars($row["title"]) . "</a></h3>";
            echo "<p class='uk-text-small'>" . htmlspecialchars($row["excerpt"]) . "</p>";
            echo "<div class='uk-margin-small-top'>";
            if (!empty($row['url'])) {
                echo "<a href='" . htmlspecialchars($row["url"]) . "' target='_blank'><i class='fas fa-link uk-margin-small-right'></i></a>";
            }
            if (!empty($row['ins'])) {
                echo "<a href='" . htmlspecialchars($row["ins"]) . "' target='_blank'><i class='fab fa-instagram uk-margin-small-right'></i></a>";
            }
            if (!empty($row['face'])) {
                echo "<a href='" . htmlspecialchars($row["face"]) . "' target='_blank'><i class='fab fa-facebook uk-margin-small-right'></i></a>";
            }
            if (!empty($row['youtube'])) {
                echo "<a data-fancybox='gallery' href='" . htmlspecialchars($row["youtube"]) . "' target='_blank'><i class='fab fa-youtube uk-margin-small-right'></i></a>";
            }
            echo "</div>";
            echo "<div class='card-footer uk-margin-small-top'>";
            $etiquetas = explode(',', $row['etiquetas']);
            foreach ($etiquetas as $etiqueta) {
                if (strpos($etiqueta, '|') !== false) {
                    list($etiqueta_name, $etiqueta_svg) = explode('|', $etiqueta);
                    echo "<a href='?etiqueta=" . urlencode($etiqueta_name) . "' class='uk-margin-small-right'>";
                    echo $etiqueta_svg;
                    echo "</a>";
                }
            }
            echo "</div>";
            echo "</div>";
            echo "</div>";
        }
        echo "</div>";
    } else {
        echo "<p>No s'han trobat resultats per a la teva cerca.</p>";
    }

    $mysqli->close();
  ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.21/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.21/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
uikit definitiu pagina amb un nav de competicio

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.