milk-cocoa · shogochiai · Aug 4, 2015 · Aug 4, 2015 · Aug 4, 2015 · Aug 4, 2015
diff --git a/app/analytics.html b/app/analytics.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Wowoo</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css" />
+    <link id="themecss" rel="stylesheet" href="css/theme/default.css" type="text/css" />
+    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700">
+    <link type="text/css" rel="stylesheet" href="css/balloon.css">
+    <link type="text/css" rel="stylesheet" href="css/toastr.min.css">
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-70396925-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+</head>
+
+<body>
+    <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="jsmin/lib/jquery-ui-1.10.4.custom.min.js"></script>
+    <script src="jsmin/lib/jquery.ui.touch-punch.min.js"></script>
+    <script src="jsmin/lib/chroma.min.js"></script>
+    <script src="jsmin/lib/toastr.min.js"></script>
+
+    <script src="jsmin/load-milkcocoa.min.js"></script>
+    <script src="jsmin/analytics.min.js"></script>
+
+</body>
+</html>
diff --git a/app/css/balloon.css b/app/css/balloon.css
@@ -0,0 +1,46 @@
+/* balloon-1 bottom */
+.posting-balloon {
+	position: absolute;
+	display: inline-block;
+	padding: 0 5px;
+	width: auto;
+	min-width: 115px;
+	height: 40px;
+	line-height: 34px;
+	color: #19283C;
+	text-align: center;
+	background: #FFFFFF;
+	border: 3px solid #19283C;
+	z-index: 3;
+}
+.posting-balloon input {
+	border: none;
+}
+.posting-balloon input:focus {
+  outline: 0;
+  border-color: gray;
+}
+.posting-balloon:before {
+	content: "";
+	position: absolute;
+	bottom: -8px; left: 50%;
+	margin-left: -9px;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 9px 9px 0 9px;
+	border-color: #F6F6F6 transparent transparent transparent;
+	z-index: 0;
+}
+.posting-balloon:after {
+	content: "";
+	position: absolute;
+	bottom: -12px; left: 50%;
+	margin-left: -10px;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 10px 10px 0 10px;
+	border-color: #19283C transparent transparent transparent;
+	z-index: -1;
+}
diff --git a/app/css/style.css b/app/css/style.css
@@ -4,6 +4,7 @@ html{
     -webkit-text-size-adjust:100%;
     -ms-text-size-adjust:100%
 }
+
 body{
     font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;
     font-size: 14px;
@@ -13,11 +14,13 @@ body{
     background-image: url("../images/bg_check.png");
     background-size: 16px 16px;
 }
+
 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block;
 }
 a {
   background: transparent;
+  text-decoration:none;
 }
 b, strong {
   font-weight: bold;
@@ -72,6 +75,10 @@ input::-moz-focus-inner {
 }
 input {
   line-height: normal;
+  width: 100%;
+  outline: 0;
+  border-color: white;
+  border: 0px;
 }
 input[type="checkbox"],
 input[type="radio"] {
@@ -121,6 +128,16 @@ textarea {
 #sidebar{z-index: 5}
 
 
+/* TITLE */
+#title {
+  display: inline;
+  border: 1px solid lightgray;
+  width: 400px;
+}
+/* TITLE */
+
+
+
 /* HEADER */
 #header{
     position: relative;
@@ -135,7 +152,7 @@ textarea {
     }
         .p-header__logo__img{
             margin-top: 16px;
-            margin-left: 1.5em;
+            margin-left: 1.1em;
             display: inline-block;
             vertical-align: middle;
         }
@@ -216,12 +233,11 @@ textarea {
 /* HUSEN */
 .p-husen {
     cursor: move;
-    width: 200px;
+    width: 100px;
     position: absolute;
     background: white;
-    padding: 8px 12px;
+    padding: 4px 6px; /* 8px 12px; */
     border-style: solid;
-    font-weight: bold;
 }
     .p-husen__cross{
         display: none;
@@ -234,4 +250,8 @@ textarea {
     .p-husen:hover .p-husen__cross{
         display: block;
     }
-/* HUSEN END */
+/* HUSEN END */
+
+.body-zoom {
+  zoom: 2;
+}
diff --git a/app/css/theme/default.css b/app/css/theme/default.css
@@ -1,16 +1,28 @@
 /* fix */
 .p-husen__cross{color: inherit;}
+.p-husen__star-ever{
+  color: gray;
+  cursor: pointer;
+  float: right;
+}
+.p-husen__star-pushed{
+  color: #c18d1f;
+  cursor: pointer;
+  float: right;
+}
 
 .p-husen{
-    border-width: 3px;
+    border-width: 1px;
+    font-size: 10px;
+    word-wrap: break-word;
 }
 .p-husen:last-child{
     background: #F8FDD5;
 }
 /* theme */
 .theme-husen--one {
-    color: #298dd4;
-    border-color: #298dd4;
+    color: gray;
+    border-color: gray;
 }
 .theme-husen--two {
     color: #0fbd8b;
@@ -25,23 +37,23 @@
     border-color: #f99b42;
 }
 .theme-husen--five {
-    color: #7f9ebc;
-    border-color: #7f9ebc;
+    color: #298dd4;
+    border-color: #298dd4;
 }
 .theme-husen--six {
     color: #f78ba7;
     border-color: #f78ba7;
 }
 
-.theme-colorlist__item--one{border-color: #298dd4}
-.theme-colorlist__item--one.is-active{background-color: #298dd4}
+.theme-colorlist__item--one{border-color: gray}
+.theme-colorlist__item--one.is-active{background-color: gray}
 .theme-colorlist__item--two{border-color: #0fbd8b}
 .theme-colorlist__item--two.is-active{background-color: #0fbd8b}
 .theme-colorlist__item--three{border-color: #e7755e}
 .theme-colorlist__item--three.is-active{background-color: #e7755e}
 .theme-colorlist__item--four{border-color: #f99b42}
 .theme-colorlist__item--four.is-active{background-color: #f99b42}
-.theme-colorlist__item--five{border-color: #7f9ebc}
-.theme-colorlist__item--five.is-active{background-color: #7f9ebc}
+.theme-colorlist__item--five{border-color: #298dd4}
+.theme-colorlist__item--five.is-active{background-color: #298dd4}
 .theme-colorlist__item--six{border-color: #f78ba7}
-.theme-colorlist__item--six.is-active{background-color: #f78ba7}
+.theme-colorlist__item--six.is-active{background-color: #f78ba7}
diff --git a/app/css/toastr.min.css b/app/css/toastr.min.css
diff --git a/app/index.html b/app/index.html
@@ -3,17 +3,24 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>サービスデザインについて色々語り合うボード | POSTALK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.2, minimum-scale=1.2, maximum-scale=1.2, user-scalable=no">
+    <title>Wowoo</title>
     <link rel="stylesheet" href="css/style.css" type="text/css" />
     <link id="themecss" rel="stylesheet" href="css/theme/default.css" type="text/css" />
     <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700">
-    <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
-    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="jsmin/lib/jquery-ui-1.10.4.custom.min.js"></script>
-    <script src="jsmin/lib/jquery.ui.touch-punch.min.js"></script>
-    <script src="jsmin/load-milkcocoa.min.js"></script>
-    <script src="jsmin/fusen.min.js"></script>
-    <script src="jsmin/main.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="css/balloon.css">
+    <link type="text/css" rel="stylesheet" href="css/toastr.min.css">
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-70396925-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
 </head>
 
 <body>
@@ -24,38 +31,52 @@
                 <div class="p-header__logo__img">
                     <svg width="56" height="33" viewBox="0 0 56 33" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="#676F7D" stroke-width="3" fill="none" fill-rule="evenodd"><path d="M34 3L51.1 20.2 44.5 20.2 34 30.7 20.1 16.8 34 3Z" fill="#676F7D"/><path d="M21.2 3L4 20.2 10.7 20.2 21.2 30.7 35 16.8 21.2 3Z" fill="#FFFFFF"/></g></svg>
                 </div><!-- .p-header__logo__img -->
-                <h1 class="p-header__logo__txt">POSTALK</h1>
+                <h1 class="p-header__logo__txt">Wowoo</h1>
             </a>
         </div><!-- .p-header__logo -->
 
-        <h2 class="p-header__title">サービスデザインについて色々語り合うボード</h2>
+        <h2 class="p-header__title">
+          <input type="text" name="roomtitle" id="title" placeholder="ex) <name>_<date>_<theme>" />
+        </h2>
     </div><!-- #header -->
 
 
     <div id="sidebar">
-    <!--<div class="p-timeline">
-            <ul class="p-timeline__list">
-                <li>ああああ</li>
-                <li>ああああ</li>
-                <li>ああああ</li>
-                <li>ああああ</li>
-            </ul>
-            <div class="p-timeline__button">
-
-            </div>
-        </div> -->
-
         <div class="p-colorlist">
             <div class="p-colorlist__item p-colorlist__item--first theme-colorlist__item--one is-active" id="one"></div>
             <div class="p-colorlist__item theme-colorlist__item--two" id="two"></div>
             <div class="p-colorlist__item theme-colorlist__item--three" id="three"></div>
             <div class="p-colorlist__item theme-colorlist__item--four" id="four"></div>
             <div class="p-colorlist__item theme-colorlist__item--five" id="five"></div>
             <div class="p-colorlist__item theme-colorlist__item--six" id="six"></div>
+            <div class="p-colorlist__item theme-colorlist__item--seven" id="replay"></div>
+            <style>
+              #replay {
+                margin-left: 12px;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-width: 15px 0 15px 26.0px;
+                border-color: transparent transparent transparent #c9cfd6;
+              }
+            </style>
         </div><!-- .p-colorlist -->
     </div><!-- #sidebar -->
 
     <div id="canvas"></div>
 
+    <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="jsmin/lib/jquery-ui-1.10.4.custom.min.js"></script>
+    <script src="jsmin/lib/jquery.ui.touch-punch.min.js"></script>
+    <script src="jsmin/lib/chroma.min.js"></script>
+    <script src="jsmin/lib/toastr.min.js"></script>
+    <script src="jsmin/lib/thumbnail.js"></script>
+
+    <script src="jsmin/load-milkcocoa.min.js"></script>
+    <script src="jsmin/fusen_builder.min.js"></script>
+    <script src="jsmin/fusen.min.js"></script>
+    <script src="jsmin/main.min.js"></script>
+
 </body>
 </html>
diff --git a/app/lp.html b/app/lp.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="utf-8">
+    <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>CAMERATE POSTALK | Share Ideas on Stickies.</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css" />
+    <link rel="stylesheet" href="css/lp.css" type="text/css" />
+    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
+    <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="jsmin/load-milkcocoa.min.js"></script>
+    <script src="jsmin/lp.min.js"></script>
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-70396925-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+</head>
+<body>
+    <div id="LP">
+      <div class="p-lp__logo">
+        <div class="p-lp__logo__img">
+          <svg width="211" height="126" viewBox="0 0 211 126" version="1.1" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" stroke="#DFE4E6" stroke-width="8"><path d="M131.6 6L201.8 76.2 174.5 76.3 131.6 119.2 75 62.6 131.6 6Z" fill="#DFE4E6"/><path d="M79.2 6L9 76.2 36.3 76.3 79.2 119.2 135.7 62.6 79.2 6Z" fill="#FFFFFF"/></g></svg>
+        </div><!-- p-lp__logo__img -->
+        <h1 class="p-lp__logo__txt"><span style="letter-spacing: 0.01em">CA</span>MER<span style="letter-spacing: -0.05em">AT</span>E PO<span style="letter-spacing: 0.08em">S</span><span style="letter-spacing: 0.1em">TA</span><span style="letter-spacing: 0.07em">LK</span></h1>
+      </div><!-- p-lp__logo -->
+
+      <div class="p-lp__blox">
+        <div class="p-lp__blox__item p-lp__blox__item--one"></div>
+        <div class="p-lp__blox__item p-lp__blox__item--two"></div>
+        <div class="p-lp__blox__item p-lp__blox__item--three"></div>
+        <div class="p-lp__blox__item p-lp__blox__item--four"></div>
+        <div class="p-lp__blox__item p-lp__blox__item--five"></div>
+        <div class="p-lp__blox__item p-lp__blox__item--six"></div>
+      </div><!-- p-lp__blox -->
+
+      <p class="p-lp__desc">Share ideas on stickies.</p>
+
+      <form class="p-lp__form" action="">
+        <input type="text" class="p-lp__form__input" value="" placeholder="enter title">
+        <button class="p-lp__form__button">CREATE A BOARD</button>
+      </form><!-- .p-lp__form -->
+  </div><!-- #LP -->
+</body>
+</html>