filter_groups.php

	<?php include 'header.php'; ?>
	<?php include 'navbarWave.php'; ?>
	
    <section class="text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 shadow-xl ">		
<div class="px-10 py-2 mx-auto max-w-2xl ">
        <div class="w-full mx-auto text-left md:text-center">
            <h2 class="mb-6  leading-none max-w-5xl mx-auto tracking-normal font-extrabold text-transparent text-5xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 sm:text-3xl md:text-3xl lg:text-3xl md:tracking-tight"> gallery filter group:<span class="w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 lg:inline"> pages synology</h2> 

			<form id="search-form" action="">
							<div class="uk-inline uk-width-1-1">
								<span class="uk-form-icon uk-form-icon-flip" data-uk-icon="icon: search"></span>
								<input class="uk-input uk-width-1-1 search-fld" type="text" placeholder="Type your search" autofocus>
								<a hidden href="#" class="search-filter" data-uk-filter-control="[data-tags*='']">Search</a>
								<a hidden href="#" class="search-filter-all" data-uk-filter-control>Search all</a>
								<a hidden href="#" class="search-filter-none" data-uk-filter-control="[data-empty='']">Filter none</a>
							</div>
			</form>
        </div>
		
</div>	
		
		<!--CARDS WRAPPER-->
		
		
<div class="uk-container uk-container-expand uk-margin-large-bottom">

<div uk-filter="target: .js-filter">

			<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
				<ul class="uk-subnav uk-subnav-pill" uk-margin>
				<li class="uk-active" data-uk-filter-control=""><a href="#">Show All</a></li>
				
				</ul>
				<ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-framework='laravel']; group: data-framework"><a href="#">laravel</a></li>
                <li uk-filter-control="filter: [data-framework='codeigniter']; group: data-framework"><a href="#">codeigniter</a></li>
                <li uk-filter-control="filter: [data-framework='wordpress']; group: data-framework"><a href="#">wordpress</a></li>
				<li uk-filter-control="filter: [data-framework='php']; group: data-framework"><a href="#">php</a></li>
                <li uk-filter-control="filter: [data-framework='html']; group: data-framework"><a href="#">html</a></li>
                </ul>
				
				<ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-css='bootstrap4']; group: css"><a href="#">bootstrap4</a></li>
                <li uk-filter-control="filter: [data-css='bootstrap5']; group: css"><a href="#">bootstrap5</a></li>
                <li uk-filter-control="filter: [data-css='tailwind']; group: css"><a href="#">tailwind</a></li>
				<li uk-filter-control="filter: [data-css='uikit']; group: css"><a href="#">uikit</a></li>
                </ul>
				
				<ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-tipus='gallery']; group: tipus"><a href="#">gallery</a></li>
                <li uk-filter-control="filter: [data-tipus='tables']; group: tipus"><a href="#">tables</a></li>
                <li uk-filter-control="filter: [data-tipus='content']; group: tipus"><a href="#">content</a></li>
				<li uk-filter-control="filter: [data-tipus='crud']; group: tipus"><a href="#">crud</a></li>
				<li uk-filter-control="filter: [data-tipus='blog']; group: tipus"><a href="#">blog</a></li>
                </ul>
			</div>
				
				
				<div class="js-filter uk-grid uk-grid-medium uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l  uk-child-width-1-5@xl uk-grid-match js-filter" data-uk-grid="masonry: true" data-uk-sortable="handle: .drag-icon">
				
				
					<?php
$servername = "localhost";
$username = "root";
$password = "queMm88/g62123";
$dbname = "synology";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM `synology` order by framework asc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) { 
?> 
<!-- element que vull repetir -->		
					
					<!-- card -->					
					
					<div class="<?php echo "$row[framework]";?>" data-tags="<?php echo "$row[nom]";?> <?php echo "$row[framework]";?> <?php echo "$row[css]";?> <?php echo "$row[css]";?>" data-framework="<?php echo "$row[framework]";?>" data-css="<?php echo "$row[css]";?>" data-tipus="<?php echo "$row[tipus]";?>">
						<div class="uk-card uk-card-small uk-card-default">
							
							<div class="uk-card-media">
								<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
									<img data-fancybox="gallery" src="img/<?php echo "$row[img]";?>" >
									<div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary">
										
									</div>
								</div>
								
							</div>
							<div class="uk-card-body">
								<h4 class="uk-margin-small-bottom uk-margin-remove-adjacent uk-text-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500"><?php echo "$row[nom]";?></h4>
								<p class="uk-text-small uk-text-muted"><?php echo "$row[framework]";?>, <?php echo "$row[css]";?>, <?php echo "$row[tipus]";?></p>
							</div>
							<div class="uk-card-footer">
								<div class="uk-grid uk-grid-small uk-grid-divider uk-flex uk-flex-middle" data-uk-grid>
									
									<div class="uk-width-auto uk-text-right">
										<a href="<?php echo "$row[url]";?>" data-uk-tooltip="title: veure pagina" class="uk-icon-world uk-icon" data-uk-icon="icon:world; ratio: 1.2" target="_blank" ></a>
										
										<a href="<?php echo "$row[download]";?>" data-uk-tooltip="title: download" class="uk-icon-link" data-uk-icon="icon:download; ratio: 1.2"target="_blank"></a>										
									</div>	
									<div class="uk-width-auto uk-text-right">
										<a data-uk-tooltip="title: Drag this card" href="#" class="uk-icon-link drag-icon" data-uk-icon="icon:move; ratio: 1.2"></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									
					<!-- /card -->
					
<?php }
} else {
echo "0 results";
}
$conn->close();
?> 
					
					
					
					
				</div>
			</div>
	
		<!--/CARDS WRAPPER-->
</div>

</section>
<?php include 'footer.php';?>