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" />
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<title>Lernplattform EMT/Paramedic</title>
|
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>
|
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;
|
|
|
|
|
}
|
|
|
|
|
.light {
|
|
|
|
|
color: #888888;
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
font-size: small;
|
|
|
|
|
}
|
2024-08-05 16:36:41 +02:00
|
|
|
|
.sidebar {
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
2024-08-06 19:06:09 +02:00
|
|
|
|
background-color: var(--background-color);
|
2024-08-05 16:36:41 +02:00
|
|
|
|
}
|
|
|
|
|
.main-content {
|
2024-08-06 19:06:09 +02:00
|
|
|
|
background-color: var(--background-color);
|
2024-08-05 16:36:41 +02:00
|
|
|
|
}
|
|
|
|
|
.profile-card,
|
|
|
|
|
.story,
|
|
|
|
|
.post,
|
|
|
|
|
.who-to-follow,
|
|
|
|
|
.news {
|
2024-08-06 19:06:09 +02:00
|
|
|
|
background-color: var(--box-background-color);
|
2024-08-05 16:36:41 +02:00
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
margin-bottom: 20px;
|
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);
|
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;
|
|
|
|
|
}
|
2024-08-06 19:06:09 +02:00
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-05 16:36:41 +02:00
|
|
|
|
body {
|
2024-08-06 19:06:09 +02:00
|
|
|
|
background-color: var(--background-color);
|
2024-08-05 16:36:41 +02:00
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
|
|
|
|
|
{% include 'nav.html' %}
|
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">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<!--<img src="https://via.placeholder.com/100" alt="Profile Picture" />-->
|
|
|
|
|
<h5>{{ user_name }}</h5>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
<p>Web Developer at Webestica</p>
|
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>
|
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>
|
|
|
|
|
</div>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<!--
|
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>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
-->
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
|
|
<div class="col-12 col-md-6 main-content mb-3">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
|
2024-08-05 16:36:41 +02:00
|
|
|
|
<!-- Post a Story -->
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<!--
|
|
|
|
|
<div class="story p-3">
|
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>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
-->
|
2024-08-05 16:36:41 +02:00
|
|
|
|
|
|
|
|
|
<!-- Posts -->
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<div class="post p-3">
|
|
|
|
|
|
2024-08-05 16:36:41 +02:00
|
|
|
|
<div class="d-flex">
|
|
|
|
|
<img
|
2024-08-06 19:06:09 +02:00
|
|
|
|
src="../static/images/logo.png"
|
2024-08-05 16:36:41 +02:00
|
|
|
|
class="rounded-circle me-3"
|
2024-08-06 19:06:09 +02:00
|
|
|
|
style="width: 300px;"
|
2024-08-05 16:36:41 +02:00
|
|
|
|
alt="Profile Picture" />
|
|
|
|
|
<div>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<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>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
|
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 -->
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<div class="who-to-follow p-3">
|
|
|
|
|
<h6>Lernfelder</h6>
|
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>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<h6 class="mb-0">Anatomie</h6>
|
|
|
|
|
<small class="light">RettSan</small>
|
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>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<h6 class="mb-0">Medikamente</h6>
|
|
|
|
|
<small class="light">NotSan</small>
|
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>
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<h6 class="mb-0">Herzkreislauf</h6>
|
|
|
|
|
<small class="light">RettSan</small>
|
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">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<button class="btn btn-link">Mehr Lernfelder</button>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Today's News -->
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<div class="news p-3">
|
|
|
|
|
<h6>Datenbank - Inhalte</h6>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
<li class="mb-2">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
Lernfelder <small class="light">3</small>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</li>
|
|
|
|
|
<li class="mb-2">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
Fragen RettSan <small class="light">38</small>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</li>
|
|
|
|
|
<li class="mb-2">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
Fragen NotSan <small class="light">40</small>
|
2024-08-05 16:36:41 +02:00
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<footer class="footer text-center py-3 mt-3">
|
2024-08-05 16:36:41 +02:00
|
|
|
|
<div class="container">
|
2024-08-06 19:06:09 +02:00
|
|
|
|
<small>© 2024 Manuel Weiser. Alle Rechte vorbehalten.</small>
|
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>
|