start
This commit is contained in:
17
website/app.py
Normal file
17
website/app.py
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
from flask import Flask, render_template
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
# Route für die Startseite
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
return render_template('index.html')
|
||||||
|
|
||||||
|
# Route für die Mindmap-Seite
|
||||||
|
@app.route('/mindmap')
|
||||||
|
def mindmap():
|
||||||
|
return render_template('mindmap.html')
|
||||||
|
|
||||||
|
# Flask starten
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(debug=True)
|
||||||
1
website/static/background.mp4
Normal file
1
website/static/background.mp4
Normal file
@@ -0,0 +1 @@
|
|||||||
|
C:\Users\firem\Downloads\background.mp4
|
||||||
49
website/static/mindmap.js
Normal file
49
website/static/mindmap.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
// Erstelle eine einfache Mindmap-Struktur mit D3.js
|
||||||
|
const data = {
|
||||||
|
name: "Wissenschaftliche Mindmap",
|
||||||
|
children: [
|
||||||
|
{ name: "Forschung", children: [{ name: "Theorie" }, { name: "Experimente" }] },
|
||||||
|
{ name: "Technologie", children: [{ name: "Datenbanken" }, { name: "Cloud Computing" }] }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// D3.js-Setup für die Darstellung der Mindmap
|
||||||
|
const width = 800;
|
||||||
|
const height = 600;
|
||||||
|
const margin = 50;
|
||||||
|
|
||||||
|
const svg = d3.select("#mindmap")
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", width)
|
||||||
|
.attr("height", height);
|
||||||
|
|
||||||
|
const root = d3.hierarchy(data);
|
||||||
|
const treeLayout = d3.tree().size([width - margin, height - margin]);
|
||||||
|
treeLayout(root);
|
||||||
|
|
||||||
|
const links = svg.selectAll(".link")
|
||||||
|
.data(root.links())
|
||||||
|
.enter()
|
||||||
|
.append("line")
|
||||||
|
.attr("class", "link")
|
||||||
|
.attr("x1", d => d.source.x + margin)
|
||||||
|
.attr("y1", d => d.source.y + margin)
|
||||||
|
.attr("x2", d => d.target.x + margin)
|
||||||
|
.attr("y2", d => d.target.y + margin)
|
||||||
|
.attr("stroke", "#2c3e50");
|
||||||
|
|
||||||
|
const nodes = svg.selectAll(".node")
|
||||||
|
.data(root.descendants())
|
||||||
|
.enter()
|
||||||
|
.append("g")
|
||||||
|
.attr("class", "node")
|
||||||
|
.attr("transform", d => `translate(${d.x + margin},${d.y + margin})`);
|
||||||
|
|
||||||
|
nodes.append("circle")
|
||||||
|
.attr("r", 20)
|
||||||
|
.attr("fill", "#3498db");
|
||||||
|
|
||||||
|
nodes.append("text")
|
||||||
|
.attr("dx", 25)
|
||||||
|
.attr("dy", 5)
|
||||||
|
.text(d => d.data.name);
|
||||||
27
website/static/style.css
Normal file
27
website/static/style.css
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
/* Grundlegendes Styling für die Seite */
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling für den Header */
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button für die Navigation */
|
||||||
|
button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #3498db;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #2980b9;
|
||||||
|
}
|
||||||
0
website/static/three.min.js
vendored
Normal file
0
website/static/three.min.js
vendored
Normal file
18
website/templates/index.html
Normal file
18
website/templates/index.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!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>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
website/templates/mindmap.html
Normal file
14
website/templates/mindmap.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user