Initial commit

binaries/assets/shaders/addition.comp

@@ -0,0 +1,38 @@
+#version 460
+
+
+//shared float shareData[1024]; // Shared between all threads in work group.
+
+layout ( local_size_x = 10, local_size_y = 10, local_size_z = 1 ) in;
+
+
+
+
+layout( std430, binding = 0 )  buffer inputBlock {
+
+	vec2 array_a[ 100 ];
+
+	vec2 array_b[ 100 ];
+
+	
+
+};
+
+layout( std430, binding = 1 )  buffer outputBlock {
+
+	vec2 array_c[ 100 ];
+
+};
+
+void main() {
+
+	uint index = gl_LocalInvocationIndex;
+
+	vec2 a = array_a[ index ];
+
+	vec2 b = array_b[ index ];
+
+	array_c[ index ] = a + b;
+
+}
+

binaries/assets/shaders/addition2.comp

@@ -0,0 +1,29 @@
+#version 460
+
+
+//shared float shareData[1024]; // Shared between all threads in work group.
+
+layout ( local_size_x = 10, local_size_y = 10, local_size_z = 1 ) in;
+
+
+
+layout( std430, binding = 2 )  buffer outputBlock2 {
+
+	vec2 array_d[ 100 ];
+
+};
+
+layout( std430, binding = 1 )  buffer outputBlock {
+
+	vec2 array_c[ 100 ];
+
+};
+
+void main() {
+
+	uint index = gl_LocalInvocationIndex;
+
+	array_d[ index ] = array_c[ index ];
+
+}
+

binaries/assets/shaders/color.fragment

@@ -0,0 +1,21 @@
+#version 400
+
+out vec4 frag_colour;
+
+uniform vec3 diffuse;
+
+uniform vec2 position;
+
+uniform sampler2D image;
+
+in vec2 vertex_textureCoordinates;
+
+void main() {
+
+	//frag_colour = texture( image, vertex_textureCoordinates );
+
+	frag_colour = vec4(vertex_textureCoordinates, 0.0, 1.0);
+
+	frag_colour = vec4(1.0);
+
+}

binaries/assets/shaders/color.vertex

@@ -0,0 +1,84 @@
+#version 400
+
+//layout (location = 0) in vec3 position;
+
+/*
+layout (std140) uniform global
+{
+	vec2 document;
+
+	vec2 other;
+};
+*/
+layout (std140) uniform events
+{
+	vec2 mouse;
+
+	vec2 window;
+};
+
+
+	//uniform vec2 mouse;
+
+	//uniform vec2 window;
+
+
+
+layout(location = 0) in vec3 position;
+
+layout(location = 1) in vec2 textureCoordinates;
+
+layout(location = 2) in int meshIndex;
+
+
+
+out vec2 vertex_textureCoordinates;
+
+
+void main() {
+
+	vec2 mousePosition	= mouse / window;
+
+	mousePosition -= .5;
+
+	mousePosition.y	*= -1.;
+
+	mousePosition *= 2.0;
+
+	gl_Position.xyz = position / vec3(40, 1, 10);
+
+	if( meshIndex == 0 ) {
+
+		gl_Position.xy += mousePosition;
+
+	} else {
+
+		vec2 normalizedPosition	= 1.0 / window;
+
+		normalizedPosition 		-= 0.5;
+
+		normalizedPosition.y	*= -1.;
+
+		normalizedPosition 		*= 2.0;
+
+
+		normalizedPosition.x 	+= .1;
+
+		normalizedPosition.x 	+= mod( float(meshIndex), 30 )  * ( .08 );
+
+		normalizedPosition.y  	-= 1;
+
+		normalizedPosition.y	-= floor( float(meshIndex) / 30 ) * .5;
+
+		gl_Position.xy += vec2( normalizedPosition );
+
+	}
+
+	//gl_Position.xy /= window;
+
+	vertex_textureCoordinates = textureCoordinates;
+
+	gl_Position.w = 1.0;
+
+}
+

binaries/assets/shaders/multiQuad.fragment

@@ -0,0 +1,90 @@
+#version 460
+
+out vec4 frag_colour;
+
+uniform vec3 diffuse;
+
+uniform vec2 position;
+
+uniform sampler2DArray samplerArray;
+
+
+in vec2 vertex_textureCoordinates;
+
+in float vertex_meshIndex;
+
+in vec3 quad_color;
+
+in vec2 quad_position;
+
+in vec2 quad_size;
+
+flat in float 	quad_opacity;
+
+flat in int 	quad_useTexture;
+
+flat in int 	quad_textureIndex;
+
+
+
+layout ( packed, binding = 0 ) uniform events
+{
+
+	vec2 mouse;
+
+	vec2 window;
+
+};
+
+
+void main() {
+
+
+	vec2 grid 	= vec2( floor( vertex_textureCoordinates.x * 10.0 ), floor( vertex_textureCoordinates.y * 10.0 ) );
+
+	int index	= int( grid.x + ( grid.y * 10.0 ) ); 
+
+
+	vec2 newCoordinates		= vertex_textureCoordinates;
+
+	newCoordinates 			= vec2( mod( newCoordinates.x, 1) , mod( newCoordinates.y, 1) );
+
+	
+	vec4 diffuseColor	= vec4( 1.0 );
+
+	if( quad_useTexture == 1 ) {
+
+		diffuseColor	= texture( samplerArray, vec3( newCoordinates, quad_textureIndex ) );
+
+	} else {
+
+		vec2 size 						= quad_size;
+
+		vec2 halfSize					= size / 2.0;
+
+    	vec2 fragCoord 					= vertex_textureCoordinates * size;
+
+    	float radius					= 100.;
+
+    	float borderSmoothing			= 2.0;
+
+    	vec2 centerPosition				= fragCoord - halfSize;
+
+    	float a 							= length( abs( centerPosition ) + size + radius  ) - radius;
+
+    	//float b								= max( a, length( halfSize / 2. ) );
+
+    	//float c							= length( a );
+
+
+
+    
+        diffuseColor.rgb                = quad_color * (1.0 - a);//( 1.0 - smoothstep( radius, radius + borderSmoothing, b ) );
+
+	}
+
+	diffuseColor.w		*= quad_opacity;
+
+	frag_colour 		= diffuseColor;
+	
+}

binaries/assets/shaders/multiQuad.vertex

@@ -0,0 +1,164 @@
+#version 460
+
+layout ( packed, binding = 0 ) uniform events
+{
+
+	vec2 mouse;
+
+	vec2 window;
+
+};
+
+layout ( packed, binding = 1 ) uniform orientation
+{
+
+	vec2 quadPosition;
+
+};
+
+struct quad{
+
+	vec2 position;
+
+	vec2 size;
+
+	vec3 color;
+
+	float zIndex;
+
+	float opacity;
+
+	int textureIndex;
+
+	int features;
+
+	int elementIndex;
+
+	//int characters[];
+
+};
+
+
+layout( std430, binding = 2 ) readonly buffer meshes
+{
+
+	quad meshArray[100];
+	
+};
+
+
+layout(location = 0) in vec3 position;
+
+layout(location = 1) in vec2 textureCoordinates;
+
+layout(location = 2) in int meshIndex;
+
+
+
+out 	vec2 	vertex_textureCoordinates;
+
+out 	float 	vertex_meshIndex;
+
+
+out 	vec3 	quad_color;
+
+out 	vec2 	quad_position;
+
+out 	vec2 	quad_size;
+
+flat out int 	quad_textureIndex;
+
+flat out int 	quad_useTexture;
+
+flat out float 	quad_opacity;
+
+
+int checkFeature( int features, int currentFeature ) {
+	
+	if ( ( features & currentFeature ) > 0 ) {
+
+		return 1;
+
+	} else {
+
+		return -1;
+
+	}
+
+}
+
+void main() {
+
+	quad currentMesh	= meshArray[ meshIndex ];
+
+
+	vec2 quadPosition	= ( position.xy ); 
+
+	// vec2( -1.0, -1.0 ) -> vec2( 1.0, 1.0 )
+
+
+	quadPosition		+= vec2( 1.0 );
+
+	quadPosition		/= 2.0;
+
+	// vec2( 0, 0 ) -> vec2( 1.0, 1.0 )
+
+
+	vec2 bias			= vec2(0, 0); // ??????
+
+
+
+	quadPosition 		*= currentMesh.size;
+
+	quadPosition		+= currentMesh.position.xy;
+
+	quadPosition		+= bias;
+
+	quadPosition		/= window;
+
+
+
+
+	quadPosition		*= 2.0;
+
+	quadPosition		-= vec2( 1.0 );
+
+
+	//quadPosition.y		+= .02;
+
+	quadPosition.y		*= -1;
+ 
+	quad_color 					= currentMesh.color;
+
+	quad_size					= currentMesh.size;
+
+	quad_position				= currentMesh.position.xy;
+
+	quad_opacity				= currentMesh.opacity;
+
+
+
+	
+	
+	gl_Position.xy				= quadPosition;
+
+
+
+	const int useTexture		= 1;
+	
+
+	quad_useTexture				= checkFeature( currentMesh.features, useTexture );
+	
+	quad_textureIndex			= currentMesh.textureIndex;
+
+	vertex_textureCoordinates 	= textureCoordinates;
+
+	vertex_meshIndex 			= float( meshIndex );
+
+	gl_Position.w = 1.0;
+
+
+	gl_Position.z				= -currentMesh.zIndex / 10000;
+
+}
+

binaries/assets/shaders/quad.fragment

@@ -0,0 +1,101 @@
+#version 460
+
+out vec4 frag_colour;
+
+uniform vec3 diffuse;
+
+uniform vec2 position;
+
+uniform sampler2DArray samplerArray;
+
+
+in vec2 vertex_textureCoordinates;
+
+in float vertex_meshIndex;
+
+in vec3 vertex_color;
+
+
+layout( std430, binding = 0 )  buffer inputBlock {
+
+	int characters[ 100 ];
+
+};
+
+layout( std430, binding = 1 )  buffer fontData {
+
+	vec2 fontOffsets[ 240 ];
+
+	vec2 fontSizes[ 240 ];
+
+};
+
+
+
+
+
+
+struct quadDetails{
+
+	int textLength;
+	
+	float text[];
+
+};
+
+
+
+
+float roundedFrame( vec2 pos, vec2 size, float radius, float thickness )
+{
+	float d = length(max(abs(vertex_textureCoordinates - pos),size) - size) - radius;
+	return smoothstep(0.55, 0.45, abs(d / thickness) * 5.0);
+}
+
+void main() {
+
+	int charactersPerLine	= 10;
+
+	vec2 grid 	= vec2( floor( vertex_textureCoordinates.x * charactersPerLine ), floor( vertex_textureCoordinates.y * charactersPerLine ) );
+
+
+	int index	= int( grid.x + ( grid.y * charactersPerLine ) ); 
+
+	vec2 newCoordinates	= vertex_textureCoordinates * charactersPerLine;
+
+
+	newCoordinates = vec2( mod( newCoordinates.x, 1) , mod( newCoordinates.y, 1) );
+
+
+	vec2 fontSize			= fontSizes[ index ];
+
+	vec2 offset				= fontOffsets[ index ];
+
+	int characterIndex 		= characters[ index ];
+
+
+
+	vec2 correction			= fontSize;
+
+
+
+	newCoordinates.xy 			+= (offset / fontSize) / 128;
+
+	//newCoordinates.xy 			*= fontSize / 128;
+
+
+	if( characterIndex > 0 ) {
+
+		vec3 coordinate	= vec3( newCoordinates, characterIndex );
+
+		float inverse = ( ( texture( samplerArray, coordinate ).r * -1. ) + 1. );
+	
+		frag_colour = vec4( 1.0, 1.0, 1.0,  inverse );	
+
+	} else {
+
+		frag_colour = vec4(  1.0 );	
+
+	}
+
+}

binaries/assets/shaders/quad.vertex

@@ -0,0 +1,64 @@
+#version 460
+
+layout ( packed, binding = 0 ) uniform events
+{
+
+	vec2 mouse;
+
+	vec2 window;
+
+};
+
+layout ( packed, binding = 1 ) uniform orientation
+{
+
+	vec2 quadPosition;
+
+};
+
+struct quad{
+
+	vec2 position;
+
+	vec2 size;
+
+	vec3 color;
+
+	int textureIndex;
+
+	//int characters[];
+
+};
+
+
+layout( std430, binding = 2 ) readonly buffer meshes
+{
+
+	quad meshArray[1000];
+	
+};
+
+
+layout(location = 0) in vec3 position;
+
+layout(location = 1) in vec2 textureCoordinates;
+
+layout(location = 2) in int meshIndex;
+
+
+out 	vec2 	vertex_textureCoordinates;
+
+out 	float 	vertex_meshIndex;
+
+out 	vec3 	vertex_color;
+
+void main() {
+
+	gl_Position.xyz 			= position;
+
+	vertex_textureCoordinates 	= textureCoordinates;
+
+	gl_Position.w = 1.0;
+
+}
+

binaries/assets/shaders/quadScale.vertex

@@ -0,0 +1,64 @@
+#version 460
+
+layout ( packed, binding = 0 ) uniform events
+{
+
+	vec2 mouse;
+
+	vec2 window;
+
+};
+
+layout ( packed, binding = 1 ) uniform orientation
+{
+
+	vec2 quadPosition;
+
+};
+
+struct quad{
+
+	vec2 position;
+
+	vec2 size;
+
+	vec3 color;
+
+	int textureIndex;
+
+	//int characters[];
+
+};
+
+
+layout( std430, binding = 2 ) readonly buffer meshes
+{
+
+	quad meshArray[1000];
+	
+};
+
+
+layout(location = 0) in vec3 position;
+
+layout(location = 1) in vec2 textureCoordinates;
+
+layout(location = 2) in int meshIndex;
+
+
+out 	vec2 	vertex_textureCoordinates;
+
+out 	float 	vertex_meshIndex;
+
+out 	vec3 	vertex_color;
+
+void main() {
+
+	gl_Position.xyz 			= position * .6;
+
+	vertex_textureCoordinates 	= textureCoordinates;
+
+	gl_Position.w = 1.0;
+
+}
+

binaries/assets/shaders/tesselation.geometry.shader

@@ -0,0 +1,17 @@
+#version 410 core
+
+layout(triangles, invocations = 1) in;
+layout(line_strip, max_vertices = 4) out;
+
+
+void main(void)
+{
+	gl_Position = gl_in[0].gl_Position;
+	EmitVertex();	
+	gl_Position = gl_in[1].gl_Position;
+	EmitVertex();
+	gl_Position = gl_in[2].gl_Position;
+	EmitVertex();
+
+	EndPrimitive();
+}

binaries/assets/shaders/tesselation.triangle.shader

@@ -0,0 +1,10 @@
+#version 410 core
+
+layout(triangles, equal_spacing, ccw) in;
+
+void main()
+{	
+	gl_Position.xyzw =	gl_in[0].gl_Position.xyzw * gl_TessCoord.x +
+						gl_in[1].gl_Position.xyzw * gl_TessCoord.y +
+						gl_in[2].gl_Position.xyzw * gl_TessCoord.z;
+}

binaries/assets/shaders/tesselation.triangle.tsc.shader

@@ -0,0 +1,14 @@
+#version 410 core
+
+layout(vertices = 3) out;
+
+void main(void)
+{
+	gl_TessLevelOuter[0] = 2.0;
+	gl_TessLevelOuter[1] = 4.0;
+	gl_TessLevelOuter[2] = 6.0;
+
+	gl_TessLevelInner[0] = 8.0;
+
+	gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;
+}

binaries/assets/test

@@ -0,0 +1 @@
+this is just a test.

binaries/assets/testFile

@@ -0,0 +1 @@
+content of file

binaries/show_includes.sh

@@ -0,0 +1,9 @@
+find application -type f -perm /a+x -exec ldd {} \; \
+| grep so \
+| sed -e '/^[^\t]/ d' \
+| sed -e 's/\t//' \
+| sed -e 's/.*=..//' \
+| sed -e 's/ (0.*)//' \
+| sort \
+| uniq -c \
+| sort -n

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>