Add new icons and update index.html for improved branding and user ex…

…perience</message> <message>Added new icon files including Android and Apple touch icons, favicons, and a Safari pinned tab SVG to enhance the application's branding. Updated index.html to include meta tags for better SEO and user experience, as well as links to the new icons. Improved the structure of the HTML for better readability and maintainability. Updated static pages to enhance content presentation and user guidance.
NBISweden · Jan 3, 2025 · cfc87c0 · cfc87c0
1 parent 1444101
commit cfc87c0
Show file tree

Hide file tree

Showing 11 changed files with 409 additions and 267 deletions.
diff --git a/frontend/public/android-chrome-192x192.png b/frontend/public/android-chrome-192x192.png
diff --git a/frontend/public/android-chrome-512x512.png b/frontend/public/android-chrome-512x512.png
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
diff --git a/frontend/public/favicon-16x16.png b/frontend/public/favicon-16x16.png
diff --git a/frontend/public/favicon-32x32.png b/frontend/public/favicon-32x32.png
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,14 +1,33 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-        <title>Stamboken Online
-        </title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/_dist_/main.js"></script>
-    </body>
+<html lang="sv">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Föreningen Gotlandskaninens system för stambokföring online. Här kan du hantera dina kaniner, utfärda genbanksintyg och rapportera kullar."
+    />
+    <meta
+      name="keywords"
+      content="Gotlandskanin, Mellerudskanin, genbank, stambokföring, kaniner, genbanksintyg"
+    />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <title>Stamboken Online</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/_dist_/main.js"></script>
+  </body>
 </html>
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Stamboken",
+  "name": "Stamboken Online",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#1976d2",
+  "background_color": "#ffffff"
+}
diff --git a/frontend/public/mstile-150x150.png b/frontend/public/mstile-150x150.png
diff --git a/frontend/public/safari-pinned-tab.svg b/frontend/public/safari-pinned-tab.svg