login screen light modus

ReallifeGamemode.Client/Login/main.ts

@@ -31,6 +31,18 @@ export default function (globalData: IGlobalData): void {
 
     mp.events.add('CEF:Login_RequestPlayerName', () => {
         if (loginBrowser) {
+            // 5:30 - 21:00
+            var time = mp.game.time.getLocalTime(0, 0, 0, 0, 0, 0);
+            var date: Date = new Date(time.year, time.month, time.day, time.hour, time.minute, time.second);
+            var from: Date = new Date(time.year, time.month, time.day, 5, 30, 0);
+            var to: Date = new Date(time.year, time.month, time.day, 21, 0, 0);
+
+            mp.gui.chat.push(JSON.stringify(time));
+
+            if (!(date > from && date < to)) { // in Zeitspanne um Light-Modus auszumachen
+                loginBrowser.execute("disableLightMode();");
+            }
+
             loginBrowser.execute(`setPlayerName("${localPlayer.name}");`);
         }
     });

ReallifeGamemode.Client/assets/css/login/styles.css

@@ -35,8 +35,8 @@ body {
     width: fit-content;
     margin: 0 auto;
     padding: 1em .5em;
-    /*background: url("../../img/login/background.jpg") no-repeat;
+    /*background: url("../../img/login/background.jpg") no-repeat;*/
-    background-size: cover;*/
+    background-size: cover;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     font-weight: 400;
     color: #FFF;
@@ -90,7 +90,7 @@ main .form__row--streched {
     justify-content: space-between;
 }
 
-main .form input {
+main form input {
     width: 100%;
     padding: 0 .25em;
     border: none;
@@ -99,18 +99,18 @@ main .form input {
     color: inherit;
 }
 
-main .form input:focus {
+main form input:focus {
     outline-width: 0;
 }
 
-main .form input#password {
+main form input#password {
     font-family: "Roboto Mono";
     font-weight: 500;
     font-size: 1em;
     padding: .5em 2em .5em .5em;
 }
 
-main .form span#password-visibility {
+main form span#password-visibility {
     width: 0;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -119,7 +119,7 @@ main .form span#password-visibility {
     align-self: center;
 }
 
-main .form span#password-visibility::before {
+main form span#password-visibility::before {
     content: "\f06e";
     font-family: "Font Awesome 5 Free";
     font-size: .9em;
@@ -129,12 +129,12 @@ main .form span#password-visibility::before {
     right: 1.75em;
 }
 
-main .form span#password-visibility.hidden::before {
+main form span#password-visibility.hidden::before {
     content: "\f070";
     right: 1.82em;
 }
 
-main .form button.transparent {
+main form button.transparent {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -146,11 +146,11 @@ main .form button.transparent {
     background: transparent;
 }
 
-main .form button.transparent:focus {
+main form button.transparent:focus {
     outline-width: 0;
 }
 
-main .form button[type=submit] {
+main form button.transparent#submit {
     width: 3.25em;
     background-image: url("../../img/login/enter.png");
     background-repeat: no-repeat;
@@ -158,7 +158,7 @@ main .form button[type=submit] {
     background-size: contain;
 }
 
-main .form #alert {
+main form #alert {
     margin-top: .5em;
     padding: .5em;
     color: #FFF;
@@ -167,7 +167,7 @@ main .form #alert {
     border-radius: 5px;
 }
 
-main .form #alert.hidden {
+main form #alert.hidden {
     display: none;
     visibility: hidden;
 }
@@ -195,4 +195,38 @@ footer .link-list {
     justify-content: space-around;
     list-style: none;
 }
+
+body.light {
+    color: #555;
+}
+
+body.light main {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+
+body.light header {
+    background-image: url("../../img/login/logo-light.png");
+}
+
+body.light form input {
+    background-color: rgba(255, 255, 255, 0.125);
+}
+
+body.light form span#password-visibility::before {
+    color: rgba(0, 0, 0, 0.85);
+}
+
+body.light form button.transparent#submit {
+    background-image: url("../../img/login/enter-dark.png");
+}
+
+body.light form #alert {
+    color: #BD5252;
+    background-color: rgba(255, 125, 125, 0.05);
+    border: 1px solid rgba(255, 125, 125, 0.075);
+}
+
+body.light footer {
+    color: rgba(0, 0, 0, 0.5);
+}
 /*# sourceMappingURL=styles.css.map */

ReallifeGamemode.Client/assets/html/login/login.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="../../font/roboto-mono/include_500.css">
 </head>
 
-<body>
+<body class="light">
     <header></header>
 
     <main>
@@ -27,7 +27,7 @@
                         <span id="password-visibility" class="hidden"></span>
                     </div>
 
-                    <button type="submit" class="transparent" id="submit-login"></button>
+                    <button type="submit" class="transparent" id="submit"></button>
                 </div>
                 <div id="alert" class="hidden">
                     Das Passwort kennen wir hier nicht.
@@ -38,8 +38,8 @@
 
     <footer>
         <ul class="link-list">
-            <li class="link-list__item">Forum: <a href="https://gtav.log.ac">gtav.log.ac</a></li>
+            <li class="link-list__item">Forum: <a href="#">gtav.log.ac</a></li>
-            <li class="link-list__item">TeamSpeak: <a href="https://gtav.log.ac">ts.log.ac</a></li>
+            <li class="link-list__item">TeamSpeak: <a href="#">ts.log.ac</a></li>
         </ul>
     </footer>
 

ReallifeGamemode.Client/assets/html/login/register.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../../font/roboto-mono/include_500.css">
 </head>
 
-<body>
+<body class="light">
     <header></header>
 
     <main>
@@ -32,7 +32,7 @@
                         <span id="password-visibility" class="hidden"></span>
                     </div>
 
-                    <button type="submit" class="transparent" id="submit-register"></button>
+                    <button type="submit" class="transparent" id="submit"></button>
                 </div>
                 <div id="alert" class="hidden">
                     Das Passwort kennen wir hier nicht.
@@ -43,8 +43,8 @@
 
     <footer>
         <ul class="link-list">
-            <li class="link-list__item">Forum: <a href="https://gtav.log.ac">gtav.log.ac</a></li>
+            <li class="link-list__item">Forum: <a href="#">gtav.log.ac</a></li>
-            <li class="link-list__item">TeamSpeak: <a href="https://gtav.log.ac">ts.log.ac</a></li>
+            <li class="link-list__item">TeamSpeak: <a href="#">ts.log.ac</a></li>
         </ul>
     </footer>
 

ReallifeGamemode.Client/assets/js/login/application.js

@@ -30,4 +30,8 @@ function showError(error) {
     var errorText = $("#alert");
     errorText.removeClass("hidden");
     errorText.text(error);
+}
+
+function disableLightMode() {
+    $("body").removeClass("light");
 }