Merged in Kunal's changes.

cs10 · Nov 6, 2013 · 6cf45cc · 6cf45cc
2 parents a27014d + 2e505d0
commit 6cf45cc
Show file tree

Hide file tree

Showing 32 changed files with 9,845 additions and 23 deletions.
diff --git a/bootstrap/css/bootstrap-theme.css b/bootstrap/css/bootstrap-theme.css
diff --git a/bootstrap/css/bootstrap-theme.min.css b/bootstrap/css/bootstrap-theme.min.css
diff --git a/bootstrap/css/bootstrap.css b/bootstrap/css/bootstrap.css
diff --git a/bootstrap/css/bootstrap.min.css b/bootstrap/css/bootstrap.min.css
diff --git a/bootstrap/fonts/glyphicons-halflings-regular.eot b/bootstrap/fonts/glyphicons-halflings-regular.eot
diff --git a/bootstrap/fonts/glyphicons-halflings-regular.svg b/bootstrap/fonts/glyphicons-halflings-regular.svg
diff --git a/bootstrap/fonts/glyphicons-halflings-regular.ttf b/bootstrap/fonts/glyphicons-halflings-regular.ttf
diff --git a/bootstrap/fonts/glyphicons-halflings-regular.woff b/bootstrap/fonts/glyphicons-halflings-regular.woff
diff --git a/bootstrap/js/bootstrap.js b/bootstrap/js/bootstrap.js
diff --git a/bootstrap/js/bootstrap.min.js b/bootstrap/js/bootstrap.min.js
diff --git a/images/TreeOfLife.jpg b/images/TreeOfLife.jpg
diff --git a/images/bjc200.png b/images/bjc200.png
diff --git a/images/image00.png b/images/image00.png
diff --git a/images/image01.jpg b/images/image01.jpg
diff --git a/images/image02.png b/images/image02.png
diff --git a/images/image03.png b/images/image03.png
diff --git a/images/image04.png b/images/image04.png
diff --git a/images/image05.png b/images/image05.png
diff --git a/images/image06.png b/images/image06.png
diff --git a/images/image07.png b/images/image07.png
diff --git a/images/image08.png b/images/image08.png
diff --git a/images/image09.png b/images/image09.png
diff --git a/images/image10.jpg b/images/image10.jpg
diff --git a/images/image11.png b/images/image11.png
diff --git a/images/image12.png b/images/image12.png
diff --git a/images/image13.png b/images/image13.png
diff --git a/images/image14.jpg b/images/image14.jpg
diff --git a/images/image15.png b/images/image15.png
diff --git a/images/image16.jpg b/images/image16.jpg
diff --git a/index.html b/index.html
@@ -1,33 +1,52 @@
-<html lang="en">
-<head>
+<html>
 <meta charset="utf-8"></meta>
-<title>Oh Snap!</title>
-<link rel="stylesheet" type="text/css" href="style.css">
-<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
+
+<head>
+    <title>Snap: Hour of Code</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
+    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+    <link href='bootstrap/css/bootstrap.min.css' rel="stylesheet" type='text/css'>
+    <script src="bootstrap/js/bootstrap.min.js"></script>
+
+    <script src='runme.js'></script>
 </head>
 <body>
 
-<div id="top">
+    <div id="top">
+        <a id='bjclogo' href='http://bjc.berkeley.edu' target='_blank'><img style='float:left; width:120px; padding-top: 25px; padding-left:30px' src="images/bjc200.png"></a>
+        <div style='float:left; padding-left: 30px; padding-top: 25px; font-size: 50px; color: white'>Hour of Code</div>
+
+    <div id='buttons' style='float:left; margin-top: 40px; margin-left: 100px; font-size: 30px' class='btn-group'>
+        <button onclick="load('marwahaha', 'tutorial1');" style='padding-left:20px; padding-right:20px; font-size: 30px' class='btn btn-default'>#1</button>
+        <button onclick="load('marwahaha', 'tutorial2');" style='padding-left:20px; padding-right:20px; font-size: 30px' class='btn btn-default'>#2</button>
+        <button onclick="load('Dan Garcia', 'Mole Mash');" style='padding-left:20px; padding-right:20px; font-size: 30px' class='btn btn-default'>#3</button>
+    </div>
+
+        <a href='http://code.org/congrats?i=' target='_blank'><div style='float:right; padding-right: 30px; padding-top: 20px; color: white'><button style='font-size: 30px;' class='btn btn-success'>I'm done!</button></div></a>
 
-    <h1>Snap yo fingers</h1>
 
 </div>
+
+
+
+<br>
 <div id="left">
 
     <div id="page1" class="lab_page">
 
-        <h2> Part 1 </h2>
+        <h2>Part 1</h2>
 
         <img src="images/image12.png">
 
         <p>
         Have you wondered how animators create scenes like the ones above?
-        Well, it’s no surprise that converting this art to animation takes lots and lots of programming skill that is developed over time through countless trials and iterations.
-        Let’s see if we can break down this scene into smaller components and try our hand at building some graphics.
+        Well, it's no surprise that converting this art to animation takes lots and lots of programming skill that is developed over time through countless trials and iterations.
+        Let's see if we can break down this scene into smaller components and try our hand at building some graphics.
         </p>
 
         <p>
-        Let’s focus specifically on the tree.If you look closely at the picture, the tree itself is made up of a pattern of similar strokes. In this hour of code, we will teach you how to break down these patterns to have you code a tree of you own. You will be equipped with the basic framework, earning a technique from animators’ toolbox.
+        Let's focus specifically on the tree.If you look closely at the picture, the tree itself is made up of a pattern of similar strokes. In this hour of code, we will teach you how to break down these patterns to have you code a tree of you own. You will be equipped with the basic framework, earning a technique from animators' toolbox.
         </p>
 
         <p>
@@ -41,9 +60,9 @@ <h2> Part 1 </h2>
 
 </div>
 <div id="right">
-
-    <iframe width=100% height=80% src="snap.html"></iframe>
-
+    <div id='iframes'>
+        <iframe id='snap' width=100% height=100% src="snap.html"></iframe>
+    </div>
 </div>
 </body>
 </html>
diff --git a/runme.js b/runme.js
@@ -0,0 +1,14 @@
+$(document).ready(function() {
+
+
+	load('Dan Garcia', 'Mole Mash');
+
+});
+
+
+
+
+function load(user, proj) {
+	document.getElementById('snap').src = 'http://snap.berkeley.edu/snapsource/snap.html#present:Username=' + user + '&ProjectName=' + proj;
+	$('#iframes').html($('#iframes').children().clone());
+}
diff --git a/style.css b/style.css
@@ -1,35 +1,48 @@
-html, body {
+html {
     height: 100%;
     overflow: hidden;
+    background-color:rgb(0, 173, 188);
+
 }
 
 body {
+    height: 100%;
+    width: 100%;
+    margin-left: 0px;
+    overflow: hidden;
     font-family: 'Open Sans', sans-serif;
+    background-color:rgb(255, 255, 255);
+
 }
 
 #top {
-    width: 100%;
-    text-align: center;
+    background-color:rgb(0, 173, 188);
+    height: 150px;
 }
 
+
 #left {
+    width: 30%;
     height: 80%;
-    width: 20%;
-    overflow: auto;
+    overflow: scroll;
     float: left;
-    border-top: 2px gray solid;
     margin-bottom: 50px;
 }
 
 #right {
-    width: 80%;
-    float: right;
+    height: 700px;
+    overflow: hidden;
+}
+
+#snap {
+
 }
 
+
 img {
     width: 100%;
 }
 
 .lab_page {
     padding: 10px;
-}
+}