duhow · August 11, 2018 10:58
diff --git a/background.html b/background.html
 <html>
 	<head>
 		<title>Background: Panel Active</title>
 		<meta name="author" content="duhowpi">
 		<!--
 			Inspired by [Hi tech wallpapers #561074](https://wallpaper-gallery.net/single/hi-tech-wallpapers-22.html)
 			[Hack font](https://sourcefoundry.org/hack/)
 			[Loading bar](https://codepen.io/brunjo/pen/XJmbNz)
 		-->
 		<script integrity="sha256-FtWfRI+thWlNz2sB3SJbwKx5PgMyKIVgwHCTwa3biXc=" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" ></script>
 		<link   integrity="sha256-4zFMlAMYc7jMvg5XQq6KKUh6LWfQW1Ioc41hMjdy+NQ=" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/build/web/hack-subset.css" rel="stylesheet"/>
 		<style>
 			html, body{
 				background: #111;
 				overflow: hidden;
 			}
 			main{
 				position: relative;
 				left: 55px;
 				transform: perspective(200px) rotateX(2deg);
 				background: #111;
 			}
 			/* -------------------------------------- */
 			.row{
 				float: left;
 				border-bottom: 1px solid #37A;
 			}
 			.row:first-child{
 				border-top: 1px solid #37A;
 			}
 			.row.loading::before{
 				display: block;
 				 position: absolute;
 				 content: "";
 				 left: 0px;
 				 width: 0px;
 				 height: 1px;
 				 background-color: #F0F0F0; /* #5AF */
 				 animation: loading 6s linear infinite;
 				 z-index: 100;
 			}
 			.row.loading.anim-1::before{
 				animation-duration: 3s;
 				animation-delay: 0.6s;
 			}
 			.row.loading.anim-2::before{
 				animation-duration: 2.4s;
 				animation-delay: 0.5s;
 				animation-timing-function: ease-in;
 			}
 			.row.loading.anim-3::before{
 				animation-duration: .8s;
 				animation-delay: 1.7s;
 			}
 			.row.loading.anim-4::before{
 				animation-duration: 5s;
 				animation-iteration-count: 1;
 			}
 			@keyframes loading {
 			    from {left: 0px; width: 10px;}
 				40% {left: 0;}
 			    50% {left: 0; width: 30%;}
 			    70% {width: 70%;}
 			    80% {left: 50%;}
 			    95% {left: 80%; width: 30%;}
 			    to {left: 100%; width: 0px;}
 			}
 			/* -------------------------------------- */
 			.box{
 				width: 150px;
 				height: 150px;
 				background: #034;
 				border-right: 1px solid #37A;
 				box-sizing: border-box;
 				float: left;
 				position: relative;

 				transition: .3s all;

 				font-family: 'Hack', 'Courier';
 				font-size: 14px;
 				font-weight: lighter;
 				color: white;
 				display: flex;
 				align-items: center;
    			justify-content: center;
 			}
 			.box:first-child{
 				border-left: 1px solid #37A;
 			}
 			.box:not(:empty){
 				background: radial-gradient(circle, #13608A, #157 5%, #27C) #157;
 				border: 4px solid #8EF !important;
 			}
 			/* -------------------------------------- */
 			.box::before{
 				transition: 0s all;
 				content: '+';
 				color: #0CF;
 				top: -16px;
 				left: -8px;
 				font-size: 24px;
 				position: absolute;
 			}
 			.box:not(:empty)::before{
 				top: -20px;
 				left: -12px;
 			}
 		</style>
 	</head>
 	<body>
 		<main>
 			<div class="row" :class="loader()" v-for="row in 6" :key="row">
 				<div class="box" v-for="idx in 12" :key="idx">{{ "a" | randText }}</div>
 			</div>
 		</main>
 	</body>

 	<script>
 		var app = new Vue({
 			el: 'main',
 			data: [],
 			methods: {
 				/* isOdd: function(idx, row){
 					return (idx % 2 != row % 2 ? 'active' : '');
 				}, */
 				loader: function(){
 					if(Math.random() * 100 < 85){ return; }
 					i = Math.ceil(Math.random() * 4);
 					return ['loading', 'anim-' + i];
 				}
 			},
 			filters: {
 				randText: function(){
 					if(Math.random() * 100 < 85){ return; }
 					t = [
 					'MOV', 'MOVZX', 'XCHG', 'XLAT', 'PUSH', 'POP', 'POPF', 'ENTER',
 					'LEAVE', 'IN', 'OUT', 'CWD', 'CBW', 'CDQ', 'BSWAP', 'ADD', 'ADC',
 					'SUB', 'INC', 'DEC', 'MUL', 'DIV', 'NEG', 'DAA', 'AND', 'OR', 'XOR',
 					'NOT', 'ROL', 'RCL', 'SHL', 'SHR', 'BTC', 'BTS', 'CMC', 'STC', 'CLI',
 					'STI', 'CLD', 'INS', 'JMP', 'CALL', 'RET', 'ESC', 'LOCK', 'WAIT',
 					'BOUND', 'LTR', 'LAR', 'INVD', 'CPUID', 'RTDSC'
 					];
 					i = Math.ceil(Math.random() * t.length) - 1;
 					return t[i];
 				}
 			}
 		});

 		function refresh(){
 			app.$forceUpdate();
 			setTimeout(function(){ refresh(); }, 4000);
 		};

 		refresh();
 	</script>
 </html>
	<html>
	<head>
	<title>Background: Panel Active</title>
	<meta name="author" content="duhowpi">
	<!--
	Inspired by [Hi tech wallpapers #561074](https://wallpaper-gallery.net/single/hi-tech-wallpapers-22.html)
	[Hack font](https://sourcefoundry.org/hack/)
	[Loading bar](https://codepen.io/brunjo/pen/XJmbNz)
	-->
	<script integrity="sha256-FtWfRI+thWlNz2sB3SJbwKx5PgMyKIVgwHCTwa3biXc=" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" ></script>
	<link integrity="sha256-4zFMlAMYc7jMvg5XQq6KKUh6LWfQW1Ioc41hMjdy+NQ=" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/build/web/hack-subset.css" rel="stylesheet"/>
	<style>
	html, body{
	background: #111;
	overflow: hidden;
	}
	main{
	position: relative;
	left: 55px;
	transform: perspective(200px) rotateX(2deg);
	background: #111;
	}
	/* -------------------------------------- */
	.row{
	float: left;
	border-bottom: 1px solid #37A;
	}
	.row:first-child{
	border-top: 1px solid #37A;
	}
	.row.loading::before{
	display: block;
	position: absolute;
	content: "";
	left: 0px;
	width: 0px;
	height: 1px;
	background-color: #F0F0F0; /* #5AF */
	animation: loading 6s linear infinite;
	z-index: 100;
	}
	.row.loading.anim-1::before{
	animation-duration: 3s;
	animation-delay: 0.6s;
	}
	.row.loading.anim-2::before{
	animation-duration: 2.4s;
	animation-delay: 0.5s;
	animation-timing-function: ease-in;
	}
	.row.loading.anim-3::before{
	animation-duration: .8s;
	animation-delay: 1.7s;
	}
	.row.loading.anim-4::before{
	animation-duration: 5s;
	animation-iteration-count: 1;
	}
	@keyframes loading {
	from {left: 0px; width: 10px;}
	40% {left: 0;}
	50% {left: 0; width: 30%;}
	70% {width: 70%;}
	80% {left: 50%;}
	95% {left: 80%; width: 30%;}
	to {left: 100%; width: 0px;}
	}
	/* -------------------------------------- */
	.box{
	width: 150px;
	height: 150px;
	background: #034;
	border-right: 1px solid #37A;
	box-sizing: border-box;
	float: left;
	position: relative;

	transition: .3s all;

	font-family: 'Hack', 'Courier';
	font-size: 14px;
	font-weight: lighter;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.box:first-child{
	border-left: 1px solid #37A;
	}
	.box:not(:empty){
	background: radial-gradient(circle, #13608A, #157 5%, #27C) #157;
	border: 4px solid #8EF !important;
	}
	/* -------------------------------------- */
	.box::before{
	transition: 0s all;
	content: '+';
	color: #0CF;
	top: -16px;
	left: -8px;
	font-size: 24px;
	position: absolute;
	}
	.box:not(:empty)::before{
	top: -20px;
	left: -12px;
	}
	</style>
	</head>
	<body>
	<main>
	<div class="row" :class="loader()" v-for="row in 6" :key="row">
	<div class="box" v-for="idx in 12" :key="idx">{{ "a" \| randText }}</div>
	</div>
	</main>
	</body>

	<script>
	var app = new Vue({
	el: 'main',
	data: [],
	methods: {
	/* isOdd: function(idx, row){
	return (idx % 2 != row % 2 ? 'active' : '');
	}, */
	loader: function(){
	if(Math.random() * 100 < 85){ return; }
	i = Math.ceil(Math.random() * 4);
	return ['loading', 'anim-' + i];
	}
	},
	filters: {
	randText: function(){
	if(Math.random() * 100 < 85){ return; }
	t = [
	'MOV', 'MOVZX', 'XCHG', 'XLAT', 'PUSH', 'POP', 'POPF', 'ENTER',
	'LEAVE', 'IN', 'OUT', 'CWD', 'CBW', 'CDQ', 'BSWAP', 'ADD', 'ADC',
	'SUB', 'INC', 'DEC', 'MUL', 'DIV', 'NEG', 'DAA', 'AND', 'OR', 'XOR',
	'NOT', 'ROL', 'RCL', 'SHL', 'SHR', 'BTC', 'BTS', 'CMC', 'STC', 'CLI',
	'STI', 'CLD', 'INS', 'JMP', 'CALL', 'RET', 'ESC', 'LOCK', 'WAIT',
	'BOUND', 'LTR', 'LAR', 'INVD', 'CPUID', 'RTDSC'
	];
	i = Math.ceil(Math.random() * t.length) - 1;
	return t[i];
	}
	}
	});

	function refresh(){
	app.$forceUpdate();
	setTimeout(function(){ refresh(); }, 4000);
	};

	refresh();
	</script>
	</html>