nfp
/
nfpis
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Massive overhaul on entire site

This commit is contained in:
Jonatan Nilsson 2019-12-21 23:34:48 +00:00
parent 182b5c485a
commit c94c37369f
50 changed files with 43624 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
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 að því að
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

271
app/front/index.js
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 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 &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 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.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Hosting

28
app/main.js
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 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.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<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 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.
`),
]),
]),
]),
]),
]),
]
},
}
/*
<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
*/
module.exports = Streaming

658
app/styl/main.styl
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%