ManuelW/Lerndatenbank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
41a1bb3530
Lerndatenbank/lernplattform/templates/index.html

296 lines
13 KiB
HTML
Raw Normal View History

Initial Commit
2024-08-05 16:36:41 +02:00
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<title>Lernplattform EMT/Paramedic</title>
Initial Commit
2024-08-05 16:36:41 +02:00
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
: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;
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
background-color: var(--background-color);
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
}
.light {
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
color: #cdcdcd;
font-weight: 400;
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
font-size: small;
}
Initial Commit
2024-08-05 16:36:41 +02:00
.sidebar {
height: 100%;
position: sticky;
top: 0;
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
background-color: var(--background-color);
Initial Commit
2024-08-05 16:36:41 +02:00
}
.main-content {
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
background-color: var(--background-color);
Initial Commit
2024-08-05 16:36:41 +02:00
}
.profile-card,
.story,
.post,
.who-to-follow,
.news {
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
background-color: var(--box-background-color);
Initial Commit
2024-08-05 16:36:41 +02:00
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.headbar {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
Initial Commit
2024-08-05 16:36:41 +02:00
}
.profile-card img,
.who-to-follow img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
}
.story input {
border-radius: 30px;
}
.story button {
border-radius: 20px;
}
.post img {
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.who-to-follow button {
border-radius: 20px;
}
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
.navbar {
background-color: var(--nav-background-color);
padding: 0;
}
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
.navbar-nav .nav-link {
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
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);
}
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
a {
color: #ffcc00;
}
a:hover {
color: #c07427;
}
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
.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);
}
Initial Commit
2024-08-05 16:36:41 +02:00
</style>
</head>
<body>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
{% include 'nav.html' %}
Initial Commit
2024-08-05 16:36:41 +02:00
<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">
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
<!-- wenn logged out -->
{% if not session['logged_in'] %}
<h5>{{ user_name }}</h5>
<p>Login oder <a href="#">Registrieren</a></p>
<p class="light">Warum registrieren? Zum Schutz der Daten und dem Speichern deines Lernfortschrittes.</p>
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-3 col-form-label">Benutzer</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" class="btn btn-primary">Einloggen</button>
</form>
{% endif %}
<!-- wenn logged out -->
<!-- wenn logged in -->
{% if session['logged_in'] %}
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<!--<img src="https://via.placeholder.com/100" alt="Profile Picture" />-->
<h5>{{ user_name }}</h5>
Initial Commit
2024-08-05 16:36:41 +02:00
<p>Web Developer at Webestica</p>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<p class="light">I'd love to change the world, but they won’t give me the source code.</p>
Initial Commit
2024-08-05 16:36:41 +02:00
<div class="d-flex justify-content-around">
<span>256 Posts</span>
<span>2.5K Followers</span>
<span>365 Following</span>
</div>
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
{% endif %}
<!-- wenn logged in -->
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<!--
Initial Commit
2024-08-05 16:36:41 +02:00
<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>
<a href="#" class="list-group-item list-group-item-action">Latest News</a>
<a href="#" class="list-group-item list-group-item-action">Events</a>
<a href="#" class="list-group-item list-group-item-action">Groups</a>
<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>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
-->
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
<!-- Main Content -->
<div class="col-12 col-md-6 main-content mb-3">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
Initial Commit
2024-08-05 16:36:41 +02:00
<!-- Post a Story -->
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<!--
<div class="story p-3">
Initial Commit
2024-08-05 16:36:41 +02:00
<div class="d-flex align-items-center">
<img
src="https://via.placeholder.com/50"
class="rounded-circle me-3"
alt="Profile Picture" />
<input type="text" class="form-control" placeholder="Share your thoughts..." />
</div>
<div class="d-flex justify-content-around mt-3">
<button class="btn btn-outline-primary">Photo</button>
<button class="btn btn-outline-primary">Video</button>
<button class="btn btn-outline-primary">Event</button>
<button class="btn btn-outline-primary">Feeling/Activity</button>
</div>
</div>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
-->
Initial Commit
2024-08-05 16:36:41 +02:00
<!-- Posts -->
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<div class="post p-3">
Initial Commit
2024-08-05 16:36:41 +02:00
<div class="d-flex">
<img
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
src="../static/images/logo.png"
Initial Commit
2024-08-05 16:36:41 +02:00
class="rounded-circle me-3"
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
style="width: 300px; height: 300px;"
Initial Commit
2024-08-05 16:36:41 +02:00
alt="Profile Picture" />
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
<div class="my-3">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<h6>Lernplattform für <br>Rettungs- und Notfallsanitäter</h6>
Linker Block je nach Login Status
2024-08-06 20:11:36 +02:00
<p class="light" style="text-align: justify;">
Willkommen auf unserer Lernplattform für Rettungssanitäter und Notfallsanitäter,
basierend auf dem bewährten Kartensystem nach Leitner.
Unsere Plattform bietet Dir die Möglichkeit,
Deine Kenntnisse und Fähigkeiten effektiv zu vertiefen und zu erweitern. <br><br>
Bei Interesse bist Du herzlich eingeladen, an der Entwicklung von Fragen und Aufgaben mitzuwirken.
Unsere Plattform ist und bleibt kostenlos, um alle Mitarbeiter im Rettungsdienst bestmöglich zu unterstützen.
</p>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
</div>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
Initial Commit
2024-08-05 16:36:41 +02:00
<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.
</p>
<img src="https://via.placeholder.com/600x300" alt="Post Image" />
</div>
</div>
<!-- Right Sidebar -->
<div class="col-12 col-md-3 mb-3">
<!-- Who to Follow -->
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<div class="who-to-follow p-3">
<h6>Lernfelder</h6>
Initial Commit
2024-08-05 16:36:41 +02:00
<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>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<h6 class="mb-0">Anatomie</h6>
<small class="light">RettSan</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
<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>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<h6 class="mb-0">Medikamente</h6>
<small class="light">NotSan</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
<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>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<h6 class="mb-0">Herzkreislauf</h6>
<small class="light">RettSan</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
<button class="btn btn-outline-primary ms-auto">+</button>
</div>
<div class="text-center mt-3">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<button class="btn btn-link">Mehr Lernfelder</button>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
</div>
<!-- Today's News -->
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<div class="news p-3">
<h6>Datenbank - Inhalte</h6>
Initial Commit
2024-08-05 16:36:41 +02:00
<ul class="list-unstyled">
<li class="mb-2">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
Lernfelder <small class="light">3</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</li>
<li class="mb-2">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
Fragen RettSan <small class="light">38</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</li>
<li class="mb-2">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
Fragen NotSan <small class="light">40</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</li>
</ul>
</div>
</div>
</div>
</div>
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<footer class="footer text-center py-3 mt-3">
Initial Commit
2024-08-05 16:36:41 +02:00
<div class="container">
File for classes created. class to check for logged in user created
2024-08-06 19:06:09 +02:00
<small>© 2024 Manuel Weiser. Alle Rechte vorbehalten.</small>
Initial Commit
2024-08-05 16:36:41 +02:00
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink