diff --git a/.eslintrc b/.eslintrc index ed09daa..a5f44e3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,7 +10,8 @@ "env": { "mocha": true, "node": true, - "es6": true + "es6": true, + "browser": true }, "rules": { "require-await": 0, diff --git a/.gitignore b/.gitignore index f2150d9..cf7fee0 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,4 @@ typings/ public/main.css public/main.css.map public/main.js +*.mov diff --git a/app/footer.js b/app/footer.js new file mode 100644 index 0000000..fcec685 --- /dev/null +++ b/app/footer.js @@ -0,0 +1,29 @@ +const m = require('mithril') + +const Footer = { + oninit: function() { + }, + + view: function() { + return [ + m('div.innerbox', [ + m('div.image'), + m('aside', [ + m('h3', 'Hafðu samband'), + m('p', ` + Sendu okkur email og lýstu þínum þörfum og við munum koma til móts + við þín. Við erum ekki feimnir og höfum alltaf gaman að því að + hefja nýja vináttusambönd við alla okkar viðskiptavini. + `), + m('h5', 'nfp@nfp.is'), + ]), + ]), + ] + }, +} + +/* + Background vector created by pikisuperstar - www.freepik.com +*/ + +module.exports = Footer diff --git a/app/front/index.js b/app/front/index.js index b47a2cb..18d140e 100644 --- a/app/front/index.js +++ b/app/front/index.js @@ -1,50 +1,247 @@ const m = require('mithril') +const Helper = require('../helper') const Front = { - view: function() { + oninit: function(vnode) { + Helper.init(vnode, 'frontpage', { + ratio: 0.85, + }) + }, + + view: function(vnode) { return [ - m('header', m('h1', 'NFP ehf.')), + m('header', { + oncreate: function(subnode) { + vnode.state.domContainer = subnode.dom + Helper.checkCreated(vnode) + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + }) + }, + }, m('div.container', [ + m('video', { + oncreate: function(subnode) { + vnode.state.domVideo = subnode.dom + Helper.checkCreated(vnode) + }, + preload: 'none', + loop: true, + muted: true, + playsinline: true, + }, [ + m('source', { + src: vnode.state.videoUrl, + type: 'video/mp4', + }), + m('source', { + src: '/assets/cover/frontpage.webm', + type: 'video/webm', + }), + ] + ), + m('div', + m('img', { + oncreate: function(subnode) { + vnode.state.domImg = subnode.dom + Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/frontpage.jpg') + Helper.checkCreated(vnode) + }, + src: 'data:image/jpeg;base64,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', + }) + ), + m('nav', [ + m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')), + m('div.filler'), + m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]), + m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]), + m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]), + ]), + m('div.content', [ + m('h1', 'Næsta kynslóð'), + m('h2', 'með nútíma lausnir!'), + ]), + ]) + ), m('main', [ - m('section', - m('p', ` - Software development, video production, - live streaming, software operations - or whatever your needs may be, NFP ehf. - has the resource and technical knowledge - to approach any and all needs. - `) - ), - m('aside', - m('span', 'Contact us'), - m('h3', 'nfp@nfp.is') - ), - m('section', [ - m('h5', 'Sample of our clients'), - m('div.clients', [ - m('a.client.stjornarrad', { - href: 'https://www.stjornarradid.is/', - target: '_blank', - }, 'Stjórnarráðið'), - m('a.client.aranja', { - href: 'https://aranja.com/', - target: '_blank', - }, 'Aranja'), - m('a.client.jokula', { - href: 'http://jokula.is/', - target: '_blank', - }, 'Jokula'), - m('a.client.filadelfia', { - href: 'http://filadelfia.is/', - target: '_blank', - }, 'Filadelfia'), + // Solutions + m('article.solution', [ + m('h3', [ + 'Við erum með lausnina', + m('div.left'), + m('div.right'), + ]), + m('section', [ + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h5', 'Þínar þarfir'), + m('p', ` + Hvað svo sem þarfir þínar kunna að vera, að þá munt + komast í samband við lið sem hefur tugi ára reynslu + í að vinna með fólki og leysa vandamál. Við erum + stoltir að koma alltaf með einfalda lausn en líka + ódýra, allt til að mæta hverjum og einum og þeirra + þarfir. + `), + ]), + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h5', 'Okkar lausnir'), + m('p', ` + Hvort heldur sem þú ert að leitast eftir hugbúnað, + hýsingu, vefsíðu eða forritunarlausnum að þá erum + við fjölhæfir og alltaf tilbúnir til leiks. Við + elskum að taka að okkur krefjandi verkefni. + `), + ]), + ]), + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/solutions.svg")', + }, + }), + ]), + ]), + // Solutions + m('article.hosting', [ + m('section', [ + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Hýsingarlausnir sniðnar að þínum þörfum'), + m('p', ` + Hvort heldur sem þig vantar vefsíðuhýsingu, + sýndarvélar, gagnageymslu eða einhvers konar vennsl + á myndagögnum, að þá getum við fundið lausn sem + hentar þér. + `), + m(m.route.Link, { class: 'next', href: '/hosting-solutions' }, 'Lesa meira'), + ]), + ]), + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/hosting.svg")', + }, + }), + ]), + ]), + // Programming + m('article.programming', [ + m('section', [ + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Forritunarlausnir'), + m('p', ` + Við höfum með okkur yfir 20 ára reynslu í forritun og + hugbúnaðargerð. Ef þig vantar sérlausn eða aðstoð með + þín verkefni að þá getum við hjálpað þér að leysa úr því. + `), + m(m.route.Link, { class: 'next', href: '/programming-solutions' }, 'Lesa meira'), + ]), + ]), + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/programming.svg")', + }, + }), + ]), + ]), + // Programming + m('article.video', [ + m('section', [ + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Streymi og vídeólausnir'), + m('p', ` + Það skiptir engu þó þú sért með þúsund manna + ráðstefnur eða litla hádegisfundi í fundarsölum. + Það getur alltaf borgað sig að bjóða upp á streymi + fyrir þá sem ekki geta komist. Við höfum mörg ára + reynslu í því og getum unnið í hvaða sal sem er. + `), + m(m.route.Link, { class: 'next', href: '/video-solutions' }, 'Lesa meira'), + ]), + ]), + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/video.svg")', + }, + }), ]), ]), - m('footer', - m('span', m.trust('Copyright © 2018 NFP ehf. :: Kennitala: 250689-2849 :: 0133-26-011111')), - ), ]), ] }, } +/* +Background vector created by macrovector - www.freepik.com +*/ + module.exports = Front diff --git a/app/helper.js b/app/helper.js new file mode 100644 index 0000000..1b698f3 --- /dev/null +++ b/app/helper.js @@ -0,0 +1,219 @@ +const Helper = { + init: function(vnode, filename, options) { + vnode.state.domImg = null + vnode.state.domVideo = null + vnode.state.domContainer = null + + vnode.state.videoShow = false + vnode.state.videoFilename = filename + vnode.state.resizePauseTimeout = null + vnode.state.resizeTimeout = null + vnode.state.videoResizeThrottler = Helper.resizeThrottler.bind(vnode.state, vnode) + vnode.state.scrollListener = null + vnode.state.scrollListenerTicking = false + vnode.state.scrollListenerWaiting = [] + vnode.state.videoVisibilityHidden = '' + vnode.state.videoVisibilityEvent = null + vnode.state.videoVisibilityChanged = null + vnode.state.videoResizeRatio = options && options.ratio || 1 + vnode.state.videoUrl = screen.width > 1280 + ? '/assets/cover/' + filename + '_1080.mp4' + : '/assets/cover/' + filename + '_720.mp4' + }, + + clear: function(vnode) { + vnode.state.scrollListenerWaiting.splice(0, vnode.state.scrollListenerWaiting.length) + window.removeEventListener('resize', vnode.state.videoResizeThrottler) + window.removeEventListener('scroll', vnode.state.scrollListener, false) + window.removeEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged) + }, + + scrollListener: function(vnode) { + if (!vnode.state.scrollListenerWaiting.length) return + + let scrollTop = window.pageYOffset + let height = window.innerHeight + + for (var i = 0; i < vnode.state.scrollListenerWaiting.length; i++) { + Helper.scrollItemIsVisible(vnode, vnode.state.scrollListenerWaiting[i], scrollTop, height) + } + }, + + scrollCheckEmpty: function(vnode) { + if (vnode.state.scrollListenerWaiting.length) return + + vnode.state.scrollListener = null + window.removeEventListener('scroll', vnode.state.scrollListener, false) + }, + + scrollAddItem: function(vnode, options) { + let bound = options.dom.getBoundingClientRect() + let scrollTop = window.pageYOffset + + let item = { + dom: options.dom, + threshold: options.threshold || 100, + top: Math.round(bound.top) + Math.round(scrollTop), + className: ' ' + options.className, + ticking: false, + } + + vnode.state.scrollListenerWaiting.push(item) + + if (!vnode.state.scrollListener) { + vnode.state.scrollListener = Helper.scrollListener.bind(vnode.state, vnode) + window.addEventListener('scroll', vnode.state.scrollListener, false) + } + Helper.scrollItemIsVisible(vnode, item, window.pageYOffset, window.innerHeight) + }, + + scrollResetBound: function(vnode) { + let scrollTop = window.pageYOffset + + vnode.state.scrollListenerWaiting.forEach(function (item) { + let bound = item.dom.getBoundingClientRect() + item.top = Math.round(bound.top) + Math.round(scrollTop) + }) + }, + + scrollItemIsVisible: function(vnode, item, scrollTop, height) { + if (item.ticking) return + + if (item.top - item.threshold < scrollTop + height) { + item.ticking = true + + requestAnimationFrame(function() { + item.dom.className += item.className + let index = vnode.state.scrollListenerWaiting.indexOf(item) + + if (index >= 0) { + vnode.state.scrollListenerWaiting.splice(index, 1) + } + Helper.scrollCheckEmpty(vnode) + }) + } + }, + + checkCreated: function(vnode) { + if (!vnode.state.domImg || !vnode.state.domVideo || !vnode.state.domContainer) return + + vnode.state.videoShow = Boolean(vnode.state.domVideo.play) + + window.addEventListener('resize', vnode.state.videoResizeThrottler, false) + + Helper.resizeHandler(vnode) + if (vnode.state.videoShow) { + vnode.state.domVideo.play() + + if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support + vnode.state.videoVisibilityHidden = 'hidden' + vnode.state.videoVisibilityEvent = 'visibilitychange' + } else if (typeof document.msHidden !== 'undefined') { + vnode.state.videoVisibilityHidden = 'msHidden' + vnode.state.videoVisibilityEvent = 'msvisibilitychange' + } else if (typeof document.webkitHidden !== 'undefined') { + vnode.state.videoVisibilityHidden = 'webkitHidden' + vnode.state.videoVisibilityEvent = 'webkitvisibilitychange' + } + + if (vnode.state.videoVisibilityHidden && vnode.state.videoVisibilityEvent) { + vnode.state.videoVisibilityChanged = Helper.visibilityChanged.bind(this, vnode) + + document.addEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged, false) + } + } + }, + + visibilityChanged: function(vnode) { + if (document[vnode.state.videoVisibilityHidden]) { + vnode.state.domVideo.pause() + } else { + vnode.state.domVideo.play() + } + }, + + resizeThrottler: function(vnode) { + if (vnode.state.videoShow) { + if (!vnode.state.resizePauseTimeout) { + vnode.state.domVideo.pause() + } + clearTimeout(vnode.state.resizePauseTimeout) + vnode.state.resizePauseTimeout = setTimeout(function () { + vnode.state.resizePauseTimeout = null + + requestAnimationFrame(function() { + Helper.scrollResetBound(vnode) + vnode.state.domVideo.play() + }) + }, 250) + } + + if (!vnode.state.resizeTimeout) { + vnode.state.resizeTimeout = setTimeout(function () { + vnode.state.resizeTimeout = null + Helper.resizeHandler(vnode) + }, 66) + } + }, + + resizeHandler: function(vnode) { + var height = Helper.getHeight(vnode) + var width = document.documentElement.clientWidth + + Helper.scaleContainer(vnode, height) + Helper.scaleContainerContent(vnode, 'domImg', true, width, height) + Helper.scaleContainerContent(vnode, 'domVideo', false, width, height) + }, + + lazyLoadImage: function(vnode, name, url) { + if (!vnode.state[name]) return + + var img = document.createElement('img') + img.onload = function() { + vnode.state[name].src = url + } + img.src = url + }, + + scaleContainer: function(vnode, height) { + if (!vnode.state.domContainer) return + vnode.state.domContainer.setAttribute('style', 'height: ' + height + 'px;') + }, + + scaleContainerContent: function(vnode, name, forceHeight, width, height) { + if (!vnode.state[name]) return + + var videoRatio = 0.5625 + var windowRatio = height / width + + if (windowRatio > videoRatio) { + var videoWidth = height / videoRatio + var marginFromLeft = -(videoWidth - width) / 2 + 'px' + vnode.state[name].setAttribute('style', + 'margin-top: 0; margin-left: ' + marginFromLeft + ';' + + 'width: ' + videoWidth + 'px; height: ' + height + 'px') + } else { + if (forceHeight) { + vnode.state[name].setAttribute('style', + 'width: ' + width + 'px; height: ' + height + 'px') + } else { + vnode.state[name].setAttribute('style', + 'width: ' + width + 'px;') + } + } + }, + + getHeight: function(vnode) { + var height = document.documentElement.clientHeight + 5 + if (height < 485) { + height = 485 + } else { + height = height * vnode.state.videoResizeRatio + } + return height + }, +} + +window.helper = Helper + +module.exports = Helper diff --git a/app/hosting/index.js b/app/hosting/index.js new file mode 100644 index 0000000..334b8d7 --- /dev/null +++ b/app/hosting/index.js @@ -0,0 +1,212 @@ +const m = require('mithril') +const Helper = require('../helper') + +const Hosting = { + oninit: function(vnode) { + Helper.init(vnode, 'hosting') + }, + + onremove: function(vnode) { + Helper.clear(vnode) + }, + + view: function(vnode) { + return [ + m('header.hosting', { + oncreate: function(subnode) { + vnode.state.domContainer = subnode.dom + Helper.checkCreated(vnode) + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + }) + }, + }, m('div.container', [ + m('video', { + oncreate: function(subnode) { + vnode.state.domVideo = subnode.dom + Helper.checkCreated(vnode) + }, + preload: 'none', + loop: true, + muted: true, + playsinline: true, + }, [ + m('source', { + src: vnode.state.videoUrl, + type: 'video/mp4', + }), + m('source', { + src: '/assets/cover/hosting.webm', + type: 'video/webm', + }), + ] + ), + m('div', + m('img', { + oncreate: function(subnode) { + vnode.state.domImg = subnode.dom + Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/hosting.jpg') + Helper.checkCreated(vnode) + }, + src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABaAKADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAEAAgP/2gAMAwEAAhADEAAAAfisu652ITFMJkZ5vRZXzRl0L0OdOmc8y1nmutJtHFctzBsVtFkoYmgpWfSeLxpsnSIyaFhWOXqRxm5g0mLo2HEGARqGAr0GiylNNKqobSZB6TNtE+e8am2cUJKJmBDbZexpmih2gBhU0pOqmTZRNptWibplyoihkIrIIVzPc+l25h1x0rz5qxyCzyfDkKJQA406jIQ5WIZSttiy5NTBcRQoT0lUlV0D/8QAHRAAAgMBAQEBAQAAAAAAAAAAAAEQESACMRJBMP/aAAgBAQABBQKy82fvPh0VLEIYznbF7z4OKGhwhjFNlyzn3mHhn6joYi4ssuV7zDw45GP+PPqhllw45GMZe16oeuRsYxZss5FD0hwxFFFFFFCFtilizRQ82WNjFLiyyyz6PoubLLwpYoQ5YtWXCliwoYpelLP/xAAaEQACAwEBAAAAAAAAAAAAAAABEQAQIDBA/9oACAEDAQE/AbVv0vTyjAC6Ii7f/8QAHREAAwEBAQADAQAAAAAAAAAAAAEREBICEyAhMf/aAAgBAgEBPwH8JnWIhBeof3KzoueVRqDYspS6nBu4oMXg+M4H5mcnJzkLDo6G1MXo6LlyE+lLv//EABQQAQAAAAAAAAAAAAAAAAAAAHD/2gAIAQEABj8CcP/EABsQAQEBAQEBAQEAAAAAAAAAAAEAERAhIDFB/9oACAEBAAE/ISepLObM3qExJ4HsPPjb8bxfNMngMft+PibD02ez8d7bL2/PT9cb8BZeS8hnxnn+347jjHwSy+Sj8tnHBZX9l53/AFwNpbx7Py2dtsstsuC4UsMsMxi9l5bK22WeOU8ifMRhGMOMvLZ9sskk4cs8HOBZtlixDGGGG0kSODlb1vHq89memG2Zq1bLPG2ylLLrOP1HG23hiy+R+Dx+o+z83//aAAwDAQACAAMAAAAQQxMUBpQhhWsZvsfymwhtADDvcnRC6d2P9ahJ5zPOwQHzNBJeJ9ae+/zQ637l/8QAGhEAAwEBAQEAAAAAAAAAAAAAAAERECEgMf/aAAgBAwEBPxDpfBuCFIfBKeWLolrqKyl2Y8bxUJrKirVOtHYNglWNbylkyeYTf//EABoRAQEBAQEBAQAAAAAAAAAAAAEAESEQMUH/2gAIAQIBAT8Q24/J58lfPAJO5zJxMBiBXT43BI8bjl1JkcQMsWnn4Jfpvt27YXkqbfEqTwJtygg1tl2wbG5sCd4yPDuzHwdY6nEngypUtrf/xAAbEAEBAQEBAQEBAAAAAAAAAAABABEhEDFBIP/aAAgBAQABPxBCQOwrGJ5ckX7ATl8JLXxU8jw5ehWcjL8nZWy8uU9N8I+2ZDF44+79w0uGcfviqOLOyM8PmfMPZz150mZ46od8KDYyTuMEdXG0L53D6pjcSly2vnz8eDu3l3ZeS74JNJyx50J147ep0Q43EAwn2W+WM7CbIycy5nBF2j+AkbcbhC2d8E/JNllk2TLS8keI9Byu3K4Slbvg3bM8V2fJuvgIIO363Hjp66JdMsHwCM5bCEHG4XSH9uXqQQ+TxL4CzhjC6TF5kp+w74eEPJjfg5zxPl4XazOy1jUlQ8ly2VmTPo+19JIXx4Pfz7PiPD6+h6//2Q==', + }) + ), + m('nav', [ + m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')), + m('div.filler'), + m(m.route.Link, { class: 'active', href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]), + m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]), + m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]), + ]), + m('div.content', [ + m('h1', 'Hýsingar sem þú getur treyst'), + m('h2', 'Sýndarvélar, Wordpress, geymsluhýsing, og hvað eina!'), + ]), + ]) + ), + m('main', [ + // Solutions + m('article.hostintro', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/hostintro.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Vefhýsing'), + m('p', ` + Við höfum boðið okkar viðskiptavinum upp á + margskonar lausnir þegar kemur að hýsa þeirra vefi. + Meðal þess sem við höfum reynslu af er bæði að + setja upp sýndarvélar sem þú getur haft fulla umsjá + með og gert hvað svo sem þig lystir með en við + einnig sérhæfum okkur í að bjóða upp á lausnir + þar sem við setjum allt upp og sjáum um allan umsjá + og leyft þér að hafa athyglina frekar á þín málefni. + `), + m('p', ` + Ef þig vantar Wordpress/PHP uppsetningu eða + kannski ert með sérhæfari síðu og vilt nota + docker eða node að þá skiptir það okkur ekki + neinu máli. Okkar kerfi geta séð um að mæta þínum + þörfum. + `), + ]), + ]), + ]), + ]), + m('article.hoststorage', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/hostfile.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Gagnageymslur og myndavennsl'), + m('p', ` + Að vera með örugga geymslu fyrir gögn getur verið mjög + mikilvægt fyrir fyrirtæki. NFP ehf. hefur boðið upp á + stórar gagnageymslur á okkar vélbúnaði fyrir fyrirtæki + til að geyma sín afrit eða vinnlugögn sem þeirra + starfsmanna þurfa hafa aðgang að og vinna með hvar + svo sem þeir eru staddir í heiminum. + `), + m('p', ` + Við höfum líka haft góða reynslu að sjá um vinnslu og + hýsingu á myndum og þess háttar og séð um öll vennsl + sem krafist er til þeirra. Hvort heldur sem það er að + enkóða vídeó fæla eða ljósmyndir í mismunandi upplausnum + fyrir vefsíðubirtingar hvað svo sem þarf að gera. + `), + ]), + ]), + ]), + ]), + m('article.hostmanaged', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/hostmanaged.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Láttu okkur sjá um viðhaldið'), + m('p', ` + Það getur reynst kúnst að viðhalda sýndarvélum og + heimasíðum. Það er alls ekki fyrir alla að gera + Wordpress uppfærslur eða gera prófanir á öryggisafrit + og að þau séu að afritast rétt. + `), + m('p', ` + Viðhald á búnaði ætti alls ekki að vera eitthvað sem + allir kunna. Þess vegna höfum við boðið upp á þann + valkost að sjá um allt svoleiðis eftir aðstæðum fyrir + þá sem vilja eignast þann kost. Við gerum reglulegar + uppfærslur og fylgjumst með netheiminum og því sem + er að gerast þar. + `), + ]), + ]), + ]), + ]), + ]), + ] + }, +} + +/* +Background vector created by macrovector - www.freepik.com +*/ + +module.exports = Hosting diff --git a/app/main.js b/app/main.js index 1766054..7b7ca11 100644 --- a/app/main.js +++ b/app/main.js @@ -13,6 +13,30 @@ window.components = {} const m = require('mithril') -const Front = require('./front') -m.mount(document.getElementById('container'), Front) +m.route.setOrig = m.route.set +m.route.set = function(path, data, options){ + m.route.setOrig(path, data, options) + window.scrollTo(0, 0) +} + +m.route.linkOrig = m.route.link +m.route.link = function(vnode){ + m.route.linkOrig(vnode) + window.scrollTo(0, 0) +} + +const Front = require('./front') +const Hosting = require('./hosting') +const Programming = require('./programming') +const Streaming = require('./streaming') +const Footer = require('./footer') + +m.route.prefix = '' +m.route(document.getElementById('container'), '/', { + '/': Front, + '/hosting-solutions': Hosting, + '/programming-solutions': Programming, + '/video-solutions': Streaming, +}) +m.mount(document.getElementById('footer'), Footer) diff --git a/app/programming/index.js b/app/programming/index.js new file mode 100644 index 0000000..5563faa --- /dev/null +++ b/app/programming/index.js @@ -0,0 +1,206 @@ +const m = require('mithril') +const Helper = require('../helper') + +const Programming = { + oninit: function(vnode) { + Helper.init(vnode, 'programming') + }, + + onremove: function(vnode) { + Helper.clear(vnode) + }, + + view: function(vnode) { + return [ + m('header.programming', { + oncreate: function(subnode) { + vnode.state.domContainer = subnode.dom + Helper.checkCreated(vnode) + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + }) + }, + }, m('div.container', [ + m('video', { + oncreate: function(subnode) { + vnode.state.domVideo = subnode.dom + Helper.checkCreated(vnode) + }, + preload: 'none', + loop: true, + muted: true, + playsinline: true, + }, [ + m('source', { + src: vnode.state.videoUrl, + type: 'video/mp4', + }), + m('source', { + src: '/assets/cover/programming.webm', + type: 'video/webm', + }), + ] + ), + m('div', + m('img', { + oncreate: function(subnode) { + vnode.state.domImg = subnode.dom + Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/programming.jpg') + Helper.checkCreated(vnode) + }, + src: ' data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wgARCABaAKADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAAB8adF6cJioGIqprZ2RWdHICE0FoBe/PXXNpOqQleOO3YCmuZyGXA0F50gqyICGNYOsEgpObzztZUnnp1HDfPBhSYqaLzeHDFyuc0qNKnE0NUmozsqcPVhPfOw58NxHTXSNdTSOudMi00gpoqQaG2HY6qCra5846lnnFgMxUUrYVRAKzK7bNnKFtShsVWiUrkKKApqtefocvLoVxzC6G5CoGaXgKhBno4XT//EABsQAAMBAQEBAQAAAAAAAAAAAAABERAgMBIC/9oACAEBAAEFAnkITqlHixof5GvN8TaUfcITiE4ePKPaUomXwePxXVPo+hsvknkyD8aUvCFtGy+DKUpcQtflCEIQmXqEIQhMhCE2HzyvC9JHyP8AJCEJtKUvaPzr5fP/xAAaEQADAAMBAAAAAAAAAAAAAAAAAREQEiAC/9oACAEDAQE/AUUpS4oxU88PlC4eKI1EsQ1NSEIJcU2KXLKXEz6EylEQh//EABkRAAIDAQAAAAAAAAAAAAAAAAARASAwEP/aAAgBAgEBPwG8cnKcGPrGO6EIWUUkYz//xAAUEAEAAAAAAAAAAAAAAAAAAABw/9oACAEBAAY/AnD/xAAcEAEBAQEBAQADAAAAAAAAAAABABEQICEwMUH/2gAIAQEAAT8hWyeFkFkFudvqD7OPAKT4SyILISQWcBDnLXLZPMsmEJk2RwyDrZTwrbeWnKxeDxifdnHgemz5CXxlknN8DODJZPneuLS+Xzwb0M2fLLyGyl8t4pss9Jw+cZkQbZeB6AwNjm1mWX3asT8LZY4GZ4ZFI4PN4JLnnDhx8H8np4/rl8f/2gAMAwEAAgADAAAAEBr/AJK106M1iZzHPUQsF7qTyBHmplEJPpqBT2lWE8Kfxs8s7ywQsqGwhiTaN5D/xAAbEQEBAQEBAAMAAAAAAAAAAAABABEQITFRYf/aAAgBAwEBPxBZCiMNWHB+rCSxtljajZ2Gb4djEHoDAYSI1yR8zDUJAW23mKX92jAStWoXjPYIZJDhT1g2L//EABkRAQEBAQEBAAAAAAAAAAAAAAEAERAhIP/aAAgBAgEBPxBsLIJL2zhyBNt5GT8PwY5krKlcXPibbLPfU9nssWFhIW2y8IWWXi1av//EAB0QAQEBAQEBAAMBAAAAAAAAAAEAERAhMSBBUWH/2gAIAQEAAT8QSas1/wATi1suQt4mEid8MoBey14Z2LIttJx4Pq+YmBl/OXeDfqQZxObQtb25ARjYgpBBycQkrwfEHYJAJk8S96BWyMdEGC0t9ivEvDOHkJyzMXjIkhlm3rBJ+Q+yeRoxk9jgE3eXK8YHbUqaVIZaQaRC4sfk0q2TtlllggFjktKpiNkZacOIYJq28sssmWPyVatWrcu8R7l4NbTKkbIGxsySG8XrPM6SE6z5tbdtJ4vqDln8FDrhhxvLS+SH6hk7YsD15YXgWCHJhYIWZZvLaVIPkH8hP1A35CRiTJ1aJq5bJl5edl+EFnvOQn2/i//Z', + }) + ), + m('nav', [ + m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')), + m('div.filler'), + m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]), + m(m.route.Link, { class: 'active', href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]), + m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]), + ]), + m('div.content', [ + m('h1', 'Sérfræðingar í forritun'), + m('h2', 'Meira en 20 ára reynsla!'), + ]), + ]) + ), + m('main', [ + // Solutions + m('article.programmingintro', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/programmingintro.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Vefsíðuforritun'), + m('p', ` + Með margra ára reynslu í forritun og mikla þekkingu þegar + kemur að vefsíðugerð, að þá er ekkert sem hefur stoppað okkur + í að leysa krefjandi verkefni. Hvort heldur sem það er flókin + útfærsla á hönnun og innleiðing þess í HTML/CSS eða setja + upp greiðslugáttir og áskriftaleiðir hjá mismunandi aðilum + að þá erum við sérfræðingar í þeim hlutum. + `), + m('p', ` + Forritunartungumál skipta okkur ekki máli enda er það bara + tól til að vinna með. Hvaða tækni sem þú notar, node eða + python eða C# eða hvað svo sem það er, að þá lætur það ekkert + stoppa okkur. + `), + ]), + ]), + ]), + ]), + m('article.programmingstore', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/programmingstore.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Sölukerfi og vefverslun'), + m('p', ` + Okkar mesta stolt var að búa til sölukerfi frá grunni í + síðuformi, byggt frá grunni til að vera einföld í notkun + og henta lítil fyrirtæki. Sölukerfið býður upp á pantana- + og birgðakerfi sem og vefverslunarframenda. Allt kerfið er + svo hægt að fá í einum pakka, með eða án posa og tilbúið til + notkunar. + `), + m('p', ` + Við höfum einnig breytt vefverslunarframendanum til að passa + fyrir hvert fyrirtæki og þeirra vörumerki. Við vinnum með + hverjum og einum og pössum upp á að skilja aldrei frá hlutum + fyrr en allir eru sáttir. + `), + ]), + ]), + ]), + ]), + m('article.programmingcontracting', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/programmingcontractor.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Verktakavinna heim til þín'), + m('p', ` + Ef það er tímapressa hjá þér, að þá erum við alltaf tilbúnir + að koma beint inn í hús til ykkar og vinna verktakavinnu + á ykkar vinnustað. Við vinnum alltaf með ykkar fólki og + getum aðlagast hvaða vinnureglum sem er. + `), + m('p', ` + Okkar fólk hefur verið vel tekið hvert sem við förum og + höfum alltaf skilið hlutum frá okkur í tilbúnu formi. + Hverjar svo sem sem vandamálin kunna að liggja að þá geturðu + treyst því að við munum finna lausn saman og redda málunum. + `), + ]), + ]), + ]), + ]), + ]), + ] + }, +} + +/* +Background vector created by macrovector - www.freepik.com +*/ + +module.exports = Programming diff --git a/app/streaming/index.js b/app/streaming/index.js new file mode 100644 index 0000000..7487b79 --- /dev/null +++ b/app/streaming/index.js @@ -0,0 +1,119 @@ +const m = require('mithril') +const Helper = require('../helper') + +const Streaming = { + oninit: function(vnode) { + Helper.init(vnode, 'streaming') + }, + + onremove: function(vnode) { + Helper.clear(vnode) + }, + + view: function(vnode) { + return [ + m('header.streaming', { + oncreate: function(subnode) { + vnode.state.domContainer = subnode.dom + Helper.checkCreated(vnode) + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + }) + }, + }, m('div.container', [ + m('video', { + oncreate: function(subnode) { + vnode.state.domVideo = subnode.dom + Helper.checkCreated(vnode) + }, + preload: 'none', + loop: true, + muted: true, + playsinline: true, + }, [ + m('source', { + src: vnode.state.videoUrl, + type: 'video/mp4', + }), + m('source', { + src: '/assets/cover/streaming.webm', + type: 'video/webm', + }), + ] + ), + m('div', + m('img', { + oncreate: function(subnode) { + vnode.state.domImg = subnode.dom + Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/streaming.jpg') + Helper.checkCreated(vnode) + }, + src: ' data:image/jpeg;base64,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', + }) + ), + m('nav', [ + m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')), + m('div.filler'), + m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]), + m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]), + m(m.route.Link, { class: 'active', href: '/video-solutions' }, [ 'Videólausnir', m('div') ]), + ]), + m('div.content', [ + m('h1', 'Ráðstefnur og fundir'), + m('h2', 'Streymi- og vídeóupptökulausnir!'), + ]), + ]) + ), + m('main', [ + // Solutions + m('article.hostintro', [ + m('section', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + style: { + backgroundImage: 'url("/assets/images/videoconference.svg")', + }, + }), + m('aside', [ + m('div.item', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + }) + }, + }, [ + m('h3', 'Það er ekkert eins leiðinglegt og að missa af viðburði'), + m('p', ` + Fyrir þá sem ekki komast eða fyrir þá sem eiga við fötlun að + stríða, getur verið erfitt fyrir þá að komast á fundi eða + viðburði. Þessvegna höfum við boðið upp á fundarstreymi og + ráðstefnustreymi fyrir hvaða viðburð sem er. + `), + m('p', ` + Innifalið er alltaf streymigluggi, upptöku og úrvinnslu + gagna með sundurbrotið vídeó eftir ræðumanni eða umræðuefni, + tilbúið til birtingar á netinu eða henda í youtube. + `), + ]), + ]), + ]), + ]), + ]), + ] + }, +} + +/* +Background vector created by macrovector - www.freepik.com +*/ + +module.exports = Streaming diff --git a/app/styl/main.styl b/app/styl/main.styl index 9544e92..1faa9ef 100644 --- a/app/styl/main.styl +++ b/app/styl/main.styl @@ -1,14 +1,4 @@ @require 'reset' -@require 'fonts' - -body { - background: #eee; - color: black; - min-height: 100vh; - display: flex; - flex-direction: column; - font-family: 'Roboto', sans-serif; -} #container { flex-grow: 2; @@ -17,6 +7,215 @@ body { } header { + background: #444; + position: relative; + text-shadow: 0 0 10px black; + + .container { + position: relative; + bottom: 0%; + left: 0%; + height: 100%; + width: 100%; + overflow: hidden; + background: #000; + min-height: 485px; + + video { + width: 100%; + position: absolute; + z-index: 1; + bottom: 0; + } + + img { + width: 100%; + bottom: 0; + position: absolute; + z-index: 0; + min-height: 485px; + } + } + + nav { + display: flex; + z-index: 6; + position: absolute; + align-items: center; + top: 0%; + left: 0%; + width: 100%; + padding: 10px; + + .filler { + flex: 2 1 auto; + } + + .title { + margin: 0 20px 0 50px; + height: 70px; + display: flex; + align-items: center; + padding-left: 90px; + background: url('./assets/logo_only.svg') no-repeat transparent; + background-position: left center; + background-size: auto 70px; + font-size: 1.6em; + color: white; + opacity: 0.6; + } + + a { + font-size: 1.2em; + color: white; + text-shadow: 0 0 20px black; + padding: 10px 20px; + text-decoration: none; + opacity: 0.6; + transition: opacity 0.5s; + position: relative; + + & div { + position: absolute; + bottom: 0; + left: 20px; + right: 20px; + border-bottom: 2px solid white; + transition: transform 0.3s; + transform: scaleX(0); + } + + &:hover { + opacity: 1; + + & div { + transition: transform 0.7s; + transform: scaleX(1); + } + } + + &.active { + opacity: 1; + + & div { + transform: scaleX(1); + } + } + } + } + + .content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 5; + position: absolute; + top: 0px; + left: 0%; + height: 100%; + width: 100%; + min-height: 485px; + color: white; + text-transform: uppercase; + + + h1 { + text-align: center; + font-size: 7.3vw; + font-weight: bold; + padding: 10px; + transition: opacity 1s, transform 1s; + opacity: 0; + transform: translateY(30px); + } + + h2 { + text-align: center; + font-size: 3vw; + transition: opacity 1.2s, transform 1.2s; + opacity: 0; + transform: translateY(50px); + } + } + + &.visible { + h1, h2 { + opacity: 1; + transform: translateY(0px); + } + } + + &.hosting { + h1 { + font-size: 4.8vw; + margin-bottom: 10px; + } + h2 { + font-size: 2.5vw; + } + } + + &.programming { + text-shadow: 0 0 30px black; + + nav a { + background: #0003; + border-radius: 20px; + box-shadow: 0 0 80px black; + text-shadow: 0 0 80px black; + opacity: 1; + color: #999; + transition: opacity 0.5 color 0.5s; + + &.title { + background: url('./assets/logo_only.svg') no-repeat transparent; + background-position: left center; + background-size: auto 70px; + opacity: 0.7; + color: white; + opacity: 0.6; + + &:hover { + opacity: 1; + } + } + + &:hover { + color: white; + } + + &.active { + color: white; + } + } + + h1 { + font-size: 5.8vw; + margin-bottom: 10px; + } + h2 { + font-size: 3.5vw; + } + + h1, h2 { + } + } + + &.streaming { + text-shadow: 0 0 40px black; + + h1 { + font-size: 6.6vw; + margin-bottom: 10px; + } + h2 { + font-size: 3vw; + } + } +} + +/*header { margin-top: 4em; display: flex; flex-direction: column; @@ -32,31 +231,430 @@ header { background-size: contain; max-width: 400px; } -} - -@media only screen and (max-width: 464px) { - header { - margin-top: 13.8%; - } -} - -@media only screen and (min-width: 464px) { - header h1 { - align-self: center; - width: 400px; - height: 400px; - padding-top: 0; - } -} +}*/ main { display: flex; flex-direction: column; - margin-top: 3em; flex-grow: 2; + color: #333; } -section, +article { + display: flex; + padding: 0 50px; + flex-direction: column; + min-height: 82vh; + height: 600px; + overflow: hidden; + + h3 { + font-size: 2em; + padding: 10px 20px 40px; + font-weight: bold; + text-align: center; + position: relative; + align-self: center; + } + + section { + display: flex; + flex: 2 1 auto; + justify-content: center; + + aside { + flex: 0 1 50%; + max-width: 600px; + display: flex; + flex-direction: column; + justify-content: center; + + .item { + display: flex; + flex-direction: column; + } + + p { + font-size: 1.2em; + line-height: 1.4em; + margin-bottom: 50px; + } + + h5 { + text-align: center; + margin: 20px 10px; + font-size: 1.2em; + line-height: 1.4em; + font-weight: bold; + border-bottom: 2px solid #29688c; + padding: 10px 50px; + align-self: center; + } + + a { + text-decoration: none; + border: 2px solid #29688c; + align-self: center; + border-radius: 10px; + padding: 10px 30px 12px; + color: #29688c; + font-weight: bold; + font-size: 1.1em; + } + + p, h5, a, h3 { + transition: opacity 1.2s, transform 1.2s; + opacity: 0; + transform: translate(0px, 50px); + } + } + + .image { + flex: 0 1 50%; + max-width: 600px; + background-position: center; + background-size: 90% auto; + background-repeat: no-repeat; + + transition: opacity 1.2s, transform 1.2s; + opacity: 0; + transform: translate(50%, 0px); + } + } + + .visible p, + .visible a, + .visible .image, + .visible h5, + .visible h3, + .visible.image { + opacity: 1; + transform: translate(0px, 0px); + } + + &.solution { + box-shadow: 0 5px 50px #0005; + background: #e9e9e9; + margin: 0 0 5vh; + height: 800px; + + h3 { + font-size: 5vh; + padding: 5vh 20px; + font-weight: bold; + text-align: center; + position: relative; + align-self: center; + + .left, .right { + position: absolute; + top: 50%; + margin-top: 0px; + border-bottom: 2px solid #29688c; + } + + .left { + right: 100%; + left: -9999px; + } + + .right { + left: 100%; + right: -9999px; + } + } + } + + &.hosting { + height: 600px; + } + + &.programming { + background: #29688c; + background: linear-gradient(150deg, #020024 15%, #29688c 100%); + color: white; + position: relative; + min-height: auto; + height: 70vw; + max-height: 80vh; + min-height: 600px; + + section { + } + + aside { + align-self: flex-start; + position: relative; + z-index: 2; + margin-top: 5vh; + flex: 1 1 auto; + width: 90%; + max-width: 1440px; + + .item { + width: 50%; + min-width: 500px; + text-align: left; + } + } + + h3 { + align-self: flex-start; + padding: 10px 0 40px; + } + + a { + border-color: white; + color: white; + align-self: flex-start; + } + + .image { + position: absolute; + right: 0; + bottom: 0; + width: 87%; + height: 90%; + max-width: none; + background-position: right bottom; + background-size: contain; + } + } + + &.video { + min-height: 70vh; + } + + &.hostintro { + .image { + transform: translate(-50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.hoststorage { + background: #29688c; + background: linear-gradient(150deg, #020024 15%, #29688c 100%); + color: white; + position: relative; + height: 80vh; + min-height: 600px; + + section { + justify-content: flex-end; + } + + aside { + align-items: center; + + .item { + width: 50%; + min-width: 500px; + text-align: left; + } + } + + h3 { + align-self: flex-start; + padding: 10px 0 40px; + } + + .image { + position: absolute; + left: 0; + bottom: 0; + width: 50%; + height: 90%; + max-width: none; + background-position: left center; + background-size: contain; + transform: translate(-50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.hostmanaged { + position: relative; + height: 80vh; + min-height: 600px; + + section { + justify-content: flex-end; + } + + aside { + align-items: center; + + .item { + width: 50%; + min-width: 500px; + text-align: left; + } + } + + h3 { + align-self: flex-start; + padding: 10px 0 40px; + } + + .image { + position: absolute; + left: 0; + bottom: 0; + width: 50%; + height: 90%; + max-width: none; + background-position: left center; + background-size: contain; + transform: translate(-50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.programmingintro { + .image { + transform: translate(-50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.programmingstore { + background: #29688c; + background: linear-gradient(30deg, #020024 15%, #29688c 100%); + color: white; + position: relative; + height: 80vh; + min-height: 600px; + + section { + justify-content: flex-start; + } + + aside { + align-items: center; + + .item { + width: 50%; + min-width: 500px; + text-align: left; + } + } + + h3 { + align-self: flex-start; + padding: 10px 0 40px; + } + + .image { + position: absolute; + right: 0; + top: 5%; + width: 50%; + height: 90%; + max-width: none; + background-position: center; + background-size: contain; + transform: translate(50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.programmingcontracting { + .image { + transform: translate(-50%, 0px); + } + + .visible.image { + transform: translate(0px, 0px); + } + } +} + +footer { + background: #29688c; + padding: 100px; + + .innerbox { + min-height: 50vh; + background: white; + box-shadow: 0 0 10px #020024; + padding: 50px; + display: flex; + justify-content: center; + height: 500px; + + aside { + flex: 0 1 50%; + max-width: 600px; + display: flex; + flex-direction: column; + justify-content: center; + + h3 { + font-size: 2em; + padding: 10px 20px 40px; + font-weight: bold; + text-align: center; + position: relative; + align-self: center; + } + + p { + font-size: 1.2em; + line-height: 1.4em; + margin-bottom: 50px; + } + + h5 { + text-align: center; + margin: 20px 10px; + font-size: 1.2em; + line-height: 1.4em; + font-weight: bold; + border-bottom: 2px solid #29688c; + padding: 10px 50px; + align-self: center; + } + + a { + text-decoration: none; + border: 2px solid #29688c; + align-self: center; + border-radius: 10px; + padding: 10px 30px 12px; + color: #29688c; + font-weight: bold; + font-size: 1.1em; + } + } + + .image { + flex: 0 1 50%; + max-width: 600px; + background-position: center; + background-size: 90% auto; + background-repeat: no-repeat; + background-image: url('/assets/images/contact.svg'); + } + } +} + +/* section, aside { display: flex; flex-direction: column; @@ -67,7 +665,7 @@ aside { text-align: center; } } - +Business vector created by pikisuperstar - www.freepik.com section { padding: 0.5em 1em 3em; @@ -165,4 +763,4 @@ footer { section p { font-size: 1.1em; } -} +}*/ diff --git a/app/styl/reset.styl b/app/styl/reset.styl index a138125..852cccf 100644 --- a/app/styl/reset.styl +++ b/app/styl/reset.styl @@ -3,19 +3,8 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { +html, body, div, span, +h1, h2, h3, h4, h5, h6, p, a, img, form, label, input { margin: 0; padding: 0; border: 0; @@ -23,42 +12,18 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; } -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; + +div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, label, input, +header, nav, main, article, section { + box-sizing: border-box; } + body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -input { - font-size: 16px; - -webkit-appearance: none; - border-radius: 0; -} - -button { - outline: none; - border: none; - cursor: pointer; -} - -a { - text-decoration: none; + line-height: 1; + font-family: Tahoma, sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + color: black; + background: white; } diff --git a/package.json b/package.json index fe3f123..2a6dbe7 100644 --- a/package.json +++ b/package.json @@ -5,16 +5,17 @@ "main": "index.js", "scripts": { "build": "npm run build:styl && npm run build:js", - "build:js": "browserify app/main.js | uglifyjs --comments -o public/main.js", + "build:js": "browserify -p tinyify --no-commondir -o public/main.js app/main.js", "build:styl": "stylus app/styl/main.styl -c --out public", - "dev": "run-p watch:js watch:styl start", - "dev:run": "npm install && npm run dev", - "docker": "docker run -it --rm --name nfpis -p 3000:3000 -v \"$PWD\":/usr/src/app -w /usr/src/app node:slim", - "docker:dev": "npm run docker -- npm run dev:run", - "start": "spserver -f ./public/index.html -s ./public -p 3000", - "test": "echo \"Error: no test specified\" && exit 1", + "watch": "run-p watch:js watch:styl", "watch:js": "watchify app/main.js -o public/main.js --debug", - "watch:styl": "stylus -w -m app/styl/main.styl --out public" + "watch:styl": "stylus -w -m app/styl/main.styl --out public", + "dev": "run-p watch start", + "docker": "docker run -it --rm --name nfpis -p 3000:3000 -v \"$PWD\":/usr/src/app -w /usr/src/app node:slim", + "docker:dev": "npm run docker -- npm run dev", + "docker:install": "npm run docker -- npm install", + "start": "spserver -f ./public/index.html -s ./public -p 3000", + "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", @@ -27,13 +28,13 @@ }, "homepage": "https://github.com/nfp-projects/nfpis#readme", "devDependencies": { - "browserify": "^16.2.2", - "eslint": "^5.1.0", - "mithril": "^1.1.6", + "browserify": "^16.5.0", + "eslint": "^5.16.0", + "mithril": "^2.0.4", "npm-run-all": "^4.1.3", - "stylus": "^0.54.5", - "uglify-es": "^3.3.9", - "watchify": "^3.11.0" + "stylus": "^0.54.7", + "tinyify": "^2.5.1", + "watchify": "^3.11.1" }, "dependencies": { "spserver": "^0.3.0" diff --git a/public/assets/cover/frontpage.jpg b/public/assets/cover/frontpage.jpg new file mode 100644 index 0000000..68dc407 Binary files /dev/null and b/public/assets/cover/frontpage.jpg differ diff --git a/public/assets/cover/frontpage.webm b/public/assets/cover/frontpage.webm new file mode 100644 index 0000000..4fffc48 Binary files /dev/null and b/public/assets/cover/frontpage.webm differ diff --git a/public/assets/cover/frontpage_1080.mp4 b/public/assets/cover/frontpage_1080.mp4 new file mode 100644 index 0000000..0ef3fef Binary files /dev/null and b/public/assets/cover/frontpage_1080.mp4 differ diff --git a/public/assets/cover/frontpage_720.mp4 b/public/assets/cover/frontpage_720.mp4 new file mode 100644 index 0000000..a4c9e46 Binary files /dev/null and b/public/assets/cover/frontpage_720.mp4 differ diff --git a/public/assets/cover/hosting.jpg b/public/assets/cover/hosting.jpg new file mode 100644 index 0000000..188ab46 Binary files /dev/null and b/public/assets/cover/hosting.jpg differ diff --git a/public/assets/cover/hosting.png b/public/assets/cover/hosting.png new file mode 100644 index 0000000..8dbb4d2 Binary files /dev/null and b/public/assets/cover/hosting.png differ diff --git a/public/assets/cover/hosting.webm b/public/assets/cover/hosting.webm new file mode 100644 index 0000000..92905f6 Binary files /dev/null and b/public/assets/cover/hosting.webm differ diff --git a/public/assets/cover/hosting_1080.mp4 b/public/assets/cover/hosting_1080.mp4 new file mode 100644 index 0000000..6356ddb Binary files /dev/null and b/public/assets/cover/hosting_1080.mp4 differ diff --git a/public/assets/cover/hosting_720.mp4 b/public/assets/cover/hosting_720.mp4 new file mode 100644 index 0000000..2859218 Binary files /dev/null and b/public/assets/cover/hosting_720.mp4 differ diff --git a/public/assets/cover/hosting_tiny.jpg b/public/assets/cover/hosting_tiny.jpg new file mode 100644 index 0000000..fdf1d24 Binary files /dev/null and b/public/assets/cover/hosting_tiny.jpg differ diff --git a/public/assets/cover/programming.jpg b/public/assets/cover/programming.jpg new file mode 100644 index 0000000..7760eb1 Binary files /dev/null and b/public/assets/cover/programming.jpg differ diff --git a/public/assets/cover/programming.png b/public/assets/cover/programming.png new file mode 100644 index 0000000..eada7a8 Binary files /dev/null and b/public/assets/cover/programming.png differ diff --git a/public/assets/cover/programming.webm b/public/assets/cover/programming.webm new file mode 100644 index 0000000..c5dd7fa Binary files /dev/null and b/public/assets/cover/programming.webm differ diff --git a/public/assets/cover/programming_1080.mp4 b/public/assets/cover/programming_1080.mp4 new file mode 100644 index 0000000..475a0f5 Binary files /dev/null and b/public/assets/cover/programming_1080.mp4 differ diff --git a/public/assets/cover/programming_720.mp4 b/public/assets/cover/programming_720.mp4 new file mode 100644 index 0000000..ddd3ef6 Binary files /dev/null and b/public/assets/cover/programming_720.mp4 differ diff --git a/public/assets/cover/programming_tiny.jpg b/public/assets/cover/programming_tiny.jpg new file mode 100644 index 0000000..bf02fcb Binary files /dev/null and b/public/assets/cover/programming_tiny.jpg differ diff --git a/public/assets/cover/streaming.jpg b/public/assets/cover/streaming.jpg new file mode 100644 index 0000000..f7b8d44 Binary files /dev/null and b/public/assets/cover/streaming.jpg differ diff --git a/public/assets/cover/streaming.png b/public/assets/cover/streaming.png new file mode 100644 index 0000000..f6b83f8 Binary files /dev/null and b/public/assets/cover/streaming.png differ diff --git a/public/assets/cover/streaming.webm b/public/assets/cover/streaming.webm new file mode 100644 index 0000000..33c527d Binary files /dev/null and b/public/assets/cover/streaming.webm differ diff --git a/public/assets/cover/streaming_1080.mp4 b/public/assets/cover/streaming_1080.mp4 new file mode 100644 index 0000000..9b686df Binary files /dev/null and b/public/assets/cover/streaming_1080.mp4 differ diff --git a/public/assets/cover/streaming_720.mp4 b/public/assets/cover/streaming_720.mp4 new file mode 100644 index 0000000..0b55a48 Binary files /dev/null and b/public/assets/cover/streaming_720.mp4 differ diff --git a/public/assets/cover/streaming_tiny.jpg b/public/assets/cover/streaming_tiny.jpg new file mode 100644 index 0000000..4d95ee3 Binary files /dev/null and b/public/assets/cover/streaming_tiny.jpg differ diff --git a/public/assets/fonts/LICENSE.txt b/public/assets/fonts/LICENSE.txt deleted file mode 100755 index 75b5248..0000000 --- a/public/assets/fonts/LICENSE.txt +++ /dev/null @@ -1,202 +0,0 @@ - - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/public/assets/fonts/Roboto-Regular.ttf b/public/assets/fonts/Roboto-Regular.ttf deleted file mode 100755 index 2c97eea..0000000 Binary files a/public/assets/fonts/Roboto-Regular.ttf and /dev/null differ diff --git a/public/assets/images/contact.svg b/public/assets/images/contact.svg new file mode 100755 index 0000000..65b3b89 --- /dev/null +++ b/public/assets/images/contact.svg @@ -0,0 +1,766 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/hostfile.svg b/public/assets/images/hostfile.svg new file mode 100755 index 0000000..328a971 --- /dev/null +++ b/public/assets/images/hostfile.svg @@ -0,0 +1,2661 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/hosting.svg b/public/assets/images/hosting.svg new file mode 100755 index 0000000..d5a2d61 --- /dev/null +++ b/public/assets/images/hosting.svg @@ -0,0 +1,15456 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/hostintro.svg b/public/assets/images/hostintro.svg new file mode 100755 index 0000000..a609a16 --- /dev/null +++ b/public/assets/images/hostintro.svg @@ -0,0 +1,1110 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/hostmanaged.svg b/public/assets/images/hostmanaged.svg new file mode 100755 index 0000000..7667b62 --- /dev/null +++ b/public/assets/images/hostmanaged.svg @@ -0,0 +1,5117 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/programming.svg b/public/assets/images/programming.svg new file mode 100755 index 0000000..0b892db --- /dev/null +++ b/public/assets/images/programming.svg @@ -0,0 +1,2875 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/programmingcontractor.svg b/public/assets/images/programmingcontractor.svg new file mode 100755 index 0000000..9c78899 --- /dev/null +++ b/public/assets/images/programmingcontractor.svg @@ -0,0 +1,5559 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/programmingintro.svg b/public/assets/images/programmingintro.svg new file mode 100755 index 0000000..8a480e7 --- /dev/null +++ b/public/assets/images/programmingintro.svg @@ -0,0 +1,2530 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/programmingstore.svg b/public/assets/images/programmingstore.svg new file mode 100755 index 0000000..1c197be --- /dev/null +++ b/public/assets/images/programmingstore.svg @@ -0,0 +1,2295 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/solutions.svg b/public/assets/images/solutions.svg new file mode 100755 index 0000000..9137712 --- /dev/null +++ b/public/assets/images/solutions.svg @@ -0,0 +1,1335 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/video.svg b/public/assets/images/video.svg new file mode 100755 index 0000000..6a487dd --- /dev/null +++ b/public/assets/images/video.svg @@ -0,0 +1,1328 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/images/videoconference.svg b/public/assets/images/videoconference.svg new file mode 100755 index 0000000..9b49212 --- /dev/null +++ b/public/assets/images/videoconference.svg @@ -0,0 +1,884 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/assets/logo_only.svg b/public/assets/logo_only.svg new file mode 100755 index 0000000..3fac2f5 --- /dev/null +++ b/public/assets/logo_only.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index bf14e70..d57bcc0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,7 @@ + NFP ehf. - Programming, Video, Live & Operations Contractors @@ -21,6 +22,7 @@
+