Änderung: Erweiterung der deutschen und englischen Übersetzungen sowie Anpassungen in der NoLoginView.vue

Änderungen:
- Neue Übersetzungen für Beta-Hinweise, Einführungstexte und Datenschutzinformationen wurden in die JSON-Dateien für Deutsch und Englisch eingefügt.
- Die NoLoginView.vue wurde aktualisiert, um die neuen Übersetzungen anzuzeigen und die Benutzererfahrung zu verbessern.
- Die Struktur und das Styling der Ansicht wurden optimiert, um eine bessere Lesbarkeit und Benutzerinteraktion zu gewährleisten.

Diese Anpassungen verbessern die Benutzererfahrung und die Verständlichkeit der Plattform während der Beta-Phase.

frontend/src/views/home/NoLoginView.vue

@@ -1,91 +1,78 @@
 <template>
-    <div>
+    <div class="no-login-view">
         <div class="beta-banner" role="status" aria-live="polite">
-            <strong>Beta-Hinweis:</strong> YourPart befindet sich in aktiver Entwicklung. Funktionen können unvollständig sein, Inhalte fehlen noch und es kann zu Änderungen kommen.
+            <strong>{{ $t('home.betaNoticeLabel') }}</strong> {{ $t('home.betaNoticeText') }}
         </div>
         <div class="home-structure">
-        <div class="mascot"><img src="/images/mascot/mascot_male.png" /></div>
-        <div class="actions">
-            <div>
-                <h2>{{ $t('home.nologin.welcome') }}</h2>
-                <p>{{ $t('home.nologin.description') }}</p>
-                <h2>{{ $t('home.nologin.randomchat') }}</h2>
-                <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
-            </div>
-            <div>
+            <div class="mascot"><img src="/images/mascot/mascot_male.png" /></div>
+            <div class="actions">
                 <div>
-                    <div>
-                        <input v-model="username" size="20" type="text"
-                            :placeholder="$t('home.nologin.login.name')"
-                            :title="$t('home.nologin.login.namedescription')"
-                            @keydown.enter="focusPassword">
-                    </div>
-                    <div>
-                        <input v-model="password" size="20" type="password"
-                            :placeholder="$t('home.nologin.login.password')"
-                            :title="$t('home.nologin.login.passworddescription')"
-                            @keydown.enter="doLogin"
-                            ref="passwordInput"
-                            >
-                    </div>
-                    <div>
-                        <label><input type="checkbox"><span>Eingeloggt bleiben</span></label>
-                    </div>
+                    <h2>{{ $t('home.nologin.welcome') }}</h2>
+                    <p>{{ $t('home.nologin.description') }}</p>
+
+                    <p>
+                        YourPart ist eine wachsende Online‑Plattform, die Community‑Funktionen, Echtzeit‑Chat, Foren,
+                        ein soziales Netzwerk mit Bildergalerie sowie das Aufbauspiel <em>Falukant</em> vereint.
+                        Aktuell befindet sich die Seite in der Beta‑Phase – wir erweitern Funktionen, Inhalte und
+                        Stabilität
+                        kontinuierlich.
+                    </p>
+
+                    <h3>{{ $t('home.nologin.expected.title') }}</h3>
+                    <ul>
+                        <li v-html="$t('home.nologin.expected.items.chat')"></li>
+                        <li v-html="$t('home.nologin.expected.items.social')"></li>
+                        <li v-html="$t('home.nologin.expected.items.forum')"></li>
+                        <li v-html="$t('home.nologin.expected.items.falukant')"></li>
+                        <li v-html="$t('home.nologin.expected.items.minigames')"></li>
+                        <li v-html="$t('home.nologin.expected.items.multilingual')"></li>
+                    </ul>
+
+                    <h3>{{ $t('home.nologin.falukantShort.title') }}</h3>
+                    <p>{{ $t('home.nologin.falukantShort.text') }}</p>
+
+                    <h3>{{ $t('home.nologin.privacyBeta.title') }}</h3>
+                    <p>{{ $t('home.nologin.privacyBeta.text') }}</p>
+
+                    <h3>{{ $t('home.nologin.getStarted.title') }}</h3>
+                    <p>{{ $t('home.nologin.getStarted.text', { register: $t('home.nologin.login.register') }) }}</p>
+
+                    <h2>{{ $t('home.nologin.randomchat') }}</h2>
+                    <button @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
                 </div>
                 <div>
-                    <button type="button" @click="doLogin">Einloggen</button>
-                </div>
-                <div>
-                    <span @click="openPasswordResetDialog" class="link">{{
-                        $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
-                        @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
+                    <div>
+                        <div>
+                            <input v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
+                                :title="$t('home.nologin.login.namedescription')" @keydown.enter="focusPassword">
+                        </div>
+                        <div>
+                            <input v-model="password" size="20" type="password"
+                                :placeholder="$t('home.nologin.login.password')"
+                                :title="$t('home.nologin.login.passworddescription')" @keydown.enter="doLogin"
+                                ref="passwordInput">
+                        </div>
+                        <div>
+                            <label><input type="checkbox"><span>{{ $t('home.nologin.login.stayLoggedIn') }}</span></label>
+                        </div>
+                    </div>
+                    <div>
+                        <button type="button" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
+                    </div>
+                    <div>
+                        <span @click="openPasswordResetDialog" class="link">{{
+                            $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
+                            @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="mascot"><img src="/images/mascot/mascot_female.png" /></div>
-        <RandomChatDialog ref="randomChatDialog" />
-        <RegisterDialog ref="registerDialog" />
-        <PasswordResetDialog ref="passwordResetDialog" />
+            <div class="mascot"><img src="/images/mascot/mascot_female.png" /></div>
+            <RandomChatDialog ref="randomChatDialog" />
+            <RegisterDialog ref="registerDialog" />
+            <PasswordResetDialog ref="passwordResetDialog" />
         </div>
 
-        <section class="seo-content">
-            <h1>YourPart – Community, Chat, Forum, Falukant & Minispiele</h1>
-            <p>
-                YourPart ist eine wachsende Online‑Plattform, die Community‑Funktionen, Echtzeit‑Chat, Foren,
-                ein soziales Netzwerk mit Bildergalerie sowie das Aufbauspiel <em>Falukant</em> vereint.
-                Aktuell befindet sich die Seite in der Beta‑Phase – wir erweitern Funktionen, Inhalte und
-                Stabilität kontinuierlich.
-            </p>
 
-            <h2>Was dich erwartet</h2>
-            <ul>
-                <li><strong>Chat</strong>: Öffentliche Räume, zufällige Begegnungen (Random‑Chat) und Farbanpassungen.</li>
-                <li><strong>Soziales Netzwerk</strong>: Profil, Freundschaften, Bildergalerie mit Sichtbarkeiten.</li>
-                <li><strong>Forum</strong>: Themen anlegen, Beiträge verfassen, Moderationsrechte (rollenbasiert).</li>
-                <li><strong>Falukant</strong>: Wirtschaft & Alltag – Zweigstellen verwalten, produzieren, lagern, verkaufen.</li>
-                <li><strong>Minispiele</strong>: z. B. Match‑3‑Level – kurze Unterhaltung zwischendurch.</li>
-                <li><strong>Mehrsprachig</strong>: Deutsch/Englisch – Inhalte werden fortlaufend ergänzt.</li>
-            </ul>
-
-            <h2>Falukant – kurz erklärt</h2>
-            <p>
-                In Falukant führst du Betriebe, bildest Wissen aus, optimierst Produktion und Verkauf, beobachtest Preise
-                und reagierst auf Ereignisse. Benachrichtigungen informieren dich über Status‑Änderungen in Echtzeit.
-            </p>
-
-            <h2>Datenschutz & Beta‑Status</h2>
-            <p>
-                YourPart befindet sich in der <strong>Beta</strong>. Es kann zu Änderungen, Ausfällen und fehlenden
-                Übersetzungen kommen. Wir legen Wert auf Datenschutz und Transparenz; weitere Informationen folgen im
-                Laufe der Beta.
-            </p>
-
-            <h2>Mitmachen</h2>
-            <p>
-                Du kannst die Plattform bereits nutzen, testen und Feedback geben. Registriere dich über “{{ $t('home.nologin.login.register') }}”
-                oder starte unverbindlich den Random‑Chat.
-            </p>
-        </section>
     </div>
 </template>
 
@@ -179,10 +166,12 @@ export default {
     flex: 1;
     background-color: #fdf1db;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     display: flex;
     color: #7E471B;
     flex-direction: column;
+    overflow: auto;
+    padding: 0.5rem;
 }
 
 .actions>div>h2 {
@@ -193,17 +182,48 @@ export default {
     max-width: 1000px;
     margin: 24px auto 0 auto;
     padding: 0 16px 40px 16px;
-    color: #333;
+    color: #7E471B;
+    background-color: #fdf1db;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
 }
+
 .seo-content h1 {
     font-size: 28px;
     margin: 0 0 8px 0;
 }
+
 .seo-content h2 {
     font-size: 20px;
     margin: 18px 0 6px 0;
     color: #444;
 }
-.seo-content p { line-height: 1.6; margin: 0 0 8px 0; }
-.seo-content ul { margin: 0 0 8px 20px; }
+
+.seo-content p {
+    line-height: 1.6;
+    margin: 0 0 8px 0;
+}
+
+.seo-content ul {
+    margin: 0 0 8px 20px;
+}
+
+/* Scrollbarer Bereich für "Was dich erwartet" */
+.seo-content .expected {
+    max-height: 200px;
+    overflow: auto;
+    padding-right: 8px;
+    background-color: #fdf1db;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    margin: 12px 0;
+}
+
+.no-login-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
 </style>