diff --git a/public/assets/logo.webp b/public/assets/logo.webp new file mode 100644 index 0000000..c45f6dd Binary files /dev/null and b/public/assets/logo.webp differ diff --git a/public/index.html b/public/index.html index 5f6409c..46088d9 100644 --- a/public/index.html +++ b/public/index.html @@ -4,66 +4,105 @@ Nebulosus - + + + + +
-
-
+
-

Nebulosus

-
-
-
-
-

What does Nebulosus offer?

- Nebulosus offers a variety of services: -
    -
  1. Server Hosting
    2. -
  2. Website / Application Development
    3. -
  3. Technical Support
    4. -
- - -
-
-

About Nebulosus

-

- Nebulosus is simplicity, redundancy, reliability and friendliness.
- Software should be intuitive, aware of it's environment. That's what Nebulosus strives for. -
- If you want simple, intuitive and reliable software, you're in the right spot. -

-
+
+ +
+

Nebulosus

+ +
- -
-
-

More information about Nebulosus

+
+ + +
+

About

+

+ Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and + friendliness. + Software should be intuitive, aware of it's environment. That's what Nebulosus strives for. + If you want to develop an app with intuitive design and a redundant infrastructure, please reach out! + If you're looking for a company site, let's discuss it! +

+
+ +
+

Offer

+
+
+

+

+

+ +
+
+

+

+

+ +
+
+

+

+

+ +
+
+

+

+

+ +
+
+
+ +
+

Information

- Chamber of Commerce number: 93409583 - E-mail: info@nebulosus.nl + : + :
+ + + + + \ No newline at end of file diff --git a/public/res/locale.js b/public/res/locale.js new file mode 100644 index 0000000..8499454 --- /dev/null +++ b/public/res/locale.js @@ -0,0 +1,103 @@ +(() => { + const getLocale = () => { + const cacheLocale = localStorage.getItem('preferredLocale') + if (cacheLocale) return cacheLocale + localStorage.setItem('preferredLocale', navigator.language); + return locale + } + + const setPreferredLocale = (locale) => { + localStorage.setItem('preferredLocale', locale); + setLocale() + } + + const getLocaleURL = (locale = getLocale()) => { + const lang = locale.split('-')[0]; + return `/res/locale/${lang}.json` + } + + const loadLocale = async (locale = getLocale()) => { + // check localStorage + const cacheDate = localStorage.getItem(`locale-${locale}`) + if (cacheDate) { + if (Date.now() - cacheDate < 1000 * 60 * 60 * 24) { // 1 day + return JSON.parse(localStorage.getItem(`locale-${locale}-data`)) + } + } + try { + const response = await fetch(getLocaleURL(locale), { cache: 'no-store' }) + if (response.ok) { + const data = await response.json() + localStorage.setItem(`locale-${locale}`, Date.now()) + localStorage.setItem(`locale-${locale}-data`, JSON.stringify(data)) + return data + } + } catch (error) { + console.error(error) + if (cacheDate) { // if error then return cache even if expired + return JSON.parse(localStorage.getItem(`locale-${locale}-data`)) + } else { + if (locale !== 'en') return await loadLocale('en'); + } + } + return {} + } + + const setLocale = async (locale = getLocale()) => { + const data = await loadLocale(locale) + document.querySelectorAll('[data-i18n]').forEach(async (element) => { + try { + // main.intro.title => {main: {intro: {title: 'value'}}} + const keys = element.getAttribute('data-i18n').split('.'); + console.log(keys) + let value = data; + keys.forEach((key) => value = value[key]); + console.log(value) + // if array then into ul list + if (Array.isArray(value)) { + element.innerHTML = '' + const ul = document.createElement('ul') + value.forEach((item) => { + const li = document.createElement('li') + li.innerHTML = item + ul.appendChild(li) + }) + element.appendChild(ul) + } else { + element.innerHTML = value ?? '###'; + } + } catch (error) { + console.error(error) + element.innerHTML = '###'; + } + }); + document.querySelectorAll('[data-i18n-show]').forEach(el => el.removeAttribute('data-i18n-show')) + } + + window.locale = { + setPreferredLocale, + getLocale, + getLocaleURL, + loadLocale, + setLocale, + expireLocale: () => { + localStorage.removeItem(`locale-${getLocale()}`) + localStorage.removeItem(`locale-${getLocale()}-data`) + setLocale() + } + } + window.locale.setLocale(); + + // expiry management + // check if locale is older than EXPIRY_TIME then fetch again + function checkExpiry() { + const cacheDate = localStorage.getItem(`locale-${getLocale()}`) + if (cacheDate) { + if (Date.now() - cacheDate > 1000 * 60 * 60 * 24) { // 1 day + window.locale.expireLocale() + } + } + } + setInterval(checkExpiry, 1000 * 60 * 60); // 1 hour + checkExpiry() +})() \ No newline at end of file diff --git a/public/res/locale/en.json b/public/res/locale/en.json new file mode 100644 index 0000000..c2c7582 --- /dev/null +++ b/public/res/locale/en.json @@ -0,0 +1,66 @@ +{ + "$": { + "name": "Nebulosus", + "kvk": 93409583, + "mail": "info@nebulosus.nl", + "motto": "Focused on innovation." + }, + "about": { + "title": "About", + "text": "Nebulosus is a Dutch company focused on intuition, simplicity, redundancy, reliability, and friendliness.
We believe software should be intuitive and aware of its environment. This is the standard we aim for at Nebulosus.
Looking to develop an app with intuitive design and robust infrastructure? Get in touch!
Need a company website? Let’s discuss how we can help." + }, + "offer": { + "title": "Offer", + "it-consultancy": { + "title": "IT Consultancy", + "tagline": "IT consultancy services for your business.", + "description": "Nebulosus offers IT consultancy services for your business. Giving you a clear understanding of the technology you need to move forward.", + "solutions": [ + "IT Strategy", + "Infrastructure", + "Security", + "Compliance", + "Training" + ] + }, + "managed-hosting": { + "title": "Managed Hosting", + "tagline": "Managed hosting services for your website.", + "description": "Nebulosus offers managed hosting services for your website. Taking care of the technical stuff so you can focus on your business.", + "solutions": [ + "Application Hosting", + "DNS Management (Domain and Subdomains)", + "SSL Certificates", + "Email Hosting" + ] + }, + "tech-support": { + "title": "Tech Support", + "tagline": "Professional support for your technical issues.", + "description": "Having an issue with your website, computer, or network? Nebulosus offers professional support for all your technical issues.", + "solutions": [ + "Android/iOS Support", + "Windows/Mac/Linux Support", + "Network Support", + "Installation and Configuration", + "Advice and Guidance" + ] + }, + "development": { + "title": "Development", + "tagline": "Development services for your business.", + "description": "Nebulosus offers development services for your application. Whether you need a website, custom integration, or want to automate your business, Nebulosus can help.", + "solutions": [ + "(Web)applications", + "Integration development", + "Automation", + "API Development", + "Database Development" + ] + } + }, + "dict": { + "kvk": "Chamber of Commerce", + "mail": "Email" + } +} \ No newline at end of file diff --git a/public/res/locale/nl.json b/public/res/locale/nl.json new file mode 100644 index 0000000..f080e9d --- /dev/null +++ b/public/res/locale/nl.json @@ -0,0 +1,66 @@ +{ + "$": { + "name": "Nebulosus", + "kvk": 93409583, + "mail": "info@nebulosus.nl", + "motto": "Gericht op innovatie." + }, + "about": { + "title": "Over", + "text": "Nebulosus is een Nederlands bedrijf dat streeft naar intuïtieve, eenvoudige en betrouwbare software, met redundantie en gebruiksvriendelijkheid als kernwaarden.
Software moet intuïtief en omgevingsbewust zijn. Daar zetten wij ons voor in.
Wil je een app met intuïtief design en een robuuste infrastructuur? Neem contact op!
Op zoek naar een bedrijfssite? Laten we het bespreken!" + }, + "offer": { + "title": "Aanbod", + "it-consultancy": { + "title": "IT Consultancy", + "tagline": "IT-consultancydiensten voor uw bedrijf.", + "description": "Technologie moet je vooruithelpen, niet tegenwerken. Strategisch advies waarmee uw bedrijf wendbaar blijft in een snel veranderend digitaal landschap.", + "solutions": [ + "IT-strategie", + "Infrastructuur", + "Beveiliging", + "Compliance", + "Training" + ] + }, + "managed-hosting": { + "title": "Beheerde Hosting", + "tagline": "Beheerde hostingdiensten voor uw website.", + "description": "Nebulosus biedt beheerde hostingdiensten voor uw website. Terwijl de technische zaken worden geregeld, kunt u zich richten op uw bedrijf.", + "solutions": [ + "Applicatie Hosting", + "DNS-beheer (Domeinnaam en subdomeinen)", + "SSL-certificaten", + "E-mailhosting" + ] + }, + "tech-support": { + "title": "Technische Ondersteuning", + "tagline": "Professionele ondersteuning bij uw technische problemen.", + "description": "Een probleem met uw website, computer of netwerk? Nebulosus biedt professionele ondersteuning voor al uw technische problemen.", + "solutions": [ + "Android/iOS-ondersteuning", + "Windows/Mac/Linux-ondersteuning", + "Netwerkondersteuning", + "Installatie en configuratie", + "Advies en begeleiding" + ] + }, + "development": { + "title": "Ontwikkeling", + "tagline": "Ontwikkelingsdiensten voor uw bedrijf.", + "description": "Nebulosus biedt ontwikkelingsdiensten voor uw applicatie. Of u nu een website, mobiele app of aangepaste software nodig heeft, Nebulosus kan helpen.", + "solutions": [ + "(Web)applicaties", + "Integratie ontwikkeling", + "Automatisering", + "API's", + "Databaseontwikkeling" + ] + } + }, + "dict": { + "kvk": "Kamer van Koophandel", + "mail": "E-mail" + } +} \ No newline at end of file diff --git a/public/res/style.css b/public/res/style.css index 9724b99..9599049 100644 --- a/public/res/style.css +++ b/public/res/style.css @@ -20,10 +20,11 @@ header { top: 0%; width: 100vw; height: fit-content; - background-color: var(--theme-color, gray); - color: #fff; - - box-shadow: 0 0 20px var(--theme-color-lowlight); + background-color: #fff; + border-bottom: 4px solid var(--theme-color); + color: #000; + align-content: center; + z-index: 100; } header div.logo { @@ -40,8 +41,8 @@ header div.logo span { main { display: flex; flex-direction: column; - gap: 1em; width: 100vw; + margin-bottom: 4rem; } main section { @@ -57,17 +58,19 @@ main section { section#intro { display: flex; flex-direction: column; - justify-content: center; - align-items: center; margin: 0; width: 100vw; - background-color: var(--theme-color); + background: linear-gradient(120deg, var(--theme-color-highlight-2), var(--theme-color) 60%); color: #fff; font-size: 2em; border-bottom: 3px solid gray; + + h1 { + margin: 0; + } } div section { @@ -76,6 +79,20 @@ div section { /* --- */ +footer { + display: flex; + flex-direction: column; + position: fixed; + bottom: 0; + width: calc(100vw - 5em); + height: 2rem; + padding-left: 2.5em; + background-color: #fff; + justify-content: center; +} + +/* --- */ + /* for anchors.js */ h2:hover { cursor: pointer; @@ -144,13 +161,13 @@ button { cursor: pointer; &:hover { - background-color: var(--theme-color-highlight-2); + border: 1px solid var(--theme-color-highlight); } transition: background-color .2s ease-in-out; } -div.columns { +.columns { display: flex; @media (max-width: 600px) { @@ -158,7 +175,7 @@ div.columns { } } -div.rows { +.rows { display: flex; flex-direction: column; }