271 lines
12 KiB
HTML
271 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SloudApps</title>
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
|
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<script src="js/tailwindcss.js"></script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.items_navbar {
|
|
@apply px-4 py-3 md:px-2 md:py-1 rounded-md md:text-base hover:text-blue-500 hover:bg-gray-100 dark:hover:text-blue-400 dark:hover:bg-gray-700 transition;
|
|
}
|
|
|
|
.btns_download {
|
|
@apply w-full px-4 py-2 sm:py-3 md:px-6 md:py-3 text-xl sm:text-lg md:text-base text-white font-medium bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 rounded-xl transition;
|
|
}
|
|
|
|
.wrapper_card {
|
|
@apply p-8 bg-gray-100 dark:bg-gray-800 rounded-2xl;
|
|
}
|
|
|
|
.container_card {
|
|
@apply relative grid md:flex md:justify-between items-center gap-3;
|
|
}
|
|
|
|
.info_card {
|
|
@apply relative grid gap-3;
|
|
}
|
|
|
|
.img_card {
|
|
@apply xs:h-40 sm:h-full md:w-40 md:h-40 rounded-2xl object-cover;
|
|
}
|
|
|
|
.title_card {
|
|
@apply sm:text-lg md:text-2xl font-medium dark:text-gray-100;
|
|
}
|
|
|
|
.descr_card {
|
|
@apply text-xs sm:text-base md:text-lg text-gray-400 dark:text-gray-400;
|
|
}
|
|
|
|
.dropdown_card {
|
|
@apply absolute top-9 md:top-10 md:-right-5 mt-2 w-full h-min md:w-40 bg-white dark:bg-gray-700 rounded-xl z-10 shadow-lg;
|
|
}
|
|
|
|
.items-dropdown_card {
|
|
@apply block px-4 py-2 rounded-xl hover:bg-blue-100 dark:hover:bg-gray-600 transition;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
xs: "400px",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="dark:bg-gray-900 dark:text-gray-200">
|
|
<nav
|
|
class="fixed top-0 w-full h-min px-10 py-4 bg-white dark:bg-gray-900 border-b dark:border-gray-700 z-50"
|
|
>
|
|
<div class="relative flex justify-between items-center">
|
|
<h3
|
|
class="sm:text-lg md:text-2xl font-medium dark:text-gray-100"
|
|
>
|
|
SloudApps
|
|
</h3>
|
|
<ul
|
|
class="list-navbar hidden absolute md:relative top-7 md:top-0 right-0 grid md:flex md:items-center gap-2 p-2 md:p-2 bg-white dark:bg-gray-800 border md:border-0 md:bg-transparent md:dark:bg-transparent rounded-md z-10"
|
|
>
|
|
<li class="items_navbar dark:text-gray-300">
|
|
<a href="https://sloud.pl/"> Strona Główna </a>
|
|
</li>
|
|
<li class="items_navbar dark:text-gray-300">
|
|
<a href="https://status.sloud.pl/"> Status </a>
|
|
</li>
|
|
<li class="items_navbar dark:text-gray-300">
|
|
<a href="https://speedtest.sloudhost.ovh/">
|
|
Speedtest
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<button
|
|
class="dark-theme w-full h-12 md:w-8 md:h-8 hover:text-blue-500 dark:hover:text-blue-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition"
|
|
>
|
|
<i class="fa-solid fa-moon hidden dark:block"></i>
|
|
<i class="fa-solid fa-sun hidden dark:hidden"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<button class="hamburger md:hidden">
|
|
<i class="fa-solid fa-bars text-lg"></i>
|
|
<i class="fa-solid fa-xmark text-lg hidden"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main class="mt-20 mb-10 px-10 py-5 bg-gray-50 dark:bg-gray-900">
|
|
<h1 class="mb-6 text-5xl font-medium dark:text-gray-100">
|
|
Aplikacje
|
|
</h1>
|
|
<div
|
|
class="grid sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-5"
|
|
>
|
|
<div class="wrapper_card">
|
|
<div class="container_card">
|
|
<div class="info_card">
|
|
<img
|
|
src="./img/speedtest.png"
|
|
alt="speedtest"
|
|
class="img_card"
|
|
/>
|
|
<div class="grid content-center">
|
|
<h6 class="title_card">SpeedTest</h6>
|
|
<p class="descr_card">
|
|
Simple SpeedTest
|
|
<br/>
|
|
Version: 1.0.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="btns_download">Download</button>
|
|
<div class="dropdown_card hidden">
|
|
<ul class="text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="https://speedtest.sloudhost.ovh/" class="items-dropdown_card"
|
|
><i
|
|
class="fa-solid fa-globe"
|
|
></i>
|
|
Web</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://node1.sloudhost.ovh/apps/SloudSpeedTest.apk" class="items-dropdown_card"
|
|
><i
|
|
class="fa-brands fa-android"
|
|
></i>
|
|
Android</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper_card">
|
|
<div class="container_card">
|
|
<div class="info_card">
|
|
<img
|
|
src="./img/app.png"
|
|
alt="app"
|
|
class="img_card"
|
|
/>
|
|
<div class="grid content-center">
|
|
<h6 class="title_card">Example name of app</h6>
|
|
<p class="descr_card">
|
|
Description for app
|
|
<br />
|
|
Version: 1.0.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="btns_download">Download</button>
|
|
<div class="dropdown_card hidden">
|
|
<ul class="text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i
|
|
class="fa-brands fa-windows"
|
|
></i>
|
|
Windows</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i class="fa-brands fa-linux"></i>
|
|
Linux</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i
|
|
class="fa-brands fa-android"
|
|
></i>
|
|
Android</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper_card">
|
|
<div class="container_card">
|
|
<div class="info_card">
|
|
<img
|
|
src="./img/app.png"
|
|
alt="app"
|
|
class="img_card"
|
|
/>
|
|
<div class="grid content-center">
|
|
<h6 class="title_card">Example name of app</h6>
|
|
<p class="descr_card">
|
|
Description for app
|
|
<br />
|
|
Version: 1.0.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="btns_download">Download</button>
|
|
<div class="dropdown_card hidden">
|
|
<ul class="text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i
|
|
class="fa-brands fa-windows"
|
|
></i>
|
|
Windows</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i class="fa-brands fa-linux"></i>
|
|
Linux</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="items-dropdown_card"
|
|
><i
|
|
class="fa-brands fa-android"
|
|
></i>
|
|
Android</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="px-10 py-5 border-t dark:border-gray-700">
|
|
<p class="text-sm md:text-base dark:text-gray-300">
|
|
Made by: SloudPL & LakioLive
|
|
</p>
|
|
<p class="text-sm md:text-base dark:text-gray-300">
|
|
Copyright SLOUD.PL © 2024
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
|
|
<script src="./js/darkTheme.js"></script>
|
|
<script src="./js/dropdown.js"></script>
|
|
<script src="./js/hamburger.js"></script>
|
|
</html>
|