From 511639ed15d35382682a81b03c60c973f41efd01 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Sun, 20 Apr 2025 18:48:14 +0200
Subject: [PATCH] Add user authentication, thoughts, and comments
 functionality; enhance mindmap visualization and UI

---
 README.md                                   |   1 +
 requirements.txt                            |   7 +-
 website/__pycache__/app.cpython-311.pyc     | Bin 0 -> 18039 bytes
 website/__pycache__/init_db.cpython-311.pyc | Bin 0 -> 5066 bytes
 website/app.py                              | 253 ++++++-
 website/init_db.py                          |  88 +++
 website/instance/mindmap.db                 | Bin 0 -> 36864 bytes
 website/requirements.txt                    |   6 +
 website/run.py                              |  11 +
 website/static/background.js                | 108 +++
 website/templates/admin.html                | 109 +++
 website/templates/base.html                 | 126 ++++
 website/templates/index.html                |  57 +-
 website/templates/login.html                |  41 ++
 website/templates/mindmap.html              | 706 +++++++++++++++++++-
 website/templates/profile.html              | 131 ++++
 website/templates/register.html             |  47 ++
 17 files changed, 1656 insertions(+), 35 deletions(-)
 create mode 100644 README.md
 create mode 100644 website/__pycache__/app.cpython-311.pyc
 create mode 100644 website/__pycache__/init_db.cpython-311.pyc
 create mode 100644 website/init_db.py
 create mode 100644 website/instance/mindmap.db
 create mode 100644 website/requirements.txt
 create mode 100644 website/run.py
 create mode 100644 website/static/background.js
 create mode 100644 website/templates/admin.html
 create mode 100644 website/templates/base.html
 create mode 100644 website/templates/login.html
 create mode 100644 website/templates/profile.html
 create mode 100644 website/templates/register.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index 8ab6294..dda7386 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1 +1,6 @@
-flask
\ No newline at end of file
+flask
+flask-login
+flask-wtf
+email-validator
+python-dotenv
+flask-sqlalchemy
\ No newline at end of file
diff --git a/website/__pycache__/app.cpython-311.pyc b/website/__pycache__/app.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..edb745545799d49c19f01eb85eaf4e41811e185b
GIT binary patch
literal 18039
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
W|ADI?>$Co$j~N?q{NXqa@c#hFBaV3h

literal 0
HcmV?d00001

diff --git a/website/__pycache__/init_db.cpython-311.pyc b/website/__pycache__/init_db.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..5cedb6517f8ec5f20cfc47bfd8f888fd9a2c0131
GIT binary patch
literal 5066
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
U(CG<M`~ARB^ij|)T>(%32PP1$TmS$7

literal 0
HcmV?d00001

diff --git a/website/app.py b/website/app.py
index 148ed5b..92c3370 100644
--- a/website/app.py
+++ b/website/app.py
@@ -1,17 +1,264 @@
-from flask import Flask, render_template
+import os
+from datetime import datetime
+from flask import Flask, render_template, request, redirect, url_for, flash, jsonify
+from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
+from flask_sqlalchemy import SQLAlchemy
+from werkzeug.security import generate_password_hash, check_password_hash
+import json
 
 app = Flask(__name__)
+app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'default-dev-key')
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///mindmap.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
-# Route für die Startseite
+db = SQLAlchemy(app)
+login_manager = LoginManager(app)
+login_manager.login_view = 'login'
+
+# Database Models
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128))
+    is_admin = db.Column(db.Boolean, default=False)
+    thoughts = db.relationship('Thought', backref='author', lazy=True)
+    
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+        
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
+
+class Thought(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    branch = db.Column(db.String(100), nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    comments = db.relationship('Comment', backref='thought', lazy=True, cascade="all, delete-orphan")
+
+class Comment(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    thought_id = db.Column(db.Integer, db.ForeignKey('thought.id'), nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    author = db.relationship('User', backref='comments')
+
+class MindMapNode(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(100), nullable=False)
+    parent_id = db.Column(db.Integer, db.ForeignKey('mind_map_node.id'), nullable=True)
+    children = db.relationship('MindMapNode', backref=db.backref('parent', remote_side=[id]))
+    thoughts = db.relationship('Thought', secondary='node_thought_association', backref='nodes')
+
+# Association table for many-to-many relationship between MindMapNode and Thought
+node_thought_association = db.Table('node_thought_association',
+    db.Column('node_id', db.Integer, db.ForeignKey('mind_map_node.id'), primary_key=True),
+    db.Column('thought_id', db.Integer, db.ForeignKey('thought.id'), primary_key=True)
+)
+
+@login_manager.user_loader
+def load_user(id):
+    return User.query.get(int(id))
+
+# Routes for authentication
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        
+        user = User.query.filter_by(username=username).first()
+        if user and user.check_password(password):
+            login_user(user)
+            next_page = request.args.get('next')
+            return redirect(next_page or url_for('index'))
+        flash('Ungültiger Benutzername oder Passwort')
+    return render_template('login.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        email = request.form.get('email')
+        password = request.form.get('password')
+        
+        if User.query.filter_by(username=username).first():
+            flash('Benutzername existiert bereits')
+            return redirect(url_for('register'))
+        
+        if User.query.filter_by(email=email).first():
+            flash('E-Mail ist bereits registriert')
+            return redirect(url_for('register'))
+        
+        user = User(username=username, email=email)
+        user.set_password(password)
+        db.session.add(user)
+        db.session.commit()
+        
+        login_user(user)
+        return redirect(url_for('index'))
+    return render_template('register.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('index'))
+
+# Route for the homepage
 @app.route('/')
 def index():
     return render_template('index.html')
 
-# Route für die Mindmap-Seite
+# Route for the mindmap page
 @app.route('/mindmap')
 def mindmap():
     return render_template('mindmap.html')
 
+# Route for user profile
+@app.route('/profile')
+@login_required
+def profile():
+    thoughts = Thought.query.filter_by(user_id=current_user.id).order_by(Thought.timestamp.desc()).all()
+    return render_template('profile.html', thoughts=thoughts)
+
+# API routes for mindmap and thoughts
+@app.route('/api/mindmap')
+def get_mindmap():
+    root_nodes = MindMapNode.query.filter_by(parent_id=None).all()
+    
+    def build_tree(node):
+        return {
+            'id': node.id,
+            'name': node.name,
+            'children': [build_tree(child) for child in node.children]
+        }
+    
+    result = [build_tree(node) for node in root_nodes]
+    return jsonify(result)
+
+@app.route('/api/thoughts/<int:node_id>', methods=['GET'])
+def get_thoughts(node_id):
+    node = MindMapNode.query.get_or_404(node_id)
+    thoughts = []
+    
+    for thought in node.thoughts:
+        thoughts.append({
+            'id': thought.id,
+            'content': thought.content,
+            'author': thought.author.username,
+            'timestamp': thought.timestamp.strftime('%d.%m.%Y, %H:%M'),
+            'comments_count': len(thought.comments),
+            'branch': thought.branch
+        })
+    
+    return jsonify(thoughts)
+
+@app.route('/api/thought/<int:thought_id>', methods=['GET'])
+def get_thought(thought_id):
+    thought = Thought.query.get_or_404(thought_id)
+    
+    return jsonify({
+        'id': thought.id,
+        'content': thought.content,
+        'author': thought.author.username,
+        'timestamp': thought.timestamp.strftime('%d.%m.%Y, %H:%M'),
+        'branch': thought.branch,
+        'comments_count': len(thought.comments)
+    })
+
+@app.route('/api/thoughts', methods=['POST'])
+@login_required
+def add_thought():
+    data = request.json
+    node_id = data.get('node_id')
+    content = data.get('content')
+    
+    if not node_id or not content:
+        return jsonify({'error': 'Fehlende Daten'}), 400
+    
+    node = MindMapNode.query.get_or_404(node_id)
+    
+    thought = Thought(
+        content=content,
+        branch=node.name,
+        user_id=current_user.id
+    )
+    
+    db.session.add(thought)
+    node.thoughts.append(thought)
+    db.session.commit()
+    
+    return jsonify({
+        'id': thought.id,
+        'content': thought.content,
+        'author': thought.author.username,
+        'timestamp': thought.timestamp.strftime('%d.%m.%Y, %H:%M'),
+        'branch': thought.branch
+    })
+
+@app.route('/api/comments/<int:thought_id>', methods=['GET'])
+def get_comments(thought_id):
+    thought = Thought.query.get_or_404(thought_id)
+    comments = [
+        {
+            'id': comment.id,
+            'content': comment.content,
+            'author': comment.author.username,
+            'timestamp': comment.timestamp.strftime('%d.%m.%Y, %H:%M')
+        }
+        for comment in thought.comments
+    ]
+    return jsonify(comments)
+
+@app.route('/api/comments', methods=['POST'])
+@login_required
+def add_comment():
+    data = request.json
+    thought_id = data.get('thought_id')
+    content = data.get('content')
+    
+    if not thought_id or not content:
+        return jsonify({'error': 'Fehlende Daten'}), 400
+    
+    thought = Thought.query.get_or_404(thought_id)
+    
+    comment = Comment(
+        content=content,
+        thought_id=thought_id,
+        user_id=current_user.id
+    )
+    
+    db.session.add(comment)
+    db.session.commit()
+    
+    return jsonify({
+        'id': comment.id,
+        'content': comment.content,
+        'author': comment.author.username,
+        'timestamp': comment.timestamp.strftime('%d.%m.%Y, %H:%M')
+    })
+
+# Admin routes
+@app.route('/admin')
+@login_required
+def admin():
+    if not current_user.is_admin:
+        flash('Zugriff verweigert')
+        return redirect(url_for('index'))
+    
+    users = User.query.all()
+    nodes = MindMapNode.query.all()
+    thoughts = Thought.query.all()
+    
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts)
+
 # Flask starten
 if __name__ == '__main__':
+    with app.app_context():
+        # Make sure tables exist
+        db.create_all()
     app.run(host="0.0.0.0", debug=True)
\ No newline at end of file
diff --git a/website/init_db.py b/website/init_db.py
new file mode 100644
index 0000000..c5d930a
--- /dev/null
+++ b/website/init_db.py
@@ -0,0 +1,88 @@
+from app import app, db, User, MindMapNode
+
+def init_database():
+    """Initialize the database with admin user and mindmap structure."""
+    with app.app_context():
+        # Create all tables
+        db.create_all()
+        
+        # Check if we already have users
+        if User.query.first() is None:
+            print("Creating admin user...")
+            # Create admin user
+            admin = User(username='admin', email='admin@example.com', is_admin=True)
+            admin.set_password('admin123')
+            db.session.add(admin)
+            
+            # Create regular test user
+            test_user = User(username='test', email='test@example.com', is_admin=False)
+            test_user.set_password('test123')
+            db.session.add(test_user)
+            
+            db.session.commit()
+            print("Admin user created successfully!")
+        
+        # Check if we already have mindmap nodes
+        if MindMapNode.query.first() is None:
+            print("Creating initial mindmap structure...")
+            # Create initial mindmap structure
+            root = MindMapNode(name="Wissenschaftliche Mindmap")
+            db.session.add(root)
+            
+            # Level 1 nodes
+            node1 = MindMapNode(name="Naturwissenschaften", parent=root)
+            node2 = MindMapNode(name="Geisteswissenschaften", parent=root)
+            node3 = MindMapNode(name="Technologie", parent=root)
+            node4 = MindMapNode(name="Künste", parent=root)
+            db.session.add_all([node1, node2, node3, node4])
+            
+            # Level 2 nodes - Naturwissenschaften
+            node1_1 = MindMapNode(name="Physik", parent=node1)
+            node1_2 = MindMapNode(name="Biologie", parent=node1)
+            node1_3 = MindMapNode(name="Chemie", parent=node1)
+            node1_4 = MindMapNode(name="Astronomie", parent=node1)
+            db.session.add_all([node1_1, node1_2, node1_3, node1_4])
+            
+            # Level 2 nodes - Geisteswissenschaften
+            node2_1 = MindMapNode(name="Philosophie", parent=node2)
+            node2_2 = MindMapNode(name="Geschichte", parent=node2)
+            node2_3 = MindMapNode(name="Psychologie", parent=node2)
+            node2_4 = MindMapNode(name="Soziologie", parent=node2)
+            db.session.add_all([node2_1, node2_2, node2_3, node2_4])
+            
+            # Level 2 nodes - Technologie
+            node3_1 = MindMapNode(name="Informatik", parent=node3)
+            node3_2 = MindMapNode(name="Biotechnologie", parent=node3)
+            node3_3 = MindMapNode(name="Künstliche Intelligenz", parent=node3)
+            node3_4 = MindMapNode(name="Energietechnik", parent=node3)
+            db.session.add_all([node3_1, node3_2, node3_3, node3_4])
+            
+            # Level 2 nodes - Künste
+            node4_1 = MindMapNode(name="Bildende Kunst", parent=node4)
+            node4_2 = MindMapNode(name="Musik", parent=node4)
+            node4_3 = MindMapNode(name="Literatur", parent=node4)
+            node4_4 = MindMapNode(name="Film", parent=node4)
+            db.session.add_all([node4_1, node4_2, node4_3, node4_4])
+            
+            # Level 3 nodes - a few examples
+            # Physik
+            MindMapNode(name="Quantenphysik", parent=node1_1)
+            MindMapNode(name="Relativitätstheorie", parent=node1_1)
+            
+            # Informatik
+            MindMapNode(name="Maschinelles Lernen", parent=node3_1)
+            MindMapNode(name="Softwareentwicklung", parent=node3_1)
+            MindMapNode(name="Datenbanken", parent=node3_1)
+            
+            # Commit changes
+            db.session.commit()
+            print("Mindmap structure created successfully!")
+        
+        print("Database initialization complete.")
+
+if __name__ == "__main__":
+    init_database()
+    print("You can now run the application with 'python app.py'")
+    print("Login with:")
+    print("  Admin: username=admin, password=admin123")
+    print("  User:  username=test, password=test123") 
\ No newline at end of file
diff --git a/website/instance/mindmap.db b/website/instance/mindmap.db
new file mode 100644
index 0000000000000000000000000000000000000000..976a308eae47f5925df12b7e12537823061b163e
GIT binary patch
literal 36864
zcmeI)Pi)&%90zbaahg9}<3bljQ<*SgqOG(){+HP4RJOKcU1^)HSqkhFz1Yu-*Cg&@
zm#sS>t%EZsZd|x<;|d43aY5q1Z5K{RTo4jhI3b>$bV~}^_$#6AYsF6T-tRs8_jy)Q
zyV1M8weAK~a=dPv1d_&0ay-vnmL!hjl59=0^>9hB7sBBi_RJ5w9`!QGov%+%h`(^D
z%siL<O#DXtc;ed=-;aNunIFG3su9W|009U<00Izz00jPz0te@k$^60s|DYX^MvHbl
zo7RJ-w|BD{)QRtVmP-QH>x?Q-EmzBnwX#%OTv{(nqoSnQOggG_ZE3YqE3cHRQf0Fy
zRkqjH&q|r};SNVsU#qTeELLwwYvmi#Y`>qg(&I*RVINmEtL4>|N*Ht)GbdHcSIX6L
zWx0G^YP%h~-X^>Cumfq<wSU)Ypu@q2{o<%eW^OYzmbVsoj`c?G`nOx`&+a<e3%uxk
z)b}6p)s;~+>4R6slKJUr{@s_O0kFJwn|6Z!Q*wy6Ul?kRkg~i^z*<YS@>@)IP}pr#
zKOpU0=`}W7wbhOCpK#yvX}3ONPeWt!_b`u+T7P##qZXF+<?jcH2<pM52&z9U{im@Z
zs7FKgZ$UM>q+>OuHx{eQR~M_ZiY(6!@%|I3r=@*ENakl|_=DR~+C!)D(3`{%!BEu`
z&X^8q)6seDk}f-)2F`(S%$_#%j~We)<dFknr%Yz<ev41$b2<LO#VEH>B3xrbnS>=z
zNFb~pO2RxcHndIL*5ee_Bh|a?Q|^w}wd+md4~(#CMxPI^Une#@bZKdGbG^J+8I}Kb
zWp!)2EX^JsP1N|XFggO3?o50ve=#@evm<O;SHrC^6MJf)5(dWEH%cn}R+(UHEc*^8
zzREUOAOHafKmY;|fB*y_009U<00RGs!2N|-lFOYt*h&TLCR4axrgz!BrWQTVZdv(O
zcYimS*Hoiu&YSbf8C`dlws+oc)M`sRHP2c(<2b~YZAu-J$^}ayimDsBX3+*AdeJHt
zb*G_ISu0Z0P}New&}GdavQ3J%ZkC*aP75j}imezbA*@_8RKuVw)Kc|QNtRWI5T{60
zgIGH2p<rpIPEEE$(<+p-qSm;7iBEF*3kO^2=vqJ8JTZgywaT4JaF-feS8uIt?7x0S
zEy%j8Xbn><>8e?9>;{z^1<j<oW0Im;)LD(J(t^$oO0!C~UTPGShGQ5+Daa-EupBBI
zCVN;VYMQ#~6iX~pEfk%iLa1ex6v7T$vn<=N3Wmk@MyYJ;L|3TdXiA2SYfSu!6MtqK
zED(SI1Rwwb2tWV=5P$##AOHaf90P$=JjaK3Sz@VpzIV%_cm4m66MqyR9)kpt0t6rc
z0SG_<0uX=z1Rwwb2teQ&5;z$@7hUHM{uUv2GJc_V%|BQg{{BCgy~l~)iC>AIh#!jY
ziwB}FI^wptEUKa;irHVYKV-koewzI#`$6_S7K#M|5P$##AOHafKmY;|fB*y_@D~Kq
zIf2XZSKL-Rkv%DJFY@6;bX^kcbrYE>fy?t7d%nAqn0j8|=J+MIWm7hBhP1ZV@q@(F
zb75h*L%TO!8c?g*ad(6lCI#*yzxL%9ETZLFO)9OjIW1Z(_a^P!6Q;yoKVB5>wLI2R
z5VHdJ62IE%O@GJw5GTTd>)t)L7ZIO4A#gAA*Zh5}*)I{t!;lr~TTQl;fW{{?QApEm
zdA_&XbZJ~nharo8(DgcA+oiGbl)#<hmzy+vGm#Xy(=4N2f3fkgu<lxOpJf{xPYB#}
zx|ahL1=ex87N*yWJrx%?BfUahpZyd6j_doh!;XSDZ03%9OyIP1CFC2fIL!;(CGO3E
z;GWF}n|FjwY7$=mvq}H3KmY;|fB*y_009U<00Izz00ba#j0JH0e~bqgsX+h&5P$##
zAOHafKmY;|fB*#g0=WLisQ>{8KmY;|fB*y_009U<00Iy={sQ6rfB60X@gHYo2muH{
U00Izz00bZa0SG_<0?)R<Z+CjhwEzGB

literal 0
HcmV?d00001

diff --git a/website/requirements.txt b/website/requirements.txt
new file mode 100644
index 0000000..dda7386
--- /dev/null
+++ b/website/requirements.txt
@@ -0,0 +1,6 @@
+flask
+flask-login
+flask-wtf
+email-validator
+python-dotenv
+flask-sqlalchemy
\ No newline at end of file
diff --git a/website/run.py b/website/run.py
new file mode 100644
index 0000000..d03cb9c
--- /dev/null
+++ b/website/run.py
@@ -0,0 +1,11 @@
+#!/usr/bin/env python3
+import os
+from init_db import init_database
+from app import app
+
+if __name__ == "__main__":
+    # Initialize the database first
+    init_database()
+    
+    # Run the Flask application
+    app.run(host="0.0.0.0", debug=True) 
\ No newline at end of file
diff --git a/website/static/background.js b/website/static/background.js
new file mode 100644
index 0000000..bbab5ef
--- /dev/null
+++ b/website/static/background.js
@@ -0,0 +1,108 @@
+// Background animation with Three.js
+let scene, camera, renderer, stars = [];
+
+function initBackground() {
+    // Setup scene
+    scene = new THREE.Scene();
+    
+    // Setup camera
+    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 100;
+    
+    // Setup renderer
+    renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x000000, 0); // Transparent background
+    
+    // Append renderer to DOM
+    const backgroundContainer = document.getElementById('background-container');
+    if (backgroundContainer) {
+        backgroundContainer.appendChild(renderer.domElement);
+    }
+    
+    // Add stars
+    for (let i = 0; i < 1000; i++) {
+        const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+        const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: Math.random() * 0.5 + 0.1 });
+        const star = new THREE.Mesh(geometry, material);
+        
+        // Random position
+        star.position.x = Math.random() * 600 - 300;
+        star.position.y = Math.random() * 600 - 300;
+        star.position.z = Math.random() * 600 - 300;
+        
+        // Store reference to move in animation
+        star.velocity = Math.random() * 0.02 + 0.005;
+        stars.push(star);
+        
+        scene.add(star);
+    }
+    
+    // Add large glowing particles
+    for (let i = 0; i < 15; i++) {
+        const size = Math.random() * 5 + 2;
+        const geometry = new THREE.SphereGeometry(size, 16, 16);
+        
+        // Create a glowing material
+        const color = new THREE.Color();
+        color.setHSL(Math.random(), 0.7, 0.5); // Random hue
+        
+        const material = new THREE.MeshBasicMaterial({ 
+            color: color, 
+            transparent: true, 
+            opacity: 0.2
+        });
+        
+        const particle = new THREE.Mesh(geometry, material);
+        
+        // Random position but further away
+        particle.position.x = Math.random() * 1000 - 500;
+        particle.position.y = Math.random() * 1000 - 500;
+        particle.position.z = Math.random() * 200 - 400;
+        
+        // Store reference to move in animation
+        particle.velocity = Math.random() * 0.01 + 0.002;
+        stars.push(particle);
+        
+        scene.add(particle);
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', onWindowResize);
+    
+    // Start animation
+    animate();
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    
+    // Move stars
+    stars.forEach(star => {
+        star.position.z += star.velocity;
+        
+        // Reset position if star moves too close
+        if (star.position.z > 100) {
+            star.position.z = -300;
+        }
+    });
+    
+    // Rotate the entire scene slightly for a dreamy effect
+    scene.rotation.y += 0.0003;
+    scene.rotation.x += 0.0001;
+    
+    renderer.render(scene, camera);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+// Initialize background when the DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBackground);
+} else {
+    initBackground();
+} 
\ No newline at end of file
diff --git a/website/templates/admin.html b/website/templates/admin.html
new file mode 100644
index 0000000..3726b05
--- /dev/null
+++ b/website/templates/admin.html
@@ -0,0 +1,109 @@
+{% extends "base.html" %}
+
+{% block title %}Admin | Wissenschaftliche Mindmap{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="glass p-8 mb-8">
+        <h1 class="text-3xl font-bold text-white mb-4">Admin Bereich</h1>
+        <p class="text-white/70">Verwalte Benutzer, Gedanken und die Mindmap-Struktur.</p>
+    </div>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <!-- Users Section -->
+        <div class="dark-glass p-6" x-data="{ tab: 'users' }">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-white">Benutzer</h2>
+                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ users|length }}</span>
+            </div>
+            
+            <div class="overflow-y-auto max-h-[500px]">
+                <table class="w-full text-white/90">
+                    <thead class="text-white/60 text-sm uppercase">
+                        <tr>
+                            <th class="text-left py-3">ID</th>
+                            <th class="text-left py-3">Benutzername</th>
+                            <th class="text-left py-3">Email</th>
+                            <th class="text-left py-3">Rolle</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for user in users %}
+                        <tr class="border-t border-white/10">
+                            <td class="py-3">{{ user.id }}</td>
+                            <td class="py-3">{{ user.username }}</td>
+                            <td class="py-3">{{ user.email }}</td>
+                            <td class="py-3">
+                                {% if user.is_admin %}
+                                <span class="bg-purple-600/70 text-white text-xs px-2 py-1 rounded">Admin</span>
+                                {% else %}
+                                <span class="bg-blue-600/70 text-white text-xs px-2 py-1 rounded">Benutzer</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        
+        <!-- Mindmap Nodes Section -->
+        <div class="dark-glass p-6">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-white">Mindmap Struktur</h2>
+                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ nodes|length }}</span>
+            </div>
+            
+            <div class="overflow-y-auto max-h-[500px]">
+                <div class="space-y-3">
+                    {% for node in nodes %}
+                    <div class="glass p-3">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium">{{ node.name }}</span>
+                            <span class="text-xs text-white/60">ID: {{ node.id }}</span>
+                        </div>
+                        {% if node.parent %}
+                        <p class="text-sm text-white/60 mt-1">Eltern: {{ node.parent.name }}</p>
+                        {% else %}
+                        <p class="text-sm text-white/60 mt-1">Hauptknoten</p>
+                        {% endif %}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            
+            <div class="mt-6">
+                <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-4 py-2 rounded-lg transition-all duration-300 text-sm w-full">
+                    Neuen Knoten hinzufügen
+                </button>
+            </div>
+        </div>
+        
+        <!-- Thoughts Section -->
+        <div class="dark-glass p-6">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-white">Gedanken</h2>
+                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ thoughts|length }}</span>
+            </div>
+            
+            <div class="overflow-y-auto max-h-[500px]">
+                <div class="space-y-3">
+                    {% for thought in thoughts %}
+                    <div class="glass p-3">
+                        <div class="flex justify-between items-start">
+                            <span class="inline-block px-2 py-0.5 text-xs text-white/70 bg-white/10 rounded-full mb-1">{{ thought.branch }}</span>
+                            <span class="text-xs text-white/50">{{ thought.timestamp.strftime('%d.%m.%Y') }}</span>
+                        </div>
+                        <p class="text-sm text-white mb-1 line-clamp-2">{{ thought.content }}</p>
+                        <div class="flex justify-between items-center mt-2 text-xs">
+                            <span class="text-white/60">Von: {{ thought.author.username }}</span>
+                            <span class="text-white/60">{{ thought.comments|length }} Kommentar(e)</span>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/base.html b/website/templates/base.html
new file mode 100644
index 0000000..5231846
--- /dev/null
+++ b/website/templates/base.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Wissenschaftliche Mindmap{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981',
+                        accent: '#8b5cf6',
+                    },
+                    fontFamily: {
+                        sans: ['Poppins', 'sans-serif'],
+                    },
+                },
+            },
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        
+        .glass {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        
+        .dark-glass {
+            background: rgba(17, 24, 39, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        
+        body {
+            min-height: 100vh;
+            background-color: #050b14;
+            font-family: 'Poppins', sans-serif;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+            background-image: linear-gradient(to right, #4f46e5, #8b5cf6);
+        }
+        
+        #background-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        
+        #background-container canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    </style>
+    {% block extra_head %}{% endblock %}
+</head>
+<body class="antialiased text-gray-100">
+    <!-- Animated background container -->
+    <div id="background-container"></div>
+    
+    <div class="min-h-screen">
+        <!-- Navigation -->
+        <nav class="glass px-4 py-3 mx-4 mt-4 flex justify-between items-center">
+            <a href="{{ url_for('index') }}" class="text-white text-xl font-bold">MindMap</a>
+            <div class="flex space-x-4">
+                <a href="{{ url_for('mindmap') }}" class="text-white hover:text-indigo-200 transition-colors">Mindmap</a>
+                {% if current_user.is_authenticated %}
+                    <a href="{{ url_for('profile') }}" class="text-white hover:text-indigo-200 transition-colors">Profil</a>
+                    {% if current_user.is_admin %}
+                        <a href="{{ url_for('admin') }}" class="text-white hover:text-indigo-200 transition-colors">Admin</a>
+                    {% endif %}
+                    <a href="{{ url_for('logout') }}" class="text-white hover:text-indigo-200 transition-colors">Abmelden</a>
+                {% else %}
+                    <a href="{{ url_for('login') }}" class="text-white hover:text-indigo-200 transition-colors">Anmelden</a>
+                    <a href="{{ url_for('register') }}" class="text-white hover:text-indigo-200 transition-colors">Registrieren</a>
+                {% endif %}
+            </div>
+        </nav>
+
+        <!-- Flash messages -->
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="container mx-auto mt-4 px-4">
+                    {% for message in messages %}
+                        <div class="glass p-4 mb-4 text-white">
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+
+        <!-- Main content -->
+        <main class="container mx-auto p-4">
+            {% block content %}{% endblock %}
+        </main>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <script src="{{ url_for('static', filename='background.js') }}"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html> 
\ No newline at end of file
diff --git a/website/templates/index.html b/website/templates/index.html
index 66b2c56..f4f66a9 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -1,18 +1,41 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <title>Wissenschaftliche Mindmap</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-</head>
-<body class="dark-theme">
-    <video autoplay muted loop id="bg-video">
-        <source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
-    </video>
-    <div class="overlay">
-        <h1>Willkommen zur Wissenschafts-Mindmap</h1>
-        <p>Verknüpfe Wissen in neuronalen Strukturen.</p>
-        <a href="{{ url_for('mindmap') }}" class="cta-button">Starte die Mindmap</a>
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col items-center justify-center min-h-[80vh] text-center">
+    <div class="glass p-8 max-w-2xl w-full">
+        <h1 class="text-4xl font-bold text-white mb-4">Willkommen zur Wissenschafts-Mindmap</h1>
+        <p class="text-xl text-white/80 mb-8">Verknüpfe Wissen in neuronalen Strukturen und teile deine Gedanken mit der Community.</p>
+        
+        <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 justify-center">
+            <a href="{{ url_for('mindmap') }}" class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105">
+                Starte die Mindmap
+            </a>
+            {% if not current_user.is_authenticated %}
+            <a href="{{ url_for('register') }}" class="glass hover:bg-white/20 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105">
+                Registrieren
+            </a>
+            {% endif %}
+        </div>
     </div>
-</body>
-</html>
\ No newline at end of file
+    
+    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
+        <div class="glass p-6 text-white">
+            <div class="text-3xl mb-2">🧠</div>
+            <h3 class="text-xl font-semibold mb-2">Visualisiere Wissen</h3>
+            <p class="text-white/80">Erkenne Zusammenhänge zwischen verschiedenen Wissensgebieten durch intuitive Mindmaps.</p>
+        </div>
+        
+        <div class="glass p-6 text-white">
+            <div class="text-3xl mb-2">💡</div>
+            <h3 class="text-xl font-semibold mb-2">Teile Gedanken</h3>
+            <p class="text-white/80">Füge deine eigenen Gedanken zu bestehenden Themen hinzu und bereichere die Community.</p>
+        </div>
+        
+        <div class="glass p-6 text-white">
+            <div class="text-3xl mb-2">🔄</div>
+            <h3 class="text-xl font-semibold mb-2">Interaktive Vernetzung</h3>
+            <p class="text-white/80">Beteilige dich an Diskussionen und sieh wie sich Ideen gemeinsam entwickeln.</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/website/templates/login.html b/website/templates/login.html
new file mode 100644
index 0000000..471d79b
--- /dev/null
+++ b/website/templates/login.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block title %}Anmelden | Wissenschaftliche Mindmap{% endblock %}
+
+{% block content %}
+<div class="flex justify-center items-center min-h-[80vh]">
+    <div class="glass p-8 w-full max-w-md">
+        <h1 class="text-3xl font-bold text-white mb-6 text-center">Anmelden</h1>
+        
+        <form method="POST" action="{{ url_for('login') }}" class="space-y-6">
+            <div>
+                <label for="username" class="block text-sm font-medium text-white mb-1">Benutzername</label>
+                <input type="text" id="username" name="username" required 
+                       class="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-white mb-1">Passwort</label>
+                <input type="password" id="password" name="password" required 
+                       class="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
+            </div>
+            
+            <div>
+                <button type="submit" 
+                        class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300">
+                    Anmelden
+                </button>
+            </div>
+        </form>
+        
+        <div class="mt-6 text-center">
+            <p class="text-white/70">
+                Noch kein Konto? 
+                <a href="{{ url_for('register') }}" class="text-indigo-300 hover:text-white font-medium transition-colors">
+                    Registrieren
+                </a>
+            </p>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/mindmap.html b/website/templates/mindmap.html
index 5d6438d..c36dc69 100644
--- a/website/templates/mindmap.html
+++ b/website/templates/mindmap.html
@@ -1,14 +1,692 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <title>Wissenschaftliche Mindmap</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-</head>
-<body>
-    <h1>Wissenschaftliche Mindmap</h1>
-    <div id="mindmap"></div>
-    <script src="{{ url_for('static', filename='mindmap.js') }}"></script>
-</body>
-</html>
\ No newline at end of file
+{% extends "base.html" %}
+
+{% block title %}Mindmap | Wissenschaftliche Mindmap{% endblock %}
+
+{% block extra_head %}
+<style>
+    .node {
+        cursor: pointer;
+    }
+    
+    .node circle {
+        fill: rgba(255, 255, 255, 0.2);
+        stroke: white;
+        stroke-width: 1.5px;
+        transition: all 0.3s ease;
+    }
+    
+    .node text {
+        font-size: 12px;
+        fill: white;
+    }
+    
+    .node--selected circle {
+        fill: rgba(139, 92, 246, 0.6);
+        r: 25;
+        stroke: rgba(255, 255, 255, 0.8);
+        stroke-width: 2px;
+    }
+    
+    .link {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.3);
+        stroke-width: 1.5px;
+    }
+    
+    .thoughts-panel {
+        transform: translateX(100%);
+        transition: transform 0.3s ease-in-out;
+    }
+    
+    .thoughts-panel.open {
+        transform: translateX(0);
+    }
+    
+    .thoughts-container {
+        max-height: calc(100vh - 250px);
+        overflow-y: auto;
+    }
+    
+    /* Custom scrollbar for the thoughts panel */
+    .thoughts-container::-webkit-scrollbar {
+        width: 5px;
+    }
+    
+    .thoughts-container::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 10px;
+    }
+    
+    .thoughts-container::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 10px;
+    }
+    
+    .thoughts-container::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.5);
+    }
+    
+    /* Tooltip */
+    .tooltip {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 5px 10px;
+        border-radius: 5px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+    
+    /* Node color coding by category */
+    .node-science circle {
+        fill: rgba(79, 70, 229, 0.3);
+    }
+    
+    .node-humanities circle {
+        fill: rgba(16, 185, 129, 0.3);
+    }
+    
+    .node-technology circle {
+        fill: rgba(139, 92, 246, 0.3);
+    }
+    
+    .node-arts circle {
+        fill: rgba(236, 72, 153, 0.3);
+    }
+    
+    /* Add a glow effect on hover */
+    .node:hover circle {
+        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="flex flex-col lg:flex-row h-[calc(100vh-100px)]">
+    <!-- Main mindmap visualization area -->
+    <div class="flex-grow relative" id="mindmap-container">
+        <div class="absolute top-4 left-4 z-10">
+            <h1 class="text-2xl font-bold text-white glass px-4 py-2 inline-block">Wissenschaftliche Mindmap</h1>
+        </div>
+        
+        <!-- Zoom controls -->
+        <div class="absolute bottom-4 left-4 glass p-2 flex space-x-2 z-10">
+            <button id="zoom-in" class="w-8 h-8 flex items-center justify-center text-white hover:bg-white/20 rounded-full transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <button id="zoom-out" class="w-8 h-8 flex items-center justify-center text-white hover:bg-white/20 rounded-full transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <button id="reset-view" class="w-8 h-8 flex items-center justify-center text-white hover:bg-white/20 rounded-full transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+                </svg>
+            </button>
+        </div>
+        
+        <!-- Legend -->
+        <div class="absolute top-4 right-4 glass p-3 z-10">
+            <h3 class="text-sm font-semibold text-white mb-2">Kategorien</h3>
+            <div class="space-y-1 text-xs">
+                <div class="flex items-center">
+                    <span class="inline-block w-3 h-3 rounded-full bg-indigo-600/60 mr-2"></span>
+                    <span class="text-white/90">Naturwissenschaften</span>
+                </div>
+                <div class="flex items-center">
+                    <span class="inline-block w-3 h-3 rounded-full bg-green-500/60 mr-2"></span>
+                    <span class="text-white/90">Geisteswissenschaften</span>
+                </div>
+                <div class="flex items-center">
+                    <span class="inline-block w-3 h-3 rounded-full bg-purple-500/60 mr-2"></span>
+                    <span class="text-white/90">Technologie</span>
+                </div>
+                <div class="flex items-center">
+                    <span class="inline-block w-3 h-3 rounded-full bg-pink-500/60 mr-2"></span>
+                    <span class="text-white/90">Künste</span>
+                </div>
+            </div>
+        </div>
+        
+        <svg id="mindmap" class="w-full h-full"></svg>
+        <div id="tooltip" class="tooltip"></div>
+    </div>
+    
+    <!-- Thoughts panel (hidden by default) -->
+    <div id="thoughts-panel" class="thoughts-panel fixed lg:relative right-0 top-0 lg:top-auto h-full lg:h-auto w-full sm:w-96 dark-glass z-20">
+        <div class="p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold text-white" id="selected-node-title">Keine Auswahl</h2>
+                <button id="close-panel" class="text-white/70 hover:text-white lg:hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            
+            {% if current_user.is_authenticated %}
+            <div class="glass p-4 mb-6">
+                <h3 class="text-sm font-medium text-white/80 mb-2">Teile deinen Gedanken</h3>
+                <textarea id="thought-input" rows="3" placeholder="Was denkst du zu diesem Thema?" 
+                          class="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"></textarea>
+                <button id="submit-thought" 
+                        class="mt-2 w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-medium px-4 py-2 rounded-lg transition-all">
+                    Gedanken teilen
+                </button>
+            </div>
+            {% else %}
+            <div class="glass p-4 mb-6 text-center">
+                <p class="text-white/80 mb-2">Melde dich an, um deine Gedanken zu teilen</p>
+                <a href="{{ url_for('login') }}" class="text-indigo-300 hover:text-white font-medium">Anmelden</a>
+            </div>
+            {% endif %}
+            
+            <h3 class="text-lg font-medium text-white mb-3">Community Gedanken</h3>
+            <div id="thoughts-container" class="thoughts-container space-y-4">
+                <div class="text-center py-8 text-white/50">
+                    <p>Wähle einen Knoten aus, um Gedanken zu sehen</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Comment Modal -->
+<div id="commentModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
+    <div class="dark-glass p-6 w-full max-w-lg">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-bold text-white" id="comment-modal-title">Kommentare</h3>
+            <button onclick="closeCommentModal()" class="text-white/70 hover:text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        
+        <div class="glass p-4 mb-4">
+            <p id="comment-thought-content" class="text-white mb-2"></p>
+            <div class="flex justify-between items-center text-xs text-white/60">
+                <span id="comment-thought-author"></span>
+                <span id="comment-thought-time"></span>
+            </div>
+        </div>
+        
+        <div class="mb-4 max-h-60 overflow-y-auto" id="comments-list">
+            <!-- Comments will be loaded here -->
+        </div>
+        
+        {% if current_user.is_authenticated %}
+        <div class="mt-4">
+            <textarea id="comment-input" rows="2" placeholder="Füge einen Kommentar hinzu..." 
+                      class="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"></textarea>
+            <button id="submit-comment" 
+                    class="mt-2 w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-medium px-4 py-2 rounded-lg transition-all">
+                Kommentar hinzufügen
+            </button>
+        </div>
+        {% else %}
+        <div class="glass p-4 text-center">
+            <p class="text-white/80 mb-2">Melde dich an, um Kommentare zu hinterlassen</p>
+            <a href="{{ url_for('login') }}" class="text-indigo-300 hover:text-white font-medium">Anmelden</a>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+    // Global variables
+    let selectedNode = null;
+    let currentThoughtId = null;
+    const width = document.getElementById('mindmap-container').clientWidth;
+    const height = document.getElementById('mindmap-container').clientHeight;
+    const nodeCategories = {
+        'Naturwissenschaften': 'node-science',
+        'Geisteswissenschaften': 'node-humanities',
+        'Technologie': 'node-technology',
+        'Künste': 'node-arts'
+    };
+    
+    // Initialize D3 visualization
+    const svg = d3.select('#mindmap')
+        .attr('width', width)
+        .attr('height', height);
+    
+    const g = svg.append('g');
+    
+    // Zoom behavior
+    const zoom = d3.zoom()
+        .scaleExtent([0.3, 3])
+        .on('zoom', (event) => {
+            g.attr('transform', event.transform);
+        });
+    
+    svg.call(zoom);
+    
+    // Reset to initial view
+    function resetView() {
+        svg.transition().duration(750).call(
+            zoom.transform,
+            d3.zoomIdentity.translate(width / 2, height / 2).scale(0.8)
+        );
+    }
+    
+    // Initialize tooltip
+    const tooltip = d3.select('#tooltip');
+    
+    // Load mindmap data
+    function loadMindmap() {
+        fetch('/api/mindmap')
+            .then(response => response.json())
+            .then(data => {
+                renderMindmap(data[0]); // Assuming first item is the root node
+                resetView();
+            })
+            .catch(error => {
+                console.error('Error loading mindmap:', error);
+                alert('Fehler beim Laden der Mindmap. Bitte die Seite neu laden.');
+            });
+    }
+    
+    // Get node category
+    function getNodeCategory(nodeName, rootCategories) {
+        // Check if the node is one of the root categories
+        if (nodeCategories[nodeName]) {
+            return nodeCategories[nodeName];
+        }
+        
+        // Check parent categories for sub-nodes
+        for (const category in rootCategories) {
+            if (rootCategories[category].includes(nodeName)) {
+                return nodeCategories[category];
+            }
+        }
+        
+        return '';
+    }
+    
+    // Process data to track categories
+    function processData(node, rootCategories = {}) {
+        // Initialize categories for root node
+        if (node.name in nodeCategories) {
+            rootCategories[node.name] = [];
+        }
+        
+        // Record all children of a category
+        if (node.children) {
+            node.children.forEach(child => {
+                // Add to parent category
+                for (const category in rootCategories) {
+                    if (node.name === category || rootCategories[category].includes(node.name)) {
+                        rootCategories[category].push(child.name);
+                    }
+                }
+                // Process recursively
+                processData(child, rootCategories);
+            });
+        }
+        
+        return rootCategories;
+    }
+    
+    // Render the mindmap visualization
+    function renderMindmap(data) {
+        // Clear previous content
+        g.selectAll('*').remove();
+        
+        // Process data to track categories
+        const rootCategories = processData(data);
+        
+        // Create hierarchical layout
+        const root = d3.hierarchy(data);
+        
+        // Create tree layout
+        const treeLayout = d3.tree()
+            .size([height - 100, width - 200])
+            .nodeSize([80, 200]);
+        
+        treeLayout(root);
+        
+        // Create links
+        const links = g.selectAll('.link')
+            .data(root.links())
+            .enter()
+            .append('path')
+            .attr('class', 'link')
+            .attr('d', d => {
+                return `M${d.source.y},${d.source.x}
+                        C${(d.source.y + d.target.y) / 2},${d.source.x}
+                         ${(d.source.y + d.target.y) / 2},${d.target.x}
+                         ${d.target.y},${d.target.x}`;
+            });
+        
+        // Create nodes
+        const nodes = g.selectAll('.node')
+            .data(root.descendants())
+            .enter()
+            .append('g')
+            .attr('class', d => {
+                const categoryClass = getNodeCategory(d.data.name, rootCategories);
+                return `node ${categoryClass} ${d.data.id === selectedNode ? 'node--selected' : ''}`;
+            })
+            .attr('transform', d => `translate(${d.y},${d.x})`)
+            .on('click', (event, d) => selectNode(d.data.id, d.data.name))
+            .on('mouseover', function(event, d) {
+                tooltip.transition()
+                    .duration(200)
+                    .style('opacity', 0.9);
+                tooltip.html(d.data.name)
+                    .style('left', (event.pageX + 10) + 'px')
+                    .style('top', (event.pageY - 28) + 'px');
+            })
+            .on('mouseout', function(d) {
+                tooltip.transition()
+                    .duration(500)
+                    .style('opacity', 0);
+            });
+        
+        // Add circles to nodes
+        nodes.append('circle')
+            .attr('r', 20)
+            .attr('class', d => (d.depth === 0) ? 'root-node' : ''); // Special class for root node
+        
+        // Add text labels
+        nodes.append('text')
+            .attr('dy', 30)
+            .attr('text-anchor', 'middle')
+            .text(d => d.data.name)
+            .each(function(d) {
+                // Wrap text for long labels
+                const text = d3.select(this);
+                const words = d.data.name.split(/\s+/);
+                
+                if (words.length > 1) {
+                    text.text('');
+                    
+                    for (let i = 0; i < words.length; i++) {
+                        const tspan = text.append('tspan')
+                            .attr('x', 0)
+                            .attr('dy', i === 0 ? 30 : 15)
+                            .attr('text-anchor', 'middle')
+                            .text(words[i]);
+                    }
+                }
+            });
+            
+        // Add node count indicator (how many thoughts are associated)
+        nodes.each(function(d) {
+            const node = d3.select(this);
+            
+            // Get thought count for this node (an API call would be needed)
+            fetch(`/api/thoughts/${d.data.id}`)
+                .then(response => response.json())
+                .then(thoughts => {
+                    if (thoughts.length > 0) {
+                        // Add a small indicator
+                        node.append('circle')
+                            .attr('r', 8)
+                            .attr('cx', 20)
+                            .attr('cy', -20)
+                            .attr('fill', 'rgba(139, 92, 246, 0.9)');
+                        
+                        node.append('text')
+                            .attr('x', 20)
+                            .attr('y', -16)
+                            .attr('text-anchor', 'middle')
+                            .attr('fill', 'white')
+                            .attr('font-size', '10px')
+                            .text(thoughts.length);
+                    }
+                })
+                .catch(error => console.error(`Error loading thoughts for node ${d.data.id}:`, error));
+        });
+    }
+    
+    // Handle node selection
+    function selectNode(nodeId, nodeName) {
+        selectedNode = nodeId;
+        
+        // Update selected node in visualization
+        g.selectAll('.node').classed('node--selected', d => d.data.id === nodeId);
+        
+        // Update panel title
+        document.getElementById('selected-node-title').textContent = nodeName;
+        
+        // Load thoughts for this node
+        loadThoughts(nodeId);
+        
+        // Open the thoughts panel on mobile
+        document.getElementById('thoughts-panel').classList.add('open');
+    }
+    
+    // Load thoughts for a node
+    function loadThoughts(nodeId) {
+        const thoughtsContainer = document.getElementById('thoughts-container');
+        thoughtsContainer.innerHTML = '<div class="text-center py-4"><div class="inline-block animate-spin rounded-full h-6 w-6 border-t-2 border-white"></div></div>';
+        
+        fetch(`/api/thoughts/${nodeId}`)
+            .then(response => response.json())
+            .then(thoughts => {
+                thoughtsContainer.innerHTML = '';
+                
+                if (thoughts.length === 0) {
+                    thoughtsContainer.innerHTML = '<div class="text-center py-4 text-white/50"><p>Noch keine Gedanken zu diesem Thema</p></div>';
+                    return;
+                }
+                
+                thoughts.forEach(thought => {
+                    const thoughtEl = document.createElement('div');
+                    thoughtEl.className = 'glass p-4 hover:shadow-lg transition-all';
+                    thoughtEl.innerHTML = `
+                        <p class="text-white mb-2">${thought.content}</p>
+                        <div class="flex justify-between items-center text-xs">
+                            <span class="text-white/70">Von ${thought.author}</span>
+                            <span class="text-white/50">${thought.timestamp}</span>
+                        </div>
+                        <div class="mt-2 text-right">
+                            <button class="text-indigo-300 hover:text-white text-sm" onclick="openCommentModal(${thought.id})">
+                                ${thought.comments_count} Kommentar(e) anzeigen
+                            </button>
+                        </div>
+                    `;
+                    thoughtsContainer.appendChild(thoughtEl);
+                });
+            })
+            .catch(error => {
+                console.error('Error loading thoughts:', error);
+                thoughtsContainer.innerHTML = '<div class="text-center py-4 text-red-300"><p>Fehler beim Laden der Gedanken</p></div>';
+            });
+    }
+    
+    // Submit a new thought
+    function submitThought() {
+        if (!selectedNode) {
+            alert('Bitte wähle zuerst einen Knoten aus.');
+            return;
+        }
+        
+        const thoughtInput = document.getElementById('thought-input');
+        const content = thoughtInput.value.trim();
+        
+        if (!content) {
+            alert('Bitte gib einen Gedanken ein.');
+            return;
+        }
+        
+        fetch('/api/thoughts', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                node_id: selectedNode,
+                content: content
+            }),
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            thoughtInput.value = '';
+            loadThoughts(selectedNode); // Reload thoughts
+            
+            // Refresh node counts in visualization
+            loadMindmap();
+        })
+        .catch(error => {
+            console.error('Error adding thought:', error);
+            alert('Fehler beim Hinzufügen des Gedankens.');
+        });
+    }
+    
+    // Open comment modal
+    function openCommentModal(thoughtId) {
+        currentThoughtId = thoughtId;
+        
+        // Get thought details
+        fetch(`/api/thought/${thoughtId}`)
+            .then(response => response.json())
+            .then(thought => {
+                document.getElementById('comment-thought-content').textContent = thought.content;
+                document.getElementById('comment-thought-author').textContent = `Von ${thought.author}`;
+                document.getElementById('comment-thought-time').textContent = thought.timestamp;
+                
+                // Get comments
+                return fetch(`/api/comments/${thoughtId}`);
+            })
+            .then(response => response.json())
+            .then(comments => {
+                const commentsList = document.getElementById('comments-list');
+                commentsList.innerHTML = '';
+                
+                if (comments.length === 0) {
+                    commentsList.innerHTML = '<p class="text-center text-white/50 py-3">Keine Kommentare vorhanden</p>';
+                    return;
+                }
+                
+                comments.forEach(comment => {
+                    const commentEl = document.createElement('div');
+                    commentEl.className = 'glass p-3 mb-2';
+                    commentEl.innerHTML = `
+                        <p class="text-white text-sm">${comment.content}</p>
+                        <div class="flex justify-between items-center mt-1 text-xs">
+                            <span class="text-white/70">${comment.author}</span>
+                            <span class="text-white/50">${comment.timestamp}</span>
+                        </div>
+                    `;
+                    commentsList.appendChild(commentEl);
+                });
+            })
+            .catch(error => console.error('Error loading comments:', error));
+        
+        document.getElementById('commentModal').classList.remove('hidden');
+    }
+    
+    // Close comment modal
+    function closeCommentModal() {
+        document.getElementById('commentModal').classList.add('hidden');
+        currentThoughtId = null;
+    }
+    
+    // Submit a new comment
+    function submitComment() {
+        if (!currentThoughtId) return;
+        
+        const commentInput = document.getElementById('comment-input');
+        const content = commentInput.value.trim();
+        
+        if (!content) {
+            alert('Bitte gib einen Kommentar ein.');
+            return;
+        }
+        
+        fetch('/api/comments', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                thought_id: currentThoughtId,
+                content: content
+            }),
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            commentInput.value = '';
+            
+            // Refresh comments
+            fetch(`/api/comments/${currentThoughtId}`)
+                .then(response => response.json())
+                .then(comments => {
+                    const commentsList = document.getElementById('comments-list');
+                    commentsList.innerHTML = '';
+                    
+                    comments.forEach(comment => {
+                        const commentEl = document.createElement('div');
+                        commentEl.className = 'glass p-3 mb-2';
+                        commentEl.innerHTML = `
+                            <p class="text-white text-sm">${comment.content}</p>
+                            <div class="flex justify-between items-center mt-1 text-xs">
+                                <span class="text-white/70">${comment.author}</span>
+                                <span class="text-white/50">${comment.timestamp}</span>
+                            </div>
+                        `;
+                        commentsList.appendChild(commentEl);
+                    });
+                })
+                .catch(error => console.error('Error refreshing comments:', error));
+                
+            // Refresh thoughts since comment count changed
+            if (selectedNode) {
+                loadThoughts(selectedNode);
+            }
+        })
+        .catch(error => {
+            console.error('Error adding comment:', error);
+            alert('Fehler beim Hinzufügen des Kommentars.');
+        });
+    }
+    
+    // Event listeners
+    document.addEventListener('DOMContentLoaded', function() {
+        // Load mindmap on page load
+        loadMindmap();
+        
+        // Submit thought
+        document.getElementById('submit-thought')?.addEventListener('click', submitThought);
+        
+        // Submit comment
+        document.getElementById('submit-comment')?.addEventListener('click', submitComment);
+        
+        // Close panel on mobile
+        document.getElementById('close-panel')?.addEventListener('click', function() {
+            document.getElementById('thoughts-panel').classList.remove('open');
+        });
+        
+        // Zoom controls
+        document.getElementById('zoom-in')?.addEventListener('click', function() {
+            svg.transition().duration(300).call(zoom.scaleBy, 1.3);
+        });
+        
+        document.getElementById('zoom-out')?.addEventListener('click', function() {
+            svg.transition().duration(300).call(zoom.scaleBy, 0.7);
+        });
+        
+        document.getElementById('reset-view')?.addEventListener('click', resetView);
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/website/templates/profile.html b/website/templates/profile.html
new file mode 100644
index 0000000..da208e1
--- /dev/null
+++ b/website/templates/profile.html
@@ -0,0 +1,131 @@
+{% extends "base.html" %}
+
+{% block title %}Profil | Wissenschaftliche Mindmap{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="glass p-8 mb-8">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+            <div>
+                <h1 class="text-3xl font-bold text-white">Hallo, {{ current_user.username }}</h1>
+                <p class="text-white/70 mt-1">{{ current_user.email }}</p>
+            </div>
+            
+            <div class="mt-4 md:mt-0">
+                <a href="{{ url_for('mindmap') }}" 
+                   class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 inline-block">
+                    Zur Mindmap
+                </a>
+            </div>
+        </div>
+    </div>
+    
+    <div class="dark-glass p-8">
+        <h2 class="text-2xl font-bold text-white mb-6">Deine Gedanken</h2>
+        
+        {% if thoughts %}
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {% for thought in thoughts %}
+                    <div class="glass p-6 hover:shadow-lg transition-all" x-data="{ showActions: false }" @mouseenter="showActions = true" @mouseleave="showActions = false">
+                        <div class="flex justify-between items-start">
+                            <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full mb-3">{{ thought.branch }}</span>
+                            <span class="text-xs text-white/50">{{ thought.timestamp.strftime('%d.%m.%Y, %H:%M') }}</span>
+                        </div>
+                        <p class="text-white mb-4 leading-relaxed">{{ thought.content }}</p>
+                        
+                        <div class="flex justify-between items-center" x-show="showActions" x-transition.opacity>
+                            <div class="text-xs text-white/70">
+                                <span>{{ thought.comments|length }} Kommentar(e)</span>
+                            </div>
+                            
+                            <a href="#" onclick="openThoughtDetails('{{ thought.id }}')" class="text-indigo-300 hover:text-white text-sm">Details anzeigen</a>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="text-center py-12">
+                <p class="text-white/70 mb-4">Du hast noch keine Gedanken geteilt.</p>
+                <a href="{{ url_for('mindmap') }}" class="text-indigo-300 hover:text-white">Zur Mindmap gehen und mitmachen</a>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Thought Detail Modal -->
+<div id="thoughtModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
+    <div class="dark-glass p-8 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+        <div class="flex justify-between items-center mb-6">
+            <h3 class="text-2xl font-bold text-white" id="modalThoughtTitle">Gedanke Details</h3>
+            <button onclick="closeThoughtModal()" class="text-white/70 hover:text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        
+        <div id="modalContent" class="space-y-6">
+            <div class="glass p-4">
+                <div class="flex justify-between items-start mb-2">
+                    <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full" id="modalBranch"></span>
+                    <span class="text-xs text-white/50" id="modalTimestamp"></span>
+                </div>
+                <p class="text-white" id="modalThoughtContent"></p>
+            </div>
+            
+            <div>
+                <h4 class="text-lg font-medium text-white mb-3">Kommentare</h4>
+                <div id="commentsList" class="space-y-3"></div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function openThoughtDetails(thoughtId) {
+        fetch(`/api/thoughts/${thoughtId}`)
+            .then(response => response.json())
+            .then(thought => {
+                document.getElementById('modalThoughtTitle').textContent = `Gedanke von ${thought.author}`;
+                document.getElementById('modalBranch').textContent = thought.branch;
+                document.getElementById('modalTimestamp').textContent = thought.timestamp;
+                document.getElementById('modalThoughtContent').textContent = thought.content;
+                
+                // Load comments
+                return fetch(`/api/comments/${thoughtId}`);
+            })
+            .then(response => response.json())
+            .then(comments => {
+                const commentsList = document.getElementById('commentsList');
+                commentsList.innerHTML = '';
+                
+                if (comments.length === 0) {
+                    commentsList.innerHTML = '<p class="text-white/50">Keine Kommentare vorhanden</p>';
+                    return;
+                }
+                
+                comments.forEach(comment => {
+                    const commentEl = document.createElement('div');
+                    commentEl.className = 'glass p-3';
+                    commentEl.innerHTML = `
+                        <div class="flex justify-between items-start mb-1">
+                            <span class="text-sm font-medium text-white">${comment.author}</span>
+                            <span class="text-xs text-white/50">${comment.timestamp}</span>
+                        </div>
+                        <p class="text-white/90 text-sm">${comment.content}</p>
+                    `;
+                    commentsList.appendChild(commentEl);
+                });
+            })
+            .catch(error => console.error('Error loading thought details:', error));
+        
+        document.getElementById('thoughtModal').classList.remove('hidden');
+    }
+    
+    function closeThoughtModal() {
+        document.getElementById('thoughtModal').classList.add('hidden');
+    }
+</script>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/register.html b/website/templates/register.html
new file mode 100644
index 0000000..b4d6671
--- /dev/null
+++ b/website/templates/register.html
@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+
+{% block title %}Registrieren | Wissenschaftliche Mindmap{% endblock %}
+
+{% block content %}
+<div class="flex justify-center items-center min-h-[80vh]">
+    <div class="glass p-8 w-full max-w-md">
+        <h1 class="text-3xl font-bold text-white mb-6 text-center">Registrieren</h1>
+        
+        <form method="POST" action="{{ url_for('register') }}" class="space-y-6">
+            <div>
+                <label for="username" class="block text-sm font-medium text-white mb-1">Benutzername</label>
+                <input type="text" id="username" name="username" required 
+                       class="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
+            </div>
+            
+            <div>
+                <label for="email" class="block text-sm font-medium text-white mb-1">E-Mail</label>
+                <input type="email" id="email" name="email" required 
+                       class="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-white mb-1">Passwort</label>
+                <input type="password" id="password" name="password" required 
+                       class="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
+            </div>
+            
+            <div>
+                <button type="submit" 
+                        class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300">
+                    Registrieren
+                </button>
+            </div>
+        </form>
+        
+        <div class="mt-6 text-center">
+            <p class="text-white/70">
+                Bereits registriert? 
+                <a href="{{ url_for('login') }}" class="text-indigo-300 hover:text-white font-medium transition-colors">
+                    Anmelden
+                </a>
+            </p>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file