Header + image

2 years ago · 3a084d6c50
parent 6d5db1ce62
commit 3a084d6c50
11 changed files with 486 additions and 31 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sandkasten-web.iml" filepath="$PROJECT_DIR$/.idea/sandkasten-web.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/sandkasten-web.iml
+++ b/.idea/sandkasten-web.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- 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",
--- 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",
--- 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;
@ -17,3 +19,290 @@ a {
    color: #666;
    text-decoration: underline;
 }
+
+: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;
+  }
+}
--- a/sandkasten/src/app/header/header.component.html
+++ b/sandkasten/src/app/header/header.component.html
@ -1,20 +1,28 @@
 <div class="header-card">
-  <h2>{{ title }}</h2>
-  <p>{{ description }}</p>
-  <p>Version : {{ version }}</p>
-  <img [src]="imgSrc" alt="imgSrc" />
-  <nav>
-    <a
-      routerLink=""
-      routerLinkActive="active"
-      [routerLinkActiveOptions]="{ exact: true }"
-      >Accueil</a
-    >
-    <a
-      routerLink="editor"
-      routerLinkActive="active"
-      [routerLinkActiveOptions]="{ exact: true }"
-      >Éditeur</a
-    >
-  </nav>
+  <div class="toolbar" role="banner">
+
+    <img class="sandkasten-logo"
+        routerLink=""
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [src]="sandkasten_logo" alt="Logo-Sandkasten" />
+    <h2>{{ title }}</h2>
+
+    <div class="spacer"></div>
+
+    <a href="https://codefirst.iut.uca.fr/git/sandkasten">
+      <img class="gitea-logo"
+         [src]="gitea_logo" alt="Logo-Gitea" />
+    </a>
+    <p>Version : {{ version }}</p>
+
+    <nav>
+      <a
+        routerLink="editor"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        >Éditeur</a
+      >
+    </nav>
+  </div>
 </div>
--- 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;
+//         }
+//
+//       });
+//
+//   }
+// }
--- a/sandkasten/src/assets/img/gitea.png
+++ b/sandkasten/src/assets/img/gitea.png
--- a/sandkasten/src/assets/img/logo.svg
+++ b/sandkasten/src/assets/img/logo.svg
@ -0,0 +1,52 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2460 5097 c-50 -16 -126 -93 -139 -142 -7 -27 -11 -252 -11 -696 l0
+-655 -31 -30 c-53 -49 -69 -96 -69 -209 0 -149 4 -145 -181 -145 -85 0 -159 5
+-170 10 -17 9 -19 22 -19 104 0 155 -40 240 -135 285 -41 19 -62 21 -232 21
+-160 0 -194 -3 -228 -19 -52 -23 -111 -90 -124 -138 -14 -54 -251 -1466 -251
+-1497 0 -58 85 -90 125 -46 22 24 15 -14 156 830 101 601 116 677 136 698 21
+21 29 22 185 22 118 -1 168 -4 180 -14 28 -21 38 -62 38 -162 0 -102 14 -147
+62 -191 49 -46 86 -53 273 -53 200 0 220 5 277 68 46 51 58 93 58 210 0 85 2
+95 25 117 23 24 28 25 173 25 200 0 195 4 203 -157 6 -126 15 -156 66 -207 49
+-50 77 -56 268 -56 136 0 184 4 213 15 89 38 121 100 122 231 0 100 12 149 40
+164 10 6 91 10 180 10 154 0 162 -1 183 -22 19 -20 29 -61 65 -278 51 -304 57
+-326 83 -340 32 -18 80 -8 101 20 19 26 18 28 -27 300 -56 336 -56 336 -102
+389 -62 73 -89 81 -306 81 -170 0 -191 -2 -232 -21 -95 -45 -135 -130 -135
+-285 0 -82 -2 -95 -19 -104 -11 -5 -85 -10 -170 -10 -184 0 -181 -2 -181 135
+0 115 -12 157 -61 210 l-39 42 0 167 0 166 446 0 c288 0 460 4 488 11 90 22
+155 107 156 201 0 66 -8 83 -115 233 -52 74 -95 137 -95 140 0 4 41 65 90 135
+103 146 120 182 120 242 -1 86 -67 175 -147 197 -54 15 -1246 13 -1293 -2z
+m200 -792 l0 -655 -100 0 -100 0 0 619 c0 383 4 630 10 646 13 34 40 44 123
+44 l67 1 0 -655z m1076 631 c8 -11 14 -27 14 -36 0 -9 -48 -84 -106 -166 -122
+-171 -136 -198 -123 -232 5 -13 55 -88 111 -166 120 -167 130 -187 103 -215
+-18 -21 -27 -21 -472 -21 l-453 0 0 425 0 424 113 4 c61 2 266 3 455 3 328 -1
+344 -2 358 -20z"/>
+<path d="M4040 2677 c-50 -25 -49 -33 39 -553 45 -268 80 -488 78 -490 -2 -2
+-53 -13 -113 -24 -445 -81 -731 -190 -1289 -495 -137 -75 -290 -157 -339 -182
+l-89 -45 -261 103 c-463 181 -705 258 -1005 319 -79 16 -145 31 -147 33 -2 1
+10 82 26 178 33 192 31 218 -19 239 -34 14 -75 0 -91 -30 -6 -12 -25 -98 -40
+-192 -16 -94 -31 -172 -32 -174 -2 -1 -62 4 -133 11 -72 8 -232 18 -356 21
+l-225 7 -22 -28 -22 -28 0 -644 0 -644 25 -24 24 -25 2511 0 2511 0 24 25 25
+24 0 789 0 789 -22 28 -22 28 -250 -7 c-138 -3 -309 -13 -381 -20 -71 -8 -131
+-13 -133 -11 -1 1 -40 224 -85 495 -81 480 -84 493 -111 516 -31 27 -41 29
+-76 11z m930 -1592 c0 -357 -3 -455 -12 -455 -7 0 -66 -7 -132 -15 -822 -103
+-1498 -55 -2159 152 l-148 47 28 16 c167 101 625 341 782 410 417 183 959 289
+1524 298 l117 2 0 -455z m-4540 155 c523 -37 932 -133 1495 -354 530 -208 681
+-262 895 -321 446 -121 924 -169 1440 -146 224 10 584 40 678 56 l32 6 0 -161
+0 -160 -2410 0 -2410 0 0 545 0 545 68 0 c37 0 132 -5 212 -10z"/>
+<path d="M1763 2370 c-35 -14 -43 -42 -43 -145 0 -89 2 -98 25 -120 33 -34 77
+-33 104 1 18 23 21 41 21 126 0 92 -2 101 -25 123 -25 26 -45 30 -82 15z"/>
+<path d="M3276 2357 c-24 -25 -26 -32 -26 -125 0 -85 3 -103 21 -126 27 -34
+71 -35 104 -1 23 22 25 31 25 123 0 113 -11 137 -67 148 -26 5 -37 1 -57 -19z"/>
+<path d="M2333 2229 c-25 -9 -53 -47 -53 -71 0 -32 77 -104 143 -134 127 -58
+285 -28 377 72 46 50 49 72 17 110 -33 38 -76 35 -128 -9 -78 -67 -178 -68
+-256 -3 -43 37 -70 46 -100 35z"/>
+</g>
+</svg>