br0tcraft/br0tcabeln
1
0
Fork 0
Code Pull Requests Activity

initial import

Browse Source
This commit is contained in:
br0tcraft 2024-08-17 18:57:14 +02:00
parent 16991fe2c0
commit fe1f00978b
15 changed files with 1486 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
app.py Normal file
View File

@ -0,0 +1,234 @@
from flask import Flask, request, jsonify, redirect, url_for, session, render_template
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
from flask_session import Session
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
import random
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key' # Ändere dies zu einem echten geheimen Schlüssel
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///vocab.db'
app.config['SESSION_TYPE'] = 'filesystem'
app.config['SESSION_PERMANENT'] = False
app.config['SESSION_USE_SIGNER'] = True
db = SQLAlchemy(app)
Session(app)
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'
# Models
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
password = db.Column(db.String(150), nullable=False)
vocabularies = db.relationship('Vocabulary', backref='owner', lazy=True)
class Vocabulary(db.Model):
id = db.Column(db.Integer, primary_key=True)
english = db.Column(db.String(100), nullable=False)
german = db.Column(db.String(100), nullable=False)
level = db.Column(db.Integer, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
def get_random_vocab(user_id):
vocab_list = Vocabulary.query.filter_by(user_id=user_id).all()
if not vocab_list:
return None
# Weight levels: Level 1 should be most common, Level 5 the least
weighted_vocab_list = []
for vocab in vocab_list:
weight = max(1, 6 - vocab.level) # Weight 5 for level 1, 4 for level 2, ..., 1 for level 5
weighted_vocab_list.extend([vocab] * weight)
return random.choice(weighted_vocab_list)
@app.route('/get_random_vocab', methods=['GET'])
@login_required
def get_random_vocab_route():
vocab = get_random_vocab(current_user.id)
if vocab:
return jsonify({
'english': vocab.english,
'german': vocab.german,
'level': vocab.level,
'id': vocab.id,
}), 200
return jsonify({'error': 'No vocabulary found'}), 404
@app.route('/update_vocab_level/<int:id>', methods=['POST'])
@login_required
def update_vocab_level(id):
vocab = Vocabulary.query.get(id)
if vocab and vocab.user_id == current_user.id:
if vocab.level < 5:
vocab.level += 1
db.session.commit()
return jsonify({'success': True}), 200
return jsonify({'message': 'Max level reached'}), 200
return jsonify({'error': 'Not found or unauthorized'}), 404
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
@app.route('/')
def index():
return render_template('start.html')
@app.route('/train')
@login_required
def train():
return render_template('train.html')
@app.route('/settings')
@login_required
def settings():
return render_template('settings.html')
@app.route('/vocab')
@login_required
def vocab():
return render_template('vocab.html')
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
if not username or not password:
return render_template('register.html', error='Username and password are required'), 400
existing_user = User.query.filter_by(username=username).first()
if existing_user:
return render_template('register.html', error='Username already taken'), 409 # 409 Conflict
hashed_password = generate_password_hash(password, method='pbkdf2:sha256')
new_user = User(username=username, password=hashed_password)
db.session.add(new_user)
db.session.commit()
return redirect(url_for('login'))
return render_template('register.html')
@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 check_password_hash(user.password, password):
login_user(user)
return jsonify({'success': True}), 200
else:
return jsonify({'error': 'Invalid credentials'}), 401
# GET request: render login page
return render_template('login.html')
@app.route('/logout', methods=['POST'])
@login_required
def logout():
logout_user()
return redirect(url_for('index'))
@app.route('/add_vocab', methods=['POST'])
@login_required
def add_vocab():
english = request.form.get('english')
german = request.form.get('german')
level = int(request.form.get('level', 1))
if not english or not german or not level:
return jsonify({'error': 'All fields are required'}), 400
vocab = Vocabulary(english=english, german=german, level=level, user_id=current_user.id)
try:
db.session.add(vocab)
db.session.commit()
return jsonify({'success': True}), 201
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/update_vocab/<int:id>', methods=['PUT'])
@login_required
def update_vocab(id):
vocab = Vocabulary.query.get(id)
if not vocab or vocab.user_id != current_user.id:
return jsonify({'error': 'Not found or unauthorized'}), 404
english = request.json.get('english')
german = request.json.get('german')
level = request.json.get('level')
if english:
vocab.english = english
if german:
vocab.german = german
if level:
vocab.level = level
try:
db.session.commit()
return jsonify({'success': True}), 200
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/delete_vocab/<int:id>', methods=['DELETE'])
@login_required
def delete_vocab(id):
vocab = Vocabulary.query.get(id)
if not vocab or vocab.user_id != current_user.id:
return jsonify({'error': 'Not found or unauthorized'}), 404
try:
db.session.delete(vocab)
db.session.commit()
return jsonify({'success': True}), 200
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/get_vocab', methods=['GET'])
@login_required
def get_vocab():
vocab_list = Vocabulary.query.filter_by(user_id=current_user.id).all()
result = [{'id': v.id, 'english': v.english, 'german': v.german, 'level': v.level} for v in vocab_list]
return jsonify(result)
@app.route('/change_username', methods=['POST'])
@login_required
def change_username():
new_username = request.form.get('new_username')
if not new_username:
return jsonify({'error': 'Benutzername ist erforderlich'}), 400
if User.query.filter_by(username=new_username).first():
return jsonify({'error': 'Benutzername bereits vergeben'}), 409
current_user.username = new_username
try:
db.session.commit()
return jsonify({'success': True}), 200
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
if __name__ == '__main__':
with app.app_context():
db.create_all()
app.run(debug=True)

3
defindatabank.py Normal file
View File

@ -0,0 +1,3 @@
from app import db
db.create_all()

13
forms.py Normal file
View File

@ -0,0 +1,13 @@
from app import db
from flask_login import UserMixin
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
password = db.Column(db.String(150), nullable=False)
notes = db.relationship('Note', backref='author', lazy=True)
class Note(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.Text, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)

BIN
instance/vocab.db Normal file
View File

Binary file not shown.

18
models.py Normal file
View File

@ -0,0 +1,18 @@
from flask_sqlalchemy import SQLAlchemy
from flask_login import UserMixin
db = SQLAlchemy()
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
password = db.Column(db.String(150), nullable=False)
notes = db.relationship('Note', backref='author', lazy=True)
class Note(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.Text, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)

151
static/script.js Normal file
View File

@ -0,0 +1,151 @@
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const textElement = document.getElementById('text');
const wordDisplay = document.getElementById('wordDisplay');
const textInput = document.getElementById('textInput');
const submitAnswer = document.getElementById('submitAnswer');
const toggleInput = document.getElementById('toggleInput');
const clearCanvas = document.getElementById('clearCanvas');
const previewDrawing = document.getElementById('previewDrawing');
const recognizedText = document.getElementById('recognizedText');
let currentWord = null;
let currentInputMode = 'text'; // 'text' or 'drawing'
let isDrawing = false;
// Initialize input mode
function initializeInputMode() {
textInput.style.display = 'block';
canvas.style.display = 'none';
clearCanvas.style.display = 'none';
previewDrawing.style.display = 'none';
toggleInput.textContent = 'Zu Zeichnen wechseln';
recognizedText.textContent = '';
}
// Load a new word
function loadWord() {
fetch('/get_random_vocab')
.then(response => response.json())
.then(data => {
if (data.error) {
wordDisplay.textContent = 'Keine Vokabeln gefunden.';
} else {
currentWord = data;
const isEnglish = Math.random() < 0.5;
wordDisplay.textContent = isEnglish ? `English: ${currentWord.english}` : `Deutsch: ${currentWord.german}`;
textElement.textContent = '';
textInput.value = '';
recognizedText.textContent = '';
if (currentInputMode === 'drawing') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
})
.catch(error => console.error('Fehler beim Laden der Vokabel:', error));
}
// Switch between input modes
toggleInput.addEventListener('click', () => {
if (currentInputMode === 'text') {
textInput.style.display = 'none';
canvas.style.display = 'block';
clearCanvas.style.display = 'inline-block';
previewDrawing.style.display = 'inline-block';
toggleInput.textContent = 'Zu Texteingabe wechseln';
currentInputMode = 'drawing';
} else {
textInput.style.display = 'block';
canvas.style.display = 'none';
clearCanvas.style.display = 'none';
previewDrawing.style.display = 'none';
toggleInput.textContent = 'Zu Zeichnen wechseln';
currentInputMode = 'text';
}
});
// Clear the canvas
clearCanvas.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
recognizedText.textContent = ''; // Clear the recognized text as well
});
// Drawing functionality
canvas.addEventListener('mousedown', () => {
isDrawing = true;
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);
function draw(event) {
if (!isDrawing) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
// Preview the drawing recognition
previewDrawing.addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png');
fetch(dataURL)
.then(res => res.blob())
.then(blob => {
Tesseract.recognize(
blob,
'eng',
{ logger: info => console.log(info) }
).then(({ data: { text } }) => {
recognizedText.textContent = `Erkannter Text: ${text.trim()}`;
});
})
.catch(error => {
console.error('Fehler beim Erkennen des Textes:', error);
});
});
// Submit answer
submitAnswer.addEventListener('click', () => {
let answer = '';
if (currentInputMode === 'text') {
answer = textInput.value.trim();
} else {
answer = recognizedText.textContent.replace('Erkannter Text:', '').trim();
}
checkAnswer(answer);
});
// Check if the answer is correct
function checkAnswer(answer) {
const correctAnswer = (wordDisplay.textContent.startsWith('English:') ? currentWord.german : currentWord.english).trim().toLowerCase();
if (answer.toLowerCase() === correctAnswer) {
textElement.textContent = 'Richtig!';
textElement.style.color = 'green';
// Update the vocabulary level
fetch(`/update_vocab_level/${currentWord.id}`, { method: 'POST' })
.then(() => {
setTimeout(loadWord, 2000); // Show the result for 2 seconds before loading the next word
});
} else {
textElement.textContent = `Falsch! Die richtige Antwort ist: ${correctAnswer}`;
textElement.style.color = 'red';
setTimeout(loadWord, 3000); // Show the result for 3 seconds before loading the next word
}
}
// Initialize the input mode and load the first word
initializeInputMode();
loadWord();

33
static/styles.css Normal file
View File

@ -0,0 +1,33 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
canvas {
border: 1px solid #000;
background-color: #fff;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}

160
static/vocab.js Normal file
View File

@ -0,0 +1,160 @@
document.addEventListener('DOMContentLoaded', () => {
loadVocab();
document.getElementById('addVocab').addEventListener('click', () => {
const englishInput = document.getElementById('englishInput').value;
const germanInput = document.getElementById('germanInput').value;
if (englishInput && germanInput) {
fetch('/add_vocab', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
english: englishInput,
german: germanInput,
level: 1 // Automatisch Level 1 setzen
})
}).then(response => response.json())
.then(data => {
if (data.success) {
loadVocab();
document.getElementById('englishInput').value = '';
document.getElementById('germanInput').value = '';
} else {
alert(data.error);
}
}).catch(error => {
console.error('Fehler beim Hinzufügen der Vokabel:', error);
});
} else {
alert('Bitte alle Felder ausfüllen.');
}
});
document.getElementById('backToHome').addEventListener('click', () => {
window.location.href = '/'; // Pfad zur Startseite anpassen
});
});
function loadVocab() {
fetch('/get_vocab')
.then(response => response.json())
.then(vocabList => {
const tables = [1, 2, 3, 4, 5].map(level => document.getElementById(`vocab-list-${level}`));
tables.forEach(table => table.querySelector('tbody').innerHTML = '');
vocabList.forEach(vocab => {
const row = document.createElement('tr');
row.dataset.id = vocab.id;
row.dataset.level = vocab.level; // Level in dataset speichern
row.innerHTML = `
<td class="editable">${vocab.english}</td>
<td class="editable">${vocab.german}</td>
<td>
<button class="edit-btn">Bearbeiten</button>
<button class="delete-btn" data-id="${vocab.id}">Löschen</button>
</td>
`;
const targetTable = document.getElementById(`vocab-list-${vocab.level}`);
targetTable.querySelector('tbody').appendChild(row);
});
// Event-Listener für den „Löschen“-Button
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', (event) => {
const vocabId = event.target.getAttribute('data-id');
fetch(`/delete_vocab/${vocabId}`, {
method: 'DELETE'
}).then(response => response.json())
.then(data => {
if (data.success) {
loadVocab();
} else {
alert(data.error);
}
}).catch(error => {
console.error('Fehler beim Löschen der Vokabel:', error);
});
});
});
// Event-Listener für den „Bearbeiten“-Button
document.querySelectorAll('.edit-btn').forEach(btn => {
btn.addEventListener('click', (event) => {
const row = event.target.closest('tr');
const id = row.dataset.id;
const english = row.children[0].textContent;
const german = row.children[1].textContent;
const level = row.dataset.level || 1; // Level aus dem dataset lesen, Fallback auf 1
// Setze die Zeile in den Bearbeitungsmodus
row.innerHTML = `
<td><input type="text" class="editable-input" value="${english}"></td>
<td><input type="text" class="editable-input" value="${german}"></td>
<td class="edit-controls">
<div class="level-input-container">
<label for="levelInput">Level:</label>
<input type="number" id="levelInput" class="level-input" min="1" max="5" value="${level}">
</div>
<button class="save-btn">Speichern</button>
<button class="cancel-btn">Abbrechen</button>
</td>
`;
row.querySelector('.save-btn').addEventListener('click', () => {
const englishInput = row.querySelector('.editable-input').value;
const germanInput = row.querySelectorAll('.editable-input')[1].value;
const levelInput = row.querySelector('#levelInput').value;
fetch(`/update_vocab/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
english: englishInput,
german: germanInput,
level: parseInt(levelInput, 10)
})
}).then(response => response.json())
.then(data => {
if (data.success) {
loadVocab();
} else {
alert(data.error);
}
}).catch(error => {
console.error('Fehler beim Aktualisieren der Vokabel:', error);
});
});
row.querySelector('.cancel-btn').addEventListener('click', () => {
loadVocab();
});
});
});
}).catch(error => {
console.error('Fehler beim Laden der Vokabeln:', error);
});
}
//sqlite3 anstatt cokkies

98
templates/login.html Normal file
View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anmelden</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
.container {
margin-top: 30px;
}
form {
display: inline-block;
text-align: left;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 18px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
.flash-message {
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
}
.flash-message.success {
color: green;
border: 1px solid green;
background-color: #d4edda;
}
.flash-message.error {
color: red;
border: 1px solid red;
background-color: #f8d7da;
}
</style>
</head>
<body>
<h1>Anmelden</h1>
<div class="container">
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash-message {{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="post" action="/login">
<div class="form-group">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Passwort:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="button">Anmelden</button>
</form>
<a href="/register" class="button">Noch kein Konto? Registrieren</a>
</div>
</body>
</html>

77
templates/register.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
.container {
margin-top: 30px;
width: 100%;
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
width: 100%;
padding: 10px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-group button:hover {
background-color: #0056b3;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Register</h1>
<div class="container">
<form method="POST" action="/register">
<div class="form-group">
<input type="text" name="username" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" required>
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
<div class="form-group">
<p class="error">{{ error }}</p>
</div>
</form>
</div>
</body>
</html>

127
templates/settings.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einstellungen</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
.container {
margin: 20px auto;
max-width: 600px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 18px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
text-decoration: none;
margin: 10px;
}
.button:hover {
background-color: #0056b3;
}
.form-group {
margin: 15px 0;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
padding: 10px 15px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-group button:hover {
background-color: #218838;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Einstellungen</h1>
<div class="container">
<!-- Formular zum Ändern des Benutzernamens -->
<form id="username-form">
<div class="form-group">
<label for="new-username">Neuer Benutzername:</label>
<input type="text" id="new-username" name="new-username" placeholder="Neuer Benutzername" required>
</div>
<button type="submit">Benutzernamen ändern</button>
<div id="username-error" class="error"></div>
</form>
<!-- Formular zum Abmelden -->
<form id="logout-form" action="/logout" method="POST" style="display: inline;">
<button type="submit" class="button">Abmelden</button>
</form>
</div>
<script>
document.getElementById('username-form').addEventListener('submit', function(event) {
event.preventDefault();
const newUsername = document.getElementById('new-username').value;
fetch('/change_username', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
new_username: newUsername
})
}).then(response => response.json())
.then(data => {
if (data.success) {
window.location.reload();
} else {
document.getElementById('username-error').textContent = data.error;
}
}).catch(error => {
console.error('Error changing username:', error);
document.getElementById('username-error').textContent = 'Ein Fehler ist aufgetreten.';
});
});
</script>
</body>
</html>

47
templates/start.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vokabeltrainer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
.container {
margin-top: 30px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 18px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
text-decoration: none;
margin: 10px;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Vokabeltrainer</h1>
<div class="container">
<a href="/train" class="button">Vokabeln trainieren</a>
<a href="/settings" class="button">Einstellungen</a>
<a href="/vocab" class="button">Meine Vokabeln</a>
</div>
</body>
</html>

89
templates/train.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vokabeln trainieren</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
#wordDisplay {
font-size: 24px;
margin: 20px 0;
}
#inputArea {
margin: 20px 0;
}
#textInput {
font-size: 18px;
padding: 10px;
width: 300px;
}
canvas {
border: 1px solid black;
margin: 0 auto;
background-color: white;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 18px;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
text-decoration: none;
margin: 10px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 20px;
color: green;
min-height: 50px;
}
#recognizedText {
margin-top: 10px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>Vokabeln trainieren</h1>
<div id="wordDisplay">Lade...</div>
<div id="inputArea">
<input type="text" id="textInput" placeholder="Antwort eingeben">
<canvas id="drawingCanvas" width="600" height="400"></canvas>
<button id="clearCanvas" class="button">Zeichnung löschen</button>
</div>
<button id="toggleInput" class="button">Zu Zeichnen wechseln</button>
<button id="previewDrawing" class="button">Zeichnung prüfen</button>
<button id="submitAnswer" class="button">Abgeben</button>
<div id="recognizedText"></div>
<div id="result">
<pre id="text"></pre>
</div>
<a href="/" class="button">Zurück zur Startseite</a>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.1/dist/tesseract.min.js"></script>
<script src="/static/script.js"></script>
</body>
</html>

268
templates/vocab.html Normal file
View File

@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Vokabeln</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin-top: 50px;
}
.container {
margin: 0 auto;
max-width: 1200px;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #cccccc;
}
th, td {
padding: 10px;
border-bottom: 1px solid #cccccc;
text-align: left;
}
th {
background-color: white; /* Weiß für Tabelleninhalt */
}
.table-header {
text-align: center;
color: white;
font-weight: bold;
}
.red .table-header, .red th { background-color: #d9534f; color: white; }
.orange .table-header, .orange th { background-color: #f0ad4e; color: white; }
.yellow .table-header, .yellow th { background-color: #ffd500; color: white; }
.green .table-header, .green th { background-color: #4dd64d; color: white; }
.darkgreen .table-header, .darkgreen th { background-color: #2f742f; color: white; }
.actions button {
border: none;
border-radius: 5px;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
font-size: 14px;
}
/* Allgemeine Button-Stile */
button {
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
color: white;
margin-right: 5px;
}
/* Spezielle Button-Stile */
.edit-btn, .delete-btn, .save-btn, .cancel-btn, #moveUp, #moveDown, #moveFinish {
border-radius: 5px; /* Gleiche abgerundete Ecken für alle Buttons */
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
color: white;
}
.edit-btn {
background-color: #007bff; /* Blau */
}
.delete-btn {
background-color: #dc3545; /* Rot */
}
.save-btn {
background-color: #28a745; /* Grün */
}
.cancel-btn {
background-color: #dc3545; /* Rot */
}
/* Level-Input-Feld */
.level-input-container {
display: inline-block;
margin-right: 10px;
}
.level-input {
width: 60px;
text-align: center;
}
/* Bearbeitungsmodus-Stil */
.editing {
background-color: #e7f0ff; /* Hellblau als Hinweis für Bearbeitungsmodus */
border: 1px solid #007bff;
padding: 5px;
}
#backToHome {
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
background-color: #007bff; /* Blau */
color: white;
margin: 20px;
position: absolute;
top: 10px;
left: 10px;
}
/* Stile für den Container */
#vocab-add-container {
margin-bottom: 20px; /* Abstand nach unten für die Tabelle */
}
/* Stile für das Formular */
#add-vocab-form {
margin-bottom: 10px; /* Abstand nach unten für den Button */
}
/* Stile für den "Hinzufügen"-Button */
#addVocab {
background-color: #007bff; /* Hintergrundfarbe des Buttons */
color: #fff; /* Schriftfarbe */
border: none; /* Kein Rand */
border-radius: 5px; /* Abgerundete Ecken */
padding: 10px 20px; /* Innenabstand (Padding) */
font-size: 16px; /* Schriftgröße */
cursor: pointer; /* Zeiger-Cursor beim Hover */
transition: background-color 0.3s ease; /* Übergangseffekt für Hover */
}
/* Hover-Effekt für den Button */
#addVocab:hover {
background-color: #0056b3; /* Dunklere Hintergrundfarbe beim Hover */
}
/* Stile für die Tabelle */
#vocab-list {
width: 100%; /* Tabellenbreite auf 100% setzen */
border-collapse: collapse; /* Ränder zusammenführen */
}
/* Stile für die Tabellenüberschriften */
#vocab-list th {
background-color: #f2f2f2; /* Hintergrundfarbe der Überschriften */
padding: 10px; /* Innenabstand der Überschriften */
text-align: left; /* Textausrichtung */
border-bottom: 2px solid #ddd; /* Untere Grenze der Überschriften */
}
/* Stile für die Tabellenzellen */
#vocab-list td {
padding: 10px; /* Innenabstand der Zellen */
border-bottom: 1px solid #ddd; /* Untere Grenze der Zellen */
}
</style>
</head>
<body>
<button id="backToHome">Zurück zur Startseite</button>
<h1>Meine Vokabeln</h1>
<div class="container">
<!-- Input-Bereich für Vokabeln -->
<div id="vocab-input">
<input type="text" id="englishInput" placeholder="Englisch">
<input type="text" id="germanInput" placeholder="Deutsch">
<!-- Das Level-Feld wird entfernt -->
<button id="addVocab">Hinzufügen</button>
</div>
<!-- Tabellen für Vokabeln -->
<table id="vocab-list-1" class="red">
<thead>
<tr class="table-header">
<td colspan="4">Neue Vokabeln</td>
</tr>
<tr>
<th>Englisch</th>
<th>Deutsch</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="vocab-list-2" class="orange">
<thead>
<tr class="table-header">
<td colspan="4">Vokabeln, die noch nicht sitzen</td>
</tr>
<tr>
<th>Englisch</th>
<th>Deutsch</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="vocab-list-3" class="yellow">
<thead>
<tr class="table-header">
<td colspan="4">Vokabeln, die fast sitzen</td>
</tr>
<tr>
<th>Englisch</th>
<th>Deutsch</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="vocab-list-4" class="green">
<thead>
<tr class="table-header">
<td colspan="4">Vokabeln, die gut sitzen</td>
</tr>
<tr>
<th>Englisch</th>
<th>Deutsch</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="vocab-list-5" class="darkgreen">
<thead>
<tr class="table-header">
<td colspan="4">Perfekte Vokabeln</td>
</tr>
<tr>
<th>Englisch</th>
<th>Deutsch</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="static/vocab.js"></script>
</body>
</html>

168
test.txt Normal file
View File

@ -0,0 +1,168 @@
from flask import Flask, request, jsonify, redirect, url_for, session, render_template
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
from flask_session import Session
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user, login_manager
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///vocab.db'
app.config['SECRET_KEY'] = 'your_secret_key' # Ändere dies zu einem echten geheimen Schlüssel
app.config['SESSION_TYPE'] = 'filesystem'
app.config['SESSION_PERMANENT'] = False
app.config['SESSION_USE_SIGNER'] = True
db = SQLAlchemy(app)
Session(app)
# Flask-Login Setup
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'
# Models
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
password = db.Column(db.String(150), nullable=False)
vocabularies = db.relationship('Vocabulary', backref='owner', lazy=True)
class Vocabulary(db.Model):
id = db.Column(db.Integer, primary_key=True)
english = db.Column(db.String(100), nullable=False)
german = db.Column(db.String(100), nullable=False)
level = db.Column(db.Integer, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
# User loader callback for Flask-Login
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
# Route Handlers
@app.route('/')
def index():
return render_template('start.html')
@app.route('/train')
@login_required
def train():
return render_template('train.html') # Stelle sicher, dass diese Datei existiert
@app.route('/settings')
@login_required
def settings():
return render_template('settings.html') # Stelle sicher, dass diese Datei existiert
@app.route('/vocab')
@login_required
def vocab():
return render_template('vocab.html')
@app.route('/register', methods=['POST'])
def register():
username = request.form.get('username')
password = request.form.get('password')
if not username or not password:
return jsonify({'error': 'Username and password are required'}), 400
hashed_password = generate_password_hash(password, method='pbkdf2:sha256')
user = User(username=username, password=hashed_password)
try:
db.session.add(user)
db.session.commit()
return jsonify({'success': True}), 201
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/login', methods=['POST'])
def login():
username = request.form['username']
password = request.form['password']
user = User.query.filter_by(username=username).first()
if user and check_password_hash(user.password, password):
session['logged_in'] = True
session['user_id'] = user.id
return redirect('/settings')
else:
return jsonify({"error": "Invalid credentials"}), 401
@app.route('/logout', methods=['POST'])
@login_required
def logout():
logout_user()
return redirect(url_for('index'))
@app.route('/add_vocab', methods=['POST'])
@login_required
def add_vocab():
english = request.form.get('english')
german = request.form.get('german')
level = int(request.form.get('level'))
if not english or not german or not level:
return jsonify({'error': 'All fields are required'}), 400
vocab = Vocabulary(english=english, german=german, level=level, user_id=current_user.id)
try:
db.session.add(vocab)
db.session.commit()
return jsonify({'success': True}), 201
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/update_vocab/<int:id>', methods=['PUT'])
@login_required
def update_vocab(id):
vocab = Vocabulary.query.get(id)
if not vocab or vocab.user_id != current_user.id:
return jsonify({'error': 'Not found or unauthorized'}), 404
english = request.json.get('english')
german = request.json.get('german')
level = request.json.get('level')
if english:
vocab.english = english
if german:
vocab.german = german
if level:
vocab.level = level
try:
db.session.commit()
return jsonify({'success': True}), 200
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/delete_vocab/<int:id>', methods=['DELETE'])
@login_required
def delete_vocab(id):
vocab = Vocabulary.query.get(id)
if not vocab or vocab.user_id != current_user.id:
return jsonify({'error': 'Not found or unauthorized'}), 404
try:
db.session.delete(vocab)
db.session.commit()
return jsonify({'success': True}), 200
except Exception as e:
db.session.rollback()
return jsonify({'error': str(e)}), 500
@app.route('/get_vocab', methods=['GET'])
@login_required
def get_vocab():
vocab_list = Vocabulary.query.filter_by(user_id=current_user.id).all()
result = [{'id': v.id, 'english': v.english, 'german': v.german, 'level': v.level} for v in vocab_list]
return jsonify(result)
if __name__ == '__main__':
with app.app_context():
db.create_all()
app.run(debug=True)