From 4621f5a29bfc00263f2f3d135152ce02ab10618b Mon Sep 17 00:00:00 2001
From: tonyco97 <tonyco97.tc@gmail.com>
Date: Mon, 27 May 2024 22:35:11 +0200
Subject: [PATCH] downloadPage. Created download page for nethlink

---
 index.html               | 222 +++++++++++++++++++++++++++++++++++++++
 public/Nethlink-logo.svg |  19 ++++
 public/background.svg    |   1 +
 3 files changed, 242 insertions(+)
 create mode 100644 index.html
 create mode 100644 public/Nethlink-logo.svg
 create mode 100644 public/background.svg
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..7b4b7720
--- /dev/null
+++ b/index.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NethLink</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap&family=Roboto+Mono:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="./public/TrayNotificationIcon.svg" type="image/x-icon" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        font-family: 'Poppins', sans-serif;
+        background-image: url('./public/background.svg');
+        background-size: cover;
+      }
+      .font-mono {
+        font-family: 'Roboto Mono', monospace;
+      }
+    </style>
+    <script>
+      document.addEventListener('DOMContentLoaded', async function () {
+        const translations = {
+          en: {
+            description:
+              'Download NethLink update with bug fixes and new features.',
+            release: 'Release: ',
+            downloadUpdate: 'Download update',
+            chooseOS: 'Choose your operating system and click to start the download',
+            linux: 'Linux',
+            macos: 'MacOS',
+            windows: 'Windows',
+            feature1: "Don't miss a single call",
+            feature2: 'Speed dials',
+            feature3: 'All your contacts and Phonebook'
+          },
+          it: {
+            description:
+              "Scarica l'aggiornamento NethLink con correzioni di bug e nuove funzionalità per le impostazioni e lo stato.",
+            release: 'Rilascio: ',
+            downloadUpdate: "Scarica l'aggiornamento",
+            chooseOS: 'Scegli il tuo sistema operativo e clicca per avviare il download',
+            linux: 'Linux',
+            macos: 'MacOS',
+            windows: 'Windows',
+            feature1: 'Non perdere una chiamata',
+            feature2: 'Numeri veloci',
+            feature3: 'Tutti i tuoi contatti e rubrica'
+          }
+        }
+
+        const userLang = navigator.language.startsWith('it') ? 'it' : 'en'
+        const t = translations[userLang]
+
+        document.getElementById('description').innerText = t.description
+        document.getElementById('downloadUpdate').innerText = t.downloadUpdate
+        document.getElementById('chooseOS').innerText = t.chooseOS
+        document.getElementById('linux').querySelector('span').innerText = t.linux
+        document.getElementById('macos').querySelector('span').innerText = t.macos
+        document.getElementById('windows').querySelector('span').innerText = t.windows
+        document.getElementById('feature1').innerText = t.feature1
+        document.getElementById('feature2').innerText = t.feature2
+        document.getElementById('feature3').innerText = t.feature3
+
+        const os = navigator.userAgent
+        let selectedElement
+        let currentOS
+        if (os.indexOf('Linux') !== -1) {
+          currentOS = 'linux'
+          selectedElement = document.getElementById('linux')
+          selectedIconDownload = document.getElementById('linuxDownloadIcon')
+          selectedElement.classList.add('border-blue-500', 'text-white')
+          selectedIconDownload.classList.add('text-blue-500')
+        } else if (os.indexOf('Mac') !== -1) {
+          currentOS = 'macos'
+          selectedElement = document.getElementById('macos')
+          selectedIconDownload = document.getElementById('macDownloadIcon')
+          selectedElement.classList.add('border-blue-500', 'text-white')
+          selectedIconDownload.classList.add('text-blue-500')
+        } else if (os.indexOf('Windows') !== -1) {
+          currentOS = 'windows'
+          selectedElement = document.getElementById('windows')
+          selectedIconDownload = document.getElementById('windowsDownloadIcon')
+          selectedElement.classList.add('border-blue-500', 'text-white')
+          selectedIconDownload.classList.add('text-blue-500')
+        }
+
+        document.querySelectorAll('.os-button').forEach((button) => {
+          button.addEventListener('mouseenter', () => {
+            if (selectedElement) {
+              selectedElement.classList.remove('border-blue-500', 'text-white')
+              selectedElement = null
+            }
+            if (selectedIconDownload) {
+              selectedIconDownload.classList.remove('text-blue-500')
+              selectedIconDownload = null
+            }
+          })
+        })
+
+        const fetchDownloadLinks = async () => {
+          try {
+            const response = await fetch(
+              'https://api.github.com/repos/nethesis/nethlink/releases/latest'
+            )
+            const data = await response.json()
+
+            const releaseVersion = data.tag_name
+            document.getElementById('release').innerHTML =
+              `${t.release}<span class="font-mono">${releaseVersion}</span>`
+
+            const downloadUrls = data.assets
+              .filter(
+                (asset) =>
+                  asset.content_type === 'application/octet-stream' &&
+                  !asset.browser_download_url.endsWith('.blockmap')
+              )
+              .reduce((acc, asset) => {
+                const url = asset.browser_download_url
+                if (url.includes('setup.exe')) {
+                  acc.windowsUrl = url
+                } else if (url.includes('.AppImage')) {
+                  acc.linuxUrl = url
+                } else if (url.includes('.dmg')) {
+                  acc.macosUrl = url
+                }
+                return acc
+              }, {})
+
+            return downloadUrls
+          } catch (error) {
+            console.error('Cannot retrieve download url', error)
+            return {}
+          }
+        }
+
+        const downloadLinks = await fetchDownloadLinks()
+        document.getElementById('linux').href = downloadLinks.linuxUrl || '#'
+        document.getElementById('macos').href = downloadLinks.macosUrl || '#'
+        document.getElementById('windows').href = downloadLinks.windowsUrl || '#'
+      })
+    </script>
+  </head>
+  <body class="flex items-center justify-center h-screen">
+    <div class="bg-gray-950 py-14 px-12 rounded-2xl shadow-lg w-full max-w-4xl">
+      <div class="text-left mb-16 text-gray-200">
+        <img src="./public/Nethlink-logo.svg" alt="Nethlink logo" class="mb-4 w-36" />
+        <p id="description" class="mb-1"></p>
+        <p id="release" class="mb-4"></p>
+      </div>
+      <div class="text-gray-200">
+        <p id="downloadUpdate" class="font-medium text-2xl leading-5 mb-3"></p>
+        <p id="chooseOS" class="mb-4 leading-5"></p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          <a
+            id="linux"
+            href="#"
+            class="os-button text-gray-200 py-3 px-3 rounded-lg inline-flex items-center justify-between border-2 border-gray-600 hover:border-blue-500 hover:text-blue-500"
+          >
+            <div class="flex items-center text-gray-200">
+              <i class="fab fa-linux mr-2 fa-xl"></i> <span></span>
+            </div>
+            <div class="download-text" id="linuxDownloadIcon">
+              <i class="fa-solid fa-circle-arrow-down fa-xl hover:text-blue-500"></i>
+            </div>
+          </a>
+          <a
+            id="macos"
+            href="#"
+            class="os-button text-gray-200 py-3 px-3 rounded-lg inline-flex items-center justify-between border-2 border-gray-600 hover:border-blue-500 hover:text-blue-500"
+          >
+            <div class="flex items-center text-gray-200">
+              <i class="fab fa-apple mr-2 fa-xl"></i> <span></span>
+            </div>
+            <div class="download-text" id="macDownloadIcon">
+              <i class="fa-solid fa-circle-arrow-down fa-xl"></i>
+            </div>
+          </a>
+          <a
+            id="windows"
+            href="#"
+            class="os-button text-gray-200 py-3 px-3 rounded-lg inline-flex items-center justify-between border-2 border-gray-600 hover:border-blue-500 hover:text-blue-500"
+          >
+            <div class="flex items-center text-gray-200">
+              <i class="fab fa-windows mr-2 fa-xl"></i> <span></span>
+            </div>
+            <div class="download-text" id="windowsDownloadIcon">
+              <i class="fa-solid fa-circle-arrow-down fa-xl hover:text-blue-500"></i>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="relative py-8">
+        <div class="absolute inset-6 flex items-center" aria-hidden="true">
+          <div class="w-full border-t border-gray-700"></div>
+        </div>
+      </div>
+      <div
+        class="flex flex-col sm:flex-row justify-center items-center text-gray-200 space-y-4 sm:space-y-0 space-x-8 pb-8"
+      >
+        <div class="flex items-center">
+          <i class="fas fa-solid fa-phone mr-2 fa-lg"></i>
+          <span id="feature1" class="text-xs"></span>
+        </div>
+        <div class="flex items-center">
+          <i class="fas fa-bolt mr-2 fa-lg"></i>
+          <span id="feature2" class="text-xs"></span>
+        </div>
+        <div class="flex items-center space-x-1">
+          <i class="fas fa-address-book mr-2 fa-lg"></i>
+          <span id="feature3" class="text-xs"></span>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/public/Nethlink-logo.svg b/public/Nethlink-logo.svg
new file mode 100644
index 00000000..f01ebe9f
--- /dev/null
+++ b/public/Nethlink-logo.svg
@@ -0,0 +1,19 @@
+<svg width="250" height="46" viewBox="0 0 250 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_718_9235)">
+<path d="M120.356 23.2907C120.356 18.4339 119.213 14.605 116.958 11.8546C114.703 9.10414 111.435 7.66016 107.375 7.66016C103.314 7.66016 99.9233 9.10776 97.4262 12.003C95.0702 14.7281 93.876 18.1951 93.876 22.3027C93.876 26.555 94.9617 30.0003 97.1005 32.5553C99.4601 35.3456 102.92 36.7606 107.375 36.7606C110.882 36.7606 113.759 35.8595 115.93 34.0753C117.772 32.5445 119.187 30.326 120.088 27.4815L120.349 26.6672H115.322L115.203 27.1521C114.83 28.819 113.842 30.2841 112.438 31.2561C110.942 32.2593 109.172 32.7728 107.371 32.7254C104.548 32.7254 102.41 31.8568 100.857 30.0582C99.4999 28.4948 98.7616 26.4392 98.6639 23.9059H120.36L120.356 23.2907ZM107.375 11.6881C110.01 11.6881 112.004 12.5639 113.491 14.3553C114.743 15.8572 115.424 17.8006 115.528 20.1276H98.7435C99.0526 18.0206 99.9367 16.0396 101.299 14.4024C102.039 13.5187 102.971 12.815 104.024 12.3448C105.077 11.8745 106.223 11.65 107.375 11.6881Z" fill="#3B82F6"/>
+<path d="M133.815 12.3842H140V7.82791H133.486V4.80242C133.486 0 128.781 0 128.781 0V7.82791H124.25V12.3842H128.767V25.8252C128.767 29.1439 129.852 31.8328 131.988 33.8196C134.123 35.8065 136.71 36.7691 139.986 36.7691V32.3069C137.727 32.3069 136.059 31.5831 134.868 30.0486C133.913 28.7914 133.42 27.2439 133.471 25.666V12.3842H133.815Z" fill="#3B82F6"/>
+<path d="M77.7387 12.1252C79.997 12.1252 81.6762 12.849 82.8705 14.3834C83.8194 15.6417 84.3086 17.1872 84.2565 18.7624V31.9646C84.2565 36.767 88.9613 36.767 88.9613 36.767V18.6032C88.9613 15.3461 87.9045 12.6608 85.8236 10.6414C83.6847 8.62919 81.0465 7.64844 77.7387 7.64844C74.4309 7.64844 71.8506 8.61109 69.7407 10.6015C67.6308 12.592 66.5198 15.2737 66.5198 18.5923V36.767H71.2245V18.7624C71.1722 17.1838 71.6669 15.6355 72.625 14.3798C73.8048 12.8634 75.4804 12.1252 77.7387 12.1252Z" fill="#3B82F6"/>
+<path d="M208.91 12.1252C211.172 12.1252 212.847 12.849 214.045 14.3834C214.993 15.6425 215.482 17.1875 215.431 18.7624V31.9646C215.431 36.767 220.136 36.767 220.136 36.767V18.6032C220.136 15.3461 219.076 12.6608 216.995 10.6414C214.856 8.62919 212.218 7.64844 208.91 7.64844C205.602 7.64844 203.022 8.61109 200.912 10.6015C198.802 12.592 197.691 15.2737 197.691 18.5923V36.767H202.396V18.7624C202.344 17.1845 202.838 15.637 203.793 14.3798C204.98 12.8634 206.652 12.1252 208.91 12.1252Z" fill="#3B82F6"/>
+<path d="M165.46 10.6544C163.321 8.64219 160.69 7.66144 157.382 7.66144C154.827 7.66144 152.678 8.25858 150.868 9.47095V0H146.163V36.8089H150.868V18.7646C150.817 17.1866 151.31 15.6391 152.265 14.3819C153.456 12.8656 155.128 12.1273 157.39 12.1273C159.651 12.1273 161.323 12.8511 162.518 14.3856C163.467 15.6439 163.956 17.1894 163.904 18.7646V32.0101C163.904 36.8089 168.608 36.8089 168.608 36.8089V18.6053C168.605 15.3337 167.544 12.6665 165.46 10.6544Z" fill="#3B82F6"/>
+<path d="M174.924 0V32.0101C174.924 36.8089 179.629 36.8089 179.629 36.8089V0H174.924Z" fill="#3B82F6"/>
+<path d="M238.658 19.8466L249.229 10.1549H243.352L231.185 21.8081V0H226.48V32.0101C226.48 36.8089 231.185 36.8089 231.185 36.8089V26.7047L235.307 22.8902L244.434 36.8089H250L238.658 19.8466Z" fill="#3B82F6"/>
+<path d="M191.09 8.85156V36.8084H186.494V8.85156H191.09Z" fill="#3B82F6"/>
+<path d="M188.777 5.81386C190.104 5.81386 191.18 4.73799 191.18 3.41083C191.18 2.08368 190.104 1.00781 188.777 1.00781C187.45 1.00781 186.374 2.08368 186.374 3.41083C186.374 4.73799 187.45 5.81386 188.777 5.81386Z" fill="#3B82F6"/>
+<path d="M8.00413 15.5137C9.90049 13.6138 11.9308 12.8212 14.2143 13.0962C16.07 13.3639 17.7785 14.2577 19.0566 15.6295L30.1488 26.7037C34.184 30.7389 38.136 26.7869 38.136 26.7869L22.8746 11.5256C20.1278 8.77876 16.9937 7.42525 13.5593 7.48315C10.0706 7.58811 7.04509 8.98142 4.25122 11.7608C1.45734 14.5402 0.114692 17.5187 0.006122 20.964C-0.102448 24.4093 1.23297 27.594 4.0196 30.3987L19.281 45.6601L23.2293 41.7117L8.10184 26.5843C6.72889 25.299 5.84388 23.5776 5.59749 21.7131C5.31883 19.4367 6.10777 17.4101 8.00413 15.5137ZM41.8527 34.4954C39.9527 36.3918 37.9225 37.1844 35.6425 36.9093C33.7885 36.6512 32.0792 35.7646 30.8003 34.3977L19.7044 23.3018C15.6692 19.2703 11.7172 23.2222 11.7172 23.2222L26.9786 38.4836C29.729 41.2304 32.8595 42.5839 36.2939 42.526C39.7863 42.4211 42.8081 41.0241 45.602 38.2447C48.3959 35.4653 49.7385 32.4905 49.8399 29.0452C49.9412 25.5999 48.6203 22.4152 45.8336 19.6358L30.5723 4.36719L26.6239 8.32276L41.755 23.4502C43.1227 24.7316 44.006 26.4459 44.2557 28.3033C44.5199 30.5724 43.7491 32.5991 41.8527 34.4954Z" fill="#3B82F6"/>
+</g>
+<defs>
+<clipPath id="clip0_718_9235">
+<rect width="250" height="45.6615" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/background.svg b/public/background.svg
new file mode 100644
index 00000000..5fc0ba08
--- /dev/null
+++ b/public/background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2560 1440"><defs fill="#000000"><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#radial-gradient);}.cls-5{mask:url(#mask);}.cls-6{fill:#1e3a8a;}.cls-10,.cls-6,.cls-8{fill-rule:evenodd;}.cls-7{mask:url(#mask-2);}.cls-8{fill:#93c5fd;}.cls-9{mask:url(#mask-3);}.cls-10{fill:#1e40af;}</style><linearGradient id="linear-gradient" x1="-7559.22" y1="-35014.13" x2="-2440.93" y2="-24156.41" gradientTransform="matrix(-0.33, 0, 0, 0.33, 722.72, 9467.41)" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#fff" fill="#000000"/><stop offset="1" stop-color="#fff" stop-opacity="0" fill="#000000"/></linearGradient><linearGradient id="linear-gradient-2" x1="-5555.68" y1="-29031.73" x2="425.77" y2="-26504.35" xlink:href="#linear-gradient" fill="#000000"/><linearGradient id="linear-gradient-3" x1="2050.1" y1="-27052.53" x2="-4941.89" y2="-26315.43" xlink:href="#linear-gradient" fill="#000000"/><radialGradient id="radial-gradient" cx="21151.83" cy="-6694.5" r="270.83" gradientTransform="matrix(7.71, -4.45, 3.86, 6.68, -137286.07, 140312.36)" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#93c5fd" fill="#000000"/><stop offset="1" stop-color="#2563eb" fill="#000000"/></radialGradient><mask id="mask" x="1227.73" y="-249.19" width="1342.67" height="1938.39" maskUnits="userSpaceOnUse" fill="#000000"><g id="id0"><rect class="cls-1" x="1227.73" y="-249.19" width="1342.67" height="1938.39" fill="#000000"/></g></mask><mask id="mask-2" x="-12.35" y="-249.19" width="1268.01" height="1938.39" maskUnits="userSpaceOnUse" fill="#000000"><g id="id2"><rect class="cls-2" x="-12.35" y="-249.19" width="1266.16" height="1938.39" fill="#000000"/></g></mask><mask id="mask-3" x="342.47" y="-249.19" width="2529.02" height="1938.39" maskUnits="userSpaceOnUse" fill="#000000"><g id="id4"><rect class="cls-3" x="342.47" y="-249.19" width="2529.02" height="1938.39" fill="#000000"/></g></mask></defs><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><rect class="cls-4" width="2560" height="1440" fill="#000000"/><g class="cls-5"><path class="cls-6" d="M2560,1440H1438.14c219.45-310.88,501.09-863,265.28-1440H2560Z" fill="#000000"/></g><g class="cls-7"><path class="cls-8" d="M1255.66,1440c-1.14-351.9-98.85-1005.75-755.48-1440H0V1440Z" fill="#000000"/></g><g class="cls-9"><path class="cls-10" d="M1127.59,0c788.54,391.16,1002.12,1074.81,1059.84,1440H2560V0Z" fill="#000000"/></g></g></g></svg>
\ No newline at end of file
