commit 73c4f14189e3ab1ea83a76c6110d98ee044b4b7b
Author: TickNick <niconeron1@gmail.com>
Date:   Wed May 17 18:24:29 2023 +0200

    initialize a webserver with html/css

diff --git a/main.py b/main.py
new file mode 100644
index 0000000..d048d0b
--- /dev/null
+++ b/main.py
@@ -0,0 +1,17 @@
+from flask import Flask, render_template
+from flask_socketio import SocketIO, emit
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'dein_geheimer_schluessel'
+socketio = SocketIO(app)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@socketio.on('connect')
+def handle_connect():
+    emit('message', {'data': 'Verbunden'})
+
+if __name__ == '__main__':
+    socketio.run(app)
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..9b3cfa6
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,185 @@
+/* Reset CSS */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+  }
+  
+  header {
+    background-color: #333;
+    padding: 20px;
+    color: #fff;
+    text-align: center;
+  }
+  
+  nav ul {
+    list-style: none;
+    margin-top: 20px;
+  }
+  
+  nav ul li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  
+  nav ul li a {
+    color: #fff;
+    text-decoration: none;
+  }
+  
+  main {
+    padding: 20px;
+  }
+  
+  h2 {
+    margin-bottom: 10px;
+  }
+  
+  section {
+    margin-bottom: 40px;
+  }
+  
+  #hero {
+    background-image: url("img/hero-bg.jpg");
+    background-size: cover;
+    background-position: center;
+    color: #fff;
+    padding: 80px 0;
+    text-align: center;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+  
+  .hero-content {
+    max-width: 600px;
+    margin: 0 auto;
+    transform: rotateY(10deg) rotateX(-10deg);
+    transition: transform 0.5s ease;
+  }
+  
+  #hero:hover .hero-content {
+    transform: rotateY(0) rotateX(0);
+  }
+  
+  #features {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  
+  .feature {
+    flex-basis: 300px;
+    margin: 20px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+  
+  .feature:hover {
+    transform: rotateY(10deg) rotateX(-10deg);
+    transition: transform 0.5s ease;
+  }
+  
+  #portfolio {
+    text-align: center;
+  }
+  
+  .portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 20px;
+    margin-top: 20px;
+  }
+  
+  .portfolio-item {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+  
+  .portfolio-item:hover {
+    transform: rotateY(10deg) rotateX(-10deg);
+    transition: transform 0.5s ease;
+  }
+  
+  .portfolio-item img {
+    width: 100%;
+    height: auto;
+  }
+  
+  #contact {
+    text-align: center;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  input[type="text"],
+  input[type="email"],
+  textarea {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+  
+  button[type="submit"] {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+  
+  button[type="submit"]:hover {
+    transform: rotateY(10deg) rotateX(-10deg);
+    transition: transform 0.5s ease;
+  }
+  
+  footer {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+  }
+  
+  footer p {
+    margin: 0;
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+  
+  /* Media Queries */
+  @media (max-width: 768px) {
+    nav ul li {
+      display: block;
+      margin-bottom: 10px;
+    }
+  }
+  
\ No newline at end of file
diff --git a/templates/Irgendwann.html b/templates/Irgendwann.html
new file mode 100644
index 0000000..a024e2e
--- /dev/null
+++ b/templates/Irgendwann.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Meine coole Website</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Meine coole Website</h1>
+      <nav>
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Über uns</a></li>
+          <li><a href="#">Projekte</a></li>
+          <li><a href="#">Kontakt</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section id="hero">
+    <div class="container">
+      <h2>Willkommen auf unserer Website</h2>
+      <p>Wir erstellen moderne und ansprechende Websites für Ihr Unternehmen.</p>
+      <a href="#" class="btn">Mehr erfahren</a>
+    </div>
+  </section>
+
+  <section id="features">
+    <div class="container">
+      <div class="feature">
+        <i class="fas fa-mobile-alt"></i>
+        <h3>Responsives Design</h3>
+        <p>Unsere Websites passen sich allen Geräten an und sind auf Mobilgeräten benutzerfreundlich.</p>
+      </div>
+      <div class="feature">
+        <i class="fas fa-palette"></i>
+        <h3>Kreatives Design</h3>
+        <p>Wir verwenden moderne Designprinzipien, um ansprechende und ästhetische Websites zu erstellen.</p>
+      </div>
+      <div class="feature">
+        <i class="fas fa-code"></i>
+        <h3>Saubere Codierung</h3>
+        <p>Unser qualifiziertes Team verwendet beste Praktiken für eine saubere und effiziente Codierung.</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="portfolio">
+    <div class="container">
+      <h2>Unsere Projekte</h2>
+      <div class="portfolio-grid">
+        <div class="portfolio-item">
+          <img src="img/portfolio-1.jpg" alt="Projekt 1">
+          <h4>Projekt 1</h4>
+        </div>
+        <div class="portfolio-item">
+          <img src="img/portfolio-2.jpg" alt="Projekt 2">
+          <h4>Projekt 2</h4>
+        </div>
+        <div class="portfolio-item">
+          <img src="img/portfolio-3.jpg" alt="Projekt 3">
+          <h4>Projekt 3</h4>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="contact">
+    <div class="container">
+      <h2>Kontaktieren Sie uns</h2>
+      <form action="#" method="POST">
+        <input type="text" name="name" placeholder="Name" required>
+        <input type="email" name="email" placeholder="E-Mail" required>
+        <textarea name="message" placeholder="Nachricht" required></textarea>
+        <button type="submit" class="btn">Senden</button>
+      </form>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p>&copy; 2023 Meine coole Website. Alle Rechte vorbehalten.</p>
+    </div>
+  </footer>
+
+  <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..a5c2ce9
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>WebSocket Beispiel</title>
+  </head>
+  <body>
+    <h1>WebSocket Beispiel</h1>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
+    <script>
+      const socket = io();
+
+      socket.on('message', (data) => {
+        console.log('Nachricht empfangen:', data);
+      });
+    </script>
+  </body>
+</html>