<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
--primary-blue: #1565C0; --accent-orange: #FF9800; --success: #4CAF50;
--danger: #F44336; --star: #FFC107; --pinned: #E3F2FD;
--radius: 16px; --radius-sm: 10px; --reserved: #FFF3E0;
}
[data-theme="light"] {
--bg: #F5F5F5; --surface: #FFFFFF; --card: #FFFFFF;
--text: #333333; --text-secondary: #666666; --border: #E0E0E0;
}
[data-theme="dark"] {
--bg: #121212; --surface: #1E1E1E; --card: #2D2D2D;
--text: #E0E0E0; --text-secondary: #AAAAAA; --border: #333333;
--pinned: #1A237E; --reserved: #3E2723;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--text);
min-height: 100vh; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
background: var(--surface); padding: 10px 16px; display: flex; align-items: center;
gap: 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; min-height: 50px;
}
.app-header h1 {
font-family: 'Poppins', sans-serif; font-size: 19px; color: var(--primary-blue);
display: flex; align-items: center; gap: 8px; flex: 1;
}
.back-arrow {
display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border: none; background: none; color: var(--text); cursor: pointer; border-radius: 50%;
font-size: 26px; flex-shrink: 0; transition: all 0.2s;
}
.back-arrow:hover { background: var(--border); }
.back-arrow:active { transform: scale(0.9); }
.header-title {
font-size: 17px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.location-badge {
display: flex; align-items: center; gap: 4px; background: var(--bg); padding: 6px 10px;
border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer;
border: 2px solid var(--border); color: var(--text); max-width: 110px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}
.main-content { flex: 1; overflow-y: auto; padding-bottom: 70px; }
.bottom-nav {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 480px; width: 100%;
background: var(--surface); border-top: 1px solid var(--border); display: flex;
justify-content: space-around; padding: 6px 0; z-index: 100;
}
.nav-item {
display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
padding: 6px 12px; border: none; background: none; color: var(--text-secondary);
font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 600; transition: all 0.2s;
}
.nav-item.active { color: var(--primary-blue); }
.nav-item .material-icons { font-size: 22px; }
.card {
background: var(--card); border-radius: var(--radius); padding: 14px; margin: 8px 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid var(--border); transition: all 0.15s;
}
.card:active { transform: scale(0.98); }
.job-card.reserved {
border-left: 4px solid var(--accent-orange);
background: var(--reserved);
}
.job-card.reserved::after {
content: '🔒 RESERVIERT';
position: absolute;
top: 8px;
right: 40px;
background: var(--accent-orange);
color: white;
padding: 3px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
}
.job-category {
background: rgba(255, 152, 0, 0.15); color: var(--accent-orange);
padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.distance-badge {
background: rgba(76, 175, 80, 0.15); color: var(--success);
padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
display: flex; align-items: center; gap: 3px;
}
.status-badge {
padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
display: inline-block;
}
.status-badge.offen { background: rgba(76,175,80,0.15); color: var(--success); }
.status-badge.reserviert { background: rgba(255,152,0,0.15); color: var(--accent-orange); }
.status-badge.vergeben { background: rgba(33,150,243,0.15); color: #2196F3; }
.status-badge.erledigt { background: rgba(156,39,176,0.15); color: #9C27B0; }
.btn {
padding: 11px 20px; border-radius: 25px; border: none; cursor: pointer; font-size: 14px;
font-weight: 700; font-family: 'Nunito', sans-serif; display: flex; align-items: center;
justify-content: center; gap: 6px; transition: all 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn-accent { background: var(--accent-orange); color: white; width: 100%; }
.btn-primary { background: var(--primary-blue); color: white; width: 100%; }
.btn-outline { background: transparent; border: 2px solid var(--primary-blue); color: var(--primary-blue); width: 100%; }
.btn-danger { background: var(--danger); color: white; width: 100%; }
.btn-reserve { background: var(--accent-orange); color: white; width: 100%; }
.btn-unreserve { background: #795548; color: white; width: 100%; }
.form-input, .form-textarea, select.form-input {
width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 2px solid var(--border);
background: var(--card); color: var(--text); font-size: 14px; font-family: 'Nunito', sans-serif; outline: none;
}
.form-input:focus, .form-textarea:focus { border-color: var(--primary-blue); }
.form-textarea { min-height: 90px; resize: vertical; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.filter-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
padding: 7px 14px; border-radius: 20px; border: 2px solid var(--border); background: var(--card);
color: var(--text); cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 600;
transition: all 0.2s; flex-shrink: 0;
}
.filter-chip.active { background: var(--accent-orange); color: white; border-color: var(--accent-orange); }
.search-input {
width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 2px solid var(--border);
background: var(--card); color: var(--text); font-size: 14px; outline: none; margin: 10px 14px; width: calc(100% - 28px);
}
.profile-avatar {
width: 70px; height: 70px; border-radius: 50%; background: var(--primary-blue);
margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
font-size: 28px; color: white; font-weight: 700; overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-bubble {
max-width: 78%; padding: 10px 14px; border-radius: 18px; margin: 3px 0;
font-size: 14px; word-wrap: break-word;
}
.chat-bubble.sent { background: var(--primary-blue); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-bubble.received { background: var(--border); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.toast {
position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); background: #333;
color: white; padding: 10px 20px; border-radius: 25px; font-size: 13px; font-weight: 600;
z-index: 300; text-align: center; max-width: 90%;
}
.empty-state { text-align: center; padding: 35px 18px; color: var(--text-secondary); }
.empty-state .material-icons { font-size: 52px; color: #9E9E9E; margin-bottom: 10px; }
.hidden { display: none !important; }
.settings-item {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.settings-item-left { display: flex; align-items: center; gap: 8px; }
.toggle-switch { width: 48px; height: 26px; border-radius: 13px; background: var(--border); cursor: pointer; transition: background 0.3s; }
.toggle-switch.active { background: var(--primary-blue); }
.toggle-switch::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; margin: 3px; transition: transform 0.3s; }
.toggle-switch.active::after { transform: translateX(22px); }
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6);
z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-content {
background: var(--surface); border-radius: var(--radius); padding: 24px;
width: 100%; max-width: 400px; max-height: 80vh; overflow-y: auto;
}
</style>
<div id="app">
<div id="app-header-container"></div>
<div class="main-content" id="main-content"></div>
<nav class="bottom-nav hidden" id="bottom-nav">
<button class="nav-item active" data-page="jobs" onclick="navigateTo('jobs')">
<span class="material-icons">home</span>Start
</button>
<button class="nav-item" data-page="create" onclick="navigateTo('create')">
<span class="material-icons">add_circle_outline</span>Neu
</button>
<button class="nav-item" data-page="chats" onclick="navigateTo('chats')">
<span class="material-icons">chat_bubble_outline</span>Chat
</button>
<button class="nav-item" data-page="profile" onclick="navigateTo('profile')">
<span class="material-icons">person_outline</span>Profil
</button>
</nav>
</div>
<input type="file" id="image-upload" accept="image/*" style="display:none" onchange="handleImageUpload(event)">
<script>
// ==================== DATENBANK MIT STORAGE-EVENT ====================
const DB = {
_users: JSON.parse(localStorage.getItem('mf_users') || '{}'),
_jobs: JSON.parse(localStorage.getItem('mf_jobs') || '[]'),
_chats: JSON.parse(localStorage.getItem('mf_chats') || '[]'),
_messages: JSON.parse(localStorage.getItem('mf_messages') || '{}'),
_applications: JSON.parse(localStorage.getItem('mf_applications') || '[]'),
get users() { return this._users; },
set users(v) { this._users = v; this.save(); },
get jobs() { return this._jobs; },
set jobs(v) { this._jobs = v; this.save(); },
get chats() { return this._chats; },
set chats(v) { this._chats = v; this.save(); },
get messages() { return this._messages; },
set messages(v) { this._messages = v; this.save(); },
get applications() { return this._applications; },
set applications(v) { this._applications = v; this.save(); },
save() {
localStorage.setItem('mf_users', JSON.stringify(this._users));
localStorage.setItem('mf_jobs', JSON.stringify(this._jobs));
localStorage.setItem('mf_chats', JSON.stringify(this._chats));
localStorage.setItem('mf_messages', JSON.stringify(this._messages));
localStorage.setItem('mf_applications', JSON.stringify(this._applications));
// Trigger für andere Tabs
localStorage.setItem('mf_lastUpdate', Date.now().toString());
},
reload() {
this._users = JSON.parse(localStorage.getItem('mf_users') || '{}');
this._jobs = JSON.parse(localStorage.getItem('mf_jobs') || '[]');
this._chats = JSON.parse(localStorage.getItem('mf_chats') || '[]');
this._messages = JSON.parse(localStorage.getItem('mf_messages') || '{}');
this._applications = JSON.parse(localStorage.getItem('mf_applications') || '[]');
}
};
// ==================== LIVE-UPDATE ZWISCHEN TABS ====================
window.addEventListener('storage', function(e) {
if (e.key === 'mf_lastUpdate') {
console.log('🔄 Änderung erkannt - aktualisiere...');
DB.reload();
// Aktuelle Seite neu rendern
if (currentUser && currentPage) {
switch(currentPage) {
case 'jobs': renderJobs(); break;
case 'chats': showChatsScreen(); break;
case 'job-detail': if (currentPageData) showJobDetailScreen(currentPageData); break;
}
}
}
});
// ==================== POLLING FÜR LIVE-UPDATES ====================
let lastUpdateCheck = Date.now();
setInterval(() => {
const currentUpdate = parseInt(localStorage.getItem('mf_lastUpdate') || '0');
if (currentUpdate > lastUpdateCheck) {
lastUpdateCheck = currentUpdate;
DB.reload();
if (currentUser && currentPage === 'jobs') {
renderJobs();
}
}
}, 2000); // Alle 2 Sekunden prüfen
const FEEDBACK_EMAIL = atob('Ym9obGthdWthaUBnbWFpbC5jb20=');
let userLocation = JSON.parse(localStorage.getItem('mf_location') || 'null');
let userCoordinates = null;
let navigationHistory = [];
let currentUser = null;
let selectedCategory = null;
let radiusFilter = parseInt(localStorage.getItem('mf_radius') || '50');
let currentPage = '';
let currentPageData = null;
let pinnedChats = JSON.parse(localStorage.getItem('mf_pinnedChats') || '{}');
const categories = ['Alle','Nachhilfe','Hundesitting','Babysitting','Gartenarbeit','Einkaufen helfen','Computerhilfe','Haushaltshilfe','Sonstiges'];
const radiusOptions = [5,10,20,30,50,75,100,200];
// ==================== INIT ====================
function init() {
if (userLocation) userCoordinates = { lat: userLocation.lat, lng: userLocation.lng };
else {
userLocation = { lat: 51.89, lng: 10.17, name: 'Seesen' };
userCoordinates = { lat: 51.89, lng: 10.17 };
localStorage.setItem('mf_location', JSON.stringify(userLocation));
}
if (Object.keys(DB.users).length === 0) initDemoData();
const savedUser = JSON.parse(localStorage.getItem('mf_currentUser') || 'null');
if (savedUser && DB.users[savedUser.email]) {
currentUser = DB.users[savedUser.email];
document.getElementById('bottom-nav').classList.remove('hidden');
navigateTo('jobs');
} else showLoginScreen();
}
function initDemoData() {
DB._users = {
'max@test.de': { uid: 'user1', name: 'Max (16)', email: 'max@test.de', password: '123456', age: 16, photoURL: '', bio: 'Schüler', ratingSum: 23, ratingCount: 5, completedJobs: 12, blockedUsers: [], createdAt: new Date().toISOString() },
'lisa@test.de': { uid: 'user2', name: 'Lisa (15)', email: 'lisa@test.de', password: '123456', age: 15, photoURL: '', bio: 'Mag Tiere', ratingSum: 18, ratingCount: 4, completedJobs: 8, blockedUsers: [], createdAt: new Date().toISOString() },
'herr-mueller@test.de': { uid: 'user3', name: 'Herr Müller (45)', email: 'herr-mueller@test.de', password: '123456', age: 45, photoURL: '', bio: 'Nachhilfe & Garten', ratingSum: 45, ratingCount: 9, completedJobs: 25, blockedUsers: [], createdAt: new Date().toISOString() }
};
DB._jobs = [
{ id: 'job1', title: 'Nachhilfe Mathe 8. Klasse', category: 'Nachhilfe', description: 'Suche Mathe-Nachhilfe für meinen Sohn (14). 1-2x pro Woche.', location: 'Seesen', lat: 51.89, lng: 10.17, payment: '18 € / Stunde', date: '2025-02-01', createdBy: 'user3', createdAt: new Date().toISOString(), status: 'offen' },
{ id: 'job2', title: 'Hundesitting Samstag', category: 'Hundesitting', description: 'Golden Retriever braucht Betreuung am Samstag.', location: 'Goslar', lat: 51.91, lng: 10.42, payment: '25 € / Tag', date: '2025-02-08', createdBy: 'user2', createdAt: new Date().toISOString(), status: 'offen' }
];
DB.save();
}
// ==================== STANDORT ====================
function updateLocation(name, lat, lng, radius) {
userLocation = { lat, lng, name };
userCoordinates = { lat, lng };
radiusFilter = radius;
localStorage.setItem('mf_location', JSON.stringify(userLocation));
localStorage.setItem('mf_radius', radius.toString());
}
function calculateDistance(lat1,lng1,lat2,lng2) {
const R=6371, dLat=(lat2-lat1)*Math.PI/180, dLng=(lng2-lng1)*Math.PI/180;
const a=Math.sin(dLat/2)**2+Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*Math.sin(dLng/2)**2;
return Math.round(R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a))*10)/10;
}
function getDistanceText(job) { if(!userCoordinates||!job.lat||!job.lng)return null; const d=calculateDistance(userCoordinates.lat,userCoordinates.lng,job.lat,job.lng); return d<1?'< 1 km':`${d} km`; }
function sortJobsByDistance(jobs) { if(!userCoordinates)return jobs; return jobs.sort((a,b)=>calculateDistance(userCoordinates.lat,userCoordinates.lng,a.lat||52.5,a.lng||13.4)-calculateDistance(userCoordinates.lat,userCoordinates.lng,b.lat||52.5,b.lng||13.4)); }
// ==================== NAVIGATION ====================
function navigateTo(page, data=null, addToHistory=true) {
if(addToHistory&¤tPage&¤tPage!==page){navigationHistory.push({page:currentPage,data:currentPageData});}
currentPage=page; currentPageData=data;
updateHeader(page); updateBottomNav(page);
if(!currentUser&&page!=='login'){showLoginScreen();return;}
switch(page){case'jobs':showJobsScreen();break;case'create':showCreateJobScreen();break;case'chats':showChatsScreen();break;case'profile':showProfileScreen();break;case'settings':showSettingsScreen();break;case'job-detail':showJobDetailScreen(data);break;case'user-profile':showUserProfileScreen(data);break;case'chat':showChatScreen(data);break;case'my-jobs':showMyJobs();break;case'my-applications':showMyApplications();break;case'edit-profile':editProfileScreen();break;case'feedback':showFeedbackScreen();break;case'delete-account':showDeleteAccountScreen();break;default:showJobsScreen();}
}
function goBack() { if(navigationHistory.length>0){const prev=navigationHistory.pop();navigateTo(prev.page,prev.data,false);}else navigateTo('jobs'); }
function updateHeader(page) {
const container=document.getElementById('app-header-container');
const mainPages=['jobs','create','chats','profile','settings'];
let showBack=!mainPages.includes(page)&&page!=='login', title='';
switch(page){case'jobs':title='MiniJob Finder';break;case'create':title='Job erstellen';break;case'chats':title='Nachrichten';break;case'profile':title='Mein Profil';break;case'settings':title='Einstellungen';break;case'job-detail':title='Job-Details';break;case'user-profile':title='Nutzerprofil';break;case'chat':title='Chat';break;case'my-jobs':title='Meine Jobs';break;case'my-applications':title='Bewerbungen';break;case'edit-profile':title='Profil bearbeiten';break;case'feedback':title='Feedback';break;case'delete-account':title='Account löschen';break;default:title='';}
if(showBack)container.innerHTML=`<div class="app-header"><button class="back-arrow" onclick="goBack()">←</button><span class="header-title">${title}</span></div>`;
else if(page==='login')container.innerHTML='';
else container.innerHTML=`<div class="app-header"><span style="font-size:22px">💼</span><h1 style="font-size:18px">MiniJob Finder</h1><button class="location-badge" onclick="showLocationModal()"><span class="material-icons" style="font-size:14px">location_on</span><span>${(userLocation?.name||'Ort').substring(0,12)}</span></button></div>`;
}
function updateBottomNav(page) {
document.querySelectorAll('.nav-item').forEach(item=>item.classList.toggle('active',item.dataset.page===page||(page==='settings'&&item.dataset.page==='profile')));
}
function showToast(msg) {
const e=document.querySelector('.toast'); if(e)e.remove();
const t=document.createElement('div'); t.className='toast'; t.textContent=msg;
document.body.appendChild(t); setTimeout(()=>t.remove(),3000);
}
function escapeHtml(t) { if(!t)return''; const d=document.createElement('div'); d.textContent=t; return d.innerHTML; }
function generateId() { return'id_'+Date.now()+'_'+Math.random().toString(36).substr(2,9); }
// ==================== LOCATION MODAL ====================
function showLocationModal() {
document.querySelector('.modal-overlay')?.remove();
const overlay = document.createElement('div'); overlay.className = 'modal-overlay'; overlay.id = 'location-modal';
overlay.innerHTML = `
<div class="modal-content" onclick="event.stopPropagation()">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
<button class="back-arrow" onclick="closeLocationModal()">←</button>
<h2 style="font-size:18px">📍 Standort ändern</h2>
</div>
<div class="form-group"><label>Stadt / Ort</label><input type="text" id="modal-location-input" class="form-input" placeholder="z.B. Seesen, Berlin..." value="${escapeHtml(userLocation?.name||'')}"></div>
<div class="form-group"><label>Suchradius</label><select id="modal-radius-input" class="form-input">${radiusOptions.map(r=>`<option value="${r}" ${r===radiusFilter?'selected':''}>${r} km</option>`).join('')}</select></div>
<div style="display:flex;gap:8px"><button class="btn btn-outline" onclick="closeLocationModal()">Abbrechen</button><button class="btn btn-accent" onclick="saveLocationFromModal()">Speichern</button></div>
</div>`;
document.body.appendChild(overlay);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeLocationModal(); });
setTimeout(() => document.getElementById('modal-location-input')?.focus(), 200);
}
function closeLocationModal() { document.getElementById('location-modal')?.remove(); }
function saveLocationFromModal() {
const city = document.getElementById('modal-location-input')?.value?.trim();
const radius = parseInt(document.getElementById('modal-radius-input')?.value || '50');
if (!city) { showToast('Bitte Stadt eingeben'); return; }
const cityCoords = { 'seesen':[51.89,10.17], 'goslar':[51.91,10.42], 'berlin':[52.52,13.40], 'hamburg':[53.55,9.99], 'münchen':[48.13,11.58], 'köln':[50.94,6.96] };
let coords = [52.52, 13.40];
for (const [c, coord] of Object.entries(cityCoords)) { if (city.toLowerCase().includes(c)) { coords = coord; break; } }
updateLocation(city, coords[0], coords[1], radius);
closeLocationModal();
showToast(`📍 ${city} (${radius} km)`);
if (currentPage === 'settings') showSettingsScreen(); else if (currentPage === 'jobs') showJobsScreen();
}
// ==================== LOGIN ====================
function showLoginScreen() {
currentPage='login'; document.getElementById('bottom-nav').classList.add('hidden'); document.getElementById('app-header-container').innerHTML='';
document.getElementById('main-content').innerHTML=`
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;padding:20px">
<span style="font-size:60px">💼</span>
<h2 style="font-family:'Poppins',sans-serif;font-size:24px;color:var(--primary-blue);margin:8px 0">MiniJob Finder</h2>
<p style="color:var(--text-secondary);margin-bottom:16px;text-align:center">Finde Minijobs in deiner Nähe</p>
${userLocation?`<p style="color:var(--success);margin-bottom:14px">📍 ${userLocation.name}</p>`:''}
<div style="width:100%"><div class="form-group"><label>E-Mail</label><input type="email" id="login-email" class="form-input" placeholder="max@test.de"></div>
<div class="form-group"><label>Passwort</label><input type="password" id="login-password" class="form-input" placeholder="123456" onkeypress="if(event.key==='Enter')login()"></div>
<button class="btn btn-accent" onclick="login()">Anmelden</button>
<button class="btn btn-outline" onclick="showRegisterScreen()" style="margin-top:8px">Neues Konto</button>
<div style="background:var(--card);border-radius:var(--radius-sm);padding:12px;margin-top:14px;text-align:center;font-size:11px"><strong>Demo:</strong><br>📧 max@test.de | 🔑 123456<br>📧 herr-mueller@test.de | 🔑 123456</div></div></div>`;
}
function showRegisterScreen() {
document.getElementById('main-content').innerHTML=`
<div style="padding:16px"><button class="back-arrow" onclick="showLoginScreen()">←</button>
<h2 style="margin:14px 0;text-align:center">Konto erstellen</h2>
<div class="form-group"><label>Name</label><input type="text" id="reg-name" class="form-input" placeholder="Dein Name"></div>
<div class="form-group"><label>E-Mail</label><input type="email" id="reg-email" class="form-input" placeholder="deine@email.de"></div>
<div class="form-group"><label>Passwort</label><input type="password" id="reg-password" class="form-input" placeholder="Mind. 6 Zeichen"></div>
<div class="form-group"><label>Geburtsdatum (mind. 13 Jahre)</label><input type="date" id="reg-birthdate" class="form-input"></div>
<button class="btn btn-accent" onclick="register()">Registrieren</button></div>`;
}
function login() {
const email=document.getElementById('login-email').value.trim().toLowerCase(), password=document.getElementById('login-password').value;
const user=DB.users[email];
if(user&&user.password===password){currentUser=user;localStorage.setItem('mf_currentUser',JSON.stringify({email}));document.getElementById('bottom-nav').classList.remove('hidden');navigationHistory=[];showToast(`👋 ${user.name}!`);navigateTo('jobs');}
else showToast('❌ Falsche Anmeldedaten');
}
function register() {
const name=document.getElementById('reg-name').value.trim(), email=document.getElementById('reg-email').value.trim().toLowerCase(), password=document.getElementById('reg-password').value, birthdate=document.getElementById('reg-birthdate').value;
if(!name||!email||!password||!birthdate){showToast('Alle Felder ausfüllen');return;}
if(DB.users[email]){showToast('E-Mail bereits registriert');return;}
const age=Math.floor((new Date()-new Date(birthdate))/(365.25*24*60*60*1000));
if(age<13){showToast('Mindestens 13 Jahre alt');return;}
DB.users[email]={uid:generateId(),name,email,password,age,photoURL:'',bio:'',ratingSum:0,ratingCount:0,completedJobs:0,blockedUsers:[],createdAt:new Date().toISOString()};
currentUser=DB.users[email]; localStorage.setItem('mf_currentUser',JSON.stringify({email}));
document.getElementById('bottom-nav').classList.remove('hidden'); navigationHistory=[]; showToast('🎉 Willkommen!'); navigateTo('jobs');
}
function logout() { currentUser=null; localStorage.removeItem('mf_currentUser'); document.getElementById('bottom-nav').classList.add('hidden'); navigationHistory=[]; showLoginScreen(); showToast('👋 Abgemeldet'); }
// ==================== BILD-UPLOAD ====================
function triggerImageUpload() { document.getElementById('image-upload').click(); }
function handleImageUpload(event) {
const file=event.target.files[0]; if(!file)return;
const reader=new FileReader();
reader.onload=function(e){if(currentUser){currentUser.photoURL=e.target.result;if(DB.users[currentUser.email])DB.users[currentUser.email].photoURL=e.target.result;DB.save();showToast('📸 Profilbild gespeichert!');}};
reader.readAsDataURL(file); event.target.value='';
}
// ==================== FEEDBACK ====================
function showFeedbackScreen() {
updateHeader('feedback');
document.getElementById('main-content').innerHTML = `
<div style="padding:16px"><h2 style="margin-bottom:8px">📝 Feedback</h2>
<div class="form-group"><label>Betreff</label><input type="text" id="feedback-subject" class="form-input"></div>
<div class="form-group"><label>Nachricht *</label><textarea id="feedback-message" class="form-textarea"></textarea></div>
<button class="btn btn-feedback" onclick="sendFeedback()" style="background:#8E24AA;color:white">Senden</button></div>`;
}
function sendFeedback() {
const message=document.getElementById('feedback-message').value.trim();
if(!message){showToast('Nachricht schreiben');return;}
window.location.href='mailto:'+FEEDBACK_EMAIL+'?subject=[MiniJob Finder] Feedback&body='+encodeURIComponent('Von: '+currentUser.name+' ('+currentUser.email+')\n\n'+message);
showToast('✅ E-Mail-Client geöffnet');
}
// ==================== JOBS SCREEN ====================
function showJobsScreen() {
updateHeader('jobs');
document.getElementById('main-content').innerHTML=`
<input type="text" class="search-input" id="job-search" placeholder="🔍 Jobs suchen..." oninput="renderJobs()">
<div class="filter-scroll">${categories.map(c=>`<button class="filter-chip ${(c==='Alle'&&!selectedCategory)||c===selectedCategory?'active':''}" onclick="setCategory('${c==='Alle'?'':c}')">${c}</button>`).join('')}</div>
<div style="padding:4px 14px;font-size:11px"><span>Umkreis:</span> <select id="radius-select" class="form-input" style="width:auto;padding:4px 8px" onchange="changeRadius()">${radiusOptions.map(r=>`<option value="${r}" ${r===radiusFilter?'selected':''}>${r} km</option>`).join('')}</select> <span style="color:var(--text-secondary)">📍 ${userLocation?.name||'Unbekannt'}</span></div>
<div id="jobs-list"></div>`;
renderJobs();
}
function setCategory(cat) { selectedCategory=cat||null; showJobsScreen(); }
function changeRadius() { radiusFilter=parseInt(document.getElementById('radius-select').value); localStorage.setItem('mf_radius',radiusFilter); renderJobs(); }
function renderJobs() {
const jobsList=document.getElementById('jobs-list'); if(!jobsList)return;
// Daten neu laden (wichtig für Live-Updates!)
DB.reload();
let jobs=DB.jobs.filter(j=>j.status==='offen'||j.status==='reserviert');
if(userCoordinates)jobs=jobs.filter(j=>{if(!j.lat||!j.lng)return true;return calculateDistance(userCoordinates.lat,userCoordinates.lng,j.lat,j.lng)<=radiusFilter;});
if(selectedCategory)jobs=jobs.filter(j=>j.category===selectedCategory);
const s=document.getElementById('job-search')?.value?.toLowerCase()||'';
if(s)jobs=jobs.filter(j=>j.title.toLowerCase().includes(s)||j.description.toLowerCase().includes(s)||j.location.toLowerCase().includes(s));
if(userCoordinates)jobs=sortJobsByDistance(jobs);
if(jobs.length===0){
jobsList.innerHTML=`<div class="empty-state"><span class="material-icons">rocket_launch</span><h2>Keine Jobs im Umkreis</h2><p>Erstelle den ersten Job!</p><button class="btn btn-accent" onclick="navigateTo('create')" style="margin-top:12px">Job erstellen</button></div>`;
return;
}
jobsList.innerHTML=jobs.map(job=>{
const creator=Object.values(DB.users).find(u=>u.uid===job.createdBy);
const dist=getDistanceText(job);
const isReserved=job.status==='reserviert';
return`<div class="card job-card ${isReserved?'reserved':''}" onclick="navigateTo('job-detail','${job.id}')" style="position:relative">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px">
<strong style="font-size:14px;flex:1">${escapeHtml(job.title)}</strong>
<span class="job-category">${escapeHtml(job.category)}</span>
</div>
<p style="color:var(--text-secondary);font-size:12px;margin-bottom:6px">${escapeHtml(job.description.substring(0,80))}...</p>
<div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-secondary)">
<span>📍 ${escapeHtml(job.location)}</span>
${dist?`<span class="distance-badge">📏 ${dist}</span>`:''}
<span style="color:var(--success);font-weight:700">💰 ${escapeHtml(job.payment)}</span>
</div>
${isReserved?`<div style="margin-top:6px"><span class="status-badge reserviert">🔒 Reserviert</span></div>`:''}
</div>`;
}).join('');
}
// ==================== JOB DETAIL MIT RESERVIEREN ====================
function showJobDetailScreen(jobId) {
updateHeader('job-detail');
DB.reload();
const job=DB.jobs.find(j=>j.id===jobId);
if(!job){document.getElementById('main-content').innerHTML='<div class="empty-state"><p>Job nicht gefunden</p></div>';return;}
const creator=Object.values(DB.users).find(u=>u.uid===job.createdBy);
const isOwner=job.createdBy===currentUser?.uid;
const isReserved=job.status==='reserviert';
const isOffen=job.status==='offen';
document.getElementById('main-content').innerHTML=`
<div style="padding:14px">
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px">
<span class="job-category">${escapeHtml(job.category)}</span>
<span class="status-badge ${job.status}">${job.status==='offen'?'✅ Offen':job.status==='reserviert'?'🔒 Reserviert':job.status}</span>
</div>
<h2 style="font-size:18px;margin-bottom:8px">${escapeHtml(job.title)}</h2>
<p style="font-size:13px;line-height:1.5;margin-bottom:14px;color:var(--text-secondary)">${escapeHtml(job.description)}</p>
<div style="background:var(--card);padding:12px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:12px">
<p>📍 ${escapeHtml(job.location)}</p><p>💰 ${escapeHtml(job.payment)}</p>
<p>📅 ${new Date(job.date).toLocaleDateString('de-DE')}</p>
<p>🕐 Erstellt: ${new Date(job.createdAt).toLocaleDateString('de-DE')}</p>
</div>
${creator?`<div class="card" style="margin:0 0 14px 0" onclick="navigateTo('user-profile','${creator.uid}')"><div style="display:flex;align-items:center;gap:10px"><div style="width:40px;height:40px;border-radius:50%;background:var(--primary-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700">${creator.name.charAt(0)}</div><div><strong>${escapeHtml(creator.name)}</strong><div style="font-size:11px;color:var(--text-secondary)">${creator.age}J</div></div></div></div>`:''}
${isOffen&&!isOwner?`<button class="btn btn-accent" onclick="applyForJob('${job.id}')">📩 Jetzt bewerben</button>`:''}
${isReserved&&!isOwner?`<button class="btn btn-outline" disabled style="opacity:0.6">🔒 Bereits reserviert</button>`:''}
${isOwner&&isOffen?`<button class="btn btn-reserve" onclick="reserveJob('${job.id}')">🔒 Für Bewerber reservieren</button>`:''}
${isOwner&&isReserved?`<button class="btn btn-unreserve" onclick="unreserveJob('${job.id}')">🔓 Reservierung aufheben</button>`:''}
${isOwner?`<button class="btn btn-danger" onclick="deleteJob('${job.id}')" style="margin-top:6px">🗑️ Job löschen</button>`:''}
</div>`;
}
function applyForJob(jobId) {
const msg=prompt('💬 Nachricht an den Anbieter:');
if(!msg)return;
DB.applications.push({id:generateId(),jobId,applicantId:currentUser.uid,applicantName:currentUser.name,message:msg,status:'ausstehend',createdAt:new Date().toISOString()});
const job=DB.jobs.find(j=>j.id===jobId);
if(job)startChatWithMessage(job.createdBy,`📩 Bewerbung für "${job.title}":\n\n${msg}\n\nVon: ${currentUser.name}`);
DB.save();
showToast('✅ Bewerbung gesendet! Der Anbieter kann den Job jetzt für dich reservieren.');
}
// ==================== JOB RESERVIEREN/FREIGEBEN ====================
function reserveJob(jobId) {
if(!confirm('🔒 Job reservieren?\n\nDer Job wird als "Reserviert" markiert und andere sehen, dass er vergeben sein könnte.\n\nDu kannst die Reservierung jederzeit aufheben.')) return;
const jobIndex = DB._jobs.findIndex(j=>j.id===jobId);
if(jobIndex>-1){
DB._jobs[jobIndex].status = 'reserviert';
DB.save();
showToast('🔒 Job reserviert!');
navigateTo('job-detail', jobId);
}
}
function unreserveJob(jobId) {
if(!confirm('🔓 Reservierung aufheben?\n\nDer Job ist dann wieder für alle sichtbar und offen.')) return;
const jobIndex = DB._jobs.findIndex(j=>j.id===jobId);
if(jobIndex>-1){
DB._jobs[jobIndex].status = 'offen';
DB.save();
showToast('🔓 Job wieder offen!');
navigateTo('job-detail', jobId);
}
}
function deleteJob(jobId) { if(!confirm('Job löschen?'))return; DB.jobs=DB.jobs.filter(j=>j.id!==jobId); DB.save(); showToast('Job gelöscht'); goBack(); }
// ==================== CREATE JOB ====================
function showCreateJobScreen() {
updateHeader('create');
document.getElementById('main-content').innerHTML=`
<div style="padding:14px"><h2>📝 Neuen Job erstellen</h2>
<div class="form-group"><label>Titel *</label><input type="text" id="job-title" class="form-input" placeholder="z.B. Nachhilfe"></div>
<div class="form-group"><label>Kategorie *</label><select id="job-category" class="form-input" onchange="document.getElementById('custom-cat').style.display=this.value==='andere'?'block':'none'"><option value="">Wählen...</option>${categories.filter(c=>c!=='Alle').map(c=>`<option value="${c}">${c}</option>`).join('')}<option value="andere">➕ Eigene...</option></select><input type="text" id="custom-cat" class="form-input" placeholder="Kategorie" style="display:none;margin-top:6px"></div>
<div class="form-group"><label>Beschreibung *</label><textarea id="job-description" class="form-textarea"></textarea></div>
<div class="form-group"><label>Ort *</label><input type="text" id="job-location" class="form-input" value="${escapeHtml(userLocation?.name||'')}"></div>
<div class="form-group"><label>Bezahlung *</label><input type="text" id="job-payment" class="form-input" placeholder="z.B. 15 €/Std"></div>
<button class="btn btn-accent" onclick="createJob()">Veröffentlichen</button></div>`;
}
function createJob() {
const title=document.getElementById('job-title').value.trim(), description=document.getElementById('job-description').value.trim(), location=document.getElementById('job-location').value.trim(), payment=document.getElementById('job-payment').value.trim();
let category=document.getElementById('job-category').value;
if(category==='andere')category=document.getElementById('custom-cat').value.trim();
if(!title||!category||!description||!location||!payment){showToast('Alle Felder ausfüllen');return;}
DB.jobs.unshift({id:generateId(),title,category,description,location,payment,lat:userLocation?.lat||51.89,lng:userLocation?.lng||10.17,date:new Date().toISOString().split('T')[0],createdBy:currentUser.uid,createdAt:new Date().toISOString(),status:'offen'});
DB.save();
showToast('🎉 Job veröffentlicht!');
navigateTo('jobs');
}
// ==================== PROFILE & SETTINGS ====================
function showProfileScreen() {
updateHeader('profile');
const myJobs=DB.jobs.filter(j=>j.createdBy===currentUser.uid).length;
const myApps=DB.applications.filter(a=>a.applicantId===currentUser.uid).length;
document.getElementById('main-content').innerHTML=`
<div style="background:var(--card);padding:20px;text-align:center;border-radius:0 0 var(--radius) var(--radius);margin-bottom:14px">
<div class="profile-avatar" onclick="triggerImageUpload()">${currentUser.photoURL?`<img src="${currentUser.photoURL}">`:currentUser.name.charAt(0)}</div>
<h2>${escapeHtml(currentUser.name)}</h2><p>${currentUser.age} Jahre</p>
<div style="display:flex;justify-content:center;gap:18px;margin-top:8px"><div><strong>${myJobs}</strong><br><span style="font-size:11px">Jobs</span></div><div><strong>${myApps}</strong><br><span style="font-size:11px">Bewerb.</span></div></div>
</div>
<div style="padding:14px;display:flex;flex-direction:column;gap:6px">
<button class="btn btn-outline" onclick="navigateTo('my-jobs')">Meine Jobs</button>
<button class="btn btn-outline" onclick="navigateTo('settings')">Einstellungen</button>
<button class="btn" onclick="navigateTo('feedback')" style="background:#8E24AA;color:white">Feedback</button>
</div>`;
}
function showSettingsScreen() {
updateHeader('settings');
const isDark=document.body.getAttribute('data-theme')==='dark';
document.getElementById('main-content').innerHTML=`
<div style="padding:14px">
<div style="background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:14px">
<div style="display:flex;align-items:center;gap:10px">
<div style="width:45px;height:45px;border-radius:50%;background:var(--primary-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700">${currentUser.name.charAt(0)}</div>
<div><strong>${escapeHtml(currentUser.name)}</strong><p style="font-size:12px;color:var(--text-secondary)">${escapeHtml(currentUser.email)}</p></div>
</div>
</div>
<div style="background:var(--card);border-radius:var(--radius);padding:4px 14px;margin-bottom:14px">
<div class="settings-item" onclick="toggleTheme();showSettingsScreen()"><div class="settings-item-left"><span class="material-icons">${isDark?'dark_mode':'light_mode'}</span>Dark Mode</div><div class="toggle-switch ${isDark?'active':''}"></div></div>
<div class="settings-item" onclick="showLocationModal()"><div class="settings-item-left"><span class="material-icons">edit_location</span>Standort: ${userLocation?.name||'?'} (${radiusFilter}km)</div></div>
<div class="settings-item" onclick="navigateTo('edit-profile')"><div class="settings-item-left"><span class="material-icons">edit</span>Profil bearbeiten</div></div>
</div>
<button class="btn btn-danger" onclick="logout()">Abmelden</button>
<button class="btn" onclick="navigateTo('delete-account')" style="background:#B71C1C;color:white;margin-top:8px">Account löschen</button>
</div>`;
}
function toggleTheme() {
const t=document.body.getAttribute('data-theme')==='light'?'dark':'light';
document.body.setAttribute('data-theme',t); localStorage.setItem('mf_theme',t);
}
function showMyJobs() {
updateHeader('my-jobs');
const myJobs=DB.jobs.filter(j=>j.createdBy===currentUser.uid);
const c=document.getElementById('main-content');
if(myJobs.length===0){c.innerHTML=`<div class="empty-state"><h3>Keine Jobs</h3></div>`;return;}
c.innerHTML=`<div style="padding:14px">${myJobs.map(j=>`<div class="card" onclick="navigateTo('job-detail','${j.id}')"><div style="display:flex;justify-content:space-between"><strong>${escapeHtml(j.title)}</strong><span class="status-badge ${j.status}">${j.status}</span></div><p style="font-size:11px">${escapeHtml(j.location)} • ${escapeHtml(j.payment)}</p></div>`).join('')}</div>`;
}
function showMyApplications() {
updateHeader('my-applications');
const myApps=DB.applications.filter(a=>a.applicantId===currentUser.uid);
const c=document.getElementById('main-content');
if(myApps.length===0){c.innerHTML=`<div class="empty-state"><h3>Keine Bewerbungen</h3></div>`;return;}
c.innerHTML=`<div style="padding:14px">${myApps.map(a=>{const j=DB.jobs.find(j=>j.id===a.jobId);return`<div class="card"><strong>${escapeHtml(j?.title||'Job weg')}</strong><p style="font-size:11px">Status: ${a.status}</p></div>`;}).join('')}</div>`;
}
function editProfileScreen() {
updateHeader('edit-profile');
document.getElementById('main-content').innerHTML=`
<div style="padding:14px"><div style="text-align:center;margin-bottom:16px"><div class="profile-avatar" onclick="triggerImageUpload()">${currentUser.photoURL?`<img src="${currentUser.photoURL}">`:currentUser.name.charAt(0)}</div></div>
<div class="form-group"><label>Name</label><input type="text" id="edit-name" class="form-input" value="${escapeHtml(currentUser.name)}"></div>
<div class="form-group"><label>Bio</label><textarea id="edit-bio" class="form-textarea">${escapeHtml(currentUser.bio||'')}</textarea></div>
<button class="btn btn-accent" onclick="saveProfile()">Speichern</button></div>`;
}
function saveProfile() {
const name=document.getElementById('edit-name').value.trim(), bio=document.getElementById('edit-bio').value.trim();
if(!name){showToast('Name erforderlich');return;}
currentUser.name=name; currentUser.bio=bio;
if(DB.users[currentUser.email]){DB.users[currentUser.email].name=name;DB.users[currentUser.email].bio=bio;}
DB.save(); showToast('✅ Gespeichert!'); goBack();
}
function showUserProfileScreen(userId) {
updateHeader('user-profile');
const user=Object.values(DB.users).find(u=>u.uid===userId);
if(!user)return;
document.getElementById('main-content').innerHTML=`
<div style="background:var(--card);padding:16px;text-align:center;margin-bottom:12px">
<div style="width:60px;height:60px;border-radius:50%;background:var(--primary-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto">${user.name.charAt(0)}</div>
<h2>${escapeHtml(user.name)}</h2><p>${user.age}J</p>
</div>
<div style="padding:14px">${user.uid!==currentUser?.uid?`<button class="btn btn-primary" onclick="startChat('${user.uid}')">💬 Nachricht</button>`:''}</div>`;
}
// ==================== CHATS ====================
function showChatsScreen() {
updateHeader('chats');
const myChats=DB.chats.filter(c=>c.participants.includes(currentUser.uid));
const sorted=[...myChats].sort((a,b)=>{
const aM=DB.messages[a.id]||[], bM=DB.messages[b.id]||[];
return(bM.length>0?new Date(bM[bM.length-1].timestamp).getTime():0)-(aM.length>0?new Date(aM[aM.length-1].timestamp).getTime():0);
});
const c=document.getElementById('main-content');
if(sorted.length===0){c.innerHTML=`<div class="empty-state"><span class="material-icons">chat_bubble_outline</span><h3>Keine Chats</h3></div>`;return;}
c.innerHTML=`<div style="padding:14px">${sorted.map(chat=>{
const oId=chat.participants.find(id=>id!==currentUser.uid), oU=Object.values(DB.users).find(u=>u.uid===oId);
const msgs=DB.messages[chat.id]||[], last=msgs[msgs.length-1];
return`<div class="card" onclick="navigateTo('chat','${chat.id}')"><div style="display:flex;align-items:center;gap:10px"><div style="width:38px;height:38px;border-radius:50%;background:var(--primary-blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:700">${(oU?.name||'?')[0]}</div><div style="flex:1"><strong>${escapeHtml(oU?.name||'?')}</strong><p style="font-size:11px;color:var(--text-secondary)">${last?escapeHtml(last.text.substring(0,30)):'Keine Nachrichten'}</p></div></div></div>`;
}).join('')}</div>`;
}
function startChat(otherUserId) { startChatWithMessage(otherUserId,null); }
function startChatWithMessage(uid,msg) {
let chat=DB.chats.find(c=>c.participants.includes(currentUser.uid)&&c.participants.includes(uid));
if(!chat){chat={id:generateId(),participants:[currentUser.uid,uid],createdAt:new Date().toISOString(),lastRead:{}};DB.chats.push(chat);DB.messages[chat.id]=[];}
if(msg)DB.messages[chat.id].push({id:generateId(),senderId:currentUser.uid,text:msg,timestamp:new Date().toISOString()});
DB.save(); navigateTo('chat',chat.id);
}
function showChatScreen(chatId) {
updateHeader('chat');
const chat=DB.chats.find(c=>c.id===chatId);
if(!chat)return;
if(!chat.lastRead)chat.lastRead={}; chat.lastRead[currentUser.uid]=Date.now(); DB.save();
const msgs=DB.messages[chatId]||[];
document.getElementById('main-content').innerHTML=`<div style="display:flex;flex-direction:column;height:calc(100vh-155px)"><div id="msg-container" style="flex:1;overflow-y:auto;padding:10px">${msgs.length===0?'<p style="text-align:center;margin-top:40px;color:var(--text-secondary)">💬 Keine Nachrichten</p>':''}</div><div style="padding:8px;display:flex;gap:6px;border-top:1px solid var(--border)"><input type="text" id="msg-input" class="form-input" placeholder="Nachricht..." style="flex:1" onkeypress="if(event.key==='Enter')sendMessage('${chatId}')"><button class="btn btn-primary" onclick="sendMessage('${chatId}')" style="width:auto">➤</button></div></div>`;
renderMessages(chatId);
}
function renderMessages(chatId) {
const c=document.getElementById('msg-container'); if(!c)return;
const msgs=DB.messages[chatId]||[];
c.innerHTML=msgs.map(m=>`<div style="display:flex;justify-content:${m.senderId===currentUser.uid?'flex-end':'flex-start'}"><div class="chat-bubble ${m.senderId===currentUser.uid?'sent':'received'}">${escapeHtml(m.text)}<div style="font-size:9px;opacity:0.6;margin-top:3px">${new Date(m.timestamp).toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'})}</div></div></div>`).join('');
if(msgs.length>0)c.scrollTop=c.scrollHeight;
}
function sendMessage(chatId) {
const i=document.getElementById('msg-input'), t=i.value.trim(); if(!t)return;
if(!DB.messages[chatId])DB.messages[chatId]=[];
DB.messages[chatId].push({id:generateId(),senderId:currentUser.uid,text:t,timestamp:new Date().toISOString()});
DB.save(); i.value=''; renderMessages(chatId);
}
// ==================== ACCOUNT LÖSCHEN ====================
function showDeleteAccountScreen() {
updateHeader('delete-account');
document.getElementById('main-content').innerHTML = `
<div style="padding:16px">
<div style="text-align:center;margin-bottom:20px"><span class="material-icons" style="font-size:64px;color:var(--danger)">warning_amber</span>
<h2 style="color:var(--danger)">Account löschen</h2></div>
<div class="form-group"><label>Passwort zur Bestätigung</label><input type="password" id="delete-password" class="form-input"></div>
<label style="display:flex;align-items:center;gap:8px;margin-bottom:14px"><input type="checkbox" id="delete-confirm">Ja, ich möchte meinen Account unwiderruflich löschen</label>
<button class="btn btn-delete-account" onclick="deleteAccount()" style="background:#B71C1C;color:white">🗑️ Account löschen</button>
<button class="btn btn-outline" onclick="goBack()" style="margin-top:8px">Abbrechen</button>
</div>`;
}
function deleteAccount() {
if(!document.getElementById('delete-confirm').checked){showToast('Bitte bestätigen');return;}
if(document.getElementById('delete-password').value!==currentUser.password){showToast('Falsches Passwort');return;}
if(!confirm('WIRKLICH löschen?'))return;
const uid=currentUser.uid, email=currentUser.email;
DB.jobs=DB.jobs.filter(j=>j.createdBy!==uid);
DB.applications=DB.applications.filter(a=>a.applicantId!==uid);
DB.chats.forEach(c=>{if(c.participants.includes(uid))delete DB.messages[c.id];});
DB.chats=DB.chats.filter(c=>!c.participants.includes(uid));
delete DB.users[email]; DB.save();
currentUser=null; localStorage.removeItem('mf_currentUser');
document.getElementById('bottom-nav').classList.add('hidden');
showToast('Account gelöscht'); showLoginScreen();
}
// ==================== START ====================
const savedTheme=localStorage.getItem('mf_theme');
if(savedTheme)document.body.setAttribute('data-theme',savedTheme);
console.log('🚀 MiniJob Finder v4.0');
console.log('🔄 Live-Updates zwischen Tabs aktiv');
console.log('🔒 Job-Reservierung verfügbar');
init();
</script>
