Initial commit

binaries/www/assets/css/main.css

@@ -0,0 +1,899 @@
+
+body{
+	box-sizing: border-box;
+	    width: -webkit-fill-available;
+}
+
+body{
+	position:absolute;
+}
+
+@font-face { 
+
+	font-family: work-sans; 
+
+	src: url('../fonts/workSans/WorkSans-Regular.ttf');
+
+} 
+
+@font-face { 
+
+	font-family: work-sans; 
+
+	src: url('../fonts/workSans/WorkSans-Bold.ttf');
+
+	font-weight: bold;
+
+} 
+
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+
+html[data-theme='light'] {
+
+	--background-color: #efefef;
+	--text-color:  black;
+	--link-color: #543fd7;
+
+
+	--header-background-color: #d0dce1cc /*#efefefcc*/;
+	--header-border-bottom:#dbdbdb;
+
+	--shadow-color: #d8d8d8;
+
+
+
+	--panel-background:#e9e9e9;
+
+	--panel-background-solid: #e9e9e9;
+
+	--glow-1-color:#6beaff00;
+
+	--glow-2-color:#6beaff00;
+
+
+	--panel-border:1px solid #e3e3e3;
+	--panel-border-hover:1px solid #dcd9d9;
+	--darker-content-background:#f1f1f1;
+	--darker-content-border-top:#ebebeb;
+
+	
+
+	--panel-small-background-color:#e7e7e7;
+
+
+	--panel-row-background: 	#e1e1e1a3;
+
+	--panel-row-border-bottom:2px solid #eae9e9;
+	--panel-row-background: #e7efee80;
+
+	--input-background-color:#f7f7f7;
+
+	--input-border-color:#e1e1e1;
+
+}
+
+html[data-theme='dark'] {
+	--background-color: #0a0a0a;
+	--text-color: white;
+	--link-color: #828fff;
+	--header-background-color: #13191acc; /* #141415cc; */
+	--header-border-bottom:#141415cc;
+	--header-button-hover-background: #192831;
+
+	--shadow-color: #111111;
+
+
+	--panel-background:#1d2024e0/*#1b1c1e*/;
+	--panel-background-solid: #0f1316;
+	--panel-border:1px solid #1b1c1e;
+	--panel-border-hover:1px solid #373535;
+
+	--panel-row-border-bottom:2px solid #212121;
+
+	--darker-content-background:radial-gradient(ellipse closest-side at 50% 50%, #23262b, #25242b 25%, #18181a);
+	--darker-content-border-top:2px solid #1c1c1c;
+
+	--panel-small-background-color:#1c1f24e0; /*#1b1c1e;*/
+
+	--panel-row-background: #1b1c1ea3;
+
+	--input-background-color:#181818;
+
+	--input-border-color: #252525;
+
+	--glow-1-color: #099bff42;
+
+	--glow-2-color: #09ff5242;
+}
+
+*{
+
+	transition: * 0.2s;
+
+
+}
+
+#home, #contact, #about{
+
+	padding-top: 40px;
+}
+
+body{
+
+	transition: 0.2s;
+
+	color: var( --text-color );
+
+	background: var( --background-color );
+
+	padding: 0;
+
+	margin: 0;
+
+	padding-top:	60px;
+
+}
+
+
+
+
+
+
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.glowingBorder {
+ position: relative;
+  z-index: 1000;
+/*
+
+	left: 4px;
+	top: 393px;
+	width: 374px;
+	height: 254px;*/
+  border-radius: 12px;
+  overflow: hidden;
+
+  
+  &::before {
+  		opacity: 0;
+  		transition: .2s;
+        content: '';
+        position: absolute;
+        left: -50%;
+        top: -50%;
+        width: 200%;
+        z-index: -2;
+        height: 200%;
+        background: conic-gradient(transparent, var(--glow-1-color), transparent 30%);
+        animation: rotate 4s linear infinite;
+  }
+  
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: 2px;
+    top: 2px;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    background: var(--panel-background-solid);
+    border-radius: 12px;
+    
+  }
+
+}
+
+.glowingBorder2 {
+
+  &::before {
+
+        background: conic-gradient(transparent, var(--glow-2-color), transparent 30%);
+        animation: rotate 4s linear infinite;
+        animation-delay: -2.2s;
+       /* animation-direction: reverse;*/
+  }
+
+}
+
+.glowingBorder-active{
+
+
+  &::before {
+  	opacity: 1;
+  }
+
+}
+
+
+.glowingBorder:hover{
+
+	margin-top: 20px;
+
+	cursor: pointer;
+
+}
+
+
+@keyframes opacityChange {
+  50% {
+    opacity:1;
+  }
+  100% {
+    opacity: .5;
+  }
+}
+
+
+
+
+h1{
+
+	padding: 20px;
+}
+
+.menuBar{
+
+	display: flex;
+
+	background: var( --header-background-color ); /*linear-gradient(45deg, #3c519d3b, #335d7b40, #23284180);*/
+
+	height: 56px;
+
+	z-index: 100000;
+
+}
+
+menu{
+
+	backdrop-filter: blur(10px);
+
+	box-sizing: border-box;
+
+	margin: 0;
+
+	width: 100%;
+
+	position: fixed;
+
+	background: #141415cc;
+
+	border-bottom:var(--header-border-bottom);
+
+	top: 0;
+
+	left:0;
+
+
+
+}
+
+menu menuItem{
+
+	display: -webkit-box;
+
+	
+
+	border-radius: 2px;
+
+	font-weight: bold;
+
+	cursor: pointer;
+
+	font-size: 18px;
+
+}
+
+menu menuItem a{
+
+	padding:18px;
+
+	color: var(--text-color);
+
+	display: flex;
+
+	text-decoration: none;
+
+}
+
+menu menuTitle{
+
+	transition: 0.2s;
+
+	padding: 20px;
+
+	font-weight: bold;
+}
+
+menu menuItem:hover{
+
+	background: var( --header-button-hover-background );
+
+
+}
+
+menu space{
+
+	flex:1;
+}
+
+*{
+
+	font-family: work-sans;
+
+	text-align: center;
+
+}
+
+.menuBar{
+
+
+
+}
+
+p{
+	color: var( --text-color );
+
+	margin: 20px;
+}
+
+content{
+
+	flex-direction: column;
+
+	display: flex;
+
+	width: 100%;
+
+	padding: 10px;
+
+	box-sizing: border-box;
+
+	margin: 0 auto;
+
+	max-width: 1200px;
+
+	margin-bottom: 140px;
+
+}
+
+panel{
+
+	flex: 1;
+
+	margin: 20px;
+
+	display: block;
+
+	border-radius: 12px;
+
+	margin-bottom: 40px;
+
+	width: -webkit-fill-available;
+
+}
+
+.lightPanel{
+
+	border: var( --panel-border );
+
+	transition: 0.2s;
+
+	background: var( --panel-background );
+/*
+	background: linear-gradient(65deg,var(--token-0c0b334b-6174-48b5-97d4-6d827fd9087a, #083947) 12%,var(--token-9b4f4d47-30a1-4d17-b7f3-1390421ad991, rgb(28, 31, 31)) 50.85515202702703%);
+*/
+}
+
+.lightPanel:hover{
+/*
+	background: linear-gradient(65deg,var(#1b272b, #1b272b) 12%,var(#1b272b, rgb(28, 31, 31)) 50.85515202702703%);*/
+	/*
+	border: var( --panel-border-hover );
+
+margin-top: 20px;*/
+
+
+	cursor: pointer;
+
+}
+
+.halfPanel{
+
+	height: 300px;
+
+	margin:20px;
+
+	margin-top: 30px;
+
+
+	min-width: 275px;
+
+
+}
+
+.hidePanel{
+
+	opacity: 0;
+}
+
+panel h2{
+
+	padding: 40px;
+
+	box-sizing: border-box;
+
+
+}
+
+panel:hover{
+
+
+
+}
+
+row{
+
+	display: flex;
+
+}
+
+panel.dark{
+
+	background: black;
+
+	padding: 20px;
+
+	text-align: justify;
+
+	background: #1b1c1e;
+
+}
+
+
+.blackPanel{
+
+
+
+}
+.darkerContent{
+
+	border-top: var( --darker-content-border-top );
+
+	background: var( --darker-content-background );
+}
+
+.doublePanel{
+
+	padding-top:40px;
+
+	display: flex;
+
+	flex-wrap: wrap;
+}
+
+.firstRow{
+
+	margin-top:60px;
+
+}
+
+.switch {
+	position: relative;
+	display: inline-block;
+	width: 120px;
+	height: 38px;
+	margin:12px;
+	border-radius: 12px;
+}
+
+.switch input {
+	display: none;
+}
+
+.slider {
+	border-radius: 16px;
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	width: 120px;
+	right: 0;
+	bottom: 0;
+	background-color: #0c0c0c;/*#1e1e1e;*/
+
+
+	-webkit-transition: .2s;
+	transition: .2s;
+	/*border:1px solid #292929;*/
+  
+}
+
+.slider:before,
+.slider .label {
+	border-radius: 12px;
+	font-weight: bold;
+	position: absolute;
+	content: "";
+
+	width: 60px;
+	left: 0;
+	bottom: 4px;
+
+	-webkit-transition: .2s;
+	transition: .2s;
+	color:white;
+}
+
+.slider .label.dark{
+
+	background: black;
+
+	background: #1e1e1e;
+
+}
+
+.slider .label.light{
+
+	background: white;
+
+	color:black;
+
+}
+
+
+.slider .label {
+	padding:6px;
+	background: none;
+	font-size: 14px;
+	left: 4px;
+	top: 4px;
+	width:50px;
+}
+
+input:checked+.slider {
+	background-color: #e5e5e5;
+}
+
+input:focus+.slider {
+	box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before,
+input:checked+.slider .label {
+	-webkit-transform: translateX(50px);
+	-ms-transform: translateX(50px);
+	transform: translateX(50px);
+}
+
+.slider.round {
+
+	border-radius: 34px;
+
+}
+
+.slider.round:before {
+
+	border-radius: 50%;
+
+}
+
+.softwareWord{
+
+	opacity: 1;
+
+}
+
+.fadeOut{
+
+}
+
+h2.leftTitle{
+
+	float: left;
+
+	margin: 6px;
+
+	margin-left:16px;
+
+	padding: 0;
+
+}
+
+img{
+
+	float:left;
+
+}
+
+panelRow{
+
+	background: var( --panel-row-background );
+	display: flex;
+	border-bottom: var( --panel-row-border-bottom );
+	box-sizing: border-box;
+	padding: 20px;
+	width: 100%;
+	float:left;
+
+}
+
+panel.wiggle{
+
+	/*animation: tilt-wiggle .2s linear infinite;*/
+
+}
+/*
+panel.wiggle:nth-child(1){
+
+	transform: rotate(3deg);
+
+}
+
+panel.wiggle:nth-child(2){
+
+	transform: rotate(-4deg);
+	
+}
+panel.wiggle:nth-child(3){
+
+	transform: rotate(-3deg);
+	
+}*/
+
+panel.noPadding{
+
+	padding: 0;
+
+}
+
+panel.dark{
+
+	animation-play-state: paused;
+
+	background: var(--panel-small-background-color);
+
+	box-shadow: 4px 4px 8px 0px var(--shadow-color);
+
+	backdrop-filter: blur(10px);
+
+}
+
+panel.dark:hover{
+
+	animation-play-state: running;
+
+}
+
+div.floatLeft{
+
+	float: left;
+
+	margin: 20px;
+
+	margin-top:30px;
+
+
+
+
+}
+
+.smallPanels{
+
+	max-width: 1200px;
+
+	flex-wrap: wrap;
+
+	padding-top: 40px;
+
+}
+
+panel.floatLeft{
+
+	padding: 0;
+
+	min-width: 300px;
+
+
+
+
+}
+
+panel.floatLeft *{
+
+	text-align: left;
+
+}
+
+@keyframes tilt-wiggle {
+	0% { transform: rotate(0deg); }
+	25% { transform: rotate(5deg); }
+	50% { transform: rotate(0eg); }
+	75% { transform: rotate(-5deg); }
+	100% { transform: rotate(0deg); }
+}
+
+
+.glowPoint{
+
+	z-index: -100;
+	position: absolute;
+	top: 1000px;
+	left: calc(55% - 320px);
+	width: 0;
+	height: 0;
+	box-shadow: 0 0 60px 30px #ffffff00, 0 0 100px 60px #0ff0, 0 0 140px 90px #00ffff1a;
+
+}
+
+.upperGlow{
+
+z-index: -100;
+    position: absolute;
+    top: 220px;
+    left: calc(49%);
+    width: 0;
+    height: 0;
+    box-shadow: 0 0 60px 30px #ffffff00, 0 0 100px 60px #00ff7e00, 0 0 140px 90px #00ffdc1a;
+}
+
+
+panel.table{
+
+	display: flex;
+
+	flex-direction: column;
+
+}
+
+panelLabel{
+
+	min-width: 92px;
+
+
+	font-weight: bold;
+
+	flex: 1;
+
+	display: flex;
+
+	padding-right: 20px;
+
+	align-items: flex-end;
+
+	flex-direction: column;
+}
+
+panelvalue{
+
+	padding-left: 20px;
+
+	display: flex;
+
+	flex: 1;
+
+
+}
+
+table{
+
+	border-collapse: collapse;
+
+	background: var(--panel-row-background);
+
+	border-radius: 12px;
+
+	margin-bottom: 40px;
+
+	width: -webkit-fill-available;
+
+}
+
+td{
+	text-align: left;
+	
+
+}
+
+td.label{
+	vertical-align: top;
+
+	text-align: right;
+
+	font-weight: bold;
+
+	    width: 47%;
+}
+    input:focus { 
+        outline: none !important;
+        border-color: #719ECE;
+        box-shadow: 0 0 10px #719ECE;
+    }
+    textarea:focus { 
+        outline: none !important;
+        border-color: #719ECE;
+        box-shadow: 0 0 10px #719ECE;
+    }
+  
+tr td{
+
+	padding: 20px;
+	border-bottom: thin solid #1e1e1e;
+}
+
+table tr:last-child td {
+     border-bottom: none;
+}
+
+columnLabel{
+
+}
+
+input, textarea{
+
+	width: 300px;
+
+	color: white;
+	text-align: left;
+	font-size: 16px;
+	border: 1px solid var( --input-border-color );
+	border-radius: 12px;
+	padding: 12px;
+	background: var( --input-background-color );
+
+
+	box-sizing: border-box;
+	
+}
+textarea{
+
+	/*width: 497px;*/
+	height: 276px;
+
+
+}
+
+@media only screen and (max-width: 800px) {
+
+	menutitle, space {
+
+		display: none;
+		
+	}
+
+	input, textarea{
+
+		max-width: 70%;
+
+	}
+	.noPadding{
+
+		margin:0;
+	}
+
+
+	menu .switch{
+
+		display: none;
+	}
+
+	panel.floatLeft{
+
+		min-width: auto;
+
+	}
+
+	input, textarea{
+
+		width: 30vw;
+	}
+
+}

binaries/www/assets/images/sqlite3.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="-118.318" y1="45.638" x2="-116.751" y2="45.638" gradientTransform="matrix(0, 11.486, 11.486, 0, -510.889, 1363.307)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#97d9f6"/><stop offset="0.92" stop-color="#0f80cc"/><stop offset="1" stop-color="#0f80cc"/></linearGradient></defs><title>file_type_sqlite</title><path d="M23.192,3.242H5.623A2.147,2.147,0,0,0,3.482,5.383V24.759A2.147,2.147,0,0,0,5.623,26.9H17.195C17.063,21.142,19.03,9.968,23.192,3.242Z" style="fill:#0f80cc"/><path d="M22.554,3.867H5.623A1.518,1.518,0,0,0,4.107,5.383V23.345a42.01,42.01,0,0,1,13.569-2.684A123.555,123.555,0,0,1,22.554,3.867Z" style="fill:url(#a)"/><path d="M27.29,2.608c-1.2-1.073-2.66-.642-4.1.634-.213.19-.426.4-.638.625A25.4,25.4,0,0,0,17.1,15a10.178,10.178,0,0,1,.634,1.822c.036.14.069.272.1.384.062.265.1.437.1.437s-.022-.083-.113-.346l-.059-.17c-.01-.027-.023-.059-.038-.094-.16-.373-.6-1.16-.8-1.5-.167.493-.315.954-.438,1.371a12.131,12.131,0,0,1,.908,2.8s-.03-.115-.171-.515a19.037,19.037,0,0,0-.9-1.708,4.037,4.037,0,0,0-.264,1.724,6.009,6.009,0,0,1,.493,1.383c.334,1.283.566,2.846.566,2.846s.008.1.02.263a26.145,26.145,0,0,0,.065,3.205,11.362,11.362,0,0,0,.584,3.1l.18-.1a13.859,13.859,0,0,1-.478-4.628,35.269,35.269,0,0,1,1.938-9.688c2.01-5.308,4.8-9.568,7.35-11.6-2.326,2.1-5.474,8.9-6.417,11.418a45.656,45.656,0,0,0-2.254,8A6.211,6.211,0,0,1,21.39,20s1.233-1.521,2.674-3.693a26.206,26.206,0,0,0-2.755.733c-.7.294-.889.394-.889.394a23.939,23.939,0,0,1,4.215-2.007c2.676-4.215,5.592-10.2,2.656-12.824" style="fill:#003b57"/></svg>

binaries/www/assets/js/main.js

@@ -0,0 +1,154 @@
+
+function setTint( tint ) {
+
+	var label = document.querySelector('.label');
+
+	if( tint == "Dark" ) {
+
+		label.classList.remove("light");
+
+		label.classList.add("dark");
+
+		label.innerHTML = "Dark";
+
+		document.documentElement.setAttribute('data-theme', 'dark');
+
+		localStorage.setItem("tint", "dark");
+
+	} else {
+
+		label.innerHTML = "Light";
+
+		label.classList.add("light");
+
+		label.classList.remove("dark");
+
+		document.documentElement.setAttribute('data-theme', 'light');
+
+		localStorage.setItem("tint", "light");
+
+	}
+
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+	var panels	= document.querySelectorAll('.halfPanel');
+
+	console.log("boxes", panels);
+
+	//#1e2e43
+
+	for (var i = 0; i < panels.length; i++) {
+
+		var currentPanel = panels[i];
+
+		currentPanel.addEventListener('click', function() {
+
+			for (var j = 0; j < panels.length; j++) {
+
+				panels[j].classList.add("hidePanel");
+
+			}
+
+			//document.body.setAttribute("id", "snow");
+
+		});
+
+
+/*
+
+		currentPanel.addEventListener('mouseover', function() {
+
+			var glowingBorder = document.querySelector(".glowingBorder");
+
+			var boundingBoxRectangle = this.getBoundingClientRect();
+
+			glowingBorder.style.left 	= (boundingBoxRectangle.x - 2) + "px";
+
+			glowingBorder.style.top 	= ( boundingBoxRectangle.y - 2) + "px";
+			
+			glowingBorder.style.width 	= boundingBoxRectangle.width + 4 + "px";
+
+			glowingBorder.style.height 	= boundingBoxRectangle.height + 12 + "px";
+
+			//this.classList.add("glowingBorder");
+			console.log(boundingBoxRectangle);
+
+		});*/
+
+/*
+			currentPanel.addEventListener('mouseover', function() {
+
+				if( document.querySelector(".glowingBorder-active") ) {
+
+					document.querySelector(".glowingBorder-active").classList.remove("glowingBorder-active");
+
+				}
+
+				this.classList.add("glowingBorder-active");
+				console.log(this);
+
+			});
+
+			currentPanel.addEventListener('mouseout', function() {
+
+
+			//this.classList.remove("glowingBorder-active");
+
+
+
+
+			});*/
+
+		
+
+	}
+
+	var smallPanels	= document.querySelectorAll('panel.wiggle');
+
+	console.log("smallPanels", smallPanels);
+
+	for (var i = 0; i < smallPanels.length; i++) {
+
+		var currentPanel = smallPanels[i];
+
+		currentPanel.style.transform	= "rotate("+ ( -3 + ( Math.random() * 7 ))  + "deg)";
+
+
+	}
+	//glowingBorder
+
+	var checkbox = document.querySelector('.toggle-checkbox');
+
+	checkbox.addEventListener('change', function() {
+
+		if( !this.checked ) {
+
+			setTint( "Dark" );
+
+		} else {
+
+			setTint( "Light" );
+
+		}
+
+	});
+
+	if( localStorage.getItem("tint") == "light" ) {
+
+		document.documentElement.setAttribute('data-theme', 'light');
+
+		document.querySelector(".toggle-checkbox").setAttribute("checked", "checked");
+
+		setTint( "Light" );
+
+	} else {
+
+		document.documentElement.setAttribute('data-theme', 'dark');
+
+		setTint( "Dark" );
+
+	}
+
+});

binaries/www/index.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+		<title>The Architects</title>
+
+		<link rel="stylesheet" href="assets/css/main.css">
+		<script type="text/javascript" src="assets/js/main.js"></script>
+	</head>
+	<body>
+
+
+				<!--<panel class="glowingBorder">
+					<h2>Solid Architecture</h2>
+
+					<p>
+						As software architects we design Software that is simple in its architecture. 
+
+					</p>
+				</panel>-->
+
+		<menu class="menuBar">
+
+			<menuTitle><span>The</span> <span class="softwareWord">Software</span> Architects </menuTitle>
+
+			<space></space>
+
+			<menuitem><a href="#home">Home</a></menuitem>
+
+			<menuitem><a href="#about">About</a></menuitem>
+
+		<!--	<menuitem>Work</menuitem> -->
+
+			<menuitem><a href="#contact">Contact</a></menuitem>
+
+			<label class="switch">
+				<input type="checkbox" class="toggle-checkbox">
+				<span class="slider">
+					<span class="label dark">Dark</span>
+				</span>
+			</label>
+
+		</menu>
+
+		<div class=" upperGlow"></div>
+
+		<div class="glowPoint"></div>
+
+		<content id="home">
+		
+			<row class="firstRow">
+
+				<panel>
+
+					<h1>The Software Architects</h1>
+
+					<p>
+
+						What we create?
+
+					</p>
+
+				</panel>
+
+			</row>
+
+			<row class="doublePanel">
+
+
+				<panel class="halfPanel lightPanel glowingBorder glowingBorder-active">
+
+					<h2>Solid Architecture</h2>
+
+					<p>
+						As software architects we design Software that is simple in its architecture. 
+
+					</p>
+
+				</panel>
+
+				<panel class="halfPanel lightPanel glowingBorder glowingBorder-active glowingBorder2">
+
+					<h2>Modern Design</h2>
+
+					<p>
+						Modern and simplistic from the inside where where nobody looks, And from the outside.
+						
+					</p>
+
+				</panel>
+
+			</row>
+
+		</content>
+	
+		<content>
+
+			<row class="firstRow">
+
+				<panel>
+
+					<h1>What kind of technologies do you use?</h1>
+
+					<p>
+
+						Here are the options.
+
+					</p>
+
+				</panel>
+
+			</row>
+			<row class="smallPanels">
+
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/code.png">
+
+						<h2 class="leftTitle">C Preprocessor with websockets</h2><!--Professional-->
+
+
+					</panelRow>
+
+
+					<div class="floatLeft">
+
+						For Professional Lightning fast Web applications.
+						
+					</div>
+
+				</panel>
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/code.png">
+
+						<h2 class="leftTitle"></h2>
+
+
+					</panelRow>
+
+
+					<div class="floatLeft">
+
+
+
+					</div>
+
+				</panel>
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/c.png">
+
+						<h2 class="leftTitle">c Preprocessor with opengl</h2>
+
+					</panelRow>
+
+					<div class="floatLeft">
+
+						For lighning fast Native applications.
+
+					</div>
+
+				</panel>
+
+
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/api.png">
+
+						<h2 class="leftTitle">Web API's</h2>
+
+					</panelRow>
+
+
+					<div class="floatLeft">
+
+						At the frontside of it all we use Modern Web api's to deliver even the next generation technologies.
+
+					</div>
+
+				</panel>
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/sqlite3.svg">
+
+						<h2 class="leftTitle"> Sqlite3 </h2>
+
+
+					</panelRow>
+
+					<div class="floatLeft">
+
+						For all your data manipulation and storage.
+
+					</div>
+
+				</panel>
+
+
+				<panel class="dark floatLeft wiggle">
+
+					<panelRow>
+							
+						<img width="40" src="assets/images/webGPU.png">
+
+						<h2 class="leftTitle"> Nodejs with Unifyjs </h2>
+
+					</panelRow>
+
+
+					<div class="floatLeft">
+
+						An inhouse developed Framework for Nodejs to create advanced web applications.
+
+					</div>
+
+				</panel>
+
+			</row>
+
+		</content>
+
+		<content id="home">
+<!---
+			<h2>Work</h2>
+
+			<p>
+				
+				We are stil searching for our first client.
+
+			</p>
+
+-->
+			<panel id="about">
+
+
+				<h2>About</h2>
+
+				<p>
+					
+					We are located in Leeuwarden, The Netherlands.
+
+				</p>
+
+			</panel>
+
+			<panel class="dark noPadding table">
+
+				<panelRow>
+
+					<panelLabel>Country</panelLabel>
+
+					<panelValue>The Netherlands</panelValue>
+
+				</panelRow>
+
+				<panelRow>
+
+					<panelLabel>City</panelLabel>
+
+					<panelValue>Leeuwarden</panelValue>
+
+				</panelRow>
+
+				<panelRow>
+
+					<panelLabel>Email</panelLabel>
+
+					<panelValue>info@unifyjs.org</panelValue>
+
+				</panelRow>
+
+			</panel>
+
+			<panel id="contact">
+
+				<h2>Contact</h2>
+
+				<p>
+
+					If you are interested, Please send us a message.
+
+				</p>
+
+			</panel>
+
+			<table class="dark noPadding table">
+
+				<tr class="row">
+
+					<td class="label"><columnLabel>Name</columnLabel></td>
+
+					<td><input /></td>
+
+				</tr>
+
+
+				<tr class="row">
+
+					<td class="label">Email</td>
+
+					<td><input /></td>
+
+				</tr>
+
+				<tr class="row">
+
+					<td class="label">Address</td>
+
+					<td><input /></td>
+
+				</tr>
+
+
+				<tr class="row">
+
+					<td class="label">Message</td>
+
+					<td><textarea></textarea></td>
+
+				</tr>
+
+			</table>
+
+		</content>
+
+	</body>
+
+</html>