Extended README and added a layout to the website

2025-03-07 14:01:10 +01:00 · 2025-03-07 14:01:10 +01:00 · e79bd08e75
commit e79bd08e75
parent e3947a73e5
3 changed files with 155 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,64 @@
-Inventory tool for D120
+# Inventory tool for D120

-Planned: 
-	Webinterface using SQL to map inventory
-	OAuth as Authenticator to restrict access
+## Planned: 
+ - Webinterface using SQL to map inventory
+ - OAuth as Authenticator to restrict access
+ - pack it with Docker to ship and maintain it easier
+
+## Current State
+ - Frontpage created
+
+## Features
+
+### Extern
+ - Ausleihkatalog ansehen
+ - Verfügbarkeit abfragen
+   - ggfs. ab wann Verfügbar
+   - bis wann kann ausgeliehen werden
+
+### Intern
+ - Inventur durchführen
+ - Gegenstand suchen, Lagerort ausgeben
+ - Gegenstand einlagern
+ - Gegenstand auslagern
+ - Gegenstand Lagerort anpassen/ändern
+ - Gegenstand verleihen
+ - verliehenen Gegenstand wieder entgegennehmen
+ - Mängel vermerken
+ - Details zu Gegenstand abfragen
+   - gelagerte Anzahl, Mängel, Leihstatus, geplante Buchungen
+
+### Abbildung des Inventars
+ - Jeder Lagerraum, jedes Regal, jedes Fach und jeder Gegenstand ist eine Tabelle
+ - Lagerraum:
+   - Regale/Schränke mit NamensID
+   - Kategorie Regal oder Schrank
+   - Ort (Raumnummer)
+ - Regal:
+   - Fächer mit NamensID
+   - Kategorie der Fächer
+   - Gegenstände
+   - Anzahl Gegenstände
+   - Verliehen [ja,nein]
+   - Reservierung vorhanden [ja,nein]
+ - Gegenstände:
+   - Name
+   - Lagerort Regal
+   - Lagerort Raum
+   - Anzahl
+   - Verleihstatus
+
+## Aufbau des Webinterfaces
+
+---
+
+## Inventur: Ablauf
+
+#### Test User
+ - Name: inventory
+ - PW: password
+
+ - Database: Inventory
+
+#### PHP Testserver
+ - php -S localhost:8000
--- a/index.html
+++ b/index.html
@ -1,3 +1,28 @@
-<DOCTYPE! html>
-<body>
-</body>
+<!DOCTYPE html>
+<html lang="de">
+<meta charset="utf-8">
+<head>
+	<title>DunderMifflin</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+  <body class="container">
+      <header>
+	Put navigation here
+      </header>
+      <div class="news">
+	NEWS!
+      </div>
+      <div class="navigation">
+      	Navigation
+      </div>
+      <div class="search-bar">
+      	What are you looking for?
+      </div>
+      <div class="result">
+      	Here's what i found:
+      </div>
+      <!--<footer>
+	Impress etc...
+      </footer>-->
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -1 +1,64 @@
-#Style Sheet
+/*Style Sheet*/
+:root {
+    --silicon: #aeb8d9;
+    --copper: #e3ad30;
+    --matrix: #5e865e;
+    --oxide: #a65f18;
+    --carbon: #472c19;
+    --phantom: #18100b;
+
+    --yellow: #ffb200;
+    --orange: #eb5b00;
+    --pink: #d91656;
+    --purple: #640d5f;
+}
+html {
+	margin: 0px;
+	padding: 0px;
+}
+body {
+  background-color: var(--phantom);
+  color: var(--yellow);
+}
+header {
+	grid-area: header;
+	color: var(--matrix);
+	background-color: var(--copper);
+	border-color: var(--copper);
+
+	margin: 0px;
+	position: sticky;
+	font-size: 20px;
+	text-align: center;
+	border: 0px;
+	top: 0px;
+	padding: 0px;
+
+}
+.container {
+	display: grid;
+	grid-template-areas: 'header header' 'news news' 'navigation search-bar' 'navigation result' 'footer footer';
+	width: 80vw;
+	min-width: 600px;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	row-gap: 5px;
+}
+.navigation {
+	grid-area: navigation;
+}
+.result  {
+	grid-area: result;
+}
+.news {
+	grid-area: news;
+}
+.search-bar {
+	grid-area: search-bar;
+footer {
+	display: grid;
+	grid-area: 'footer';
+	grid-template-columns: auto;
+}
+