Beginnings of the terms UI

src/client/ui/factory.js

@@ -142,7 +142,8 @@ define([
 		},
 
 		afterPreload: function () {
-			this.build('characters', {});
+			this.build('terms', {});
+			//this.build('characters', {});
 		},
 
 		update: function () {

src/client/ui/templates/terms/styles.less

@@ -0,0 +1,120 @@
+@import "../../../css/colors.less";
+@leftWidth: 400px;
+@rightWidth: 400px;
+@boxPadding: 16px;
+@logoWidth: 559px;
+@logoHeight: 200px;
+@boxHeight: 169px;
+@messageHeight: @boxPadding;
+@totalWidth: @rightWidth;
+@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight);
+
+.uiTerms {
+	display: none;
+	width: 562px;
+	height: 475px;
+	margin-top: -80px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	> * {
+		flex-shrink: 0;
+	}
+
+	.logo {
+		width: 562px;
+		height: @logoHeight;
+		margin-bottom: (@boxPadding * 3);
+		filter: drop-shadow(0px -4px 0px @blackD) 
+		drop-shadow(0px 4px 0px @blackD)
+		drop-shadow(4px 0px 0px @blackD) 
+		drop-shadow(-4px 0px 0px @blackD);
+	}
+
+	.right {
+		height: @boxHeight;
+		background-color: #3a3b4a;
+		width: @rightWidth;
+		padding: @boxPadding;
+
+		.label {
+			width: 30%;
+			padding-top: 10px;
+			color: @green;
+		}
+
+		.message {
+			height: @messageHeight;
+			width: 200%;
+			margin-left: -50%;
+			margin-top: 36px;
+			float: left;
+			text-align: center;
+			color: @orangeA;
+			filter: brightness(100%)
+			drop-shadow(0px -4px 0px @blackD) 
+			drop-shadow(0px 4px 0px @blackD)
+			drop-shadow(4px 0px 0px @blackD) 
+			drop-shadow(-4px 0px 0px @blackD);
+			-moz-filter: brightness(100%)
+			drop-shadow(0px -4px 0px @blackD) 
+			drop-shadow(0px 4px 0px @blackD)
+			drop-shadow(4px 0px 0px @blackD) 
+			drop-shadow(-4px 0px 0px @blackD);
+		}
+
+		.top-buttons {
+			width: 100%;
+			height: 35px;
+
+			.btn {
+				background-color: @blueC;
+				width: calc((100% - @boxPadding) / 2);
+				float: left;
+				margin-right: @boxPadding;
+				color: @white;
+
+				&:last-child {
+					margin-right: 0px;
+				}
+
+				&:hover {
+					background-color: @blueB;
+				}
+
+            }
+            
+            .btnCancel {
+                background-color: @red;
+
+                &:hover {
+                    background-color: lighten(@red, 15%);
+                }
+            }
+
+		}
+
+	}
+
+	.spacer-h {
+		height: 61px;
+	}
+
+}
+
+.mobile {
+	.uiLogin {
+		margin-top: 0px;
+
+		.logo {
+			margin-bottom: 30px;
+		}
+
+		.news {
+			margin-top: 20px;
+		}
+
+	}
+
+}

src/client/ui/templates/terms/template.html

@@ -0,0 +1,10 @@
+<div class="uiTerms">
+	<img class="logo" src="images/logo_0.png" alt="">
+	<div class="right">
+		<div class="top-buttons">
+            <div class="el btn btnCancel">cancel</div>
+			<div class="el btn btnAccept">accept</div>
+		</div>
+		<div class="message"></div>
+	</div>
+</div>

src/client/ui/templates/terms/terms.js

@@ -0,0 +1,23 @@
+define([
+	'js/system/events',
+	'js/system/client',
+	'ui/factory',
+	'html!ui/templates/terms/template',
+	'css!ui/templates/terms/styles',
+	'js/rendering/renderer'
+], function (
+	events,
+	client,
+	uiFactory,
+	template,
+	styles,
+	renderer
+) {
+	return {
+		tpl: template,
+		centered: true,
+
+		postRender: function () {
+		},
+	};
+});