extracted CSS style from HTML files

progtlk · May 7, 2015 · 2ec6cf0 · 2ec6cf0
1 parent 6bd4060
commit 2ec6cf0
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 404 deletions.
diff --git a/demo/autoencoder.html b/demo/autoencoder.html
@@ -6,95 +6,9 @@
   <title>ConvNetJS MNIST demo</title>
   <meta name="description" content="">
   <meta name="author" content="">
+  <link rel="stylesheet" href="style.css">
 </head>
 
-<style>
-.layer {
-  border: 1px solid #999;
-  margin-bottom: 5px;
-  text-align: left;
-  padding: 10px;
-}
-.layer_act {
-  width: 500px;
-  float: right;
-}
-.ltconv {
-  background-color: #FDD;
-}
-.ltrelu {
-  background-color: #FDF;
-}
-.ltpool {
-  background-color: #DDF;
-}
-.ltsoftmax {
-  background-color: #FFD;
-}
-.ltfc {
-  background-color: #DFF;
-}
-.ltlrn {
-  background-color: #DFD; 
-}
-.ltdropout {
-  background-color: #AAA;  
-}
-.ltitle {
-  color: #333;
-  font-size: 18px;
-}
-.actmap {
-  margin: 1px;
-}
-#trainstats {
-  text-align: left;
-}
-.clear {
-  clear: both;
-}
-#wrap {
-  width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-h1 {
-  font-size: 16px;
-  color: #333;
-  background-color: #DDD;
-  border-bottom: 1px #999 solid;
-  text-align: center;
-}
-.secpart {
-  width: 400px;
-  float: left;
-}
-#lossgraph {
-  /*border: 1px solid #F0F;*/
-  width: 100%;
-}
-.probsdiv canvas {
-  float: left;
-}
-.probsdiv {
-  height: 60px;
-  width: 180px;
-  display: inline-block;
-  font-size: 12px;
-  box-shadow: 0px 0px 2px 2px #EEE;
-  margin: 5px;
-  padding: 5px;
-  color: black;
-}
-.pp {
-  margin: 1px;
-  padding: 1px;
-}
-#testset_acc {
-  margin-bottom: 200px;
-}
-</style>
-
 <script src="jquery-1.8.3.min.js"></script>
 <script src="../build/vis.js"></script>
 <script src="../build/util.js"></script>

diff --git a/demo/automatic.css b/demo/automatic.css
@@ -0,0 +1,82 @@
+#wrap {
+  width:800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+h2 {
+  text-align: center;
+  font-size: 34px;
+  font-weight: 300;
+  margin-bottom: 50px;
+}
+h1 {
+  font-size: 26px;
+  font-weight: 400;
+  border-bottom: 1px #999 solid;
+}
+#datamsg{
+  background-color: white;
+  margin-top: 2px;
+  padding: 10px;
+}
+#prepromsg{
+  margin-top: 10px;
+  padding: 10px;
+}
+.msg{
+  padding: 2px;
+}
+body {
+  font-family: 'Lato', sans-serif;
+  color: #333;
+  font-size: 20px;
+  font-weight: 300;
+}
+input[type=text] {
+  border: 1px solid #999;
+  padding: 3px;
+  font-size: 18px;
+  color: #333;
+}
+.clouds-flat-button {
+  position: relative;
+  vertical-align: top;
+  width: 100%;
+  height: 80px;
+  padding: 0;
+  color:#454545;
+  text-align: center;
+  font-size: 16px;
+  background: #ecf0f1;
+  border: 0;
+  border-bottom: 2px solid #dadedf;
+  cursor: pointer;
+  -webkit-box-shadow: inset 0 -2px #dadedf;
+  box-shadow: inset 0 -2px #dadedf;
+}
+.clouds-flat-button:active {
+  top: 1px;
+  outline: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+#bestmodel {
+  font-size: 16px;
+  background-color: #FAFAFA;
+  padding: 10px;
+}
+#bestmodeloverall {
+  font-size: 16px;
+  background-color: #FAFAFA;
+  padding: 10px;
+  margin-top: 10px;
+}
+.syntaxhighlighter {
+  font-size: 14px !important;
+  overflow-y: hidden !important; 
+}
+.sopts {
+  box-shadow: 0px 0px 2px 0px #555;
+  margin-bottom: 5px;
+  padding: 10px;
+}
diff --git a/demo/automatic.html b/demo/automatic.html
@@ -20,90 +20,7 @@
   <link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
   <script type="text/javascript">SyntaxHighlighter.all();</script>
 
-  <style>
-  #wrap {
-    width:800px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  h2 {
-    text-align: center;
-    font-size: 34px;
-    font-weight: 300;
-    margin-bottom: 50px;
-  }
-  h1 {
-    font-size: 26px;
-    font-weight: 400;
-    border-bottom: 1px #999 solid;
-  }
-  #datamsg{
-    background-color: white;
-    margin-top: 2px;
-    padding: 10px;
-  }
-  #prepromsg{
-    margin-top: 10px;
-    padding: 10px;
-  }
-  .msg{
-    padding: 2px;
-  }
-  body {
-    font-family: 'Lato', sans-serif;
-    color: #333;
-    font-size: 20px;
-    font-weight: 300;
-  }
-  input[type=text] {
-    border: 1px solid #999;
-    padding: 3px;
-    font-size: 18px;
-    color: #333;
-  }
-  .clouds-flat-button {
-    position: relative;
-    vertical-align: top;
-    width: 100%;
-    height: 80px;
-    padding: 0;
-    color:#454545;
-    text-align: center;
-    font-size: 16px;
-    background: #ecf0f1;
-    border: 0;
-    border-bottom: 2px solid #dadedf;
-    cursor: pointer;
-    -webkit-box-shadow: inset 0 -2px #dadedf;
-    box-shadow: inset 0 -2px #dadedf;
-  }
-  .clouds-flat-button:active {
-    top: 1px;
-    outline: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-  #bestmodel {
-    font-size: 16px;
-    background-color: #FAFAFA;
-    padding: 10px;
-  }
-  #bestmodeloverall {
-    font-size: 16px;
-    background-color: #FAFAFA;
-    padding: 10px;
-    margin-top: 10px;
-  }
-  .syntaxhighlighter {
-    font-size: 14px !important;
-    overflow-y: hidden !important; 
-  }
-  .sopts {
-    box-shadow: 0px 0px 2px 0px #555;
-    margin-bottom: 5px;
-    padding: 10px;
-  }
-  </style>
+  <link rel="stylesheet" href="automatic.css">
 
   <script type="application/javascript">
 

diff --git a/demo/cifar10.html b/demo/cifar10.html
@@ -6,93 +6,7 @@
   <title>ConvNetJS CIFAR-10 demo</title>
   <meta name="description" content="">
   <meta name="author" content="">
-
-<style>
-.layer {
-  border: 1px solid #999;
-  margin-bottom: 5px;
-  text-align: left;
-  padding: 10px;
-}
-.layer_act {
-  width: 500px;
-  float: right;
-}
-.ltconv {
-  background-color: #FDD;
-}
-.ltrelu {
-  background-color: #FDF;
-}
-.ltpool {
-  background-color: #DDF;
-}
-.ltsoftmax {
-  background-color: #FFD;
-}
-.ltfc {
-  background-color: #DFF;
-}
-.ltlrn {
-  background-color: #DFD; 
-}
-.ltitle {
-  color: #333;
-  font-size: 18px;
-}
-.actmap {
-  margin: 1px;
-}
-#trainstats {
-  text-align: left;
-}
-.clear {
-  clear: both;
-}
-#wrap {
-  width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-h1 {
-  font-size: 16px;
-  color: #333;
-  background-color: #DDD;
-  border-bottom: 1px #999 solid;
-  text-align: center;
-}
-.secpart {
-  width: 400px;
-  float: left;
-}
-#lossgraph {
-  /*border: 1px solid #F0F;*/
-  width: 100%;
-}
-.probsdiv canvas {
-  float: left;
-}
-.probsdiv {
-  height: 60px;
-  width: 180px;
-  display: inline-block;
-  font-size: 12px;
-  box-shadow: 0px 0px 2px 2px #EEE;
-  margin: 5px;
-  padding: 5px;
-  color: black;
-}
-.pp {
-  margin: 1px;
-  padding: 1px;
-}
-#testset_vis {
-  margin-bottom: 200px;
-}
-body {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-}
-</style>
+  <link rel="stylesheet" href="style.css">
 
 <script src="jquery-1.8.3.min.js"></script>
 <script src="../build/vis.js"></script>

diff --git a/demo/image_regression.html b/demo/image_regression.html
@@ -2,14 +2,7 @@
 <head>
 <title>ConvNetJS demo: Image Painting</title>
 <link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
-
-<style>
-body {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  color: #333;
-  padding: 20px;
-}
-</style>
+<link rel="stylesheet" href="style.css">
 
 <link rel="stylesheet" href="jquery-ui.min.css">
 <script src="jquery-1.8.3.min.js"></script>