Ministry of ICT - Uganda Neddagala Ly'ayo

index.html

<section id="app">
 <div class="container-fluid">

  <div class="row">
   <div class="container banner">
		 <h1 class="neon small">{{ title }}</h1> 
   </div>
  </div>

  <div class="row">
   <div class="container feature-container">
    <center>
     <canvas id="tree" v-bind:width="size" v-bind:height="size"></canvas>
    </center>
   </div>
  </div>

  <div class="row">
   <div class="container">
    <center>
     <div class="btn-group" role="group" aria-label="Multiplicity">
      <a href="#" class="btnx-l btnx-ok" v-for="n in max_multiplicity" v-on:click.prevent="set_multiplicity(n)">{{ n }}</a>
    </center>
    </div>
   </div>
  </div>
	 
	 <div class="row">
   <div class="container">
    <center>
     <div class="btn-group" role="group" aria-label="Actions">
      <a href="#" class="btnx-l btnx-warning" v-for="action in actions" v-on:click.prevent="do_action(action.title)" >{{ action.title }}</a>
    </center>
    </div>
   </div>
  </div>
	 
	 <div class="row">
   <div class="container">
    <center>
			<div class="btn-group" role="group" aria-label="Footer">
				<a href="#" class="btnx-l btnx-cancel" v-for="office in offices" v-on:click.prevent="do_action('office')">{{ office.title }}</a>
			</div>
		 </center>
		 </div>
	 </div>

 </div>
</section>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

ministry-of-ict-uganda-neddagala-ly-ayo.markdown

Ministry of ICT - Uganda Neddagala Ly'ayo

Concept#1 of the landing page of the ministry's nu home page, now that the Chwezi are aboard!

A Pen by Nemesis Fixx on CodePen.

License.

script.js

var app_actions = _.map(["OMUTI","SCHOOL","TV", "TECH", "LOGIN"], function (t){ return {title: t} }); 
var offices = _.map(["PRESIDENT","SECRETARY","MINISTRY of ICT", "DEFENSE", "TREASURY"], function (t){ return {title: t} }); 

var vapp = new Vue({
	el: "#app",
	data: {
		title: "UGANDA NEDDAGALA LY'AYO",
		actions: app_actions,  
		offices: offices,
		base_width: 500,
			max_multiplicity: 9,
			multiplicity: 2,
			ratio: 0.6
	},
	computed: {
		size:{
			get: function(){
				return this.base_width * .5;
			}
		}
	},
	methods: {
		do_action: (action)=> {
			// kora action...
		},
		set_multiplicity: (m) => {
			vapp.multiplicity = m;
		}
	}
});

$( window ).resize(function() {
  vapp.base_width = $( window ).width();
});
vapp.base_width = $( window ).width();

/*****************************
 * Mpora mpora, ensigo efoka omuti!
 ****************************/ 
var zimbaOmuti = function(){
	
	"use strict";

	var draw = (function(){ 
		
		var c = document.getElementById("tree").getContext("2d");
		var extent = 3.5; //arbitrary x scale
		var nGen = 4;
	
		return function(multi, r, theta){
			
			var xScale = (function(){
				var xRange = extent;
				var width = vapp.size;
				var c = width/2;
				var m = width/xRange;
				
				return function(val){
					return Math.round(m*val + c);	
				};
				
			})(); 
			
			var yScale = (function(){
				var height = vapp.size;
				var width = vapp.size;
				var aspect = width/height;
				var yRange = extent/aspect;
				var m = -height/yRange;
				var c = -(m*extent);
				
				return function(val){
					return Math.round(m*val + c);	
				};
					
			})();
			
			var branchAngles = [];
			
			(function(){
				var branchSep = (2*theta)/(multi-1);
				for(var i=0; i<multi; i++){
					branchAngles.push(-theta + i*branchSep);	
				}
			})();
			
			c.clearRect(0, 0, vapp.size, vapp.size);
			c.beginPath();
			c.strokeStyle = "rgb(123,46,0)";
			c.lineWidth = 2;
			var xInit = 0;
			var yInit = 1;
			var rotInit = 0;
			
			var thisGen = [{xEnd:xInit, yEnd:yInit, rot:rotInit}];
			c.moveTo(xScale(0), yScale(0));
			c.lineTo(xScale(xInit), yScale(yInit));
			var changedCol = false;
			
			for(var i=0; i<nGen; i++){
				
				var lastGen = thisGen;
				var nLastGen = lastGen.length;
				thisGen = [];
				thisGen.length = multi*nLastGen;
				
				var notLastGen = i<(nGen-1) ? true : false;
				
				var	len = Math.pow(r, i+1);
				
				if(!changedCol && i>2){
					changedCol = true;
					c.stroke();
					c.beginPath();
					c.strokeStyle = "#308014";//"green";
				}
				
				
				for(var j=0; j<nLastGen; j++){
					
					var parent = lastGen[j];
					var xStart = parent.xEnd;
					var yStart = parent.yEnd;
					var rotParent = parent.rot;
					
					for(var k=0; k<multi; k++){
						var rot = rotParent + branchAngles[k];
						var xEnd = xStart + len*Math.sin(rot);
						var yEnd = yStart + len*Math.cos(rot);
						
						c.moveTo(xScale(xStart), yScale(yStart));
						c.lineTo(xScale(xEnd), yScale(yEnd));
						
						if(notLastGen){
							thisGen[j*multi+k] = {
								xEnd: xEnd,
								yEnd: yEnd,
								rot: rot
							};
						}
					}
					
				}
				
			}
			
			c.stroke();
			
			
		};
	
	})();
	
	var multiplicity;
 	var ratio;

	var animationStartTime;
	var requestId;

	var startAnimation = function(){
		animationStartTime = window.performance.now();
		requestId = window.requestAnimationFrame(animate);
	};
	
	var animate = function animate(time){
    	requestId = window.requestAnimationFrame(animate);
		var timeDifference = time - animationStartTime;
		var angleDeg = timeDifference/25;
		var angle = angleDeg*(Math.PI/180);
		draw(vapp.multiplicity, vapp.ratio, angle);
	};
	
	var stopAnimation = function(){
		if(requestId){
			window.cancelAnimationFrame(requestId);
		}
		requestId = undefined;
	};
	
	return Object.freeze({
		startAnimation: function(){startAnimation(); return this;},
		stopAnimation: function(){stopAnimation(); return this;},
	});
	
	
};

var omuti = zimbaOmuti();

omuti.startAnimation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

style.scss

body{
  background: black;  
	font-family: 'Abel', sans-serif;
	color: fushia;
}

.feature-container{
	margin-left: auto;
	margin-right: auto;
  margin-top: 8px;
}

.banner {
	text-align: center;
	padding-top: 2vh;
}

.banner h1{
	font-size: 5vw;
}

#tree {
	margin-top: -10vw;
}

/* ********************
 * better buttons (https://codepen.io/Jasius/pen/EyAXXy)
 *********************/
.btnx-l {
  background: 0 0;
  border: 2px solid #3498DB;
  color: #3498DB;
  transition: all .5s;
  padding: 7px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 2px;
  margin: 5px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &:hover, &:focus {
    color: #fff;
    background: #3498DB;
  }
}

.btnx {
  background: 0 0;
  border: 2px solid #3498DB;
  color: #3498DB;
  transition: all .5s;
  padding: 6px 16px;
  font-size: 18px;
  border-radius: 2px;
  margin: 5px;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &:hover, &:focus {
    color: #fff;
    background: #3498DB;
  }
}

.btnx-s {
  background: 0 0;
  border: 2px solid #3498DB;
  color: #3498DB;
  transition: all .5s;
  padding: 4px 15px;
  font-size: 15px;
  border-radius: 2px;
  margin: 5px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &:hover, &:focus {
    color: #fff;
    background: #3498DB;
  }
}

.btnx-solid {
  background: #3498DB;
  color: #fff;
  &:hover, &:focus {
    background: #75b9e7;
    border-color: #75b9e7;
  }
}

.btnx-cancel {
  border-color: #cd201f;
  color: #cd201f;
  &:hover, &:focus {
    background: #cd201f;
  }
}

.btnx-ok {
  border-color: #009e7e;
  color: #009e7e;
  &:hover, &:focus {
    background: #009e7e;
  }
}

.btnx-warning {
  border-color: #F3752B;
  color: #F3752B;
  &:hover, &:focus {
    background: #F3752B;
  }
}

.btnx-disabled {
  border-color: #A49A87;
  color: #A49A87;
  pointer-events: none;
  &:hover, &:focus {
    background: #A49A87;
  }
}

/*************************
 * some truly awesome stuff!
 *************************/
body {
  background-color: #010a00;
  background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
  font-size: 1rem;
}

h1 {
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #0ff,
    0 0 80px #0ff,
    0 0 90px #0ff,
    0 0 100px #0ff,
    0 0 150px #0ff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />