ManuelW/Lerndatenbank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

File for classes created.

Browse Source 
class to check for logged in user created
This commit is contained in:
Manuel Weiser
2024-08-06 19:06:09 +02:00
parent 0e55fd55fd
commit 751c67c05b
7 changed files with 199 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
lernplattform/templates/index.html
View File

@ -3,29 +3,49 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Media Layout</title>
<title>Lernplattform EMT/Paramedic</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
:root {
--primary-color: #102037; /* Definieren Sie die primäre Farbe */
--secondary-color: #f78b47; /* Definieren Sie die sekundäre Farbe */
--link-default-color: #ffffff; /* Definieren Sie die Link-Hover-Farbe */
--link-hover-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
--link-active-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
--background-color: #d4c4c4; /* Definieren Sie die Hintergrundfarbe */
--nav-background-color: #102037; /* Definieren Sie die Hintergrundfarbe */
--box-background-color: #102037;
}
body {
color: #ffffff;
}
.light {
color: #888888;
font-weight: 100;
font-size: small;
}
.sidebar {
height: 100%;
position: sticky;
top: 0;
background-color: #f0f2f5;
background-color: var(--background-color);
}
.main-content {
background-color: #f0f2f5;
padding: 20px;
background-color: var(--background-color);
}
.profile-card,
.story,
.post,
.who-to-follow,
.news {
background-color: #ffffff;
background-color: var(--box-background-color);
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.headbar {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.profile-card img,
.who-to-follow img {
@ -48,64 +68,59 @@
.who-to-follow button {
border-radius: 20px;
}
.navbar,
footer,
.navbar {
background-color: var(--nav-background-color);
padding: 0;
}
.navbar-nav .nav-link {
color: var(--link-default-color)
}
.navbar-nav .nav-link:hover {
color: var(--link-hover-color);
}
.navbar-nav .nav-link.active {
color: var(--link-active-color);
}
.logo {
display:inline;
width: 50px;
margin: 0;
padding: 0;
}
.footer {
background-color: var(--nav-background-color);
padding: 0;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
}
body {
background-color: #f0f2f5;
background-color: var(--background-color);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/30" alt="Logo" /></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Demo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Network</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
</form>
</div>
</div>
</nav>
{% include 'nav.html' %}
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-12 col-md-3 sidebar mb-3">
<div class="profile-card text-center p-3">
<img src="https://via.placeholder.com/100" alt="Profile Picture" />
<h5>Sam Lanson</h5>
<!--<img src="https://via.placeholder.com/100" alt="Profile Picture" />-->
<h5>{{ user_name }}</h5>
<p>Web Developer at Webestica</p>
<p class="text-muted">I'd love to change the world, but they won’t give me the source code.</p>
<p class="light">I'd love to change the world, but they won’t give me the source code.</p>
<div class="d-flex justify-content-around">
<span>256 Posts</span>
<span>2.5K Followers</span>
<span>365 Following</span>
</div>
</div>
<!--
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Feed</a>
<a href="#" class="list-group-item list-group-item-action">Connections</a>
@ -115,12 +130,15 @@
<a href="#" class="list-group-item list-group-item-action">Notifications</a>
<a href="#" class="list-group-item list-group-item-action">Settings</a>
</div>
-->
</div>
<!-- Main Content -->
<div class="col-12 col-md-6 main-content mb-3">
<!-- Post a Story -->
<div class="story p-3 shadow-sm">
<!--
<div class="story p-3">
<div class="d-flex align-items-center">
<img
src="https://via.placeholder.com/50"
@ -135,19 +153,23 @@
<button class="btn btn-outline-primary">Feeling/Activity</button>
</div>
</div>
-->
<!-- Posts -->
<div class="post p-3 shadow-sm">
<div class="post p-3">
<div class="d-flex">
<img
src="https://via.placeholder.com/50"
src="../static/images/logo.png"
class="rounded-circle me-3"
style="width: 300px;"
alt="Profile Picture" />
<div>
<h6>Lori Ferguson</h6>
<small class="text-muted">Web Developer at Webestica • 2hr</small>
<h6>Lernplattform für <br>Rettungs- und Notfallsanitäter</h6>
<small class="light">Hier kann man lernen und üben, Wiessen festigen und sich aktiv an der Datenbank beteiligen.</small>
</div>
</div>
<p class="mt-3">
I'm thrilled to share that I've completed a graduate certificate course in project
management with the president's honor roll.
@ -159,16 +181,16 @@
<!-- Right Sidebar -->
<div class="col-12 col-md-3 mb-3">
<!-- Who to Follow -->
<div class="who-to-follow p-3 shadow-sm">
<h6>Who to follow</h6>
<div class="who-to-follow p-3">
<h6>Lernfelder</h6>
<div class="d-flex align-items-center my-2">
<img
src="https://via.placeholder.com/50"
class="rounded-circle me-3"
alt="Profile Picture" />
<div>
<h6 class="mb-0">Judy Nguyen</h6>
<small class="text-muted">News anchor</small>
<h6 class="mb-0">Anatomie</h6>
<small class="light">RettSan</small>
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
@ -178,8 +200,8 @@
class="rounded-circle me-3"
alt="Profile Picture" />
<div>
<h6 class="mb-0">Amanda Reed</h6>
<small class="text-muted">Web Developer</small>
<h6 class="mb-0">Medikamente</h6>
<small class="light">NotSan</small>
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
@ -189,31 +211,28 @@
class="rounded-circle me-3"
alt="Profile Picture" />
<div>
<h6 class="mb-0">Billy Vasquez</h6>
<small class="text-muted">News anchor</small>
<h6 class="mb-0">Herzkreislauf</h6>
<small class="light">RettSan</small>
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
<div class="text-center mt-3">
<button class="btn btn-link">View more</button>
<button class="btn btn-link">Mehr Lernfelder</button>
</div>
</div>
<!-- Today's News -->
<div class="news p-3 shadow-sm">
<h6>Today's news</h6>
<div class="news p-3">
<h6>Datenbank - Inhalte</h6>
<ul class="list-unstyled">
<li class="mb-2">
Ten questions you should answer truthfully <small class="text-muted">2hr</small>
Lernfelder <small class="light">3</small>
</li>
<li class="mb-2">
Five unbelievable facts about money <small class="text-muted">3hr</small>
Fragen RettSan <small class="light">38</small>
</li>
<li class="mb-2">
Best Pinterest Boards for learning about business <small class="text-muted">4hr</small>
</li>
<li class="mb-2">
Skills that you can learn from ... <small class="text-muted">4hr</small>
Fragen NotSan <small class="light">40</small>
</li>
</ul>
</div>
@ -221,9 +240,9 @@
</div>
</div>
<footer class="bg-white text-center py-3 shadow-sm mt-3">
<footer class="footer text-center py-3 mt-3">
<div class="container">
<small>© 2024 Webestica. Alle Rechte vorbehalten.</small>
<small>© 2024 Manuel Weiser. Alle Rechte vorbehalten.</small>
</div>
</footer>

34
lernplattform/templates/nav.html Normal file
View File

@ -0,0 +1,34 @@
<nav class="navbar navbar-expand-lg navbar-light shadow-sm mb-3">
<div class="container-fluid headbar">
<a class="navbar-brand" href="/"><img src="../static/images/logo.png" alt="EMT Paramedic Learn" class="logo" /></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lernfelder</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche" />
</form>
</div>
</div>
</nav>