BlockStar Space | Admin Dashboard

Multi-Touch-Revolution Display
Live Control · Carousel / Mindmap Hybrid
Carousel Mindmap 3D Cards
Drag & Drop Diagnose: Initialisiere…
Noch kein Test ausgeführt
Control Panel
System-Aktivitätsanzeigen

Live-Monitoring aller Systemkomponenten
Dashboard-Status (index.html - index30.html)

Auto-Feedback: Performance & Speicherort
Systemtest: Bereit
Noch kein Test ausgeführt Datenquelle: LocalStorage
Index16 Display-Anzeigen & Datenquellen

Exportierte Anzeigen aus RessourcePlan (index16.html)
Dashboard Infosheet index standart

=== DASHBOARD INFOSHEET INDEX STANDART ===

LAYOUT & NAVIGATION:
- Sidebar (Desktop): index/index20 unverändert – Icon + Titel + Plus-Button, Rainbow-Gradient, aktiver Link, unverändertes Markup/Design.
  Template: [🎯 FocusReminder] [📋 ToDo+] [📝 Notizen] ... (20 Items mit Rainbow-Farben)
  
- Footer Dock (Display-Panel): Fixiert am unteren Bildrand von mtr-screen (position:absolute, bottom:0), nutzt widget-carousel-neon-container Struktur, zeigt alle 20 Icons (index01-index20) mit Icon + Titel aus Sidebar, z-index:1000, R/L Slider-Buttons für Navigation, Auto-Sync mit Sidebar via MutationObserver + Event-Listener (blockstar-theme-ready/updated), Retry-Mechanismus (5 Versuche), Items klickbar + draggable (type 'sidebar-item', title, iconClass). SICHTBARKEIT: Desktop (min-width:992px) NICHT sichtbar, Mobile (max-width:991.98px) IMMER sichtbar.
  Template: [◀] 🎯 📋 📝 🏋️ 📅 🍳 🗺️ ... [▶]
            Focus ToDo Notiz Fit  Kal  Ern ...
  
- Multi-Touch Header: Zoomanzeige „− 100% + Multi-Touch-Revolution" mittig inkl. Carousel/Mindmap/3D-Buttons; reale Zoom-Buttons sitzen rechts oben im Mindmap-Screen (Pointer + Maus identisch).
- Drag&Drop Diagnose: Neue Karte mit pulsierender, grüner Status-Lampe + Control-Panel-Link (index16.html) direkt oberhalb des Infosheets.

MINDMAP DISPLAY:
- Start-View: Carousel (Ticker) – Mindmap/3D Cards via Buttons.
- Layout: Responsive Grid-Layout (display:grid, grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))), Nodes zentriert, keine Überlappungen, Zwischenräume 8-14px je nach Viewport. Beim Dragging temporär absolute Position, nach Drag zurück zu relative im Grid.
- Zoom: 100–300 % (Buttons direkt im Screen), Speicherung localStorage 'mtr_zoom_level', synchronisierte Anzeige auch im Header.
- Keyboard/Tap Move: Klick wählt Node, Pfeile bewegen (10px, Shift=20px), Snap-to-Grid, persistiert in 'mtr_mindmap_positions'; ResizeObserver aktualisiert Verbindungen.
- Drag&Drop: Nodes draggable (payload type 'widget'); Drop von calendar-event/sidebar-item (Desktop Sidebar oder Mobile Dock) erstellt neues Node (Icon aus Payload), Gestaltung wird aus Sidebar übernommen (Rainbow-Farben, Icons), Position wird gespeichert. PointerEvents + Maus laufen über BlockstarDnD-Standard.

MONATSKALENDER:
- Inline-Version (mtr-calendar-inline) ist nach Reconstruction standardmäßig verborgen (`hidden`), wird via Control-Panel oder Diagnose freigeschaltet; Darstellung 4 Wochen / 28 Tage wie Blockstar_Admin_v7.1.2fix (Grid, Header mit Refresh-Button).
- Grid/Height: display:grid, grid-template-columns:repeat(7), min-height erzwungen per JS/CSS, Fokus auf Wochenstart Montag.
- DnD: akzeptiert widget, calendar-event, sidebar-item; Events speichern unter 'mtr_calendar_events_v2'; Drag aus Kalender erzeugt Mindmap-Nodes, Drop aus Mindmap/Sidebar legt neue Kalender-Items an.

POPUP-SYSTEM FÜR "+" BUTTON:
- "+" Button oben rechts bei jedem Tag öffnet Popup (position: absolute, top: 100%, right: 0).
- Popup enthält 2 Buttons: 1) "Titel und Text eintragen" (bi-text-paragraph), 2) "Bild/er hochladen" (bi-image).
- Popup schließt bei Klick außerhalb, nur ein Popup gleichzeitig offen.

TEXT-EINTRÄGE:
- Direkteingabe: "+" → "Titel und Text" öffnet Input-Linie am unteren Tag-Rand (faint line).
- Eingabe direkt in Input-Linie ohne Bestätigungs-Panel, Enter-Taste speichert Eintrag.
- Zeitangabe optional (Format: HH:MM), wird vor Titel angezeigt.
- Bearbeiten: Doppelklick auf Eintrag öffnet Prompt für Titel und Zeit.

BILD-UPLOAD FUNKTIONEN:
- Mehrfach-Upload: "+" → "Bild/er hochladen" öffnet File-Dialog mit multiple-Attribut (accept: image/*).
- Base64-Konvertierung: Funktion fileToBase64() konvertiert Dateien zu Base64-Strings.
- Speicherung: Bilder werden als Base64 in LocalStorage gespeichert (Key: mtr_calendar_events_v2).
- Datenstruktur: {id, title, time, dateKey, type: 'image', imageData: base64-string}.

BILD-ANZEIGE IM KALENDER:
- Miniaturisiert: Einzelbild 50x50px (.day-image-item), mehrere Bilder .day-images-container.
- Gallery: Bei mehreren Bildern .day-image-gallery (60px Höhe) mit automatischer Bildwechsel-Animation.
- Animation: startImageAnimation() wechselt alle 3 Sekunden mit smooth Fade-Übergang (1.5s transition).
- Anpassung: Bilder werden auf Tag-Fläche angepasst (object-fit: cover), rounded 4px.

AUTOMATISCHE DUPLIZIERUNG ZU CAROUSEL/3D-CARDS:
- syncCalendarToCarousel(): Konvertiert alle Calendar-Events zu Widget-Items, sortiert nach Datum/Zeit.
- Auto-Sync: Wird automatisch bei saveCalEvents() und nach renderCalendar() aufgerufen.
- Widget-Struktur: Header (Datum), Content (Zeit, Titel, Bild), Löschen-Button, Drag & Drop aktiviert.
- Integration: Widgets erscheinen automatisch im Carousel und 3D-Cards-Modus (durch widget-item Klasse).

  Template (Tag mit 2 Bildern):
  ┌─────────────────────────────┐
  │ Mi  9  Dez          [+]    │ ← Header mit Popup-Button
  ├─────────────────────────────┤
  │ 14:30 · Projekt-Meeting     │ ← Text-Event
  │ 16:00 · Team-Call           │
  │                             │
  │ ┌────┐ ┌────┐              │ ← Bild-Events (50x50px, mit Animation)
  │ │[📷]│ │[📷]│              │
  │ └────┘ └────┘              │
  │                             │
  │ ─────────────────────────  │ ← Input-Linie (Direkteingabe)
  └─────────────────────────────┘

TICKER/WIDGETS:
- Wallstreet-Ticker: widgets-scroll-wrapper läuft per rAF dauerhaft rechts→links, nahtlos durch Clones, Geschwindigkeit ca. 30–70 px/s abhängig von Breite; hover-Pause entfernt.
- Clones: 3x Duplikate jedes Widgets für nahtlosen Übergang ohne sichtbaren Sprung, Reset bei Erreichen der Original-Breite (Carousel), 2x Clones für Footer Dock.
- Performance: requestAnimationFrame für 60 FPS, transition: none während Animation, Transition wird beim Stoppen wieder aktiviert.
- Widget-Größe kompakt (ca. 220–240 px, scale 0.85); Carousel dient als Starterdisplay.
- Auto-Sync: Alle Kalender-Einträge erscheinen automatisch als Widgets im Ticker.

FOOTER DOCK (TECHNISCHE DETAILS):
- HTML-Struktur: .footer-dock-container > .row.mb-3 > .col-12 > .widget-carousel-neon-container > .widgets-scroll-container > .widgets-scroll-wrapper#dock-wrapper, R/L Buttons (.dock-nav.dock-prev/next) absolut positioniert.
- CSS: .footer-dock-container position:absolute, bottom:0, z-index:1000, Desktop display:none!important, Mobile display:block!important, background rgba(0,0,0,0.85), backdrop-filter blur(12px), border-top, box-shadow; .dock-item min-width:90px, max-width:110px, padding:12px 10px, border-radius:12px, flex column, gap:6px; .dock-icon font-size:32px; .dock-title font-size:10px; mtr-screen padding-bottom:120px für Dock-Platz.
- JavaScript: initDockSync() liest #dashboard-menu-list .dashboard-menu-item .nav-link, extrahiert Icon (bi-*) + Titel + Index, erstellt Dock-Items; MutationObserver + Events halten Dock synchron, Drag&Drop-Quellen werden über BlockstarDnD registriert.
- Dock-Items Liste (index01-index20): index01-ÜBERSICHT(bi-speedometer2), index02-FocusReminder(bi-bullseye), index03-Projects(bi-kanban), index04-ToDo+(bi-check2-square), index05-Notizen(bi-journal-richtext), index06-Fitness(bi-heart-pulse), index07-Freizeitplaner(bi-calendar3-event), index08-Ernährungsplan(bi-egg-fried), index09-C/RMmindmap(bi-diagram-2), index10-IsometricCircle(bi-disc), index11-Phone(bi-telephone-outbound), index12-Mail(bi-envelope-paper), index13-SocialMedia(bi-share), index14-TimeMachine(bi-clock-history), index15-DataRevolution(bi-database-gear), index16-RessourcePlan(bi-diagram-3), index17-WEB 3.0 Browser(bi-globe2), index18-BTC Indicators(bi-currency-bitcoin), index19-LiqCallculator(bi-calculator), index20-MultiTrade(bi-lightning-charge).
  Template (Footer Dock Mobile):
  ┌─────────────────────────────────────────┐
  │ [◀]  🎯 📋 📝 🏋️ 📅 🍳 🗺️ ...  [▶]    │
  │     Focus  ToDo Notiz Fit  Kal  Ern ... │
  └─────────────────────────────────────────┘
  
  Template (Sidebar Desktop):
  ┌─────┐
  │  🎯 │  FocusReminder
  │  📋 │  ToDo+
  │  📝 │  Notizen
  │  🏋️ │  Fitness
  │  📅 │  Freizeitplaner
  │ ... │  (20 Items mit Rainbow-Farben)
  └─────┘

SIDEBAR & FOOTER DOCK DRAG:
- Desktop Sidebar: Links über BlockstarDnD als Quellen registriert (type 'sidebar-item', title, iconClass); MutationObserver bindet DnD nach Render.
- Footer Dock (Mobile): Alle 20 Items draggable (type 'sidebar-item'); BlockstarDnD liefert Pointer-Fallback, Dock → Mindmap/Kalender identisch zu Desktop Sidebar.

PERSISTENZ KEYS (alle auto-save direkt):
- mtr_zoom_level (Zoom-Level)
- mtr_mindmap_positions (Node-Positionen)
- mtr_mindmap_connections (Verbindungen)
- mtr_calendar_events_v2 (Kalender-Events)
- blockstar_dashboard_order (Sidebar-Reihenfolge)
- blockstar_dnd_diag (Status letztes Drag&Drop-Diagnose-Ergebnis)

SKRIPTE:
- Mindmap/Calendar/DnD-Logik in dist/index.html Inline-Skript (setzt auf BlockstarDnD auf); Sidebar-Render in js/blockstar-sidebar.js.
- Footer Dock + DnD Engine: initDockSync() + BlockstarDnD sorgen für Auto-Sync und Touch/Drag-Quellen; Diagnosen laufen über js/dnd-diagnostics.js (Buttons „Test aktualisieren“ & Control-Panel Link).

DRAG&DROP STANDARD 2025:
- BlockstarDnD Engine (`js/dnd-engine.js`): Vereinheitlicht Payload {type, source, title, iconClass, meta}, unterstützt DragStart + PointerFallback + programmatische Simulationen. Alle Quellen/Ziele registrieren sich über `registerSource` / `registerTarget`.
- Touch + Desktop identische Logik für Sidebar, Dock, Mindmap, Kalender, Widgets; Events triggern `blockstar:dnd-drop` Broadcasts.
- Automatische Diagnose nach Login via `js/dnd-diagnostics.js` (Simulation Sidebar→Mindmap→Kalender), Ergebnis + Timestamp in `blockstar_dnd_diag`, Anzeige über grüne Lampe + Text.
- Index16 Display Control Panel dokumentiert Standard, listet Drop-Zonen, bietet manuellen Re-Test/Toggles (z. B. Kalender sichtbar schalten).

STANDARTTEMPLATE HINWEISE:
- dist/index.html als Standard nutzen; Carousel ist Default, Mindmap + Karten via Buttons erreichbar; DnD Standard muss in allen künftigen Dashboards übernommen werden.
- Footer Dock: Fixiert am unteren Bildrand von mtr-screen (nicht am HTML-Ende), zeigt alle 20 Icons (index01-index20) aus Sidebar, Auto-Sync funktioniert automatisch, R/L Slider für Navigation, Drag & Drop zu Mindmap/Kalender funktioniert (identisch wie Desktop Sidebar), alle localStorage-Speicherungen automatisch bei Änderung. SICHTBARKEIT: Desktop (min-width:992px) NICHT sichtbar, Mobile (max-width:991.98px) IMMER sichtbar.
- Sidebar bleibt unverändert (Desktop fix, Mobile ausgeblendet); Footer Dock ersetzt Sidebar auf Mobile (Desktop: Sidebar sichtbar, Dock versteckt; Mobile: Sidebar versteckt, Dock sichtbar). Control Panel (index16) dient als verbindliches Referenz-Display.

INFOSHEET CONTAINER-UNTERTEILUNGEN & SYNCHRON-ANZEIGE:
- Layout: Zweispaltige Darstellung (Textfeld links 7/12, Template-Spalte rechts 5/12), synchrones Scrollen zwischen beiden Spalten.
- Container-Struktur: Jeder Hauptabschnitt hat eigenen Container in rechter Spalte mit Titel, Icon und zugehörigen Template-Elementen.
- Abschnitte mit Containern:
  • LAYOUT & NAVIGATION: Sidebar Desktop Template + Footer Dock Mobile Template
  • MINDMAP DISPLAY: Mindmap Node Template
  • MONATSKALENDER: Calendar Day Template (mit 2 Bildern, Einträgen, "+" Button)
  • TICKER/WIDGETS: Carousel Widget Template + 3D Card Template
  • FOOTER DOCK: Footer Dock Mobile Template
- Design: Container mit abgerundeten Ecken (8px), cyan-farbige linke Border (4px), halbtransparenter Hintergrund, Hover-Effekte (hellerer Hintergrund, verstärkter Border-Glow).
- Synchrones Scrollen: Beim Scrollen im Textfeld scrollt Template-Spalte synchron mit, Scroll-Verhältnis wird berechnet basierend auf ScrollHeight/ClientHeight beider Spalten.
- Automatisches Highlighting: Aktiver Container wird beim Scrollen automatisch hervorgehoben (border-left: rgba(0, 217, 255, 1), background: rgba(0, 217, 255, 0.1), box-shadow Glow, transform: scale(1.02)), inaktive Container reduzierte Opazität (0.6).
- Template-Elemente: Jeder Container zeigt realistische, minimierte Darstellungen der UI-Elemente (Sidebar-Items mit Rainbow-Farben, Footer Dock mit Icons, Calendar Day mit Bildern, Widgets mit Headern, 3D Cards mit Perspective).
- Icons pro Abschnitt: LAYOUT & NAVIGATION (bi-layout-sidebar), MINDMAP DISPLAY (bi-diagram-3), MONATSKALENDER (bi-calendar3), TICKER/WIDGETS (bi-arrow-left-right), FOOTER DOCK (bi-phone).
- Technische Umsetzung: JavaScript-Funktion createTemplateContainers() erstellt Container dynamisch, highlightActiveTemplate() erkennt aktiven Abschnitt basierend auf Scroll-Position und Text-Zeilen, Event-Listener auf textarea.scroll für Echtzeit-Highlighting.
Index16 Display-Anzeigen & Datenquellen

Exportierte Anzeigen aus RessourcePlan (index16.html)
System-Aktivitätsanzeigen

Dashboard-Status (index.html - index30.html)

Fehlermeldungen

Index16 Display-Anzeigen & Datenquellen

Dashboard Infosheet index standart

Index16 Display-Anzeigen & Datenquellen

150

53^%

44

65

Sales Value

Direct Chat

Sales Value

System-Aktivitätsanzeigen

Dashboard-Status (index.html - index30.html)

Fehlermeldungen

Index16 Display-Anzeigen & Datenquellen

Dashboard Infosheet index standart

Versionshistorie

Index16 Display-Anzeigen & Datenquellen

150

53%

44

65

Sales Value

Direct Chat

Sales Value

53^%
