chris/webinterface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change index.html

Browse Source
This commit is contained in:
Christian Rute 2024-10-29 21:48:27 +01:00
parent df937ca8da
commit 82ab74641b
4 changed files with 89 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -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. It implements a simple Authentication with JSON Web Tokens.
```shell
docker-compose up --build
```
```shell
docker-compose down
```

73
client/css/styles.css
View File

@ -1,35 +1,84 @@
/* Zentrieren des gesamten Inhalts und Grundfarbgebung */
body { body {
font-family: Arial, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-color: #f4f4f9; background-color: #e9ecef;
} }
form { /* Container für zentrales Layout */
border: 1px solid #ddd; .container {
padding: 20px;
margin: 20px;
background: white;
width: 300px;
text-align: center; 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; color: #333;
font-size: 1.8rem;
margin-bottom: 10px;
}
h2 {
color: #007bff;
font-size: 1.5rem;
margin-bottom: 15px;
} }
input, button { input, button {
width: 100%; width: 80%;
padding: 10px; padding: 12px;
margin: 10px 0; margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd; 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 { button {
background-color: #007bff; background-color: #007bff;
color: white; color: #ffffff;
border: none;
cursor: pointer; 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%;
}
} }

33
client/index.html
View File

@ -7,21 +7,26 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
<h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1> <div class="container">
<form id="registerForm"> <h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1>
<h2>Registrierung</h2>
<input type="text" id="regUsername" placeholder="Benutzername" required>
<input type="email" id="regEmail" placeholder="E-Mail" required>
<input type="password" id="regPassword" placeholder="Passwort" required>
<button type="submit">Registrieren</button>
</form>
<form id="loginForm"> <div class="form-wrapper">
<h2>Login</h2> <form id="registerForm">
<input type="email" id="loginEmail" placeholder="E-Mail" required> <h2>Registrierung</h2>
<input type="password" id="loginPassword" placeholder="Passwort" required> <input type="text" id="regUsername" placeholder="Benutzername" required>
<button type="submit">Anmelden</button> <input type="email" id="regEmail" placeholder="E-Mail" required>
</form> <input type="password" id="regPassword" placeholder="Passwort" required>
<button type="submit">Registrieren</button>
</form>
<form id="loginForm">
<h2>Login</h2>
<input type="email" id="loginEmail" placeholder="E-Mail" required>
<input type="password" id="loginPassword" placeholder="Passwort" required>
<button type="submit">Anmelden</button>
</form>
</div>
</div>
<script src="js/auth.js"></script> <script src="js/auth.js"></script>
</body> </body>

4
docker-compose.yml
View File

@ -15,8 +15,8 @@ services:
container_name: database container_name: database
volumes: volumes:
- mongo-data:/data/db - mongo-data:/data/db
ports: # ports:
- "27017:27017" # - "27017:27017"
networks: networks:
internal_network: internal_network:
ipv4_address: 172.18.0.3 ipv4_address: 172.18.0.3