145 lines
4.3 KiB
Svelte
145 lines
4.3 KiB
Svelte
<script>
|
||
import cards from '../data/cards.json';
|
||
import { fly, fade } from 'svelte/transition';
|
||
import { time, elapsed } from '../JS/time.js';
|
||
|
||
let y;
|
||
let visible = true;
|
||
let hereHands = false;
|
||
|
||
const handleMouseenter = () => (hereHands = true);
|
||
const handleMouseleave = () => (hereHands = false);
|
||
|
||
function typewriter(node, { speed = 1 }) {
|
||
const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
|
||
|
||
if (!valid) {
|
||
throw new Error(`This transition only works on elements with a single text node child`);
|
||
}
|
||
|
||
const text = node.textContent;
|
||
const duration = text.length / (speed * 0.01);
|
||
|
||
return {
|
||
duration,
|
||
tick: (t) => {
|
||
const i = ~~(text.length * t);
|
||
node.textContent = text.slice(0, i);
|
||
}
|
||
};
|
||
}
|
||
|
||
function scrollIntoView({ target }) {
|
||
const el = document.querySelector(target.getAttribute('href'));
|
||
if (!el) return;
|
||
el.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<svelte:window bind:scrollY={y} />
|
||
<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} />
|
||
|
||
|
||
|
||
<div>
|
||
<img
|
||
class:curious={hereHands}
|
||
class="hands z-0 w-screen"
|
||
alt="logo"
|
||
src="/src/pictures/hands.png"
|
||
/>
|
||
<div class="h-screen bg-[url('/src/pictures/background.svg')] grid content-center">
|
||
<div class=" mobile:mx-auto">
|
||
<img class="mobile:object-cover mobile:w-32 mobile:h-3/5 mobile:mx-auto" src="/src/pictures/logo.svg" alt="logo">
|
||
<h1 class="mobile:text-6xl mobile:text-center">
|
||
Daddy
|
||
</h1>
|
||
</div>
|
||
<div class="h-20">
|
||
{#if $elapsed > 1}
|
||
<h3 transition:typewriter class="text-center w-3/4 mx-auto">
|
||
Application de gestion des Dossiers d’Aide à la Décision
|
||
</h3>
|
||
{/if}
|
||
</div>
|
||
<a href="#cards" on:click|preventDefault={scrollIntoView} class="bg-tahiti text-white font-bold px-2 pt-2 pb-4 rounded-full w-11 mx-auto text-6xl">
|
||
↓
|
||
</a>
|
||
</div>
|
||
<div id="cards" class='bg-white h-screen flex z-50' style="position: relative">
|
||
{#if y>=2}
|
||
<div transition:fly={{ y: 200, duration: 2000 }} class="w-full flex flex-wrap justify-center">
|
||
{#each cards.cards as { title, text, picto }, i}
|
||
<div class="max-w-sm rounded overflow-hidden shadow-lg my-auto mx-5 w-96 mobile:h-36 bg-gradient-to-t from-tahitilight">
|
||
<div class="px-6 py-4">
|
||
<div class="p-5 bg-tahiti rounded-lg w-24 mb-4">
|
||
<img src="/src/pictures/{picto}" alt="{picto}">
|
||
</div>
|
||
<div class="font-bold text-xl mb-2">{title}</div>
|
||
<p class="mobile:hidden text-gray-700 text-base">
|
||
{text}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!--<div class="max-w-sm rounded overflow-hidden shadow-lg my-auto mx-5 w-96 h-96 bg-gradient-to-t from-tahitilight">
|
||
<div class="px-6 py-4">
|
||
<div class="p-5 bg-tahiti rounded-lg w-24 mb-4">
|
||
<img src="/src/pictures/{picto}" alt="{picto}">
|
||
</div>
|
||
<div class="font-bold text-xl mb-2">{title}</div>
|
||
<p class="text-gray-700 text-base">
|
||
{text}
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
{/each}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="h-screen h-96 bg-tahitilight">
|
||
<div class="container mx-auto py-40 justify-evenly">
|
||
<img src="/src/pictures/manjaro_menu.jpg" class="object-scale-down h-80" >
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<style lang="postcss">
|
||
:global(html) {
|
||
background-color: theme(colors.white);
|
||
}
|
||
|
||
.hands {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -60px;
|
||
transform: translate(0%, 40%);
|
||
transform-origin: 100% 100%;
|
||
transition: transform 0.4s;
|
||
}
|
||
|
||
.curious {
|
||
transform: translate(0%, 0);
|
||
}
|
||
|
||
.center {
|
||
margin: 0;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
-ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
</style> |