Showing source for: https://unityhome.online/
Duration: 0.432485s
<!DOCTYPE html>
<html class="preload">
<head>
<meta charset=UTF-8 />
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.4.85/css/materialdesignicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="styles/main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<title>unityhomeonline</title>
<body>
<!--canvas id="canvas1" width="100" height="100"></canvas-->
<div class="landing-container">
<div class="landing">
<div class="landing-line right"></div>
<div class="landing-line left"></div>
<svg class="houseTop" style="width:75px;height:75px" viewBox="0 0 24 24">
<path d="M19 16H22L12 7L2 16H5L12 9.69L19 16M7 8.81V7H4V11.5L7 8.81Z" />
</svg>
<!--svg class="server" style="width:44px;height:44px" viewBox="0 0 24 24">
<path fill="currentColor" d="M13,19H14A1,1 0 0,1 15,20H22V22H15A1,1 0 0,1 14,23H10A1,1 0 0,1 9,22H2V20H9A1,1 0 0,1 10,19H11V17H4A1,1 0 0,1 3,16V12A1,1 0 0,1 4,11H20A1,1 0 0,1 21,12V16A1,1 0 0,1 20,17H13V19M4,3H20A1,1 0 0,1 21,4V8A1,1 0 0,1 20,9H4A1,1 0 0,1 3,8V4A1,1 0 0,1 4,3M9,7H10V5H9V7M9,15H10V13H9V15M5,5V7H7V5H5M5,13V15H7V13H5Z" />
</svg-->
<div class="logo">
<h1 class="ml9">
<span class="text-wrapper">
<span class="letters">UNITYHOMEONLINE</span>
<span class="line"></span>
</span>
</h1>
</div>
<div class="tagline">
<h2 class="ml12">SMART HOME RESOURCE</h2>
</div>
</div>
<div class="menu-container">
<div class='buttonContainer alexa'>
<a href='#' class='cta'>
<i class="mdi mdi-amazon-alexa"></i>
</a>
</div>
<div class='buttonContainer'>
<a href='#' class='cta'>
<i class="mdi mdi-account-circle"></i>
</a>
</div>
<div class='buttonContainer home'>
<a href='#' class='cta'>
<i class="mdi mdi-home-automation"></i>
</a>
</div>
<div class='buttonContainer emby'>
<a href='#' class='cta'>
<i class="mdi mdi-emby"></i>
</a>
</div>
<div class='buttonContainer music'>
<a href='#' class='cta'>
<i class="mdi mdi-music-note"></i>
</a>
</div>
<div class='buttonContainer projects'>
<a href='#' class='cta'>
<i class="mdi mdi-github-circle"></i>
</a>
</div>
</div>
</div>
<!--div class="project-section grey darken-4">
<div class="transition-container">
<svg class="transition-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 495">
<path id="curve0" d='M0,199V33S190,153.92,499.5,153.92C990.58,153.92,1065,0,1427.25,0,1712.37,0,1887,61.28,1920,79.14V196Z' transform="translate(0, 305)"/>
</svg>
</div>
<div class="project-list container"></div>
</div-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="scripts/anime.min.js"></script>
<script src="scripts/mo.js"></script>
<script>
// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0, 0);
/*
var c = document.querySelector('#canvas1');
var w = c.width, h = c.height, ctx = c.getContext( '2d' ),
opts = {
len: 20,
count: 50,
baseTime: 10,
addedTime: 10,
dieChance: .05,
spawnChance: 1,
sparkChance: .1,
sparkDist: 10,
sparkSize: 2,
color: 'hsl(hue,100%,light%)',
baseLight: 50,
addedLight: 10, // [50-10,50+10]
shadowToTimePropMult: 6,
baseLightInputMultiplier: .001,
addedLightInputMultiplier: .002,
cx: w / 2,
cy: h / 2,
repaintAlpha: .04,
hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = ' #f1f3f6';
ctx.fillRect( 0, 0, w, h );
function loop() {
window.requestAnimationFrame( loop );
++tick;
ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.fillStyle = '#f1f3f6';
ctx.fillRect( 0, 0, w, h );
ctx.globalCompositeOperation = 'lighter';
if( lines.length < opts.count && Math.random() < opts.spawnChance )
lines.push( new Line );
lines.map( function( line ){ line.step(); } );
}
function Line(){
this.reset();
}
Line.prototype.reset = function(){
this.x = 0;
this.y = 0;
this.addedX = 0;
this.addedY = 0;
this.rad = 0;
this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
this.color = opts.color.replace( 'hue', tick * opts.hueChange );
this.cumulativeTime = 0;
this.beginPhase();
}
Line.prototype.beginPhase = function(){
this.x += this.addedX;
this.y += this.addedY;
this.time = 0;
this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0;
this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 );
this.addedX = Math.cos( this.rad );
this.addedY = Math.sin( this.rad );
if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )
this.reset();
}
Line.prototype.step = function(){
++this.time;
++this.cumulativeTime;
if( this.time >= this.targetTime )
this.beginPhase();
var prop = this.time / this.targetTime,
wave = Math.sin( prop * Math.PI / 2 ),
x = this.addedX * wave,
y = this.addedY * wave;
ctx.shadowBlur = prop * opts.shadowToTimePropMult;
ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) );
ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 );
if( Math.random() < opts.sparkChance )
ctx.fillRect( opts.cx + ( this.x + x ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.cy + ( this.y + y ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize )
}
loop();
window.addEventListener( 'resize', function(){
w = c.width = document.querySelector('.landing').innerWidth;
h = c.height = document.querySelector('.landing').innerHeight;
ctx.fillStyle = '#f1f3f6';
ctx.fillRect( 0, 0, w, h );
opts.cx = w / 2;
opts.cy = h / 2;
dieX = w / 2 / opts.len;
dieY = h / 2 / opts.len;
});
*/
window.addEventListener('DOMContentLoaded', (event) => {
var landing = document.querySelector('.landing');
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml9 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
var textWrapperTageLine = document.querySelector('.ml12');
textWrapperTageLine.innerHTML = textWrapperTageLine.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
var block = document.createElement('div')
block.style.position = "absolute";
block.style.width = "16px";
block.style.height = "16px";
block.style.backgroundColor = '#9dabc0';
block.style.top = '22%';
block.style.left = '51%';
block.style.borderRadius ='50%';
block.classList.add('block_color');
landing.appendChild(block);
// dot splash on impact
const splash = new mojs.Burst({
parent: document.querySelector('.block_color'),
radius: { 0: 0 },
top: '100%',
angle: 0,
count: 0,
degree: 90,
children: {
fill: { '#4584b5': '#4584b5' },
duration: 2000
}
});
//dot burst to color
const burst = new mojs.Burst({
left: '50%',
top: '50%',
parent: document.querySelector('.block_color'),
radius: { 4: 32 },
angle: 45,
count: 5,
children: {
shape: 'line',
duration: [1500, 1700],
radius: 6,
scale: 1,
stroke: '#4584b5',
strokeDasharray: '100%',
strokeDashoffset: { '-100%': '100%' },
easing: 'quad.out',
}
});
anime.timeline({ loop: false })
.add({
targets: '.landing',
easing: 'easeInOutExpo',
scaleX: [0.05, 0.05],
scaleY: [0, 1],
perspective: '500px',
})
.add({
targets: '.landing',
duration: 400,
easing: 'spring(1, 80, 10, 0)',
scaleX: 1
})
.add({
targets: '.houseTop path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
fill:'rgba(157, 171, 192, 0)',
duration: 2500,
}, 1000)
.add({
targets: ['.ml9 .letter', '.ml12 .letter'],
translateX: [40, 0],
translateZ: 0,
opacity: [0, 1],
easing: "easeOutExpo",
duration: 1000,
delay: (el, i) => 100 + 30 * i
})
.add({
targets: '.houseTop path',
stroke: 'rgba(157, 171, 192,0)',
easing: 'easeInOutSine',
fill:'#9dabc0',
duration: 1500,
}, 2500)
anime.timeline({ loop: false })
.add({
targets: '.ml9 .line',
scaleX: [0, 1],
opacity: [0.5, 1],
easing: "easeOutExpo",
duration: 500,
}, 1300)
.add({
targets: '.menu-container',
easing: 'easeInOutExpo',
opacity: [0, 1],
}, 500)
.add({
targets: ['.block_color'],
translateX: anime.stagger(28, { grid: [1, 2], from: 'center', axis: 'x' }),
translateY: anime.stagger(28, { grid: [1, 2], from: 'center', axis: 'y' }),
opacity: [0, 1],
easing: 'spring(2, 580, 10, 0)'
})
.add({
targets: '.block_color',
backgroundColor: 'rgba(0,0,0,0)',
duration: 550,
}, 5350)
anime.timeline({ loop: false })
.add({
targets: '.block_color',
backgroundColor: '#4584b5',
easing: 'easeInOutExpo',
update: function (anim) {
if (anim.progress > 35 && anim.progress < 60) { burst.play(); }
}
}, 3000)
.add({
targets: '.block_color',
//translateY: [20, 45],
easing: 'easeInOutExpo',
duration: 5050,
update: function (anim) {
//if (anim.progress > 0 && anim.progress < 20) { splash.play(); }
}
}, 5250)
//.add({targets: '#canvas1', opacity:[0,1], duration: 5000})
anime.timeline({ loop: false })
.add({
targets: '.ml9 .letter',
color: '#4584b5',
delay: anime.stagger(150, { from: 'center' }),
}, 6000)
.add({
targets:'.houseTop path',
stroke: 'rgba(0,0,0,0)',
fill: '#FF4500',
easing: 'easeInOutSine',
},5370)
document.querySelector('.projects').addEventListener('click', () => {
setTimeout(() => {
window.location.href = ("/projects.html");
}, 1000)
})
document.querySelector('.alexa').addEventListener('click', () => {
setTimeout(() => {
window.location.href = ("https://alexa.amazon.ca/spa/index.html");
}, 1000)
});
document.querySelector('.music').addEventListener('click', () => {
setTimeout(() => {
window.location.href = ("https://music.amazon.ca/home");
}, 1000)
});
document.querySelector('.home').addEventListener('click', () => {
setTimeout(() => {
if (location.hostname.substring(0, 2) === "12") {
window.location.href = ("http://192.168.2.15");
} else {
window.location.href = ("https://home.getvera.com/users/login");
}
}, 1000)
});
document.querySelector('.emby').addEventListener('click', () => {
setTimeout(() => {
if (location.hostname.substring(0, 2) === "12") {
window.location.href = ("http://192.168.2.126:8096");
} else {
window.location.href = ("https://theater.unityhome.online");
}
}, 1000)
});
});
</script>
</body>
</html>