Bootstrap UI, draft one.

echo-bravo-yahoo · Jan 16, 2015 · 7ab1e10 · 7ab1e10
1 parent 49657d2
commit 7ab1e10
Show file tree

Hide file tree

Showing 16 changed files with 9,496 additions and 54 deletions.
diff --git a/css/bootstrap-theme.css b/css/bootstrap-theme.css
diff --git a/css/bootstrap-theme.css.map b/css/bootstrap-theme.css.map
diff --git a/css/bootstrap-theme.min.css b/css/bootstrap-theme.min.css
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.css.map b/css/bootstrap.css.map
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/micropaint.css b/css/micropaint.css
@@ -0,0 +1,46 @@
+.pixel {
+	float: left;
+	height: 9px;
+	width: 9px;
+	margin-left: 1px;
+	margin-top: 1px;
+}
+.on {
+	background-color: #39B7CD;
+}
+.off {
+	background-color: #666666;
+}
+.parent{
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-flow: row wrap;
+}
+.pixelParent {
+	height: 80%;
+	width: 80%;
+	max-height: 480px;
+	max-width: 640px;
+	display: flex;
+	flex-flow: row wrap;
+}
+.controls {
+	height: 100%;
+	width: 20%;
+	max-width: 240px;
+	display: flex;
+	flex-flow: row wrap;
+}
+.unselectable {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+
+	/* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */
+	-ms-user-select: none;
+	user-select: none;
+}
+.button {
+	width: 100%;
+}
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/index.html b/index.html
@@ -1,64 +1,58 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 	<head>
-		<style>
-			.pixel {
-				float: left;
-				height: 9px;
-				width: 9px;
-				margin-left: 1px;
-				margin-top: 1px;
-			}
-			.on {
-				background-color: #39B7CD;
-			}
-			.off {
-				background-color: #666666;
-			}
-			.parent{
-				height: 100%;
-				width: 100%;
-				display: flex;
-				flex-flow: row wrap;
-			}
-			.pixelParent {
-				height: 80%;
-				width: 80%;
-				max-height: 480;
-				max-width: 640;
-				display: flex;
-				flex-flow: row wrap;
-			}
-			.controls {
-				height: 100%;
-				width: 20%;
-				max-width: 240;
-				display: flex;
-				flex-flow: row wrap;
-			}
-			.unselectable {
-			   -moz-user-select: -moz-none;
-			   -khtml-user-select: none;
-			   -webkit-user-select: none;
-			   /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */
-			   -ms-user-select: none;
-			   user-select: none;
-			}
-			.button {
-				width: 100%;
-			}
-		</style>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Micropaint.js</title>
+
+		<!-- Bootstrap -->
+		<link href="css/bootstrap.min.css" rel="stylesheet">
+
+		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+		<!--[if lt IE 9]>
+		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+		<![endif]-->
+
+		<!-- Micropaint -->
+		<link href="css/micropaint.css" rel="stylesheet">
 	</head>
+	<div class="modal fade" id="exportModal">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+					<h4 class="modal-title">C++ Header</h4>
+				</div>
+				<div class="modal-body">
+					<p>Copy to clipboard: Ctrl+C, Escape</p>
+					<textarea id="exportModalTextArea" style="width:100%;"></textarea>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
 	<body style="cursor: crosshair; margin: 0px;" unselectable="on" class="unselectable">
 		<div id="parent" class="parent">
 			<div id="controls" class="controls">
-				<button id="drawModeButton" class="button">Drawmode: Toggle</button>
-				<button id="clearScreenButton" class="button">Clear Screen</button>
-				<button id="fillScreenButton" class="button">Fill Screen</button>
-				<button id="exportButton" class="button">Export</button>
-				<button id="importButton" class="button">Import</button>
+				<div id="openingTabGuard" tabIndex="1"></div>
+				<button id="drawModeButton" class="btn btn-large btn-default" style="width:100%;" tabIndex="2">Drawmode: Toggle</button>
+				<button id="clearScreenButton" class="btn btn-large btn-default" style="width:100%;" tabIndex="3">Clear Screen</button>
+				<button id="fillScreenButton" class="btn btn-large btn-default" style="width:100%;" tabIndex="4">Fill Screen</button>
+				<button id="exportButton" class="btn btn-large btn-default" data-toggle="modal" data-target="#exportModal" style="width:100%;" tabIndex="5">Export</button>
+				<button id="importButton" class="btn btn-large btn-default" style="width:100%;" tabIndex="6">Import</button>
+				<div id="closingTabGuard" tabIndex="6"></div>
 			</div>
 			<div id="pixelParent" class="pixelParent"></div>
 		</div>
+		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+		<!-- Include all compiled plugins (below), or include individual files as needed -->
+		<script src="js/bootstrap.min.js"></script>
 		<script src="micropaint.js"></script>
 	</body>
 </html>