Compare commits
	
		
			15 Commits
		
	
	
		
			1.0.0
			...
			v1.0-final
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 701e3c9cf6 | |||
| e320f5b02b | |||
| 5aca84c43b | |||
| 5b483d5c5d | |||
| 037f1ff671 | |||
| 99896a4f77 | |||
| 624ade2032 | |||
| 99b123565c | |||
| be6de240bb | |||
| 7cf1819460 | |||
| 17f0c645f1 | |||
| bdd1017232 | |||
| f4299c33c1 | |||
| f86a14b2f8 | |||
| 2fb5826a3b | 
							
								
								
									
										123485
									
								
								doc/charter/charter.fodt
									
									
									
									
									
								
							
							
						
						@ -1,479 +0,0 @@
 | 
				
			|||||||
:root {
 | 
					 | 
				
			||||||
   font-family: "Fira Sans";
 | 
					 | 
				
			||||||
   line-height: 1.15;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --u5:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
 | 
					 | 
				
			||||||
   --u4:  calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
 | 
					 | 
				
			||||||
   --u3:  calc(1em * 1.5 * 1.5 * 1.5);
 | 
					 | 
				
			||||||
   --u2:  calc(1em * 1.5 * 1.5);
 | 
					 | 
				
			||||||
   --u1:  calc(1em * 1.5);
 | 
					 | 
				
			||||||
   --u0:  calc(1em);
 | 
					 | 
				
			||||||
   --u-1: calc(1em * 0.666);
 | 
					 | 
				
			||||||
   --u-2: calc(1em * 0.666 * 0.666);
 | 
					 | 
				
			||||||
   --u-3: calc(1em * 0.666 * 0.666 * 0.666);
 | 
					 | 
				
			||||||
   --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --root-c-base: #ecf0f1;
 | 
					 | 
				
			||||||
   --root-c-base-highlight: #bdc3c7;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --root-c-primary: #1abc9c;
 | 
					 | 
				
			||||||
   --root-c-primary-highlight: #16a085;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --root-c-secondary: #9b59b6;
 | 
					 | 
				
			||||||
   --root-c-secondary-highlight: #8e44ad;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --root-c-black: #2c3e50;
 | 
					 | 
				
			||||||
   --root-c-black-highlight: #34495e;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-base: var(--root-c-base);
 | 
					 | 
				
			||||||
   --c-base-highlight: var(--root-c-base-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-primary:var(--root-c-primary);
 | 
					 | 
				
			||||||
   --c-primary-highlight: var(--root-c-primary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-secondary: var(--c-secondary);
 | 
					 | 
				
			||||||
   --c-secondary-highlight: var(--root-c-secondary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-black: var(--root-c-black);
 | 
					 | 
				
			||||||
   --c-black-highlight: var(--root-c-black-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.primary {
 | 
					 | 
				
			||||||
   --c-base: var(--root-c-base);
 | 
					 | 
				
			||||||
   --c-base-highlight: var(--root-c-base-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-primary:var(--root-c-primary);
 | 
					 | 
				
			||||||
   --c-primary-highlight: var(--root-c-primary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-secondary: var(--c-secondary);
 | 
					 | 
				
			||||||
   --c-secondary-highlight: var(--root-c-secondary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-black: var(--root-c-black);
 | 
					 | 
				
			||||||
   --c-black: var(--root-c-black-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.secondary {
 | 
					 | 
				
			||||||
   --c-base: var(--root-c-base);
 | 
					 | 
				
			||||||
   --c-base-highlight: var(--root-c-base-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-primary:var(--root-c-secondary);
 | 
					 | 
				
			||||||
   --c-primary-highlight: var(--root-c-secondary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-secondary: var(--root-c-primary);
 | 
					 | 
				
			||||||
   --c-secondary-highlight: var(--root-c-primary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-black: var(--root-c-black);
 | 
					 | 
				
			||||||
   --c-black-highlight: var(--root-c-black-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.inverted {
 | 
					 | 
				
			||||||
   --c-base: var(--root-c-black);
 | 
					 | 
				
			||||||
   --c-base-highlight: var(--root-c-black-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-primary:var(--root-c-primary);
 | 
					 | 
				
			||||||
   --c-primary-highlight: var(--root-c-primary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-secondary: var(--c-secondary);
 | 
					 | 
				
			||||||
   --c-secondary-highlight: var(--root-c-secondary-highlight);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   --c-black: var(--root-c-base);
 | 
					 | 
				
			||||||
   --c-black-highlight: var(--root-c-base-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
* {
 | 
					 | 
				
			||||||
    margin: 0em;
 | 
					 | 
				
			||||||
    padding: 0em;
 | 
					 | 
				
			||||||
    box-sizing: border-box;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
html, body {
 | 
					 | 
				
			||||||
    font-size: var(--u0);
 | 
					 | 
				
			||||||
    height: 100%;
 | 
					 | 
				
			||||||
    background-color: var(--c-base);
 | 
					 | 
				
			||||||
    color: var(--c-black)
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
main {
 | 
					 | 
				
			||||||
   min-height: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h1, h2, h3, h4, h5 {
 | 
					 | 
				
			||||||
   font-family: "Fira Mono";
 | 
					 | 
				
			||||||
   padding-top: 1em;
 | 
					 | 
				
			||||||
   padding-bottom: 0.618em;
 | 
					 | 
				
			||||||
   text-transform: uppercase;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
p {
 | 
					 | 
				
			||||||
   padding-top: 1em;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h1 {
 | 
					 | 
				
			||||||
   font-size: var(--u2);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h2 {
 | 
					 | 
				
			||||||
   font-size: var(--u1);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
h3, h4, h5 {
 | 
					 | 
				
			||||||
   font-size: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
img {
 | 
					 | 
				
			||||||
   width: 100%;
 | 
					 | 
				
			||||||
   object-fit: cover;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
li {
 | 
					 | 
				
			||||||
    list-style-type: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table {
 | 
					 | 
				
			||||||
   width: 100%;
 | 
					 | 
				
			||||||
   border-collapse: collapse;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table td,
 | 
					 | 
				
			||||||
table th {
 | 
					 | 
				
			||||||
   padding: var(--u0);
 | 
					 | 
				
			||||||
   text-align: center;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table th {
 | 
					 | 
				
			||||||
   background-color: var(--c-primary);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
table tr:nth-child(2n+1) {
 | 
					 | 
				
			||||||
   background-color: var(--c-base-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 *  NAV
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav {
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav h1 {
 | 
					 | 
				
			||||||
   font-size: var(--u0);
 | 
					 | 
				
			||||||
   margin: 0rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav li {
 | 
					 | 
				
			||||||
   display: flex;
 | 
					 | 
				
			||||||
   flex-direction: column;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav li li {
 | 
					 | 
				
			||||||
   margin-left: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav li a {
 | 
					 | 
				
			||||||
   padding: var(--u0);
 | 
					 | 
				
			||||||
   transition: all 0.1s ease-out;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
nav li a:hover,
 | 
					 | 
				
			||||||
nav li a.selected {
 | 
					 | 
				
			||||||
   padding: var(--u0);
 | 
					 | 
				
			||||||
   background-color: var(--c-primary);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * FOOTER
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
footer {
 | 
					 | 
				
			||||||
   padding-top: var(--u3);
 | 
					 | 
				
			||||||
   padding-bottom:  var(--u1);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * INPUTS
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
form * {
 | 
					 | 
				
			||||||
   width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
input[type="text"],
 | 
					 | 
				
			||||||
input[type="password"] {
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   background-color: var(--c-base);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   border: none;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   border-radius: var(--u-2);
 | 
					 | 
				
			||||||
   margin-top: var(--u0);
 | 
					 | 
				
			||||||
   margin-bottom: var(--u0);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   padding: var(--u0);
 | 
					 | 
				
			||||||
   font-size: var(--u0);
 | 
					 | 
				
			||||||
   color: var(--c-black);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   /* box-shadow: var(--s-0-secondary); */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
input[type="text"]::placeholder,
 | 
					 | 
				
			||||||
input[type="password"]::placeholder  {
 | 
					 | 
				
			||||||
  color: var(--c-primary-highlight);
 | 
					 | 
				
			||||||
  opacity: 50%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
button, .button {
 | 
					 | 
				
			||||||
   font-family: "Fira Mono";
 | 
					 | 
				
			||||||
   font-weight: bold;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   background-color: var(--c-primary);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   border: none;
 | 
					 | 
				
			||||||
   border-radius: var(--u-2);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   margin-bottom: var(--u0);
 | 
					 | 
				
			||||||
   margin-top: var(--u0);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   padding: var(--u0);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   min-width: 10em;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   font-family: "Fira Mono";
 | 
					 | 
				
			||||||
   text-transform: uppercase;
 | 
					 | 
				
			||||||
   font-size: var(--u0);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   /* box-shadow: var(--s-0-secondary); */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
button:active, .button:active {
 | 
					 | 
				
			||||||
   background-color: var(--c-primary-highlight);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
input[type="text"],
 | 
					 | 
				
			||||||
input[type="password"],
 | 
					 | 
				
			||||||
button,
 | 
					 | 
				
			||||||
.button {
 | 
					 | 
				
			||||||
   transition: all 0.1s ease-out;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
label {
 | 
					 | 
				
			||||||
   display: block;
 | 
					 | 
				
			||||||
   min-width: 10em;
 | 
					 | 
				
			||||||
   font-weight: bold;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * HERO
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.hero {
 | 
					 | 
				
			||||||
   background-color: var(--c-primary);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.hero-black {
 | 
					 | 
				
			||||||
   background-color: var(--c-black);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * LAYOUT
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.content-width {
 | 
					 | 
				
			||||||
    max-width: 80rem;
 | 
					 | 
				
			||||||
    margin-left: auto;
 | 
					 | 
				
			||||||
    margin-right: auto;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    padding-left: var(--u0);
 | 
					 | 
				
			||||||
    padding-right: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.bar-flex {
 | 
					 | 
				
			||||||
   display: flex;
 | 
					 | 
				
			||||||
   align-items: center;
 | 
					 | 
				
			||||||
   justify-content: space-between;
 | 
					 | 
				
			||||||
   flex-wrap: wrap;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.bar-flex > * {
 | 
					 | 
				
			||||||
   margin: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.bar-flex > .spacer {
 | 
					 | 
				
			||||||
   flex: 1;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.sidebar-layout {
 | 
					 | 
				
			||||||
   display: flex;
 | 
					 | 
				
			||||||
   align-items: stretch;
 | 
					 | 
				
			||||||
   justify-content: center;
 | 
					 | 
				
			||||||
   flex-wrap: wrap;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.sidebar-layout > *:nth-child(2) {
 | 
					 | 
				
			||||||
   flex: 1;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid {
 | 
					 | 
				
			||||||
   display: flex;
 | 
					 | 
				
			||||||
   justify-content: flex-start;
 | 
					 | 
				
			||||||
   flex-wrap: wrap;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.vertical-center {
 | 
					 | 
				
			||||||
   align-items: center;
 | 
					 | 
				
			||||||
   height: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.center {
 | 
					 | 
				
			||||||
   justify-content: space-around;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid > * {
 | 
					 | 
				
			||||||
    flex: 1;
 | 
					 | 
				
			||||||
    margin: var(--u0);
 | 
					 | 
				
			||||||
    padding: var(--u0);
 | 
					 | 
				
			||||||
    border-radius: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.base > * {
 | 
					 | 
				
			||||||
   background-color: var(--c-base);
 | 
					 | 
				
			||||||
   color: var(--c-black);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.black > * {
 | 
					 | 
				
			||||||
   background-color: var(--c-black);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.primary > * {
 | 
					 | 
				
			||||||
   background-color: var(--c-primary);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.secondary > * {
 | 
					 | 
				
			||||||
   background-color: var(--c-primary-highlight);
 | 
					 | 
				
			||||||
   color: var(--c-base);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.hero-primary .grid.shadow > * {
 | 
					 | 
				
			||||||
   /* box-shadow: var(--s-0-secondary); */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.hero-black .grid.shadow > * {
 | 
					 | 
				
			||||||
   /* box-shadow: var(--s-0-secondary); */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.s > .spacer {
 | 
					 | 
				
			||||||
   box-shadow: none;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   margin: calc(var(--u0) * 2);
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   width: 10rem;
 | 
					 | 
				
			||||||
   max-width: 10rem;
 | 
					 | 
				
			||||||
   min-width: 7.5rem;
 | 
					 | 
				
			||||||
   height: 0px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.s > * {
 | 
					 | 
				
			||||||
   max-width: 10rem;
 | 
					 | 
				
			||||||
   min-width: 7.5rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.m > .spacer {
 | 
					 | 
				
			||||||
   box-shadow: none;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   margin: calc(var(--u0) * 2);
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   width: 20rem;
 | 
					 | 
				
			||||||
   max-width: 20rem;
 | 
					 | 
				
			||||||
   min-width: 15rem;
 | 
					 | 
				
			||||||
   height: 0px;
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.m > * {
 | 
					 | 
				
			||||||
   width: 20rem;
 | 
					 | 
				
			||||||
   max-width: 20rem;
 | 
					 | 
				
			||||||
   min-width: 15rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.l > .spacer {
 | 
					 | 
				
			||||||
   box-shadow: none;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   margin: calc(var(--u0) * 2);
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   width: 40rem;
 | 
					 | 
				
			||||||
   max-width: 40rem;
 | 
					 | 
				
			||||||
   min-width: 15rem;
 | 
					 | 
				
			||||||
   height: 0px;
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.grid.l > * {
 | 
					 | 
				
			||||||
   width: 40rem;
 | 
					 | 
				
			||||||
   max-width: 40rem;
 | 
					 | 
				
			||||||
   min-width: 15rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.vertical-spacer.s {
 | 
					 | 
				
			||||||
   min-height: 10rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.vertical-spacer.m {
 | 
					 | 
				
			||||||
   min-height: 20rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.vertical-spacer.l {
 | 
					 | 
				
			||||||
   min-height: 40rem;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * Impov
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.input-icon {
 | 
					 | 
				
			||||||
   /* box-shadow: var(--s-0-secondary); */
 | 
					 | 
				
			||||||
   display: flex;
 | 
					 | 
				
			||||||
   padding: 0px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   border-radius: var(--u0);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.input-icon > input {
 | 
					 | 
				
			||||||
   flex: 1;
 | 
					 | 
				
			||||||
   margin: 0px;
 | 
					 | 
				
			||||||
   border-top-right-radius: 0px;
 | 
					 | 
				
			||||||
   border-bottom-right-radius: 0px;
 | 
					 | 
				
			||||||
   box-shadow: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.input-icon > button {
 | 
					 | 
				
			||||||
   margin: 0px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
   border-top-left-radius: 0px;
 | 
					 | 
				
			||||||
   border-bottom-left-radius: 0px;
 | 
					 | 
				
			||||||
   box-shadow: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/*
 | 
					 | 
				
			||||||
 * CONTENT
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.price {
 | 
					 | 
				
			||||||
   opacity: 75%;
 | 
					 | 
				
			||||||
   font-size: var(--u1);
 | 
					 | 
				
			||||||
   text-align: right;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@ -1,124 +0,0 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					 | 
				
			||||||
<html lang="de" dir="ltr">
 | 
					 | 
				
			||||||
   <head>
 | 
					 | 
				
			||||||
      <meta charset="utf-8">
 | 
					 | 
				
			||||||
      <title>Frontpage</title>
 | 
					 | 
				
			||||||
      <link rel="stylesheet" type="text/css" href="css/ecom.css">
 | 
					 | 
				
			||||||
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 | 
					 | 
				
			||||||
   </head>
 | 
					 | 
				
			||||||
   <body>
 | 
					 | 
				
			||||||
      <nav class='hero'>
 | 
					 | 
				
			||||||
         <div class='content-width bar-flex'>
 | 
					 | 
				
			||||||
            <h1>Project eCommerce</h1>
 | 
					 | 
				
			||||||
            <button>Angebote</button>
 | 
					 | 
				
			||||||
            <div class='spacer input-icon secondary'>
 | 
					 | 
				
			||||||
               <input type="text" placeholder="Nach Produkten suchen..."/>
 | 
					 | 
				
			||||||
               <button>Finden</button>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <button>Login</button>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </nav>
 | 
					 | 
				
			||||||
      <main>
 | 
					 | 
				
			||||||
         <div class='hero'>
 | 
					 | 
				
			||||||
            <div class='content-width'>
 | 
					 | 
				
			||||||
               <h1>Angebote</h1>
 | 
					 | 
				
			||||||
               <div class='grid m base shadow'>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section>
 | 
					 | 
				
			||||||
                     <img src="pics/product-1.jpg">
 | 
					 | 
				
			||||||
                     <h2>Lorem Ipsum</h2>
 | 
					 | 
				
			||||||
                     <p class='price'> 25.14 €</p>
 | 
					 | 
				
			||||||
                     <p>
 | 
					 | 
				
			||||||
                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
 | 
					 | 
				
			||||||
                     </p>
 | 
					 | 
				
			||||||
                  </section>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section>
 | 
					 | 
				
			||||||
                     <img src="pics/product-2.jpg">
 | 
					 | 
				
			||||||
                     <h2>Lorem Ipsum</h2>
 | 
					 | 
				
			||||||
                     <p class='price'> 10.14 €</p>
 | 
					 | 
				
			||||||
                     <p>
 | 
					 | 
				
			||||||
                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
 | 
					 | 
				
			||||||
                     </p>
 | 
					 | 
				
			||||||
                  </section>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section>
 | 
					 | 
				
			||||||
                     <img src="pics/product-1.jpg">
 | 
					 | 
				
			||||||
                     <h2>Lorem Ipsum</h2>
 | 
					 | 
				
			||||||
                     <p class='price'> 25.14 €</p>
 | 
					 | 
				
			||||||
                     <p>
 | 
					 | 
				
			||||||
                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
 | 
					 | 
				
			||||||
                     </p>
 | 
					 | 
				
			||||||
                  </section>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section>
 | 
					 | 
				
			||||||
                     <img src="pics/product-2.jpg">
 | 
					 | 
				
			||||||
                     <h2>Lorem Ipsum</h2>
 | 
					 | 
				
			||||||
                     <p class='price'> 10.14 €</p>
 | 
					 | 
				
			||||||
                     <p>
 | 
					 | 
				
			||||||
                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
 | 
					 | 
				
			||||||
                     </p>
 | 
					 | 
				
			||||||
                  </section>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section>
 | 
					 | 
				
			||||||
                     <img src="pics/product-3.jpg">
 | 
					 | 
				
			||||||
                     <h2>Lorem Ipsum</h2>
 | 
					 | 
				
			||||||
                     <p class='price'> 44.14 €</p>
 | 
					 | 
				
			||||||
                     <p>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                        Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                     </p>
 | 
					 | 
				
			||||||
                  </section>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                  <section class="spacer"></section>
 | 
					 | 
				
			||||||
                  <section class="spacer"></section>
 | 
					 | 
				
			||||||
                  <section class="spacer"></section>
 | 
					 | 
				
			||||||
                  <section class="spacer"></section>
 | 
					 | 
				
			||||||
               </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="vertical-spacer s"></div>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
         <div class=''>
 | 
					 | 
				
			||||||
            <div class='content-width'>
 | 
					 | 
				
			||||||
               <h1>Personalisierte Empfehlungen</h1>
 | 
					 | 
				
			||||||
               <div class="grid l">
 | 
					 | 
				
			||||||
                  <img src="undraw/undraw_successful_purchase_secondary.svg"/>
 | 
					 | 
				
			||||||
                  <div>
 | 
					 | 
				
			||||||
                     <h2>Werde jetzt Kunde</h2>
 | 
					 | 
				
			||||||
                     <p> Jetzt Kunde werden und viele Vorteile sichern,
 | 
					 | 
				
			||||||
                         wie  z.B. personalisierte Empfehlungen. </p>
 | 
					 | 
				
			||||||
                     <button>Registieren</button>
 | 
					 | 
				
			||||||
                  </div>
 | 
					 | 
				
			||||||
               </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="vertical-spacer s"></div>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </main>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <footer class="hero-black">
 | 
					 | 
				
			||||||
         <div class='content-width bar-flex'>
 | 
					 | 
				
			||||||
            <h3>Project eCommerce</h3>
 | 
					 | 
				
			||||||
            <div class="spacer"></div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Seite</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Login</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Angebote</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Suche</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Mitarbeiter Login</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Mehr</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Nutzungsbedingungen</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Datenschutz</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Über</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </footer>
 | 
					 | 
				
			||||||
   </body>
 | 
					 | 
				
			||||||
</html>
 | 
					 | 
				
			||||||
@ -1,158 +0,0 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					 | 
				
			||||||
<html lang="de" dir="ltr">
 | 
					 | 
				
			||||||
   <head>
 | 
					 | 
				
			||||||
      <meta charset="utf-8">
 | 
					 | 
				
			||||||
      <title>Frontpage</title>
 | 
					 | 
				
			||||||
      <link rel="stylesheet" type="text/css" href="css/ecom.css">
 | 
					 | 
				
			||||||
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 | 
					 | 
				
			||||||
   </head>
 | 
					 | 
				
			||||||
   <body>
 | 
					 | 
				
			||||||
      <nav class='hero'>
 | 
					 | 
				
			||||||
         <div class='content-width bar-flex'>
 | 
					 | 
				
			||||||
            <h1>Project eCommerce</h1>
 | 
					 | 
				
			||||||
            <button>Angebote</button>
 | 
					 | 
				
			||||||
            <div class='spacer input-icon secondary'>
 | 
					 | 
				
			||||||
               <input type="text" placeholder="Nach Produkten suchen..."/>
 | 
					 | 
				
			||||||
               <button>Finden</button>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <button>Login</button>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </nav>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <main class="sidebar-layout content-width">
 | 
					 | 
				
			||||||
         <nav>
 | 
					 | 
				
			||||||
            <ul>
 | 
					 | 
				
			||||||
               <li><a>Dashboard</a>
 | 
					 | 
				
			||||||
                  <ul>
 | 
					 | 
				
			||||||
                     <li><a>Artikel</a></li>
 | 
					 | 
				
			||||||
                     <li><a>Umsatzsteuer</a></li>
 | 
					 | 
				
			||||||
                     <li><a class='selected'>Geldbuchungen</a></li>
 | 
					 | 
				
			||||||
                     <li><a>Einstellungen</a></li>
 | 
					 | 
				
			||||||
                  </ul>
 | 
					 | 
				
			||||||
               </li>
 | 
					 | 
				
			||||||
               <li><a>Lieferanten</a>
 | 
					 | 
				
			||||||
                  <ul>
 | 
					 | 
				
			||||||
                     <li><a>Warenbuchungen</a></li>
 | 
					 | 
				
			||||||
                     <li><a>Geldbuchungen</a></li>
 | 
					 | 
				
			||||||
                  </ul>
 | 
					 | 
				
			||||||
               </li>
 | 
					 | 
				
			||||||
               <li><a>Lager</a>
 | 
					 | 
				
			||||||
                  <ul>
 | 
					 | 
				
			||||||
                     <li><a>Bestandsbuchungen</a></li>
 | 
					 | 
				
			||||||
                  </ul>
 | 
					 | 
				
			||||||
               </li>
 | 
					 | 
				
			||||||
               <li><a>Kunden</a>
 | 
					 | 
				
			||||||
                  <ul>
 | 
					 | 
				
			||||||
                     <li><a>Bestellungen</a></li>
 | 
					 | 
				
			||||||
                     <li><a>Geldbuchungen</a></li>
 | 
					 | 
				
			||||||
                  </ul>
 | 
					 | 
				
			||||||
               </li>
 | 
					 | 
				
			||||||
            </ul>
 | 
					 | 
				
			||||||
         </nav>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
         <div class="content-width">
 | 
					 | 
				
			||||||
            <h1>Geldbuchungen</h1>
 | 
					 | 
				
			||||||
            <p>
 | 
					 | 
				
			||||||
               <table>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <th>Id</th>
 | 
					 | 
				
			||||||
                     <th>Datum</th>
 | 
					 | 
				
			||||||
                     <th>Betrag</th>
 | 
					 | 
				
			||||||
                     <th>Gegenkonto</th>
 | 
					 | 
				
			||||||
                     <th>Betreff</th>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
                  <tr>
 | 
					 | 
				
			||||||
                     <td>#100</td>
 | 
					 | 
				
			||||||
                     <td>2019-10-08</td>
 | 
					 | 
				
			||||||
                     <td>100,50 €</td>
 | 
					 | 
				
			||||||
                     <td>Lieferant: Hans</td>
 | 
					 | 
				
			||||||
                     <td>Bestellungen: #41</td>
 | 
					 | 
				
			||||||
                  </tr>
 | 
					 | 
				
			||||||
               </table>
 | 
					 | 
				
			||||||
            </p>
 | 
					 | 
				
			||||||
            <p>
 | 
					 | 
				
			||||||
               <a class="button">Manuelle Buchung</a>
 | 
					 | 
				
			||||||
            </p>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </main>
 | 
					 | 
				
			||||||
      <footer class="hero-black">
 | 
					 | 
				
			||||||
         <div class='content-width bar-flex'>
 | 
					 | 
				
			||||||
            <h3>Project eCommerce</h3>
 | 
					 | 
				
			||||||
            <div class="spacer"></div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Seite</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Login</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Angebote</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Suche</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Mitarbeiter Login</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Mehr</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Nutzungsbedingungen</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Datenschutz</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Über</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </footer>
 | 
					 | 
				
			||||||
   </body>
 | 
					 | 
				
			||||||
</html>
 | 
					 | 
				
			||||||
@ -1,48 +0,0 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					 | 
				
			||||||
<html lang="de" dir="ltr">
 | 
					 | 
				
			||||||
   <head>
 | 
					 | 
				
			||||||
      <meta charset="utf-8">
 | 
					 | 
				
			||||||
      <title>Frontpage</title>
 | 
					 | 
				
			||||||
      <link rel="stylesheet" type="text/css" href="css/ecom.css">
 | 
					 | 
				
			||||||
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 | 
					 | 
				
			||||||
   </head>
 | 
					 | 
				
			||||||
   <body>
 | 
					 | 
				
			||||||
      <div class='grid m center vertical-center'>
 | 
					 | 
				
			||||||
         <form class='hero primary'>
 | 
					 | 
				
			||||||
            <p>
 | 
					 | 
				
			||||||
               <label>Nutzername</label>
 | 
					 | 
				
			||||||
               <input type="text" placeholder=""/>
 | 
					 | 
				
			||||||
            </p>
 | 
					 | 
				
			||||||
            <p>
 | 
					 | 
				
			||||||
               <label>Passwort</label>
 | 
					 | 
				
			||||||
               <input type="password" placeholder=""/>
 | 
					 | 
				
			||||||
            </p>
 | 
					 | 
				
			||||||
            <button class='secondary'>Login</button>
 | 
					 | 
				
			||||||
         </form>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <footer class="hero-black">
 | 
					 | 
				
			||||||
         <div class='content-width bar-flex'>
 | 
					 | 
				
			||||||
            <h3>Project eCommerce</h3>
 | 
					 | 
				
			||||||
            <div class="spacer"></div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Seite</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Login</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Angebote</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Suche</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Mitarbeiter Login</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
               <h4>Mehr</h4>
 | 
					 | 
				
			||||||
               <ul>
 | 
					 | 
				
			||||||
                  <li><a>Nutzungsbedingungen</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Datenschutz</a></li>
 | 
					 | 
				
			||||||
                  <li><a>Über</a></li>
 | 
					 | 
				
			||||||
               </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
         </div>
 | 
					 | 
				
			||||||
      </footer>
 | 
					 | 
				
			||||||
   </body>
 | 
					 | 
				
			||||||
</html>
 | 
					 | 
				
			||||||
| 
		 Before Width: | Height: | Size: 21 KiB  | 
| 
		 Before Width: | Height: | Size: 26 KiB  | 
| 
		 Before Width: | Height: | Size: 24 KiB  | 
| 
		 Before Width: | Height: | Size: 21 KiB  | 
| 
		 Before Width: | Height: | Size: 22 KiB  | 
| 
		 Before Width: | Height: | Size: 20 KiB  | 
| 
		 Before Width: | Height: | Size: 22 KiB  | 
| 
		 Before Width: | Height: | Size: 20 KiB  | 
@ -31,7 +31,7 @@
 | 
				
			|||||||
			"shouldBeAdvertised": false
 | 
								"shouldBeAdvertised": false
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		{
 | 
							{
 | 
				
			||||||
			"title": "Aeroheat CYLON PC-Geh<EFBFBD>use",
 | 
								"title": "Aeroheat CYLON PC-Gehäuse",
 | 
				
			||||||
			"manufacturer": "Aeroheat",
 | 
								"manufacturer": "Aeroheat",
 | 
				
			||||||
			"articleNumber": "acpcg",
 | 
								"articleNumber": "acpcg",
 | 
				
			||||||
			"vatPercent": 19,
 | 
								"vatPercent": 19,
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										0
									
								
								prototype/gradlew → web_backend/gradlew
									
									
									
									
										vendored
									
									
								
							
							
						
						@ -1,6 +1,5 @@
 | 
				
			|||||||
package org.hso.ecommerce.components;
 | 
					package org.hso.ecommerce.components;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import org.hso.ecommerce.entities.booking.PaymentMethod;
 | 
					 | 
				
			||||||
import org.hso.ecommerce.entities.shop.Address;
 | 
					import org.hso.ecommerce.entities.shop.Address;
 | 
				
			||||||
import org.hso.ecommerce.entities.user.User;
 | 
					import org.hso.ecommerce.entities.user.User;
 | 
				
			||||||
import org.hso.ecommerce.repos.user.UserRepository;
 | 
					import org.hso.ecommerce.repos.user.UserRepository;
 | 
				
			||||||
@ -26,8 +25,7 @@ public class AdminInitializer {
 | 
				
			|||||||
			firstAdmin.created = new Timestamp(System.currentTimeMillis());
 | 
								firstAdmin.created = new Timestamp(System.currentTimeMillis());
 | 
				
			||||||
			firstAdmin.defaultDeliveryAddress = new Address();
 | 
								firstAdmin.defaultDeliveryAddress = new Address();
 | 
				
			||||||
			firstAdmin.defaultDeliveryAddress.name = "admin";
 | 
								firstAdmin.defaultDeliveryAddress.name = "admin";
 | 
				
			||||||
			firstAdmin.defaultPayment = new PaymentMethod();
 | 
								firstAdmin.defaultPayment = null;
 | 
				
			||||||
			firstAdmin.defaultPayment.creditCardNumber = ""; //set empty number
 | 
					 | 
				
			||||||
			firstAdmin.email = "admin";
 | 
								firstAdmin.email = "admin";
 | 
				
			||||||
			firstAdmin.isActive = true;
 | 
								firstAdmin.isActive = true;
 | 
				
			||||||
			firstAdmin.isEmployee = true;
 | 
								firstAdmin.isEmployee = true;
 | 
				
			||||||
@ -1,6 +1,5 @@
 | 
				
			|||||||
package org.hso.ecommerce.controller;
 | 
					package org.hso.ecommerce.controller;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import org.hso.ecommerce.entities.booking.PaymentMethod;
 | 
					 | 
				
			||||||
import org.hso.ecommerce.entities.shop.Address;
 | 
					import org.hso.ecommerce.entities.shop.Address;
 | 
				
			||||||
import org.hso.ecommerce.entities.user.User;
 | 
					import org.hso.ecommerce.entities.user.User;
 | 
				
			||||||
import org.hso.ecommerce.repos.user.UserRepository;
 | 
					import org.hso.ecommerce.repos.user.UserRepository;
 | 
				
			||||||
@ -47,7 +46,7 @@ public class RegisterController {
 | 
				
			|||||||
		newUser.email = username;
 | 
							newUser.email = username;
 | 
				
			||||||
		newUser.isEmployee = false;
 | 
							newUser.isEmployee = false;
 | 
				
			||||||
		newUser.salutation = salutation;
 | 
							newUser.salutation = salutation;
 | 
				
			||||||
		newUser.defaultPayment = PaymentMethod.fromCreditCardNumber("");
 | 
							newUser.defaultPayment = null;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		newUser.isActive = true;
 | 
							newUser.isActive = true;
 | 
				
			||||||
		newUser.created = new java.sql.Timestamp(System.currentTimeMillis());
 | 
							newUser.created = new java.sql.Timestamp(System.currentTimeMillis());
 | 
				
			||||||
@ -37,6 +37,7 @@ public class ShopArticleController {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    @GetMapping("/{id}")
 | 
					    @GetMapping("/{id}")
 | 
				
			||||||
    public String shopArticlesById(Model model,
 | 
					    public String shopArticlesById(Model model,
 | 
				
			||||||
 | 
					                                   @RequestAttribute(value = "shoppingCart") ShoppingCart shoppingCart,
 | 
				
			||||||
                                   @PathVariable("id") Long id,
 | 
					                                   @PathVariable("id") Long id,
 | 
				
			||||||
                                   HttpServletRequest request,
 | 
					                                   HttpServletRequest request,
 | 
				
			||||||
                                   HttpServletResponse response
 | 
					                                   HttpServletResponse response
 | 
				
			||||||
@ -52,15 +53,14 @@ public class ShopArticleController {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
        model.addAttribute("article", article);
 | 
					        model.addAttribute("article", article);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        if (warehouseBookingPositionSlotEntryRepository
 | 
					        int inStock = warehouseBookingPositionSlotEntryRepository
 | 
				
			||||||
                .getByArticle(id)
 | 
					                .getByArticle(id)
 | 
				
			||||||
                .stream()
 | 
					                .stream()
 | 
				
			||||||
                .mapToInt(e -> e.newSumSlot)
 | 
					                .mapToInt(e -> e.newSumSlot)
 | 
				
			||||||
                .sum() > 0) {   //check if in Stock
 | 
					                .sum();
 | 
				
			||||||
            model.addAttribute("inStock", true);
 | 
					
 | 
				
			||||||
        } else {
 | 
					        model.addAttribute("inStock", Math.min(inStock, 10));
 | 
				
			||||||
            model.addAttribute("inStock", false);
 | 
					        model.addAttribute("inCart", shoppingCart.getArticleCount(article));
 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
        List<Article> commercialArticles = GetRandomArticlesAction.getRandomArticles(3, articleRepository.getAdvertisedArticles()); //get 3 advertised Articles
 | 
					        List<Article> commercialArticles = GetRandomArticlesAction.getRandomArticles(3, articleRepository.getAdvertisedArticles()); //get 3 advertised Articles
 | 
				
			||||||
        model.addAttribute("commercialArticles", commercialArticles);
 | 
					        model.addAttribute("commercialArticles", commercialArticles);
 | 
				
			||||||
@ -78,7 +78,7 @@ public class ShopArticleController {
 | 
				
			|||||||
                                      @RequestParam(value = "set_amount", required = false) Boolean setAmount,
 | 
					                                      @RequestParam(value = "set_amount", required = false) Boolean setAmount,
 | 
				
			||||||
                                      @RequestParam("fastcheckout") Boolean fastcheckout
 | 
					                                      @RequestParam("fastcheckout") Boolean fastcheckout
 | 
				
			||||||
    ) {
 | 
					    ) {
 | 
				
			||||||
        Article article = articleRepository.findArticleById(id);
 | 
					        Article article = articleRepository.findById(id).orElse(null);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        if (article == null) {
 | 
					        if (article == null) {
 | 
				
			||||||
            request.setAttribute("error", "Der Artikel wurde nicht gefunden.");
 | 
					            request.setAttribute("error", "Der Artikel wurde nicht gefunden.");
 | 
				
			||||||
@ -57,12 +57,26 @@ public class ShopCheckoutController {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
        CheckoutListTotals totals = new CheckoutListTotals();
 | 
					        CheckoutListTotals totals = new CheckoutListTotals();
 | 
				
			||||||
        ArrayList<CheckoutListItem> items = new ArrayList<>();
 | 
					        ArrayList<CheckoutListItem> items = new ArrayList<>();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        boolean inValid = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        for (ShoppingCart.ShoppingCartItem item : shoppingCart.getItems()) {
 | 
					        for (ShoppingCart.ShoppingCartItem item : shoppingCart.getItems()) {
 | 
				
			||||||
            Article article = articleRepository.findById(item.getArticleId()).get();
 | 
					            Article article = articleRepository.findById(item.getArticleId()).get();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            int inStock = wbeseRepo
 | 
				
			||||||
 | 
					                    .getByArticle(item.getArticleId())
 | 
				
			||||||
 | 
					                    .stream()
 | 
				
			||||||
 | 
					                    .mapToInt(e -> e.newSumSlot)
 | 
				
			||||||
 | 
					                    .sum();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            totals.addItem(article, item.getAmount());
 | 
					            totals.addItem(article, item.getAmount());
 | 
				
			||||||
            items.add(new CheckoutListItem(item.getAmount(), article));
 | 
					            items.add(new CheckoutListItem(item.getAmount(), Math.min(inStock, 10), article));
 | 
				
			||||||
 | 
					            if (item.getAmount() > inStock) {
 | 
				
			||||||
 | 
					                inValid = true;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        request.setAttribute("inValid", inValid);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        request.setAttribute("checkoutItems", items);
 | 
					        request.setAttribute("checkoutItems", items);
 | 
				
			||||||
        request.setAttribute("checkoutTotals", totals);
 | 
					        request.setAttribute("checkoutTotals", totals);
 | 
				
			||||||
@ -87,11 +101,13 @@ public class ShopCheckoutController {
 | 
				
			|||||||
        public int amount;
 | 
					        public int amount;
 | 
				
			||||||
        public Article article;
 | 
					        public Article article;
 | 
				
			||||||
        public int total;
 | 
					        public int total;
 | 
				
			||||||
 | 
					        public int inStock;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        public CheckoutListItem(int amount, Article article) {
 | 
					        public CheckoutListItem(int amount, int inStock, Article article) {
 | 
				
			||||||
            this.amount = amount;
 | 
					            this.amount = amount;
 | 
				
			||||||
            this.article = article;
 | 
					            this.article = article;
 | 
				
			||||||
            this.total = amount * article.getPriceGross();
 | 
					            this.total = amount * article.getPriceGross();
 | 
				
			||||||
 | 
					            this.inStock = inStock;
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -140,6 +156,11 @@ public class ShopCheckoutController {
 | 
				
			|||||||
            bookingRepository.saveAll(result.bookings);
 | 
					            bookingRepository.saveAll(result.bookings);
 | 
				
			||||||
            warehouseBookingRepository.save(result.warehouseBooking);
 | 
					            warehouseBookingRepository.save(result.warehouseBooking);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            if (user.defaultPayment == null) {
 | 
				
			||||||
 | 
					                user.defaultPayment = PaymentMethod.fromCreditCardNumber(cardnumber);
 | 
				
			||||||
 | 
					                userRepository.save(user);
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            shoppingCart.clear();
 | 
					            shoppingCart.clear();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        } catch (CreateOrderAction.ArticleNotInStockException e) {
 | 
					        } catch (CreateOrderAction.ArticleNotInStockException e) {
 | 
				
			||||||
@ -42,9 +42,8 @@ public class ShopSearchController {
 | 
				
			|||||||
            List<Article> articles = articleRepository.getArticlesByCategory(category); //search by Category
 | 
					            List<Article> articles = articleRepository.getArticlesByCategory(category); //search by Category
 | 
				
			||||||
            model.addAttribute("articles", articles);
 | 
					            model.addAttribute("articles", articles);
 | 
				
			||||||
        } else {
 | 
					        } else {
 | 
				
			||||||
            request.setAttribute("error", "Es wurden keine Suchparameter angegeben.");
 | 
					            List<Article> articles = SearchByTermAction.searchByTerm("", articleRepository);
 | 
				
			||||||
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
 | 
					            model.addAttribute("articles", articles);
 | 
				
			||||||
            return "error/404";
 | 
					 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // Show term in search box
 | 
					        // Show term in search box
 | 
				
			||||||
@ -69,6 +69,16 @@ public class ShoppingCart {
 | 
				
			|||||||
        items.removeIf(i -> i.getAmount() <= 0);
 | 
					        items.removeIf(i -> i.getAmount() <= 0);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    public int getArticleCount(Article article) {
 | 
				
			||||||
 | 
					        for (ShoppingCartItem i : items) {
 | 
				
			||||||
 | 
					            if (i.getArticleId() == article.id) {
 | 
				
			||||||
 | 
					                return i.amount;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        return 0;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    public static class ShoppingCartItem {
 | 
					    public static class ShoppingCartItem {
 | 
				
			||||||
        private int amount;
 | 
					        private int amount;
 | 
				
			||||||
        private final long articleId;
 | 
					        private final long articleId;
 | 
				
			||||||