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 {
+.sandkasten-logo {
-        width: 5%;
+  width: 3%;
-    }
+}
 .gitea-logo {
  width: 10%;
 }
 a {
    margin: 0 10px;
    color: #333;
@ -16,4 +18,291 @@ a {
 .active {
    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>
+  <div class="toolbar" role="banner">
-  <p>{{ description }}</p>
+
-  <p>Version : {{ version }}</p>
+    <img class="sandkasten-logo"
-  <img [src]="imgSrc" alt="imgSrc" />
+        routerLink=""
-  <nav>
+        routerLinkActive="active"
-    <a
+        [routerLinkActiveOptions]="{ exact: true }"
-      routerLink=""
+        [src]="sandkasten_logo" alt="Logo-Sandkasten" />
-      routerLinkActive="active"
+    <h2>{{ title }}</h2>
-      [routerLinkActiveOptions]="{ exact: true }"
+
-      >Accueil</a
+    <div class="spacer"></div>
-    >
+
-    <a
+    <a href="https://codefirst.iut.uca.fr/git/sandkasten">
-      routerLink="editor"
+      <img class="gitea-logo"
-      routerLinkActive="active"
+         [src]="gitea_logo" alt="Logo-Gitea" />
-      [routerLinkActiveOptions]="{ exact: true }"
+    </a>
-      >Éditeur</a
+    <p>Version : {{ version }}</p>
-    >
+
-  </nav>
+    <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!: string;
-  version!: number;
+  sandkasten_logo!: string;
-  imgSrc!: string;
+  gitea_logo!: string;
  ngOnInit(): void {
    this.title = 'Sandkasten';
-    this.description = 'Ein Angular-Sandkasten';
+    this.version = '1.0';
-    this.version = 1.0;
+    this.sandkasten_logo = 'assets/img/logo.png';
-    this.imgSrc = '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>