Last active
April 28, 2023 15:50
-
-
Save estudijoanpuig/c154d12733a9d4193020f175bf3c500b to your computer and use it in GitHub Desktop.
index al nas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>synology</title> | |
| <link rel="shortcut icon" type="image/png" href="img/synology.png"> | |
| <!-- CSS FILES --> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/cards.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine-ie11.js" integrity="sha512-6m6AtgVSg7JzStQBuIpqoVuGPVSAK5Sp/ti6ySu6AjRDa1pX8mIl1TwP9QmKXU+4Mhq/73SzOk6mbNvyj9MPzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| </head> | |
| <body data-uk-filter="target: .js-filter; animation: fade"> | |
| <!-- navbar WAVE --> | |
| <header x-data="{ mobileMenuOpen: false }" class="relative z-30 bg-gray-50"> | |
| <div class="px-8 mx-auto xl:px-5 max-w-7xl"> | |
| <div class="flex items-center justify-between h-24 border-b-2 border-gray-100 md:justify-start md:space-x-6"> | |
| <div class="inline-flex"> | |
| <!-- data-replace='{ "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }' --> | |
| <a href="/" class="flex items-center justify-center space-x-3 transition-all duration-1000 ease-out transform text-wave-500"> | |
| <img src="img/synology.png" align="left" width="70" height="" /> | |
| <span class="p-1 text-xl font-black leading-none text-gray-900">Synology</span> | |
| </a> | |
| </div> | |
| <div class="flex justify-end flex-grow -my-2 -mr-2 md:hidden"> | |
| <button @click="mobileMenuOpen = true" type="button" class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500"> | |
| <svg class="w-6 h-6" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg> | |
| </button> | |
| </div> | |
| <!-- This is the homepage nav when a user is not logged in --> | |
| <nav class="flex items-center justify-end flex-1 hidden w-full h-full space-x-10 md:flex"> | |
| <div @mouseenter="dropdown = true" @mouseleave="dropdown=false" @click.away="dropdown=false" x-data="{ dropdown: false }" class="relative h-full select-none"> | |
| <div :class="{ 'text-wave-600': dropdown, 'text-gray-500': !dropdown }" class="inline-flex items-center h-full space-x-2 text-base font-medium leading-6 transition duration-150 ease-in-out cursor-pointer select-none group hover:text-wave-600 focus:outline-none focus:text-wave-600 text-gray-500"> | |
| <span>Pagines</span> | |
| <svg class="w-5 h-5 transition duration-150 ease-in-out group-hover:text-wave-600 group-focus:text-wave-600 text-gray-400" x-bind:class="{ 'text-wave-600': dropdown, 'text-gray-400': !dropdown }" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <div x-show="dropdown" x-transition:enter="duration-200 ease-out scale-95" x-transition:enter-start="opacity-50 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition duration-100 ease-in scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="fixed w-full transform -translate-x-1/2 xl:w-screen xl:max-w-6xl xl:px-2 xl:absolute sm:px-0 lg:ml-0 left-1/2" style="display: none;"> | |
| <div class="overflow-hidden shadow-lg xl:rounded-xl"> | |
| <div class="flex items-stretch justify-center overflow-hidden bg-white shadow-xs xl:rounded-xl"> | |
| <div class="flex flex-col"> | |
| <div class="flex h-full"> | |
| <div class="relative flex flex-col items-start justify-start hidden w-full h-full max-w-xs bg-center bg-cover lg:block" style="background-image:url('https://estudijoanpuig.com/joan.jpg')"> | |
| <div class="relative flex flex-col items-start justify-center w-full h-full px-16 py-8"> | |
| <img src="" class="z-20 w-auto h-10"> | |
| <h3 class="z-30 mt-1 mt-3 text-lg font-thin text-red-200">Programador web amateur a github.</h3> | |
| <span class="relative z-20 inline-flex mt-5 rounded-md shadow-sm"> | |
| <a href="https://github.com/estudijoanpuig?tab=repositories" class="relative inline-flex items-center px-4 py-2 text-sm font-medium leading-5 transition duration-150 ease-in-out bg-white border border-transparent rounded-md text-wave-500 hover:bg-gray-100 focus:outline-none focus:border-gray-300 focus:shadow-outline-gray active:bg-gray-100"> | |
| anar al meu perfil | |
| </a> | |
| </span> | |
| </div> | |
| <div class="absolute inset-0 w-full h-full opacity-75 bg-wave-600"></div> | |
| <div class="absolute inset-0 w-full h-full opacity-75 bg-gradient-to-br from-wave-600 to-indigo-600"></div> | |
| </div> | |
| <div class="relative z-20 grid gap-6 px-5 pt-6 pb-8 bg-white border-t border-b border-transparent xl:border-gray-200 sm:gap-8 sm:p-8"> | |
| <a href="/blog" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group"> | |
| <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" /> | |
| </svg> | |
| </div> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-900"> | |
| blog | |
| </p> | |
| <p class="text-sm leading-5 text-gray-500"> | |
| Pagina entrades blog. | |
| </p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="relative z-20 grid gap-6 px-5 pt-6 pb-8 bg-white border-t border-b border-r border-transparent rounded-r-xl xl:border-gray-200 sm:gap-8 sm:p-8"> | |
| <a href="/" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group"> | |
| <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> | |
| </svg> | |
| </div> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-900"> | |
| Pagines d'aquest projecte | |
| </p> | |
| <p class="text-sm leading-5 text-gray-500"> | |
| galeria de les pagines clasificades per tipus, filtre i cerca. | |
| </p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="/welcome" class="text-base font-medium leading-6 text-gray-500 transition duration-150 ease-in-out hover:text-wave-600 focus:outline-none focus:text-wave-600"> | |
| projecte | |
| </a> | |
| <a href="/blog" class="text-base font-medium leading-6 text-gray-500 transition duration-150 ease-in-out hover:text-wave-600 focus:outline-none focus:text-wave-600"> | |
| Blog | |
| </a> | |
| <div @mouseenter="dropdown = true" @mouseleave="dropdown=false" @click.away="dropdown=false" x-data="{ dropdown: false }" class="relative h-full select-none"> | |
| <div @click="dropdown = !dropdown" :class="{ 'text-wave-600': dropdown, 'text-gray-500': !dropdown }" class="inline-flex items-center h-full space-x-2 text-base font-medium leading-6 text-gray-500 transition duration-150 ease-in-out cursor-pointer select-none hover:text-wave-600 focus:outline-none focus:text-wave-500"> | |
| <span>Documentacio</span> | |
| <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <div x-show="dropdown" x-transition:enter="duration-200 ease-out scale-95" x-transition:enter-start="opacity-50 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition duration-100 ease-in scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute w-screen max-w-sm px-2 transform -translate-x-1/2 left-1/2 sm:px-0" style="display: none;"> | |
| <div class="shadow-lg rounded-xl"> | |
| <div class="overflow-hidden border border-gray-100 shadow-md rounded-xl"> | |
| <div class="relative z-20 grid bg-white"> | |
| <a href="https://laravel.com/docs/9.x/installation#your-first-laravel-project" target="_blank" class="flex items-start p-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg pb-7 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /> | |
| </svg> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease"> | |
| Laravel 10 | |
| </p> | |
| <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease"> | |
| Laravel és un marc d'aplicacions web amb una sintaxi expressiva i elegant. | |
| </p> | |
| </div> | |
| </a> | |
| <a href="https://filamentphp.com/docs/2.x/admin/installation#installation" target="_blank" class="flex items-start px-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg py-7 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /> | |
| </svg> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease"> | |
| Filament | |
| </p> | |
| <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease"> | |
| Filament és una col·lecció TALL stack per admistrar la web. | |
| </p> | |
| </div> | |
| </a> | |
| <a href="https://tailwindcss.com/docs/installation/play-cdn" target="_blank" class="flex items-start px-10 pb-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg pt-7 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /> | |
| </svg> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease"> | |
| Tailwind 3 | |
| </p> | |
| <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease"> | |
| Un marc CSS de primera utilitat ple de classes . | |
| </p> | |
| </div> | |
| </a> | |
| <a href="https://getuikit.com/docs/installation" target="_blank" class="flex items-start px-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg py-7 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /> | |
| </svg> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease"> | |
| Uikit 3 | |
| </p> | |
| <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease"> | |
| UIkit és un marc CSS. | |
| </p> | |
| </div> | |
| </a> | |
| <a href="https://heroicons.com/" class="flex items-start px-10 pb-10 -m-3 space-x-3 transition duration-150 ease-in-out rounded-lg pt-7 group" target="_blank"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /> | |
| </svg> | |
| <div class="space-y-1"> | |
| <p class="text-base font-medium leading-6 text-gray-700 duration-200 group-hover:text-gray-900 transition-color ease"> | |
| Heroicons | |
| </p> | |
| <p class="text-xs font-normal leading-5 text-gray-500 duration-200 group-hover:text-gray-700 transition-color ease"> | |
| Boniques icones SVG fetes a mà pels creadors de Tailwind CSS. | |
| </p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1 h-5 mx-10 border-r border-gray-300"></div> | |
| <a href="/phpmyadmin" class=" text-base font-medium leading-6 text-gray-500 whitespace-no-wrap hover:text-wave-600 focus:outline-none focus:text-gray-900"target="_blank"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /> | |
| </svg> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- nav MOBIL --> | |
| <div x-show="mobileMenuOpen" x-transition:enter="duration-300 ease-out scale-100" x-transition:enter-start="opacity-50 scale-110" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition duration-75 ease-in scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-100" class="absolute inset-x-0 top-0 transition origin-top transform md:hidden" style="display: none;"> | |
| <div class="shadow-lg"> | |
| <div class="bg-white divide-y-2 shadow-xs divide-gray-50"> | |
| <div class="pt-6 pb-6 space-y-6"> | |
| <div class="flex items-center justify-between px-8 mt-1"> | |
| <div> | |
| <a href="/"><img src="{{ asset('img/logo.png') }}" align="left" width="" height="" /></a> | |
| </div> | |
| <div class="-mr-2"> | |
| <button @click="mobileMenuOpen = false" type="button" class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500"> | |
| <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <nav class="grid row-gap-8"> | |
| <a href="/welcome" class="flex items-center px-8 py-3 space-x-3 transition duration-150 ease-in-out rounded-md hover:bg-gray-50"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" /> | |
| </svg> | |
| <div class="text-base font-medium leading-6 text-gray-900"> | |
| Projecte | |
| </div> | |
| </a> | |
| <a href="/blog" class="flex items-center px-8 py-3 space-x-3 transition duration-150 ease-in-out rounded-md hover:bg-gray-50"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" /> | |
| </svg> | |
| <div class="text-base font-medium leading-6 text-gray-900"> | |
| Blog | |
| </div> | |
| </a> | |
| <a href="/people" class="flex items-center px-8 py-3 space-x-3 transition duration-150 ease-in-out rounded-md hover:bg-gray-50"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" /> | |
| </svg> | |
| <div class="text-base font-medium leading-6 text-gray-900"> | |
| People | |
| </div> | |
| </a> | |
| <a href="/llista_pagines" class="flex items-center px-8 py-3 space-x-3 transition duration-150 ease-in-out rounded-md hover:bg-gray-50"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /> | |
| </svg> | |
| <div class="text-base font-medium leading-6 text-gray-900"> | |
| LLista de Pagines del lloc | |
| </div> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="px-8 py-6 space-y-6"> | |
| <div class="grid grid-cols-2 row-gap-4 col-gap-8 px-1 pb-4"> | |
| <a href="/welcome" class="text-base font-medium leading-6 text-gray-900 transition duration-150 ease-in-out hover:text-gray-700"> | |
| Projecte | |
| </a> | |
| <a href="blog" class="text-base font-medium leading-6 text-gray-900 transition duration-150 ease-in-out hover:text-gray-700"> | |
| Blog | |
| </a> | |
| </div> | |
| <div class="space-y-6"> | |
| <p class="text-base font-medium leading-6 text-center text-gray-500"> | |
| <a href="/admin" class="transition duration-150 ease-in-out text-wave-600 hover:text-wave-500"> | |
| admin | |
| </a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- component --> | |
| <section class="pt-6 bg-white" style="background-image: url('img/100.png');background-size: cover;background-position: center;"> | |
| <div class="px-12 mx-auto max-w-7xl"> | |
| <div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center" > | |
| <h1 class="mb-8 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight"> | |
| <span> pagina index</span> <span class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline">al Synology</span> <span></span> | |
| </h1> | |
| <p class="px-0 mb-8 text-lg text-gray-600 md:text-xl lg:px-24"> | |
| tria i remena | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="uk-container uk-container-expand"> | |
| <div class="uk-grid uk-grid-medium uk-flex uk-flex-middle" data-uk-grid> | |
| <div class="uk-width-expand"> | |
| <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> | |
| </div> | |
| <section class="uk-section uk-section-small uk-section-default uk-padding-remove-bottom"> | |
| <div class="uk-container uk-container-expand uk-margin-large-bottom"> | |
| <ul class="uk-subnav uk-subnav-pill"> | |
| <li class="uk-active" data-uk-filter-control=""><a href="#">Show All</a></li> | |
| <li data-uk-filter-control=".inici"><a href="#">inici</a></li> | |
| <li data-uk-filter-control=".navbar"><a href="#">navbar</a></li> | |
| <li data-uk-filter-control=".contingut"><a href="#">contingut</a></li> | |
| <li data-uk-filter-control=".blog"><a href="#">blog</a></li> | |
| <li data-uk-filter-control=".galleries"><a href="#">galleries</a></li> | |
| <li data-uk-filter-control=".sliders"><a href="#">sliders</a></li> | |
| <li data-uk-filter-control=".tables"><a href="#">tables</a></li> | |
| <li data-uk-filter-control=".control_panel"><a href="#">control_panel</a></li> | |
| <li data-uk-filter-control=".protegides"><a href="#">protegides</a></li> | |
| </ul> | |
| <div class="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 = "dark"; | |
| // Create connection | |
| $conn = new mysqli($servername, $username, $password, $dbname); | |
| // Check connection | |
| if ($conn->connect_error) { | |
| die("Connection failed: " . $conn->connect_error); | |
| } | |
| $sql = "SELECT * FROM `pages` order by categoria asc"; | |
| $result = $conn->query($sql); | |
| if ($result->num_rows > 0) { | |
| // output data of each row | |
| while($row = $result->fetch_assoc()) { | |
| ?> | |
| <!-- card --> | |
| <div class="<?php echo "$row[categoria]";?>" data-tags="wildcats in thailand - <?php echo "$row[nom]";?>"> | |
| <div class="uk-card uk-card-small uk-card-default"> | |
| <div class="uk-card-header"> | |
| <div class="uk-grid uk-grid-small uk-text-small" data-uk-grid> | |
| <div class="uk-width-expand"> | |
| <span class="cat-txt">Nature / Outdoor</span> | |
| </div> | |
| <div class="uk-width-auto uk-text-right uk-text-muted"> | |
| <span data-uk-icon="icon:clock; ratio: 0.8"></span> 1 week. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="uk-card-media"> | |
| <div class="uk-inline-clip uk-transition-toggle" tabindex="0"> | |
| <img class="lazy" data-src="img/<?php echo "$row[img]";?>" data-width="400" data-height="220" data-uk-img alt="" src="<?php echo "$row[img]";?>"> | |
| <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary"> | |
| <span data-uk-icon="icon:heart; ratio: 0.8"></span> 12.345 <span data-uk-icon="icon:comment; ratio: 0.8"></span> 12.345 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="uk-card-body"> | |
| <h6 class="uk-margin-small-bottom uk-margin-remove-adjacent uk-text-bold"><?php echo "$row[nom]";?></h6> | |
| <p class="uk-text-small uk-text-muted">Duis aute irure dolor in reprehenderit in voluptate velit</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-expand uk-text-small"> | |
| John Doe | |
| </div> | |
| <div class="uk-width-auto uk-text-right"> | |
| <a href="#" data-uk-tooltip="title: Twitter" class="uk-icon-link" data-uk-icon="icon:twitter; ratio: 0.8"></a> | |
| <a href="#" data-uk-tooltip="title: Instagram" class="uk-icon-link" data-uk-icon="icon:instagram; ratio: 0.8"></a> | |
| <a href="#" data-uk-tooltip="title: Behance" class="uk-icon-link" data-uk-icon="icon:behance; ratio: 0.8"></a> | |
| <a href="#" data-uk-tooltip="title: Pinterest" class="uk-icon-link" data-uk-icon="icon:pinterest; ratio: 0.8"></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"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /card --> | |
| <?php } | |
| } else { | |
| echo "0 results"; | |
| } | |
| $conn->close(); | |
| ?> | |
| </div> | |
| </div> | |
| </section> | |
| <!--/CARDS WRAPPER--> | |
| </section> | |
| <!--FOOTER TAILWIND--> | |
| <section class="text-gray-700 bg-white body-font "> | |
| <div class="container flex flex-col items-center px-8 py-8 pb-15 mx-auto max-w-7xl sm:flex-row"> | |
| <a href="/" class=" text-xl font-black leading-none text-gray-900 select-none logo">Synology<span class="text-indigo-600">.</span></a> | |
| <p class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0">© 2022 estudijoanpuig.com | |
| </p> | |
| <div class="max-w-lg mx-auto"> | |
| </div> | |
| <span class="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start"> | |
| <a href="https://www.facebook.com/joanpuigbertran" class="text-gray-400 hover:text-gray-500" target="_blank"> | |
| <span class="sr-only">Facebook</span> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| <a href="https://www.instagram.com/estudijoanpuig/" class="text-gray-400 hover:text-gray-500" target="_blank"> | |
| <span class="sr-only">Instagram</span> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| <a href="https://twitter.com/estudijoanpuig" class="text-gray-400 hover:text-gray-500" target="_blank"> | |
| <span class="sr-only">Twitter</span> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path> | |
| </svg> | |
| </a> | |
| <a href="https://github.com/estudijoanpuig" class="text-gray-400 hover:text-gray-500" target="_blank"> | |
| <span class="sr-only">GitHub</span> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| </span> | |
| </div> | |
| </section> | |
| <!-- Implement the Back Top Top Button --> | |
| <button id="to-top-button" onclick="goToTop()" title="Go To Top" | |
| class="hidden fixed z-90 bottom-8 right-8 border-0 w-16 h-16 rounded-full drop-shadow-md bg-indigo-500 text-white text-3xl font-bold">↑</button> | |
| <!-- Javascript code --> | |
| <script> | |
| var toTopButton = document.getElementById("to-top-button"); | |
| // When the user scrolls down 200px from the top of the document, show the button | |
| window.onscroll = function () { | |
| if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { | |
| toTopButton.classList.remove("hidden"); | |
| } else { | |
| toTopButton.classList.add("hidden"); | |
| } | |
| } | |
| // When the user clicks on the button, smoothy scroll to the top of the document | |
| function goToTop() { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| </script> | |
| <!-- JS FILES --> | |
| <script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit-icons.min.js"></script> | |
| <script src="js/cards.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment