design: add kits theme to application index

.dockerignore

@@ -14,4 +14,11 @@ yarn-error.log*
 
 ## Dependency directories
 node_modules/
-dist
+dist
+.angular
+.devcontainer
+.git
+.github
+.env
+.en.default
+.gitignore

.github/workflows/on_release_build_image.yml

@@ -6,7 +6,7 @@ name: Create and publish a Docker image
 
 on:
   push:
-    branches: ["main"]
+    branches: ["main", "20-design-add-new-kits-theme-to-application"]
   release:
     types: [published]
 

.gitignore

@@ -1,4 +1,3 @@
-/.angular/cache
 # Specifies intentionally untracked files to ignore when using Git
 # http://git-scm.com/docs/gitignore
 
@@ -31,4 +30,5 @@ npm-debug.log*
 /plugins
 /www
 
-.devcontainer/
+.angular
+.devcontainer

Dockerfile

@@ -30,7 +30,7 @@ COPY --chown=node:node . ./
 RUN yarn install
 RUN yarn build:prod
 
-FROM nginxinc/nginx-unprivileged:stable-alpine AS production
+FROM nginxinc/nginx-unprivileged:1.25.4-alpine3.18-slim AS production
 
 ## From 'builder' copy website to default nginx public folder
 COPY --from=production_builder /home/node/app/www /usr/share/nginx/html

package.json

@@ -25,7 +25,6 @@
     "@angular/platform-browser-dynamic": "17.3.4",
     "@angular/router": "17.3.4",
     "@angular/service-worker": "17.3.4",
-    "@babel/runtime": "^7.24.4",
     "@ffmpeg/ffmpeg": "0.12.10",
     "@ffmpeg/util": "0.12.1",
     "@ionic/angular": "7.8.4",

src/app/components/header/header.component.scss

@@ -12,7 +12,7 @@ ion-back-button {
 }
 
 ion-title {
-  font-family: 'Nunito', sans-serif;
+  font-family: 'FiraSans', sans-serif;
   font-weight: 500;
   font-size: 18px;
 }

src/app/pages/home/home.page.html

@@ -1,80 +1,88 @@
-<ion-content [fullscreen]="true">
-  <div class="content container-small">
-    <div class="kits-description">
-
-
-      <img src="./assets/images/stop-motion-logo.svg" alt="Stop Motion Logo" class="stopmotion-logo">
-
-      <p class="ion-margin-bottom">
-        {{ "pages_home_welcome" | translate }}
-      </p>
-
-      <ion-button color="primary" expand="full" size="large" routerLink="/animator" class="ion-margin-top">
-        <ion-icon slot="start" src="./assets/icons/custom/right-chevron.svg"></ion-icon>
-        {{ "buttons_home_start" | translate }}
-      </ion-button>
-
+<ion-content [fullscreen]="true" (window:resize)="onResize($event)">
+  <div class="order-1">
+    <div class="">
+      <div class="d-lg-none">
+        <div id="static-footer" class="footer fixed-bottom bg-gradient bg-gradient-primary">
+          <div class="row">
+            <div class="d-flex align-items-center">
+              <div class="col-1 col-sm-2">
+                <a href="/" title="Stop Motion">
+                  <img id="static-footer-logo" src="/assets/kits/images/stop-motion-logo.svg" class="img-fluid d-block" width="100%"
+                    alt="Stop Motion Logo" />
+                </a>
+              </div>
+              <div class="col-11 col-sm-10 d-flex justify-content-end">
+                <a href="https://github.com/kitsteam/stop-motion-app" class="text-white px-lg-2 p-2 text-decoration-none">
+                  GitHub
+                </a>
+                <a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
+                  Impressum
+                </a>
+                <a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
+                  Datenschutz
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="d-none d-lg-block">
+        <!-- Left Block -->
+        <div id="left-column"
+          class="order float-start position-fixed vh-100 bg-gradient bg-gradient-primary w-50 d-flex flex-column align-items-center justify-content-between"
+          [attr.style]="('height:' + height + 'px !important')">
+          <div></div>
+          <div>
+            <a href=" /" title="Stop Motion">
+              <img src="/assets/kits/images/stop-motion-logo.svg" class="img-fluid d-block" alt="Stop Motion Logo" />
+            </a>
+          </div>
+          <div id="footer-links" class="d-flex align-items-center mb-1">
+            <a href="https://github.com/kitsteam/stop-motion-app" class="text-white px-lg-2 p-2 text-decoration-none">
+              GitHub
+            </a>
+            <a href="https://kits.blog/impressum/" class="text-white px-lg-2 p-2 text-decoration-none">
+              Impressum
+            </a>
+            <a href="https://kits.blog/datenschutzerklaerung/" class="text-white p-2 text-decoration-none">
+              Datenschutz
+            </a>
+          </div>
+        </div>
+        <!-- End Left Block -->
+      </div>
     </div>
+    <!-- Right Block -->
+    <div class="w-50 float-end d-flex flex-column align-items-stretch justify-content-between vh-100">
+      <div class="g-0 d-flex justify-content-end px-3">
+        <div class="pt-3">
+          <a href="https://kits.blog/tools/"><img src="./assets/kits/images/kits-logo.svg" class="img-fluid d-block" alt="Kits Logo" /></a>
+        </div>
+      </div>
+      <div class="row g-0 h-100">
+        <div id="content" class="container w-90 d-flex align-content-center flex-wrap">
+          <div id="call-to-action-block">
+            <h1 class="fw-bold">
+              <a class="text-decoration-none" href="/" title="Stop Motion">Stop Motion</a>
+            </h1>
 
-    <div class="kits-footer">
-      <a href="https://kits.blog/tools/" target="_blank" title="Zurück zur Tools-Seite">
-        <svg version="1.1" id="kits_footer_logo" inkscape:version="0.92.3 (2405546, 2018-03-11)"
-          sodipodi:docname="kits_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
-          xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-          xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-          xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="234.107px" height="122.289px"
-          viewBox="0 0 234.107 122.289" enable-background="new 0 0 234.107 122.289" xml:space="preserve">
-          <g id="layer2" transform="translate(17.987022,2.4044625)" inkscape:groupmode="layer" inkscape:label="Ebene 2">
-            <g id="g35" transform="matrix(4.0529229,0,0,4.0529229,-223.55328,-470.63108)">
-              <g id="flowRoot15" transform="matrix(0.26458333,0,0,0.26458333,108.88172,85.529972)">
-                <path id="path841" fill="#000000" d="M-204.456,223.278h-9.91v-79.603l9.91-1.185V223.278z M-192.715,191.609l23.267,31.669
-                                  h-11.849l-22.513-31.024l20.897-25.744h11.094L-192.715,191.609z"></path>
-                <path id="path843" fill="#000000" d="M-154.609,139.258c2.082,0,3.77,0.646,5.063,1.938c1.292,1.293,1.939,2.909,1.939,4.848
-                                  s-0.647,3.554-1.939,4.847c-1.293,1.221-2.981,1.831-5.063,1.831c-2.011,0-3.662-0.611-4.955-1.831
-                                  c-1.293-1.293-1.939-2.908-1.939-4.847s0.646-3.554,1.939-4.848C-158.271,139.905-156.62,139.258-154.609,139.258z
-                                   M-149.546,223.278h-9.91v-56.767h9.91V223.278z"></path>
-                <path id="path845" fill="#000000" d="M-100.815,220.693c-3.735,2.585-7.972,3.878-12.711,3.878c-4.811,0-8.581-1.365-11.31-4.094
-                                  c-2.657-2.799-3.986-6.821-3.986-12.063v-34.255h-9.91v-7.648h9.91v-12.818l9.91-1.185v14.003h13.465l-1.077,7.648h-12.387
-                                  v33.824c0,2.943,0.503,5.098,1.508,6.462c1.077,1.292,2.837,1.939,5.278,1.939c2.227,0,4.738-0.753,7.54-2.262L-100.815,220.693z
-                                  "></path>
-                <path id="path847" fill="#000000" d="M-75.145,165.218c3.879,0,7.361,0.539,10.449,1.616c3.088,1.077,6.032,2.693,8.834,4.848
-                                  l-4.202,6.246c-2.585-1.65-5.063-2.872-7.433-3.661c-2.298-0.79-4.739-1.185-7.325-1.185c-3.231,0-5.781,0.681-7.648,2.046
-                                  c-1.867,1.293-2.799,3.087-2.799,5.386c0,2.298,0.862,4.093,2.585,5.386c1.794,1.292,4.99,2.548,9.586,3.77
-                                  c6.319,1.58,11.024,3.734,14.11,6.462c3.161,2.729,4.74,6.463,4.74,11.202c0,5.602-2.189,9.875-6.571,12.819
-                                  c-4.308,2.944-9.587,4.417-15.834,4.417c-8.617,0-15.763-2.478-21.436-7.434l5.278-6.031c4.811,3.663,10.126,5.494,15.942,5.494
-                                  c3.735,0,6.679-0.755,8.833-2.262c2.227-1.579,3.339-3.698,3.339-6.355c0-1.94-0.394-3.483-1.185-4.633
-                                  c-0.79-1.22-2.155-2.261-4.094-3.123c-1.939-0.934-4.775-1.903-8.509-2.909c-6.031-1.58-10.412-3.698-13.141-6.356
-                                  c-2.657-2.657-3.986-6.031-3.986-10.126c0-2.944,0.862-5.601,2.585-7.97c1.796-2.442,4.237-4.309,7.325-5.602
-                                  C-82.541,165.9-79.023,165.218-75.145,165.218L-75.145,165.218z"></path>
-              </g>
-              <polygon id="polygon2" fill="#00A3D3"
-                points="96.983,116.306 99.402,118.724 101.92,121.242 106.856,116.306      "></polygon>
-              <polygon id="polygon4" fill="#00A3D3"
-                points="107.02,116.47 102.083,121.406 104.61,123.932 107.02,126.342       "></polygon>
-              <rect id="rect6" x="100.191" y="122.286"
-                transform="matrix(0.7071 -0.7071 0.7071 0.7071 -57.8396 108.3909)" fill="#00A3D3" width="3.457"
-                height="3.457"></rect>
-              <polygon id="polygon8" fill="#00A3D3" points="106.856,126.506 104.528,124.178 102.199,126.506       ">
-              </polygon>
-              <polygon id="polygon10" fill="#00A3D3"
-                points="101.64,126.506 99.23,124.096 96.819,121.686 96.819,126.506       "></polygon>
-              <polygon id="polygon12" fill="#00A3D3"
-                points="96.819,121.358 99.204,123.742 99.204,118.854 96.819,116.47       "></polygon>
-              <polygon id="polygon8-6" fill="#00A3D3" points="96.819,130.044 100.112,126.752 96.819,126.752       ">
-              </polygon>
-            </g>
-          </g>
-        </svg>
-      </a>
-      <ul class="kits_footer_links">
-        <li><a href="https://kits.blog/impressum/" target="_blank">Impressum</a></li>
-        <li><a href="https://kits.blog/datenschutzerklaerung/" target="_blank">Datenschutz</a></li>
-      </ul>
-      <div class="gitlab_link">
-        <img id="kits_gitlab_link" alt="gitlab_logo.svg" src="./assets/images/gitlab-logo.svg">
-        <a href="https://gitlab.com/kits-apps/stop-motion-app" target="_blank">stop-motion-app</a>
+            <ul class="list-group list-unstyled mb-3">
+              <li class="list-group-item pb-2">A!</li>
+              <li class="list-group-item pb-2">B!</li>
+              <li class="list-group-item pb-2">C!</li>
+            </ul>
+            <ion-button color="primary" expand="full" size="large" routerLink="/animator" class="ion-margin-top">
+              <ion-icon slot="start" src="./assets/icons/custom/right-chevron.svg"></ion-icon>
+              {{ "buttons_home_start" | translate }}
+            </ion-button>
+            <p class="form-text text-muted mt-3">
+              Dieses Tool darf nur in Bildungskontexten genutzt werden. Die Eingabe personenbezogener Daten ist
+              nicht gestattet.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
+    <!-- End Right Block -->
   </div>
-</ion-content>
+</ion-content>

src/app/pages/home/home.page.ts

@@ -1,12 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss'],
+  styleUrls: ['../../../assets/kits/css/index.css'],
 })
-export class HomePage {
+export class HomePage implements OnInit {
+  public height: number;
+
+  constructor() {
+  }
 
-  constructor() {}
+  ngOnInit() {
+    this.height = window.innerHeight;
+  }
 
+  onResize(event: Event) {
+    this.height = window.innerHeight;
+  }
 }