diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..e2b5157 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/sandkasten-web.iml b/.idea/sandkasten-web.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/sandkasten-web.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/sandkasten/package-lock.json b/sandkasten/package-lock.json index 751fd8d..3ccce4b 100644 --- a/sandkasten/package-lock.json +++ b/sandkasten/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "^16.2.0", + "@angular/cdk": "^16.2.5", "@angular/common": "^16.2.0", "@angular/compiler": "^16.2.0", "@angular/core": "^16.2.0", @@ -268,6 +269,34 @@ "@angular/core": "16.2.5" } }, + "node_modules/@angular/cdk": { + "version": "16.2.5", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-16.2.5.tgz", + "integrity": "sha512-9VbdWSYVFQq9y7Dl8KMooE+Sa5nx0l4Neue1IMmSS2v8b602VykiYA5aqz0BsLjfoiboXlUz6LCBXxukJtogcQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^16.0.0 || ^17.0.0", + "@angular/core": "^16.0.0 || ^17.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/cdk/node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "optional": true, + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/@angular/cli": { "version": "16.2.2", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-16.2.2.tgz", @@ -5495,7 +5524,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12" }, @@ -12347,6 +12376,26 @@ "tslib": "^2.3.0" } }, + "@angular/cdk": { + "version": "16.2.5", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-16.2.5.tgz", + "integrity": "sha512-9VbdWSYVFQq9y7Dl8KMooE+Sa5nx0l4Neue1IMmSS2v8b602VykiYA5aqz0BsLjfoiboXlUz6LCBXxukJtogcQ==", + "requires": { + "parse5": "^7.1.2", + "tslib": "^2.3.0" + }, + "dependencies": { + "parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "optional": true, + "requires": { + "entities": "^4.4.0" + } + } + } + }, "@angular/cli": { "version": "16.2.2", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-16.2.2.tgz", @@ -16103,7 +16152,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true + "devOptional": true }, "env-paths": { "version": "2.2.1", diff --git a/sandkasten/package.json b/sandkasten/package.json index e2d2ba6..6c3c7f8 100644 --- a/sandkasten/package.json +++ b/sandkasten/package.json @@ -11,6 +11,7 @@ "private": true, "dependencies": { "@angular/animations": "^16.2.0", + "@angular/cdk": "^16.2.5", "@angular/common": "^16.2.0", "@angular/compiler": "^16.2.0", "@angular/core": "^16.2.0", diff --git a/sandkasten/src/app/header/header.component.css b/sandkasten/src/app/header/header.component.css index cde8f28..eb97749 100644 --- a/sandkasten/src/app/header/header.component.css +++ b/sandkasten/src/app/header/header.component.css @@ -1,8 +1,10 @@ -img { - width: 5%; - } - +.sandkasten-logo { + width: 3%; +} +.gitea-logo { + width: 10%; +} a { margin: 0 10px; color: #333; @@ -16,4 +18,291 @@ a { .active { color: #666; text-decoration: underline; -} \ No newline at end of file +} + +:host { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 14px; + color: #333; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 8px 0; +} + +p { + margin: 0; +} + +.spacer { + flex: 1; +} + +.toolbar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 60px; + display: flex; + align-items: center; + background-color: #1976d2; + color: white; + font-weight: 600; +} + +.toolbar img { + margin: 0 16px; +} + +.toolbar #gitea-logo { + height: 40px; + margin: 0 16px; +} + +.toolbar #gitea-logo:hover { + opacity: 0.8; +} + +.content { + display: flex; + margin: 82px auto 32px; + padding: 0 16px; + max-width: 960px; + flex-direction: column; + align-items: center; +} + +svg.material-icons { + height: 24px; + width: auto; +} + +svg.material-icons:not(:last-child) { + margin-right: 8px; +} + +.card svg.material-icons path { + fill: #888; +} + +.card-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 16px; +} + +.card { + all: unset; + border-radius: 4px; + border: 1px solid #eee; + background-color: #fafafa; + height: 40px; + width: 200px; + margin: 0 8px 16px; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + transition: all 0.2s ease-in-out; + line-height: 24px; +} + +.card-container .card:not(:last-child) { + margin-right: 0; +} + +.card.card-small { + height: 16px; + width: 168px; +} + +.card-container .card:not(.highlight-card) { + cursor: pointer; +} + +.card-container .card:not(.highlight-card):hover { + transform: translateY(-3px); + box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35); +} + +.card-container .card:not(.highlight-card):hover .material-icons path { + fill: rgb(105, 103, 103); +} + +.card.highlight-card { + background-color: #1976d2; + color: white; + font-weight: 600; + border: none; + width: auto; + min-width: 30%; + position: relative; +} + +.card.card.highlight-card span { + margin-left: 60px; +} + +svg#rocket { + width: 80px; + position: absolute; + left: -10px; + top: -24px; +} + +svg#rocket-smoke { + height: calc(100vh - 95px); + position: absolute; + top: 10px; + right: 180px; + z-index: -10; +} + +a, +a:visited, +a:hover { + color: #1976d2; + text-decoration: none; +} + +a:hover { + color: #125699; +} + +.terminal { + position: relative; + width: 80%; + max-width: 600px; + border-radius: 6px; + padding-top: 45px; + margin-top: 8px; + overflow: hidden; + background-color: rgb(15, 15, 16); +} + +.terminal::before { + content: "\2022 \2022 \2022"; + position: absolute; + top: 0; + left: 0; + height: 4px; + background: rgb(58, 58, 58); + color: #c2c3c4; + width: 100%; + font-size: 2rem; + line-height: 0; + padding: 14px 0; + text-indent: 4px; +} + +.terminal pre { + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + color: white; + padding: 0 1rem 1rem; + margin: 0; +} + +.circle-link { + height: 40px; + width: 40px; + border-radius: 40px; + margin: 8px; + background-color: white; + border: 1px solid #eeeeee; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: 1s ease-out; +} + +.circle-link:hover { + transform: translateY(-0.25rem); + box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); +} + +footer { + margin-top: 8px; + display: flex; + align-items: center; + line-height: 20px; +} + +footer a { + display: flex; + align-items: center; +} + +.github-star-badge { + color: #24292e; + display: flex; + align-items: center; + font-size: 12px; + padding: 3px 10px; + border: 1px solid rgba(27,31,35,.2); + border-radius: 3px; + background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); + margin-left: 4px; + font-weight: 600; +} + +.github-star-badge:hover { + background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); + border-color: rgba(27,31,35,.35); + background-position: -.5em; +} + +.github-star-badge .material-icons { + height: 16px; + width: 16px; + margin-right: 4px; +} + +svg#clouds { + position: fixed; + bottom: -160px; + left: -230px; + z-index: -10; + width: 1920px; +} + +/* Responsive Styles */ +@media screen and (max-width: 767px) { + .card-container > *:not(.circle-link) , + .terminal { + width: 100%; + } + + .card:not(.highlight-card) { + height: 16px; + margin: 8px 0; + } + + .card.highlight-card span { + margin-left: 72px; + } + + svg#rocket-smoke { + right: 120px; + transform: rotate(-5deg); + } +} + +@media screen and (max-width: 575px) { + svg#rocket-smoke { + display: none; + visibility: hidden; + } +} diff --git a/sandkasten/src/app/header/header.component.html b/sandkasten/src/app/header/header.component.html index dcb40ae..1468a9e 100644 --- a/sandkasten/src/app/header/header.component.html +++ b/sandkasten/src/app/header/header.component.html @@ -1,20 +1,28 @@
-

{{ title }}

-

{{ description }}

-

Version : {{ version }}

- imgSrc - +
diff --git a/sandkasten/src/app/header/header.component.ts b/sandkasten/src/app/header/header.component.ts index 7d78472..8f4db92 100644 --- a/sandkasten/src/app/header/header.component.ts +++ b/sandkasten/src/app/header/header.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; @Component({ selector: 'app-header', @@ -7,15 +8,39 @@ import { Component, OnInit } from '@angular/core'; }) export class HeaderComponent implements OnInit { title!: string; - description!: string; - version!: number; - imgSrc!: string; + version!: string; + sandkasten_logo!: string; + gitea_logo!: string; ngOnInit(): void { this.title = 'Sandkasten'; - this.description = 'Ein Angular-Sandkasten'; - this.version = 1.0; - this.imgSrc = 'assets/img/logo.png'; + this.version = '1.0'; + this.sandkasten_logo = 'assets/img/logo.png'; + this.gitea_logo = 'assets/img/gitea.png'; } } + +// export class ResponsiveComponent implements OnInit { +// +// isPhonePortrait = false; +// +// constructor(private responsive: BreakpointObserver) { +// +// } +// +// ngOnInit() { +// +// this.responsive.observe(Breakpoints.HandsetPortrait) +// .subscribe(result => { +// +// this.isPhonePortrait = false; +// +// if (result.matches) { +// this.isPhonePortrait = true; +// } +// +// }); +// +// } +// } diff --git a/sandkasten/src/assets/img/gitea.png b/sandkasten/src/assets/img/gitea.png new file mode 100644 index 0000000..65f160a Binary files /dev/null and b/sandkasten/src/assets/img/gitea.png differ diff --git a/sandkasten/src/assets/img/logo.svg b/sandkasten/src/assets/img/logo.svg new file mode 100644 index 0000000..1e9f194 --- /dev/null +++ b/sandkasten/src/assets/img/logo.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + +