[Close #5] Add One Clock in index, add beta link

⌛ ⏰ ⌚

Author: AquarHEAD Lou

_layouts/index.html

@@ -47,7 +47,10 @@
       margin-top: 10px;
     }
     #expense-icon {
-      background-image: url('/images/expense.png');
+      background-image: url('/images/expense/icon.png');
+    }
+    #oneclock-icon {
+      background-image: url('/images/oneclock/icon.png')
     }
 
     @media only screen and (max-device-width: 480px) {
@@ -87,6 +90,18 @@ <h2>Expense</h2>
                 <p>Easy expense tracking</p>
             </a>
         </li>
+
+        <li>
+          <a id="oneclock" class="clearfix" href="/oneclock">
+            <div id="oneclock-icon" class="icon ribbon-wrapper">
+              <div class="ribbon-wrapper-green">
+                <div class="ribbon-green">Beta</div>
+              </div>
+            </div>​
+            <h2>One Clock</h2>
+            <p>One Clock to rule them all.</p>
+          </a>
+        </li>
     </ul>
 
     <form class="subscribe" action="https://tinyletter.com/elaworkshop" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/elaworkshop', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
@@ -111,6 +126,18 @@ <h2>Expense</h2>
     </footer>
 
     <a href="https://github.com/ElaWorkshop" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+    <script type="text/javascript">
+      var betaBadge = document.querySelector(".ribbon-green");
+
+      document.getElementById('oneclock').addEventListener('mouseover', function() {
+        betaBadge.style.opacity = 0.9;
+      });
+
+      document.getElementById('oneclock').addEventListener('mouseout', function() {
+        betaBadge.style.opacity = 0.3;
+      });
+    </script>
 </body>
 
 </html>

css/app.css

@@ -211,3 +211,70 @@ footer p {
     margin: auto;
   }
 }
+
+/* Badge aka. Ribbon, ref: https://css-tricks.com/snippets/css/corner-ribbon/ */
+.ribbon-wrapper {
+  margin: auto;
+  width: 128px;
+  height: 128px;
+  border-radius: 10px;
+  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
+  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
+  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
+  position: relative;
+  z-index: 90;
+  background-size: 100% 100%;
+}
+
+.ribbon-wrapper-green {
+  width: 85px;
+  height: 88px;
+  overflow: hidden;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+}
+
+.ribbon-green {
+  font: bold 15px;
+  font-family: Futura, "Segoe UI", sans-serif;
+  color: #333;
+  text-align: center;
+  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+  position: relative;
+  padding: 7px 0;
+  left: -5px;
+  top: 15px;
+  width: 120px;
+  background-color: #BFDC7A;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
+  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
+  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
+  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
+  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
+  color: #6a6340;
+  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
+  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
+  opacity: 0.3;
+}
+
+.ribbon-green:before, .ribbon-green:after {
+  content: "";
+  border-top:   3px solid #6e8900;
+  border-left:  3px solid transparent;
+  border-right: 3px solid transparent;
+  position:absolute;
+  bottom: -3px;
+}
+
+.ribbon-green:before {
+  left: 0;
+}
+.ribbon-green:after {
+  right: 0;
+}​

images/expense.png images/expense/icon.png

@@ -1,17 +1,17 @@
 ---
 layout: app
 title: One Clock
-made: Lovingly made by <a href="https://twitter.com/xhacker" target="_blank">@xhacker</a>
+made: Lovingly made by <a href="https://twitter.com/xhacker" target="_blank">@xhacker</a>, <a href="https://twitter.com/aquarhead" target="_blank">@aquarhead</a> and <a href="https://twitter.com/Ceecirno" target="_blank">@Cee</a>
 copyright: © 2016 <a href="/">Ela Workshop</a>
 ---
 
 <h1>
     <p class="main">One Clock</p>
-    <p class="sub">All your time zones, in One Clock.</p>
+    <p class="sub">One Clock to rule them all.</p>
 </h1>
 
 <img class="screenshot" src="/images/oneclock/screenshot.png" alt="Screenshot" width="415">
 
 <img class="screenshot" src="/images/oneclock/screenshot-dark.png" alt="Screenshot Dark" width="415">
 
-<p class="coming">Coming soon™</p>
+<p class="coming"><a href="https://rink.hockeyapp.net/apps/e718f0d66a5e4070897854315657b48a">Coming soon™</a></p>