Cards für Kurse hinzugefühgt

prof/uebersicht.html

@@ -18,7 +18,7 @@ setUserData(couchDB);
 		Meine Kurse
 	</div>
 	<div>
-		<button class="Auswertung" onclick='location.href = "./auswertung.html?user=" + userData.name'>
+		<button class="auswertung" onclick='location.href = "./auswertung.html?user=" + userData.name'>
 			Auswertungen
 		</button>
 	</div>
@@ -33,11 +33,26 @@ setUserData(couchDB);
 <div class="header_bar_1_placeholder"></div>
 
 <content>
-
+	<div class="course-card">
+		<div class="course-title">
+			HCI
+		</div>
+		<div class="course-description">
+			hier lernt man sehr viel 
+		</div>
+		<div>
+			<button class="action start">
+				Umfrage Starten
+			</button>
+			<button class="action edit">
+				✎
+			</button>
+		</div>
+	</div>
 </content>
 
 <style>
-button.Auswertung {
+button.auswertung {
 	font-size: 20px;
 	padding: 15px;
 	padding-left: 40px;
@@ -48,20 +63,84 @@ button.Auswertung {
 	cursor: pointer;
 }
 
-button.Auswertung:focus-visible {
+button.auswertung:focus-visible {
 	outline: 2px var(--accent_color_fg_o);
 	outline-offset: 2px;
 }
 
-button.Auswertung:hover {
+button.auswertung:hover {
 	background: var(--accent_color_bg_o);
 	border-radius: var(--border-radius);
 }
 
 .course-card {
-	width: 300px;
-	padding 16px;
+	position: relative;
+	width: 800px;
+	min-height: 300px;
+	padding: 16px;
+	background: var(--accent_color_bg_o);
+	border-radius: 12px;
+	box-shadow: var(--def-shadow);
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
 
+.course-title {
+	margin: 0;
+	padding: 10px;
+	font-size: 25px;
+	font-weight: bold;
+}
+
+.course-description {
+	margin: 0;
+	font-size: 20px;
+	padding: 10px;
+}
+
+.course-actions {
+	display: flex;
+	gap: 10px;
+	margin-top: auto;
+}
+
+.action {
+	padding: 8px;
+	border: none;
+	border-radius: 8px;
+	cursor: pointer;
+	font-size: 20px;
+}
+
+.action.start {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	font-size: 20px;
+	border-radius: var(--border-radius);
+	background-color: var(--accent_color_bg);
+}
+
+.action.start:hover {
+	background: var(--accent_color_bg_o);
+	border-radius: var(--border-radius);
+}
+
+.action.edit {
+	position: absolute;
+	bottom: 16px;
+	right: 16px;
+	font-size: 25px;
+	padding-left: 12px;
+	padding-right: 12px;
+	border-radius: var(--border-radius);
+	background-color: var(--accent_color_bg);
+}
+
+.action.edit:hover {
+	background: var(--accent_color_bg_o);
+	border-radius: var(--border-radius);
 }
 </style>