Skip to content

Commit

Permalink
redo stylings
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaHaWo
MaHaWo committed Aug 21, 2024
1 parent 4e837b2 commit c4fa445
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 64 deletions.
71 changes: 36 additions & 35 deletions src/lib/components/AbstractContent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,14 @@
NavUl,
Tooltip
} from 'flowbite-svelte';
import {
CaretLeftSolid,
CaretRightSolid,
LightbulbSolid,
MoonSolid,
SunSolid
} from 'flowbite-svelte-icons';
// logo
import logo_dark from '../assets/mondey_dark.svg';
import logo_light from '../assets/mondey_light.svg';
Expand All @@ -32,51 +31,53 @@
export let nextpage = '/';
export let infopage = '/';
export let name = 'Registrieren';
export let userName = 'Registrieren';
</script>

<!-- Top element: basic navigation-->
<Navbar>
<NavBrand href="/">
<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
</NavBrand>
<NavHamburger />
<NavUl
ulClass="flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium"
>
<NavLi href="/" active={true}>Home</NavLi>
<NavLi href="/">Aktuelles</NavLi>
<NavLi href="/">Downloads</NavLi>
<NavLi href="/">Kontakt</NavLi>
<DarkMode
class="rounded-lg p-2 text-xl text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
,
>
<MoonSolid slot="darkIcon" />
<SunSolid slot="lightIcon" />
</DarkMode>
<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
</NavUl>
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<Avatar
class="space-y-1 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
rounded
border
/>
<div class="flex items-center space-x-4 rtl:space-x-reverse">{name}</div>
<Tooltip>Registrieren oder einloggen</Tooltip>
<Navbar class="overflow-x-auto whitespace-nowrap">
<div class="flex flex-nowrap items-center space-x-4 rtl:space-x-reverse">
<NavBrand href="/">
<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
</NavBrand>
<NavHamburger />
<NavUl ulClass="flex flex-row space-x-4 rtl:space-x-reverse md:text-lg md:font-medium">
<NavLi href="/" active={true}>Home</NavLi>
<NavLi href="/">Aktuelles</NavLi>
<NavLi href="/">Downloads</NavLi>
<NavLi href="/">Kontakt</NavLi>
<DarkMode
class="rounded-lg p-2 text-xl text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
>
<MoonSolid slot="darkIcon" />
<SunSolid slot="lightIcon" />
</DarkMode>
<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
</NavUl>
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<Avatar
class="space-y-1 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
rounded
border
/>
<div class="flex items-center space-x-4 rtl:space-x-reverse">{userName}</div>
<Tooltip>Registrieren oder einloggen</Tooltip>
</div>
</div>
</Navbar>

<!--Page content goes here-->
<div class="mx-auto max-w-6xl p-4">
<div class="mx-auto max-w-6xl flex-1 overflow-y-auto p-4 pb-20">
<slot></slot>
</div>

{#if showBottomNavbar}
<!-- bottom element: back, info and next buttons-->
<BottomNav position="absolute" classInner="grid-cols-3">
<BottomNav
class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
classInner="grid-cols-3"
>
<BottomNavItem
href={lastpage}
btnName="Zurück"
Expand Down
104 changes: 75 additions & 29 deletions src/lib/components/Frontpage.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,107 @@
<script>
import { Button, Card, Gallery } from 'flowbite-svelte';
import { ArrowRightOutline } from 'flowbite-svelte-icons';
// Define the styles for the header, paragraph, arrow, and button
const headerStyle = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
const paragraphStyle = 'mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight';
const arrowStyle = 'ms-2 h-6 w-6 text-white';
const buttonStyle = 'w-fit';
const galleryStyle = 'grid-cols-1 md:grid-cols-2 gap-y-12';
const cardStyle = 'p-6 m-4 w-full';
</script>

<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
<Gallery class={galleryStyle}>
<Card class={cardStyle}>
<h5 class={headerStyle}>Was ist Mondey?</h5>
<p class={paragraphStyle}>
<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Was ist Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
Kindern bis 6 Jahren.
</p>
<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class={cardStyle}>
<h5 class={headerStyle}>Wozu ist Mondey gut?</h5>
<p class={paragraphStyle}>
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wozu ist Mondey gut?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum
Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt
einem übersichtlichen Ampelsystem.
</p>
<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class={cardStyle}>
<h5 class={headerStyle}>Was umfasst Mondey?</h5>
<p class={paragraphStyle}>
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Was umfasst Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i>Mondey</i> umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis
6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale
Beziehungen.
</p>
<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class={cardStyle}>
<h5 class={headerStyle}>Wie funktioniert Mondey?</h5>
<p class={paragraphStyle}>
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wie funktioniert Mondey?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
Liste von Fragen.
</p>
<Button class={buttonStyle}>Mehr Info <ArrowRightOutline class={arrowStyle} /></Button>
<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class={cardStyle}>
<h5 class={headerStyle}>Wo fange ich an?</h5>
<p class={paragraphStyle}>
<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Wo fange ich an?
</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.
</p>
<Button class={buttonStyle}>Los geht's <ArrowRightOutline class={arrowStyle} /></Button>
<Button class="w-fit">Los geht's <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>

<Card class="m-4 w-full p-6">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">dummy?</h5>
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
<i
>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio
facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
</i>
</p>
<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
</Card>
</Gallery>

0 comments on commit c4fa445

Please sign in to comment.