| **Hintergrund** | <imgsrc="uploads/78e658a6c3bffa98944f71b030df6339/image.png"width="90"/> | Diese Farbe basiert auf der Farbe des Masterstudiengangs Human-centered Computing. Der dunkle Hintergrund bietet einen hohen Kontrast zu anderen UI-Elementen und verbessert dadurch die Lesbarkeit. |
| **Hintergrund** | <imgsrc="uploads/78e658a6c3bffa98944f71b030df6339/image.png"width="90"/> | Diese Farbe basiert auf der Farbe des Masterstudiengangs Human-centered Computing. Der dunkle Hintergrund bietet einen hohen Kontrast zu anderen UI-Elementen und verbessert dadurch die Lesbarkeit. |
| **Boxen** | <imgsrc="uploads/d7ffe123facd4f801a83b9937c05deea/image.png"width="90"/> | Die etwas hellere Farbe für Boxen und Container sorgt für eine klare Abgrenzung der verschiedenen Bereiche innerhalb der Benutzeroberfläche. |
| **Boxen** | <imgsrc="uploads/d7ffe123facd4f801a83b9937c05deea/image.png"width="90"/> | Die etwas hellere Farbe für Boxen und Container sorgt für eine klare Abgrenzung der verschiedenen Bereiche innerhalb der Benutzeroberfläche. |
| **Buttons** | <imgsrc="uploads/68e512fbb615053aa936d51fc883d666/image.png"width="90"/> | Dieses Gelb symbolisiert die Fakultät Informatik, weshalb für die Buttons diese Farbe genutzt wurde. Diese sind so gestaltet, dass sie interaktive Elemente hervorheben und die Navigation für den Benutzer erleichtern. |
| **Buttons** | <imgsrc="uploads/68e512fbb615053aa936d51fc883d666/image.png"width="90"/> | Dieses Gelb symbolisiert die Fakultät Informatik, weshalb für die Buttons diese Farbe genutzt wurde. Diese sind so gestaltet, dass sie interaktive Elemente hervorheben und die Navigation für die Benutzer erleichtern. |
| **Button Hover** | <imgsrc="uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png"width="90"/> | Bei Maus-Hover über Buttons wird eine hellere Gelbfarbe angezeigt, die den interaktiven Zustand visuell hervorhebt und dem Benutzer Rückmeldung gibt. |
| **Button Hover** | <imgsrc="uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png"width="90"/> | Bei Maus-Hover über Buttons wird eine hellere Gelbfarbe angezeigt, die den interaktiven Zustand visuell hervorhebt und dem Benutzer Rückmeldung gibt. |
| **Chat** | <imgsrc="uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png"width="90"/> | Die im Vergleich zum Hintergrund hellere Farbe für den Chat-Bereich verbessert die Lesbarkeit von Nachrichten und sorgt für eine klare Trennung von anderen Inhalten. |
| **Chat** | <imgsrc="uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png"width="90"/> | Die im Vergleich zum Hintergrund hellere Farbe für den Chat-Bereich verbessert die Lesbarkeit von Nachrichten und sorgt für eine klare Trennung von anderen Inhalten. |
Mit diesem Farbschema wird eine visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
Mit diesem Farbschema wird eine visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
### Lightmode
### Light-Modus
Die Möglichkeit in den Light-Modus zu wechseln besteht ebenfalls. Die _theme-provider.tsx_ Datei von shadcn verbindet die CSS Variablen entsprechend und sorgt dafür, dass sie in der gesamten Anwendung einheitlich angewendet werden. Die _mode-toggle.tsx_ Komponente bietet eine einfache Möglichkeit, zwischen verschiedenen Anzeigemodi umzuschalten, indem sie als _<ModeToggle>_ Komponente auf Seiten integriert wird.
Die Farben werden in der index.css Datei festgelegt und können bei Bedarf angepasst werden. Die _background_ Variable steuert die Hintergrundfarben von Komponenten, während foreground für Texte und Icons verwendet wird. Diese CSS-Variablen können in der tailwind.config.js Datei konfiguriert werden und als Klassen über className="" genutzt werden.
### Logo
### Logo
Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf der Hauptfarben aus dem Farbschema gestaltet ist. Der Farbverlauf beginnt auf der linken Seite mit der Farbe der Informatik (#FFCC00), geht in der Mitte in ein Grün über, dass die Hochschule Reutlingen symbolisieren soll und endet auf der rechten Seite mit der Farbe des Studiengangs Human-centered Computing (#13678A). Mit diesem neuen Logo soll die Identität von Venue gestärkt werden.
Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf der Hauptfarben aus dem Farbschema gestaltet ist. Der Farbverlauf beginnt auf der linken Seite mit der Farbe der Informatik (#FFCC00), geht in der Mitte in ein Grün über, dass die Hochschule Reutlingen symbolisieren soll und endet auf der rechten Seite mit der Farbe des Studiengangs Human-centered Computing (#13678A). Mit diesem neuen Logo soll die Identität von Venue gestärkt werden.
...
@@ -161,76 +164,90 @@ Die Hauptkomponenten von Venue umfassen die wesentlichen Seiten der Anwendung, w
...
@@ -161,76 +164,90 @@ Die Hauptkomponenten von Venue umfassen die wesentlichen Seiten der Anwendung, w
**Login**<br>
**Login**<br>
Die Login-Seite ist die erste Seite, die neue Nutzer sehen. Sie ermöglicht die Registrierung neuer Nutzer mit dem Namen.
Die Login-Seite ist die erste Seite, die neue Nutzer sehen. Sie ermöglicht die Registrierung neuer Nutzer mit dem Namen.
Das Hauptmenü dient als zentrale Navigationsseite, dass eine Übersicht über die verfügbaren Räume bietet und Nutzern ermöglicht, mit einem Klick dem gewünschten Raum beizutreten.
Das Hauptmenü dient als zentrale Navigationsseite, dass eine Übersicht über die verfügbaren Räume bietet und Nutzern ermöglicht, mit einem Klick dem gewünschten Raum beizutreten.
Zusätzlich können Nutzer mit dem Button oben Rechts "Add new room" neue Räume erstellen. Diese können bei Bedarf mit einem Passwort geschützt werden. <br>
Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über den Button oben Rechts "Settings" erreicht werden. Hier können Nutzer ihren Namen sowie ihr Profilbild jederzeit ändern. Mit den Buttons rechts neben den Set-Up Select-Boxen, können der Audio-Input, Audio-Output sowie der Video-Input geprüft werden.
Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über den Button oben Rechts "Settings" erreicht werden. <br>
Hier können Nutzer den Namen, das Profilbild sowie die Audio-/ Mikrofon-/ Video-Einstellungen jederzeit ändern. Mit den Buttons rechts neben den Set-Up Select-Boxen, können der Audio-Input, Audio-Output sowie der Video-Input geprüft werden. Des Weiteren besteht auch hier nochmal die Möglichkeit, in den Light-Modus zu wechseln.
2. Der mittlere Bereich beinhaltet den Home-Bereich und die Panels für die User sowie die Moderator-Toolbar. Hier werden zum Beispiel bei einer Präsentation die Folien angezeigt.
1. Der Linke Bereich beinhaltet die Teilnehmer Liste, die Switch Funktion zum Moderator, die Uhrzeit und unten die Buttons Settings und Leave Room. Hier können wieder die Einstellungen angepasst oder der Raum verlassen werden. <br>
3.3 Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist.
3. Der rechte Bereich ist nochmal unterteilt in 3 Tabs.
<imgsrc=" "width="200"/>
- Im linken Tab befindet sich der Gruppenchat. Dieser bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum.
- Der mittlere Bereich ist für den File Upload. Hier können Dokumente hochgeladen werden.
- Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist.
Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen, die zur Optimierung der Benutzererfahrung beitragen und diese sind alle mit der Tab-Steuerung bedienbar, wodurch der Grundstein für Barrierefreiheit gelegt wurde. Es sollte jedoch angemerkt werden, dass die Tab-Navigation im Meetingraum noch nicht so gut funktioniert wie auf der Homepage. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen, die zur Optimierung der Benutzererfahrung beitragen und diese sind alle mit der Tab-Steuerung bedienbar, wodurch der Grundstein für Barrierefreiheit gelegt wurde. Es sollte jedoch angemerkt werden, dass die Tab-Navigation im Meetingraum noch nicht so gut funktioniert wie auf der Homepage. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
**Alert**: Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. 
**Alert**: Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. <br>
**Avatar**: Avatare werden genutzt, um Benutzerbilder darzustellen.
**Avatar**: Avatare werden genutzt, um Benutzerbilder darzustellen. 
**Button**: Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern. 
**Card**: Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. 
**Button**: Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern.
**Command**: Command-Komponenten werden genutzt, um interaktive Befehle oder Aktionen zu repräsentieren. 
**Card**: Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen.
**Dialog**: Dialogs werden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. 
**Command**: Command-Komponenten werden genutzt, um Befehle auszuführen. Hier wird die Command Box für die Suchfunktion verwendet.
**Label**: Labels werden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. 
**Input**: Input-Komponenten werden genutzt, um Benutzereingaben entgegenzunehmen.
**Resizable**: Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern. 
**Menubar**: Menubars werden genutzt, um Navigationsoptionen bereitzustellen.
**Scroll-Area**: Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich. 
**Resizable**: Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern. <br>
**Select**: Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen. 
**Scroll-Area**: Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich. <br>
**Separator**: Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen. 
**Separator**: Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen.
**Tabs**: Tabs werden eingesetzt, um verschiedene Ansichten/Reiter im Meeting Raum zu organisieren. 
**Select**: Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen.
**Toggle-Group und Toggle**: Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. 
**Toggle-Group und Toggle**: Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. Wurde genutzt für die Contrall Bar.
Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und tragen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und tragen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
