improve landing page

otiai10 · Mar 26, 2013 · ad6d6d5 · ad6d6d5
1 parent ae65153
commit ad6d6d5
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 22 deletions.
diff --git a/public/images/exp.png b/public/images/exp.png
diff --git a/public/images/man.png b/public/images/man.png
diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
@@ -36,3 +36,13 @@ div#indicator {
     height: 2px;
 }
 
+p.lead.landing {
+  font-size: 3em;
+  line-height: 3em;
+  text-shadow: 0 2px 0 white;
+}
+
+p.notice {
+  font-size: 0.5em;
+  color: #666;
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -27,27 +27,35 @@
     <% if(!session.user_profile){ %>
     <!-- this is not-logined visit -->
       <div class="inline_center">
+        <div class="img-container">
+          <div class="img-exp">
+            <img src="/images/exp.png">
+          </div>
+          <div class="img-man">
+            <img src="/images/man.png">
+          </div>
+        </div>
+        <p class="lead landing">
+          いつも聞いてるプレイリストに<br>
+          一曲だけ偶然の出会いを
+        </p>
         <a id="signin_first" class="btn btn-large btn-info" href="/auth/twitter"><b>Sign in with twitter</b></a>
-        <br>
-        <br>
+        <div>
+          <p class="notice">
+            ※ プレイリスト管理用にのみ使用します<br>
+            ※ 自動的なTLへの投稿はありません
+          </p>
+        </div>
         <!-- Button to trigger modal -->
-        <a id="foot_title" href="#myModal" role="button" class="footer" data-toggle="modal">What is "SoundHook"?</a>
+        <a id="foot_title" href="#myModal" role="button" class="footer" data-toggle="modal">もっとくわしく</a>
         <!-- Modal -->
         <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-header" style="text-align:left">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
             <h3 id="myModalLabel" class="lead"><b>Introductions</b></h3>
           </div>
           <div class="modal-body" style="text-align:left"> 
-            <p class="lead">流動的BGMメーカー、SoundHookちゃんですぞ！</p>
-            <ul>
-              <li>Youtubeに転がってる曲で自分だけのプレイリストを作れます</li>
-              <li>作業用BGMとして聞き流していると、ときどき知らない曲が紛れ込んできたりします</li>
-              <li>「いいかもー」と思ったらその場で"Hook"(フック)してプレイリストに取り込めます</li>
-              <li>ひまなときは「Radio Mode」で知らない曲ばっかり聞いてみると良い出会いがあったりなかったり</li>
-              <li><img id="in_modal_thumbnail" src="images/soundhook.png"> - <a href="https://twitter.com/sound_hook" target="_blank">@sound_hook</a> on Twitter</li>
-            </ul>
-            <small>Copyright otiai10 All right reserved</small>
+            <%- partial('partials/modal.inc.ejs') %>
           </div><!--/.modal-body -->
           <div class="modal-footer">
             <a href="http://otiai10.com/products/soundhook/" target="_blank">More about soundhoook?</a>

diff --git a/views/layout.ejs b/views/layout.ejs
@@ -68,15 +68,7 @@
         <h3 id="myModalLabel" class="lead"><b>Introductions</b></h3>
       </div><!-- /.modal-header -->
       <div class="modal-body">
-        <p class="lead">流動的BGMメーカー、SoundHookちゃんですぞ！</p>
-        <ul>
-          <li>Youtubeに転がってる曲で自分だけのプレイリストを作れます</li>
-          <li>作業用BGMとして聞き流していると、ときどき知らない曲が紛れ込んできたりします</li>
-          <li>「いいかもー」と思ったらその場で"Hook"(フック)してプレイリストに取り込めます</li>
-          <li>ひまなときは「Radio Mode」で知らない曲ばっかり聞いてみると良い出会いがあったりなかったり</li>
-          <li><img id="in_modal_thumbnail" src="images/soundhook.png"> - <a href="https://twitter.com/sound_hook" target="_blank">@sound_hook</a> on Twitter</li>
-        </ul>
-        <small>Copyright otiai10 All right reserved</small>
+        <%- partial('partials/modal.inc.ejs') %>
       </div><!-- /.modal-body -->
       <div class="modal-footer">
         <a href="http://otiai10.com/products/soundhook/" target="_blank">More about soundhoook</a>

diff --git a/views/partials/header.inc.ejs b/views/partials/header.inc.ejs
@@ -4,7 +4,7 @@
   <div class="navbar fill">
     <div class="navbar-inner">
       <div class="contents">
-        <a class="brand" href="<%=rurl%>"><span class="lead um">SoundHook  <small>ver0.9.7</small></span></a>
+        <a class="brand" href="<%=rurl%>"><span class="lead um">SoundHook  <small>ver0.9.8</small></span></a>
         <small>Reserved-space:</small>
         <ul class="nav pull-right">
           <% if(session.user_profile){ %>

diff --git a/views/partials/modal.inc.ejs b/views/partials/modal.inc.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<p class="lead">いつも聞いてるプレイリストに一曲だけ偶然の出会いを</p>
+<ul>
+  <li>Youtubeに転がってる曲で自分だけのプレイリストを作れます</li>
+  <li>ランダムで知らない曲が紛れ込んできたりします</li>
+  <li>いいかもーと思ったらその場で"Hook"(フック)してプレイリストに取り込めます</li>
+  <li>ひまなときはRadio Modeで知らない曲ばっかり聞いてみると良い出会いがあったりなかったり</li>
+  <li><img id="in_modal_thumbnail" src="images/soundhook.png"> - <a href="https://twitter.com/sound_hook" target="_blank">@sound_hook</a> on Twitter</li>
+</ul>
+<small>Copyright otiai10 All right reserved</small>