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.
```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 {
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%;
}
}

33
client/index.html
View File

@ -7,21 +7,26 @@
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1>
<form id="registerForm">
<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>
<div class="container">
<h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1>
<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 class="form-wrapper">
<form id="registerForm">
<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">
<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>
</body>

4
docker-compose.yml
View File

@ -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