git/TheMathWizard
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

added card view to learning page

Browse source
This commit is contained in:
Patryk Hegenberg 2023-01-08 21:08:14 +01:00
parent a19e40f205
commit 4991e28180
4 changed files with 116 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

6
controllers/learn.php
View file

@ -1,3 +1,9 @@
<?php
$heading = "Learn";
session_start();
if(!isset($_SESSION["username"])){
header("Location: /");
exit;
}
require "views/learn.view.php";

4
controllers/profile.php
View file

@ -1,9 +1,5 @@
<?php
$heading = "profile";
$username = "MatheApp";
$password = "password";
$config = require('config.php');
$db = new Database($config['database'], $username, $password);
session_start();
if(!isset($_SESSION["username"])){

121
views/learn.view.php
View file

@ -1,68 +1,113 @@
<?php require('partials/head.php') ?>
<?php require('partials/nav.php') ?>
<?php require('partials/banner.php') ?>
<div class="isolate bg-white my-10">
<main>
<div class="relative px-6 lg:px-8 min-h-screen">
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
<div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-5">
<!--Card 1-->
<div class="rounded overflow-hidden shadow-lg">
<img class="w-full" src="images/michal-matlon-4ApmfdVo32Q-unsplash.jpg" alt="Addieren">
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Addition</div>
<p class="text-gray-700 text-base">
Übe das Addieren.
</p>
<a href="/addition">
<button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
<div class="font-bold text-xl mb-2 text-center">1 x 1</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
<div class="px-6 pt-4 pb-2">
</div>
</div>
<!--Card 2-->
<div class="rounded overflow-hidden shadow-lg">
<img class="w-full" src="/images/annie-spratt-Y-JCyxFMXbc-unsplash.jpg" alt="Subtrahieren">
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Subtraktion</div>
<p class="text-gray-700 text-base">
Übe das Subtrahieren.
</p>
<button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
</div>
<div class="px-6 pt-4 pb-2">
<div class="font-bold text-xl mb-2 text-center">1 x 2</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 3-->
<div class="rounded overflow-hidden shadow-lg">
<img class="w-full" src="/images/gayatri-malhotra-4wF66_KWJxA-unsplash.jpg" alt="Multiplikation">
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Multiplikation</div>
<p class="text-gray-700 text-base">
Übe das Multiplizieren.
</p>
<button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
</div>
<div class="px-6 pt-4 pb-2">
<div class="font-bold text-xl mb-2 text-center">1 x 3</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg">
<img class="w-full" src="/images/annie-spratt-ORDz1m1-q0I-unsplash.jpg" alt="Division">
<!--Card 4-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Division</div>
<p class="text-gray-700 text-base">
Übe das Dividieren.
</p>
<button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Los geht's</button>
<div class="font-bold text-xl mb-2 text-center">1 x 4</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
<div class="px-6 pt-4 pb-2">
</div>
<!--Card 5-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 5</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 6-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 6</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 7-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 7</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 8-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 8</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 9-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 9</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 10-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 10</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<?php require('partials/footer.php') ?>

2
views/profile.view.php
View file

@ -22,7 +22,7 @@
</div>
</div>
</div>
<div class="nes-container with-title flex-col mt-10 space-y-4">
<div class="nes-container with-title mt-10 space-y-4">
<span class="title">Dein Fortschritt <?php $_SESSION['xp'] ?> </span>
<span>Du bist aktuell Level: <?php echo $_SESSION['level'] ?> </span>