Felix #1
12 changed files with 316 additions and 3 deletions
84
Katalog.htm
Normal file
84
Katalog.htm
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Katalog</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="scss/Style.css" media="screen" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="Titel">
|
||||||
|
<h1>Katalog</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Eingabe">
|
||||||
|
<h2>Eingabe</h2>
|
||||||
|
<textarea name="Titel" id="text" placeholder="Titel"></textarea>
|
||||||
|
<textarea name="Author" id="text" placeholder="Author"></textarea>
|
||||||
|
<textarea name="Country" id="text" placeholder="Country"></textarea>
|
||||||
|
<textarea name="Linnk" id="text" placeholder="Link"></textarea>
|
||||||
|
<textarea name="Language" id="text" placeholder="Language"></textarea>
|
||||||
|
<textarea name="Pages" id="text" placeholder="Pages"></textarea>
|
||||||
|
<textarea name="Year" id="text" placeholder="Year"></textarea>
|
||||||
|
<textarea name="Category" id="text" placeholder="Category"></textarea>
|
||||||
|
<textarea name="ImageLink" id="text" placeholder="ImageLink"></textarea>
|
||||||
|
<textarea name="LendTime" id="text" placeholder="LendTime"></textarea>
|
||||||
|
<textarea name="LendType" id="text" placeholder="LendType"></textarea>
|
||||||
|
|
||||||
|
<button id="go">Go</button>
|
||||||
|
</div>
|
||||||
|
<div class="Ausgabe">
|
||||||
|
<h2>Ausgabe</h2>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class ="fix">ProductId</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Titel</td>
|
||||||
|
<td>Die Bibel 2</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Author</td>
|
||||||
|
<td>Mr. IchBinEinAuthor</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Contry</td>
|
||||||
|
<td>Atlantis</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Link</td>
|
||||||
|
<td>lmgtfy.de</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Language</td>
|
||||||
|
<td>latein</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Pages</td>
|
||||||
|
<td>42</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Year</td>
|
||||||
|
<td>2021</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">Category</td>
|
||||||
|
<td>Dies ist ein Beispiel für einen viiiiiiiiiiiiiiiiieeeeeeeeeeeeeeeellllllllllllllllllll zzzzzuuuuuuuuu llllllllllllaaaaaaaaannnnnnnnnnggeeeeeeeennnnnnn TTTTTTeeeeeeeeeeeeeeexxxxxxxxxxxxt</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">ImageLink</td>
|
||||||
|
<td>DiesIstEinBild.png</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">LendTime</td>
|
||||||
|
<td>30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="fix">LendType</td>
|
||||||
|
<td>Buch</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bücherwurm WebInterface</title>
|
<title>Bücherwurm WebInterface</title>
|
||||||
<link rel="stylesheet" href="main.scss">
|
<link rel="stylesheet" type="text/css" href="scss/main.css" media="screen" />
|
||||||
<link rel="stylesheet" href="tables.scss">
|
<!--<link rel="stylesheet" href="tables.css">
|
||||||
<link rel="stylesheet" href="menu.scss">
|
<link rel="stylesheet" href="menu.css">-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div name="main"><!-- der ganze Inhalt ohne Hintergrund. Soll mobileFirst Senkrecht ausgerichtet sein -->
|
<div name="main"><!-- der ganze Inhalt ohne Hintergrund. Soll mobileFirst Senkrecht ausgerichtet sein -->
|
||||||
|
|
|
||||||
17
scss/main.css
Normal file
17
scss/main.css
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
body {
|
||||||
|
background-color: bisque;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: (1fr)[5];
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
-ms-grid-row: 5;
|
||||||
|
grid-row: 5;
|
||||||
|
padding-left: 1%;
|
||||||
|
padding-right: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=main.css.map */
|
||||||
9
scss/main.css.map
Normal file
9
scss/main.css.map
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "AAAA,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,QAAQ,EAAE,IAAI;EACd,QAAQ,EAAE,CAAC;EACX,YAAY,EAAE,EAAE;EAChB,aAAa,EAAG,EAAE;CACrB;;AACD,AAAA,EAAE,CAAA;EACE,UAAU,EAAE,MAAM;CACrB",
|
||||||
|
"sources": [
|
||||||
|
"main.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "main.css"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
body{
|
||||||
|
background-color: bisque;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
grid-row: 5;
|
||||||
|
padding-left: 1%;
|
||||||
|
padding-right: 1%;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
1
scss/menu.css
Normal file
1
scss/menu.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/* No CSS *//*# sourceMappingURL=menu.css.map */
|
||||||
9
scss/menu.css.map
Normal file
9
scss/menu.css.map
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "",
|
||||||
|
"sources": [
|
||||||
|
"menu.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "menu.css"
|
||||||
|
}
|
||||||
85
scss/style.css
Normal file
85
scss/style.css
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
body {
|
||||||
|
background-color: bisque;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: (1fr)[5];
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
-ms-grid-row: 5;
|
||||||
|
grid-row: 5;
|
||||||
|
padding-left: 1%;
|
||||||
|
padding-right: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Titel {
|
||||||
|
text-align: center;
|
||||||
|
-ms-grid-column: 1;
|
||||||
|
-ms-grid-column-span: 5;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
-ms-grid-row: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Eingabe {
|
||||||
|
-ms-grid-column: 1;
|
||||||
|
-ms-grid-column-span: 2;
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
-ms-grid-row: 2;
|
||||||
|
-ms-grid-row-span: 4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
background-color: lightgrey;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Eingabe #go {
|
||||||
|
margin-left: 40%;
|
||||||
|
margin-top: 5%;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Ausgabe {
|
||||||
|
-ms-grid-column: 3;
|
||||||
|
-ms-grid-column-span: 3;
|
||||||
|
grid-column: 3 / 6;
|
||||||
|
-ms-grid-row: 2;
|
||||||
|
-ms-grid-row-span: 4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
background-color: lightgray;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
overflow: auto;
|
||||||
|
width: 90%;
|
||||||
|
height: 3%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-left: 3%;
|
||||||
|
margin-right: 3%;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td, table tr {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
table .fix .headcol {
|
||||||
|
position: absolute;
|
||||||
|
width: 5em;
|
||||||
|
left: 0;
|
||||||
|
top: auto;
|
||||||
|
border-top-width: 1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
9
scss/style.css.map
Normal file
9
scss/style.css.map
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "AAAA,AAAA,IAAI,CACA;EACI,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,QAAQ,EAAE,IAAI;EACd,QAAQ,EAAE,CAAC;EACX,YAAY,EAAE,EAAE;EAChB,aAAa,EAAG,EAAE;CAErB;;AACL,AAAA,MAAM,CACF;EACI,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,CAAC;CAGd;;AACL,AAAA,QAAQ,CACJ;EACI,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,GAAG;EACb,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,eAAe;CAS1B;;AAdL,AAMQ,QANA,CAMA,GAAG,CACH;EACI,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;CACf;;AAGT,AAAA,QAAQ,CACJ;EACI,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,GAAG;EACb,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,eAAe;CAC1B;;AACL,AAAA,EAAE,EAAC,EAAE,CACD;EACA,UAAU,EAAE,MAAM;CACjB;;AAEL,AAAA,QAAQ,CACJ;EACA,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,EAAE;EACV,WAAW,EAAE,EAAE;CACd;;AAEL,AAAA,KAAK,CAAA;EACD,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,eAAe,EAAE,IAAI;CAgBxB;;AAnBD,AAII,KAJC,CAID,EAAE,EAJN,KAAK,CAIG,EAAE,CACN;EACI,MAAM,EAAE,eAAe;CAC1B;;AAPL,AAUQ,KAVH,CAQD,IAAI,CAEA,QAAQ,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,IAAI,EAAE,CAAC;EACP,GAAG,EAAE,IAAI;EACT,gBAAgB,EAAE,GAAG;EACrB,UAAU,EAAE,IAAI;CACjB",
|
||||||
|
"sources": [
|
||||||
|
"style.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "style.css"
|
||||||
|
}
|
||||||
76
scss/style.scss
Normal file
76
scss/style.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
body
|
||||||
|
{
|
||||||
|
background-color: bisque;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
grid-row: 5;
|
||||||
|
padding-left: 1%;
|
||||||
|
padding-right: 1%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.Titel
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
grid-row: 1;
|
||||||
|
//background-color: lightgreen;
|
||||||
|
|
||||||
|
}
|
||||||
|
.Eingabe
|
||||||
|
{
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 2/6;
|
||||||
|
background-color: lightgrey;
|
||||||
|
border: 1px solid black;
|
||||||
|
#go
|
||||||
|
{
|
||||||
|
margin-left: 40%;
|
||||||
|
margin-top: 5%;
|
||||||
|
align-items: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Ausgabe
|
||||||
|
{
|
||||||
|
grid-column: 3 / 6;
|
||||||
|
grid-row: 2/6;
|
||||||
|
background-color: lightgray;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
h2,h1
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea
|
||||||
|
{
|
||||||
|
resize: none;
|
||||||
|
overflow: auto;
|
||||||
|
width: 90%;
|
||||||
|
height: 3%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table{
|
||||||
|
margin-left: 3%;
|
||||||
|
margin-right: 3%;
|
||||||
|
scroll-behavior: auto;
|
||||||
|
td, tr
|
||||||
|
{
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.fix
|
||||||
|
{
|
||||||
|
.headcol {
|
||||||
|
position: absolute;
|
||||||
|
width: 5em;
|
||||||
|
left: 0;
|
||||||
|
top: auto;
|
||||||
|
border-top-width: 1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
scss/tables.css
Normal file
1
scss/tables.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/* No CSS *//*# sourceMappingURL=tables.css.map */
|
||||||
9
scss/tables.css.map
Normal file
9
scss/tables.css.map
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "",
|
||||||
|
"sources": [
|
||||||
|
"tables.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "tables.css"
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue