Stundenplan/index.html at main · Androx765/Stundenplan · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag & Drop Stundenplan</title>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }

    .schedule {
        display: grid;
        grid-template-columns: 1fr 3fr; /* Zwei Spalten: Zeit + Einträge */
        grid-auto-rows: auto; /* Jede Zeile hat automatische Höhe */
        gap: 5px; /* Abstand zwischen den Zeilen */
        background: #f4f4f4;
        border: 1px solid #ddd;
        max-width: 600px; /* Optional: Begrenzte Breite */
        margin: auto; /* Zentriere die Timeline */
    }
    .time-slot {
        display: contents; /* Ermöglicht, dass die Zeit- und Inhaltsspalten in der Grid-Struktur aufgeteilt werden */
    }
    .time {
        text-align: right;
        padding: 10px;
        font-weight: bold;
        border-right: 1px solid #ddd; /* Trennlinie */
    }
    .current-time > .time,
    .current-time > .slot-content {
        background-color: rgba(255, 235, 59, 0.2);
        border: 2px solid #ffeb3b;
    }
    .slot-content {
        display: flex;
        flex-direction: column; /* Einträge untereinander */
        gap: 5px; /* Abstand zwischen Einträgen */
    }

    .entry {
        flex: 1; /* Nimmt die gesamte Breite ein */
        width: 100%; /* Sicherheitshalber für die Breite */
        padding: 10px;
        background-color: #28a745; /* Standardfarbe für Eintrag */
        color: #fff;
        text-align: center;
        border-radius: 5px;
        box-sizing: border-box; /* Einschließen von Padding in die Breite */
    }

    .entry[data-type="uni"] {
        background: #007bff;
        color: #fff;
    }
    .entry[data-type="break"] {
        background: #28a745;
        color: #fff;
    }
    .entry[data-type="hobby"] {
        background: #c927e6;
        color: #fff;
    }
    .entry[data-type="sport"] {
        background: #f97f0d;
        color: #fff;
    }

    /* Drag-and-Drop optisches Feedback */
    .slot-content.drag-over {
        background-color: rgba(0, 123, 255, 0.2);
        border: 2px dashed #007bff;
    }
  </style>
</head>
<body>
  <h1>Stundenplan</h1>
  <div id="app"></div>
  <script src="script.js"></script>
</body>
</html>