marketing, etc

app/assets/javascripts/application.js

@@ -8,3 +8,5 @@
 //= require jquery_ujs
 //= require pjax
 //= require active_scaffold
+//= require slides
+//= require_self

app/assets/stylesheets/application.css

@@ -5,7 +5,9 @@
 *= require normalize
 *= require theme/base
 *= require web-app-theme/themes/default/style.css
+*= require marketing
 *= require active_scaffold
 *= require overrides
+*= require slides
 *= require_self
 */

app/assets/stylesheets/marketing.css.scss

@@ -0,0 +1,85 @@
+@import "compass/css3/gradient";
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+
+@mixin slick-black {
+    @include background(
+    image-url("marketing/action/slick-black.png"),
+    linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%));
+    border: 0;
+    @include border-radius(4px);
+    @include box-shadow(inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1));
+    color: #fff;
+    line-height: 1;
+    padding: 8px 0;
+    text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
+    
+    &:hover {
+        @include background(
+        image-url("marketing/action/slick-black-hover.png"),
+        linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%));
+        cursor: pointer;
+    }
+    
+    &:active {
+        @include background(
+        image-url("marketing/action/slick-black-hover.png"),
+        linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%));
+    }
+}
+
+.marketing .header-inner {
+    width: 77%;
+    margin: auto;
+    position: relative;
+}
+
+#main.marketing-main {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    
+    .block .content .marketing-inner {
+        padding: 0 30px 30px;
+        p {
+            line-height: 1em;
+            color: #555;
+        }
+    }
+    
+    .marketing-text {
+        padding-right: 20px;
+    }
+    .marketing-images {
+        padding-left: 20px;
+    }
+    
+    h1 {
+        text-transform: uppercase;
+        font-size: 34px;
+    }
+    
+    li {
+        font-size: 16px;
+    }
+    
+    .action {
+        padding: 0 20px 20px 20px;
+        button {
+            @include slick-black;
+            width: 300px;
+            height: 60px;
+            margin: auto;
+            display: block;
+            font-family: "MuseoSans500", helvetica, arial, sans-serif;
+            strong {
+                font-size: 18px;
+                font-weight: bold;
+            }
+            em {
+                font-size: 13px;
+                font-weight: normal;
+            }
+        }
+    }
+}

app/assets/stylesheets/overrides.css.erb

@@ -1,3 +1,7 @@
+#main .block .content p {
+  font-size: 16px;
+}
+
 #main .block .content h2 {
   margin-left: 0;
 }

app/assets/stylesheets/slides.css.erb

@@ -0,0 +1,85 @@
+#slidesWrapper {
+width:470px;
+position:relative;
+margin-right: 20px;
+}
+
+#slides {
+position:relative;
+}
+
+#slides .slidesContainer {
+background:#fff;
+border:8px solid #fff;
+margin-left:-8px;
+box-shadow: 0 2.5px 5px rgba(0,0,0,.6);
+}
+
+/*
+Next/prev buttons
+*/
+
+#slides .slidesNext,#slides .slidesPrevious {
+position:absolute;
+top:134px;
+left:-40px;
+width:24px;
+height:0;
+padding-top:32px;
+display:block;
+z-index:101;
+overflow:hidden;
+background:url(<%= image_path 'slides/navigation-previous.png' %>) no-repeat 0 0;
+}
+
+#slides .slidesNext {
+left:488px;
+background:url(<%= image_path 'slides/navigation-next.png' %>) no-repeat 0 0;
+}
+
+/*
+Pagination
+*/
+
+.slidesPagination {
+margin-top: 10px;
+position: relative;
+width: 100px;
+margin-left: auto;
+margin-right: auto;
+}
+
+.slidesPagination li {
+float:left;
+margin:0 1px;
+list-style:none;
+}
+
+.slidesPagination li a {
+display:block;
+width:14px;
+height:0;
+padding-top:14px;
+background-image:url(<%= image_path 'slides/pagination.png' %>);
+background-position:0 0;
+overflow:hidden;
+}
+
+.slidesPagination li.slidesCurrent a {
+background-position:0 -14px;
+}
+
+.current_slide {
+font:bold 10px/1.33 sans-serif;
+float:left;
+margin-top:12px;
+}
+
+.controls {
+display:block;
+margin-top:12px;
+float:left;
+color:#333;
+font:bold 10px/1.33 sans-serif;
+margin-right:10px;
+}

app/assets/stylesheets/theme/base.css

@@ -18,16 +18,16 @@
 .wat-cf {display: block;}
 /* End hide from IE-mac */
 
-h1 { margin: 15px 0; font-size: 22px; font-weight: normal; }
+h1 { font-size: 30px; margin: 15px 0; font-weight: normal; }
-h2 { font-size: 22px; margin: 15px 0; font-weight: normal;}
+h2 { font-size: 24px; margin: 15px 0; font-weight: normal;}
-h3 { font-size: 18px; margin: 10px 0; font-weight: normal;}
+h3 { font-size: 20px; margin: 10px 0; font-weight: normal;}
-h4 { font-size: 16px; margin: 10px 0; font-weight: normal;}
+h4 { font-size: 18px; margin: 10px 0; font-weight: normal;}
 hr {height: 1px; border: 0; }
 p { margin: 15px 0;}
 a img { border: none; }
 
 body {
-  font-size: 12px;
+  font-size: 16px;
   font-family: sans-serif;  
 }
 

app/controllers/domains_controller.rb

@@ -1,4 +1,6 @@
 class DomainsController < ApplicationController
+  
+  begin
   active_scaffold :domain do |conf|
     conf.columns = [:name, :records]
     conf.create.columns = [:name]
@@ -6,6 +8,10 @@ class DomainsController < ApplicationController
     conf.actions.exclude :show
     conf.list.sorting = { :name => :asc }
   end
+  rescue => e
+    puts e.backtrace
+    raise e
+  end
   
   protected
   

app/views/fragments/_top.html.erb

@@ -1,28 +1,32 @@
 <div id="header">
-  <h1><a href="/">Simple DNS</a></h1>
+  <div class="header-inner">
-  <div id="main-navigation">
+    <h1><a href="/">Simple DNS</a></h1>
-    <ul class="wat-cf">
+    <div id="main-navigation">
-      <% if user_signed_in? %>
+      <ul class="wat-cf">
-        <li><%= link_to('Dashboard', dashboard_path, :data => {:pjax => '#main'}) %></li>
+        <% if user_signed_in? %>
-        <li><%= link_to 'Domains', domains_path, :data => {:pjax => '#main'} %></li>
+          <li><%= link_to('Dashboard', dashboard_path, :data => {:pjax => '#main'}) %></li>
-      <% else %>
+          <li><%= link_to 'Domains', domains_path, :data => {:pjax => '#main'} %></li>
-        <li><%= link_to('Home', root_path, :data => {:pjax => '#main'}) %></li>
+          <li><%= link_to('Help & Support', root_path, :data => {:pjax => '#main'}) %></li>
-        <li><%= link_to('About', root_path, :data => {:pjax => '#main'}) %></li>
+        <% else %>
-      <% end %>
+          <li><%= link_to('Home', root_path, :data => {:pjax => '#main'}) %></li>
-    </ul>
+          <li><%= link_to('About us', root_path, :data => {:pjax => '#main'}) %></li>
-  </div>
+          <li><%= link_to('Help & Support', root_path, :data => {:pjax => '#main'}) %></li>
-  <div id="user-navigation">
+        <% end %>
-    <ul class="wat-cf">
+      </ul>
-      <% if user_signed_in? %>
+    </div>
-        <li><%= link_to(current_user.email, edit_user_registration_path, :data => {:pjax => '#main'}) %></li>
+    <div id="user-navigation">
-        <li><%= link_to('Sign out', destroy_user_session_path, :method => :delete) %></li>
+      <ul class="wat-cf">
-      <% else %>
+        <% if user_signed_in? %>
-        <li><%= link_to('Sign up', new_user_registration_path, :data => {:pjax => '#main'}) %></li>
+          <li><%= link_to(current_user.email, edit_user_registration_path, :data => {:pjax => '#main'}) %></li>
-        <li><%= link_to('Sign in', new_user_session_path, :data => {:pjax => '#main'}) %></li>
+          <li><%= link_to('Sign out', destroy_user_session_path, :method => :delete) %></li>
-      <% end %>
+        <% else %>
-    </ul>
+          <li><%= link_to('Sign up', new_user_registration_path, :data => {:pjax => '#main'}) %></li>
-  </div>
+          <li><%= link_to('Sign in', new_user_session_path, :data => {:pjax => '#main'}) %></li>
-  <div id="main-navigation">
+        <% end %>
-    <ul class="wat-cf"></ul>
+      </ul>
+    </div>
+    <div id="main-navigation">
+      <ul class="wat-cf"></ul>
+    </div>
   </div>
 </div>

app/views/home/_headlines.html.erb

@@ -0,0 +1,33 @@
+<h2>Free, no hassle service you can use right away</h2>
+
+<p>
+  We're System Administrators who built Simple DNS to fill our own needs.
+  We know how important is to have a reliable DNS service that you can
+  configure in no time, and we'd like to show how you too can take advantage of it.
+</p>
+
+<ul>
+  <li>
+    Simple, intuitive interface you can use right away
+  </li>
+  <li>
+    Friendly and reliable support you can count on
+  </li>
+  <li>
+    Global infrastructure using fast and secure systems
+  </li>
+  <li>
+    Full offsite backup, daily
+  </li>
+</ul>
+
+<div class="action">
+
+  <%= link_to new_user_registration_path, :style => 'text-decoration: none' do %>
+    <button>
+      <strong>Create an Account Now</strong><br>
+      <em>It's free, sign up in 60 seconds.</em>
+    </button>
+  <% end %>
+
+</div>

app/views/home/_slides.html.erb

@@ -0,0 +1,21 @@
+<div id="slidesWrapper">
+  <div id="slides">
+    <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg">
+    <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg">
+    <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg">
+    <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg">
+  </div>
+</div>
+
+<script type="text/javascript">
+  $("#slides")
+    .slides({
+      width: 470,
+      navigation: false,
+      //responsive: true,
+      slide: {
+        interval: 500
+      }
+    })
+    .slides('play');
+</script>

app/views/home/index.html.erb

@@ -1,16 +1,20 @@
+<div class="block">
+  <div class="content">
+    <div class="inner marketing-inner">
 
-<p>Marketing ...</p>
+      <h1>A DNS service created by sysadmins for sysadmins</h1>
 
-<p>
+      <table>
-  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
+        <tr>
-  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
+          <td class="marketing-text">
-  veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
+            <%= render :partial => 'headlines' %>
-  voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
+          </td>
-  magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam 
+          <td class="marketing-images">
-  est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed 
+            <%= render :partial => 'slides' %>
-  quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam 
+          </td>
-  quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam 
+        </tr>
-  corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis 
+      </table>
-  autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
+
-  molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </div>
-</p>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -14,11 +14,6 @@
         <%= flash_display 'flash' %>
         <div id="main" style="width: 100%;">
           <div class="block">
-            <div class="secondary-navigation">
-              <ul class="wat-cf">
-                <li><a href="#">&nbsp;</a></li>
-              </ul>
-            </div>
             <div class="content">
               <div class="inner" data-pjax-container="true">
                 <%= yield %>

app/views/layouts/marketing.html.erb

@@ -6,13 +6,13 @@
     <%= javascript_include_tag "application" %>
     <%= csrf_meta_tag %>
   </head>
-  <body>
+  <body class="marketing">
 
     <div id="container">
       <%= render :partial => 'fragments/top' %>
       <div id="wrapper" class="wat-cf">
         <%= flash_display 'flash' %>
-        <div id="main" style="width: 100%;" data-pjax-container="true">
+        <div id="main" class="marketing-main" data-pjax-container="true">
           <%= yield %>
         </div>
       </div>