From 1462d7ab108be7ff34b2c57684cf730db65be63e Mon Sep 17 00:00:00 2001 From: thunic Date: Fri, 19 May 2023 00:50:49 +0200 Subject: [PATCH] changed many things, creating base --- main.py | 40 +++-------- static/css/styles.css | 87 +++++++++++----------- static/js/projekte.js | 38 ++++++++++ static/js/script.js | 0 templates/Irgendwann.html | 92 ------------------------ templates/index.html | 144 ++++++++----------------------------- templates/neuigkeiten.html | 0 templates/projekte.html | 37 ++++++++++ 8 files changed, 156 insertions(+), 282 deletions(-) create mode 100644 static/js/projekte.js create mode 100644 static/js/script.js delete mode 100644 templates/Irgendwann.html create mode 100644 templates/neuigkeiten.html create mode 100644 templates/projekte.html diff --git a/main.py b/main.py index d28dac9..279ffe2 100644 --- a/main.py +++ b/main.py @@ -1,40 +1,18 @@ -import logging -from flask import Flask, render_template, request -from flask_socketio import SocketIO, emit +from flask import Flask, render_template app = Flask(__name__) -app.config['SECRET_KEY'] = 'geheimeschluessel' -socketio = SocketIO(app) - -# Beispiel-Datenquelle -table_data = [ - {"id": 1, "name": "Alice", "age": 25}, - {"id": 2, "name": "Bob", "age": 30}, - {"id": 3, "name": "Charlie", "age": 35} -] - -# Konfiguriere das Logging -logging.basicConfig(level=logging.DEBUG) -logger = logging.getLogger(__name__) @app.route('/') def index(): - return render_template('index.html', table_data=table_data) + return render_template('index.html') -@app.route('/update_table', methods=['POST']) -def update_table(): - updated_data = request.json - for row in updated_data: - row_id = row['id'] - for entry in table_data: - if entry['id'] == row_id: - entry['name'] = row['name'] - entry['age'] = row['age'] - break +@app.route('/projekte') +def projekte(): + return render_template('projekte.html') - socketio.emit('table_update', table_data, broadcast=True) - logger.info('Daten aktualisiert: %s', table_data) # Logge die aktualisierten Daten - return 'Daten aktualisiert' +@app.route('/neuigkeiten') +def neuigkeiten(): + return render_template('neuigkeiten.html') if __name__ == '__main__': - socketio.run(app) + app.run() diff --git a/static/css/styles.css b/static/css/styles.css index cca8e1f..a52303e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,71 +1,72 @@ -/* styles.css */ +/* style.css */ + +/* Allgemeine Formatierung */ body { - background-color: #f5f7fa; font-family: Arial, sans-serif; margin: 0; padding: 0; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; +/* Header */ +header { + background-color: #333; + color: #fff; + padding: 10px; } -h1 { - font-size: 2rem; - text-align: center; - margin-bottom: 20px; +nav ul { + list-style-type: none; + margin: 0; + padding: 0; } -.table { - width: 100%; - border-collapse: collapse; - margin-bottom: 20px; +nav ul li { + display: inline; + margin-right: 10px; } -.table th, -.table td { - padding: 10px; - border: 1px solid #ddd; - text-align: left; +nav ul li a { + color: #fff; + text-decoration: none; } -.table th { - background-color: #f2f2f2; +/* Hero-Bereich */ +.hero { + background-image: url("background.jpg"); + background-size: cover; + color: #fff; + padding: 100px; + text-align: center; } -.table tr:nth-child(even) td { - background-color: #fff; +.hero h1 { + font-size: 40px; } -.table td.editable { - cursor: pointer; +.hero p { + font-size: 20px; } -.button { - padding: 8px 16px; - background-color: #4a86e8; - color: #fff; - border: none; - border-radius: 4px; - cursor: pointer; +/* Inhaltsbereich */ +.content { + background-color: #f5f5f5; + padding: 50px; } -.category { - margin-bottom: 20px; +.content h2 { + color: #333; + font-size: 30px; } -.category-name { - font-size: 1.2rem; - margin-bottom: 10px; +.content p { + color: #666; + font-size: 18px; } -.new-table-button { - padding: 8px 16px; - background-color: #6ab04c; +/* Footer */ +footer { + background-color: #333; color: #fff; - border: none; - border-radius: 4px; - cursor: pointer; + padding: 10px; + text-align: center; } diff --git a/static/js/projekte.js b/static/js/projekte.js new file mode 100644 index 0000000..e390c6c --- /dev/null +++ b/static/js/projekte.js @@ -0,0 +1,38 @@ +// projekte.js + +document.addEventListener("DOMContentLoaded", function() { + // Das DOM ist vollständig geladen + + // Elemente aus dem DOM abrufen + var projektForm = document.getElementById("projekt-form"); + var projektNameInput = document.getElementById("projekt-name"); + var projekteListe = document.getElementById("projekte-liste"); + + // Eventlistener für das Formular hinzufügen + projektForm.addEventListener("submit", function(event) { + event.preventDefault(); // Standardformularverhalten verhindern + + // Den eingegebenen Projektname auslesen + var projektName = projektNameInput.value; + + // Überprüfen, ob der Projektname nicht leer ist + if (projektName.trim() !== "") { + // Ein neues Listenelement erstellen + var neuesProjekt = document.createElement("li"); + neuesProjekt.textContent = projektName; + + // Das neue Listenelement zur Projekte-Liste hinzufügen + projekteListe.appendChild(neuesProjekt); + + // Das Eingabefeld leeren + projektNameInput.value = ""; + + // Eventlistener für das Entfernen von Projekten hinzufügen + neuesProjekt.addEventListener("click", function() { + projekteListe.removeChild(neuesProjekt); + }); + } + }); + }); + + \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/templates/Irgendwann.html b/templates/Irgendwann.html deleted file mode 100644 index a024e2e..0000000 --- a/templates/Irgendwann.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - Meine coole Website - - - -
-
-

Meine coole Website

- -
-
- -
-
-

Willkommen auf unserer Website

-

Wir erstellen moderne und ansprechende Websites für Ihr Unternehmen.

- Mehr erfahren -
-
- -
-
-
- -

Responsives Design

-

Unsere Websites passen sich allen Geräten an und sind auf Mobilgeräten benutzerfreundlich.

-
-
- -

Kreatives Design

-

Wir verwenden moderne Designprinzipien, um ansprechende und ästhetische Websites zu erstellen.

-
-
- -

Saubere Codierung

-

Unser qualifiziertes Team verwendet beste Praktiken für eine saubere und effiziente Codierung.

-
-
-
- -
-
-

Unsere Projekte

-
-
- Projekt 1 -

Projekt 1

-
-
- Projekt 2 -

Projekt 2

-
-
- Projekt 3 -

Projekt 3

-
-
-
-
- -
-
-

Kontaktieren Sie uns

-
- - - - -
-
-
- - - - - - diff --git a/templates/index.html b/templates/index.html index 1964dab..0bd10f6 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,123 +1,35 @@ - - Echtzeit-Tabelle - - - + + Meine Webseite + -
-

Echtzeit-Tabelle

- -
-
-

Kategorie 1

- - - - - - - - - - {% for row in table_data %} - - - - - - {% endfor %} - -
NameAlter
{{ row.name }}{{ row.age }}
-
-
- - -
- - +
+ +
+ +
+

Willkommen auf meiner Webseite

+

Dies ist der Inhalt der Startseite.

+
+ +
+

Über Uns

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit mauris vel nisl volutpat, at gravida ex commodo. Suspendisse potenti. Nulla facilisi.

+
+ + + + diff --git a/templates/neuigkeiten.html b/templates/neuigkeiten.html new file mode 100644 index 0000000..e69de29 diff --git a/templates/projekte.html b/templates/projekte.html new file mode 100644 index 0000000..1c14f74 --- /dev/null +++ b/templates/projekte.html @@ -0,0 +1,37 @@ + + + + + Projekte + + + +
+ +
+ +
+

Projekte

+ + +
+ + +
+
+ + + + + +