duhow/background.html

## 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/vue@2.5.17/dist/vue.min.js" ></script>
		<link   integrity="sha256-4zFMlAMYc7jMvg5XQq6KKUh6LWfQW1Ioc41hMjdy+NQ=" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/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/vue@2.5.17/dist/vue.min.js" ></script>
	<link integrity="sha256-4zFMlAMYc7jMvg5XQq6KKUh6LWfQW1Ioc41hMjdy+NQ=" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/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>