Massive overhaul on entire site

master
Jonatan Nilsson 2019-12-21 23:34:48 +00:00
parent 182b5c485a
commit c94c37369f
50 changed files with 43624 additions and 335 deletions

View File

@ -10,7 +10,8 @@
"env": {
"mocha": true,
"node": true,
"es6": true
"es6": true,
"browser": true
},
"rules": {
"require-await": 0,

1
.gitignore vendored
View File

@ -63,3 +63,4 @@ typings/
public/main.css
public/main.css.map
public/main.js
*.mov

29
app/footer.js Normal file
View File

@ -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 því
hefja nýja vináttusambönd við alla okkar viðskiptavini.
`),
m('h5', 'nfp@nfp.is'),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by pikisuperstar - www.freepik.com</a>
*/
module.exports = Footer

View File

@ -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 vera, þá munt
komast í samband við lið sem hefur tugi ára reynslu
í vinna með fólki og leysa vandamál. Við erum
stoltir koma alltaf með einfalda lausn en líka
ódýra, allt til 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 leitast eftir hugbúnað,
hýsingu, vefsíðu eða forritunarlausnum þá erum
við fjölhæfir og alltaf tilbúnir til leiks. Við
elskum taka 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, þá 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 þá getum við hjálpað þér 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 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 &copy; 2018 NFP ehf. :: Kennitala: 250689-2849 :: 0133-26-011111')),
),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Front

219
app/helper.js Normal file
View File

@ -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

212
app/hosting/index.js Normal file
View File

@ -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 hýsa þeirra vefi.
Meðal þess sem við höfum reynslu af er bæði
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 í bjóða upp á lausnir
þar sem við setjum allt upp og sjáum um allan umsjá
og leyft þér 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 þá skiptir það okkur ekki
neinu máli. Okkar kerfi geta séð um 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', `
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 geyma sín afrit eða vinnlugögn sem þeirra
starfsmanna þurfa hafa aðgang og vinna með hvar
svo sem þeir eru staddir í heiminum.
`),
m('p', `
Við höfum líka haft góða reynslu 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
enkóða vídeó fæla eða ljósmyndir í mismunandi upplausnum
fyrir vefsíðubirtingar hvað svo sem þarf 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 viðhalda sýndarvélum og
heimasíðum. Það er alls ekki fyrir alla gera
Wordpress uppfærslur eða gera prófanir á öryggisafrit
og þau séu afritast rétt.
`),
m('p', `
Viðhald á búnaði ætti alls ekki vera eitthvað sem
allir kunna. Þess vegna höfum við boðið upp á þann
valkost 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 gerast þar.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Hosting

View File

@ -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)

206
app/programming/index.js Normal file
View File

@ -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 vefsíðugerð, þá er ekkert sem hefur stoppað okkur
í 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
þá erum við sérfræðingar í þeim hlutum.
`),
m('p', `
Forritunartungumál skipta okkur ekki máli enda er það bara
tól til vinna með. Hvaða tækni sem þú notar, node eða
python eða C# eða hvað svo sem það er, þá 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 búa til sölukerfi frá grunni í
síðuformi, byggt frá grunni til 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 í einum pakka, með eða án posa og tilbúið til
notkunar.
`),
m('p', `
Við höfum einnig breytt vefverslunarframendanum til passa
fyrir hvert fyrirtæki og þeirra vörumerki. Við vinnum með
hverjum og einum og pössum upp á 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, þá erum við alltaf tilbúnir
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 liggja þá geturðu
treyst því við munum finna lausn saman og redda málunum.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Programming

119
app/streaming/index.js Normal file
View File

@ -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
stríða, getur verið erfitt fyrir þá 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.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Streaming

View File

@ -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