change index.html

2024-10-29 21:48:27 +01:00 · 2024-10-29 21:48:27 +01:00 · 82ab74641b
commit 82ab74641b
parent df937ca8da
4 changed files with 89 additions and 28 deletions
--- a/README.md
+++ b/README.md
@ -3,3 +3,10 @@ This project aims to be a little interface to an LLM hosted by a vllm-Engine.
 It implements a simple Authentication with JSON Web Tokens.


+```shell
+docker-compose up --build
+```
+
+```shell
+docker-compose down
+```
--- a/client/css/styles.css
+++ b/client/css/styles.css
@ -1,35 +1,84 @@
+/* Zentrieren des gesamten Inhalts und Grundfarbgebung */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
-    background-color: #f4f4f9;
+    background-color: #e9ecef;
 }

-form {
-    border: 1px solid #ddd;
-    padding: 20px;
-    margin: 20px;
-    background: white;
-    width: 300px;
+/* Container für zentrales Layout */
+.container {
    text-align: center;
+    max-width: 500px;
+    padding: 20px;
 }

-h1, h2 {
+/* Styling für die Form-Wrapper */
+.form-wrapper {
+    display: flex;
+    justify-content: space-around;
+    gap: 20px;
+}
+
+/* Formulare aufhübschen */
+.form {
+    background: #ffffff;
+    padding: 20px;
+    width: 75%;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
    color: #333;
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+}
+
+h2 {
+    color: #007bff;
+    font-size: 1.5rem;
+    margin-bottom: 15px;
 }

 input, button {
-    width: 100%;
-    padding: 10px;
+    width: 80%;
+    padding: 12px;
    margin: 10px 0;
+    border-radius: 5px;
    border: 1px solid #ddd;
+    font-size: 1rem;
+}
+
+input:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.3);
 }

 button {
    background-color: #007bff;
-    color: white;
+    color: #ffffff;
+    border: none;
    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    .form-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .form {
+        width: 90%;
+    }
 }
--- a/client/index.html
+++ b/client/index.html
@ -7,7 +7,10 @@
    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
+<div class="container">
    <h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1>
+
+    <div class="form-wrapper">
        <form id="registerForm">
            <h2>Registrierung</h2>
            <input type="text" id="regUsername" placeholder="Benutzername" required>
@ -22,6 +25,8 @@
            <input type="password" id="loginPassword" placeholder="Passwort" required>
            <button type="submit">Anmelden</button>
        </form>
+    </div>
+</div>

 <script src="js/auth.js"></script>
 </body>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -15,8 +15,8 @@ services:
    container_name: database
    volumes:
      - mongo-data:/data/db
-    ports:
-      - "27017:27017"
+    # ports:
+    #   - "27017:27017"
    networks:
      internal_network:
        ipv4_address: 172.18.0.3