Added the shiny.

disconnectme · Apr 19, 2011 · b74d179 · b74d179
1 parent a0ef6b9
commit b74d179
Show file tree

Hide file tree

Showing 11 changed files with 825 additions and 163 deletions.
diff --git a/COPYING.txt b/COPYING.txt
diff --git a/chrome.png b/chrome.png
diff --git a/disconnect.png b/disconnect.png
diff --git a/ie.png → facebook.png b/ie.png → facebook.png
diff --git a/firefox.png b/firefox.png
diff --git a/safari.png → github.png b/safari.png → github.png
diff --git a/index.css b/index.css
@@ -1,126 +1,113 @@
 /*
-  The style sheet for disconnectere.com.
+  The style sheet for disconnect.me.
 
-  Copyright 2010 Brian Kennish
+  Copyright 2010, 2011 Disconnect, Inc.
 
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License. You may obtain a copy of
-  the License at
+  This program is free software: you can redistribute it and/or modify it under
+  the terms of the GNU General Public License as published by the Free Software
+  Foundation, either version 3 of the License, or (at your option) any later
+  version.
 
-    http://www.apache.org/licenses/LICENSE-2.0
+  This program is distributed in the hope that it will be useful, but WITHOUT
+  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+  FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-  License for the specific language governing permissions and limitations under
-  the License.
+  You should have received a copy of the GNU General Public License along with
+  this program. If not, see <http://www.gnu.org/licenses/>.
 
   Brian Kennish <byoogle@gmail.com>
 */
-body, #mc-embedded-subscribe, :link, a:active, :visited { color: white }
-
 body, input { font-family: 'Lucida Sans', Tahoma, Verdana, sans-serif }
 
 body {
   margin: 0;
-  background: #6d84b3;
-  text-shadow: 1px 1px 0 #3c5a98
+  color: #333
 }
 
 #header, .name, input { font-size: 20px }
 
 #header {
-  background: #3c5a98;
+  background: #edeff4;
   height: 200px
 }
 
-.content, #footer { width: 840px }
-    /* The footer has to have layout for the drop shadow to render. */
-
 .content {
   margin: auto;
-  padding-right: 50px
+  padding-right: 50px;
+  width: 840px
 }
 
-#header img { float: left }
+#header .content, .feature, #installation, #footer { text-align: center }
 
-#header .name { font-size: 64px }
+#header .description, #footer img { margin-top: 4px }
 
-#header .description, #next a { color: #d2dbed }
-
-#features { margin: -32px 0 0 16px }
+#features { margin: -40px 0 0 16px }
 
 .feature,
 .feature .description,
 #installation,
 #installation a,
 #installation .description,
-#subscription,
-#next { display: inline-block }
-
-.feature, #installation, #footer { text-align: center }
+#subscription { display: inline-block }
 
 .feature img {
-  border: 1px solid #3c5a98;
+  border: 1px solid #e5eaf1;
   width: 160px;
   height: 120px
 }
 
-.feature .description, #footer, #next {
-  filter: dropshadow(offx=1, offy=1, color=#3c5a98)
-}
+.feature .description, .note, #footer { font-size: small }
 
 .feature .description { width: 200px }
 
-#installation, #installation .description, #subscription img, #footer img {
-  vertical-align: top
-}
+#actions { margin-left: 32px }
 
-#installation { margin-left: 32px }
+#installation, #footer img { vertical-align: top }
 
 #installation a, #subscription {
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
-  color: black;
-  text-shadow: none
+  width: 366px
 }
 
-#installation a, #mc-embedded-subscribe { cursor: pointer }
+#installation a, input { margin: 8px 0 }
+
+#installation a, .ghosted { color: graytext }
 
 #installation a {
-  border: 1px solid #fc3;
-  background: #ffc;
+  border: 1px solid #c9c7ba;
+  background: #f5f4ea;
   padding: 4px;
-  width: 360px;
+  height: 64px;
   text-decoration: none
 }
 
-#installation .description { margin-right: 4px }
+#installation .activated, #subscription { color: black }
 
-a img { border: none }
-
-#subscription, .email { border: 1px solid #739be2 }
+#installation .activated {
+  border: 1px solid #fc0;
+  background: #fe8
+}
 
 #subscription, input { padding: 8px }
 
+#subscription, .email { border: 1px solid #93b4d9 }
+
 #subscription {
   margin-left: 20px;
-  background: #f3f7fc;
-  width: 380px
+  background: #cadef4
 }
 
-input { margin: 8px 0 }
-
-.email { width: 240px }
-
-.ghosted { color: graytext }
+.email { width: 226px }
 
 #mc-embedded-subscribe {
   float: right;
   border: 1px solid #9b001d;
   border-radius: 4px;
   -moz-border-radius: 4px;
-  background: #d42014
+  background: #d42014;
+  color: white;
+  cursor: pointer
 }
 
 .ie {
@@ -135,20 +122,12 @@ span.mce_inline_error, .response {
 
 span.mce_inline_error, #mce-error-response { color: maroon }
 
-.response, #next { display: none }
+.response { display: none }
 
 #mce-success-response { color: green }
 
-.note, #footer { font-size: small }
-
 #footer a { vertical-align: bottom }
 
-#footer img { margin-top: 4px }
+#footer :link, #footer a:active, #footer :visited { color: #003ea8 }
 
-#next {
-  position: relative;
-  left: 320px;
-  bottom: 36px;
-  width: 100px
-      /* The element has to have layout for the drop shadow to render. */
-}
+#footer img { border: none }
diff --git a/index.html b/index.html
@@ -5,21 +5,21 @@
   "http://www.w3.org/TR/html4/strict.dtd"
 >
 <!--
-  The markup for disconnectere.com.
+  The markup for disconnect.me.
 
-  Copyright 2010 Brian Kennish
+  Copyright 2010, 2011 Disconnect, Inc.
 
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License. You may obtain a copy of
-  the License at
+  This program is free software: you can redistribute it and/or modify it under
+  the terms of the GNU General Public License as published by the Free Software
+  Foundation, either version 3 of the License, or (at your option) any later
+  version.
 
-    http://www.apache.org/licenses/LICENSE-2.0
+  This program is distributed in the hope that it will be useful, but WITHOUT
+  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+  FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-  License for the specific language governing permissions and limitations under
-  the License.
+  You should have received a copy of the GNU General Public License along with
+  this program. If not, see <http://www.gnu.org/licenses/>.
 
   Brian Kennish <byoogle@gmail.com>
 -->
@@ -42,10 +42,10 @@
       <div class="content">
         <br>
         <img src="disconnect.png" alt="Disconnect">
-        <span class="name">Disconnect</span>
         <div class="description">
-          A browser extension that stops major third parties and search engines
-          from tracking the webpages you go to and searches you do
+          A browser extension that stops major third parties and search
+          <br>
+          engines from tracking the webpages you go to and searches you do
         </div>
       </div>
     </div>
@@ -57,15 +57,15 @@
             href="webpage-unlabeled.png"
           ><img src="webpage-unlabeled.png" alt="Webpage"></a>
           <br>
-          <span class="description">Disables tracking</span>
+          <span class="description">Disables third-party tracking</span>
         </span>
         <span class="feature">
           <a
             title="Truly depersonalizes searches"
             href="search-unlabeled.png"
           ><img src="search-unlabeled.png" alt="Search"></a>
           <br>
-          <span class="description">Depersonalizes searches</span>
+          <span class="description">Truly depersonalizes searches</span>
         </span>
         <span class="feature">
           <a
@@ -97,30 +97,17 @@
             <span id="installation">
               <br>
               <br>
-              <a
-                tabindex="1"
-                href="https://chrome.google.com/extensions/detail/jeoacafpbcihiomhlakheieifhpjdfeo"
-              >
-                <span class="description">
-                  <br>
-                  Get details and install for
-                  <br>
-                  <span class="name">Chrome</span>
-                  or
-                  <span class="name">RockMelt</span>
-                </span>
-                <img src="chrome.png" alt="Chrome">
-                <img src="rockmelt.png" alt="RockMelt">
+              <a>
+                <span class="description"></span>
               </a>
+              <br>
+              <span class="note">
+                Disconnect is available for Chrome and Safari
+              </span>
             </span>
             <span id="subscription">
-              Learn more about online privacy and protecting yourself and find
-              out when other browsers are supported by subscribing to the
-              <br>
+              Learn more about how to control your data by subscribing to the
               <span class="name">Disconnect Newsletter</span>
-              <img src="ie.png" alt="Internet Explorer">
-              <img src="firefox.png" alt="Firefox">
-              <img src="safari.png" alt="Safari">
               <span class="mc-field-group">
                 <!--
                   The controls are flipped because MailChimp sometimes inserts
@@ -131,13 +118,13 @@
                   id="mc-embedded-subscribe"
                   name="subscribe"
                   value="Subscribe"
-                  tabindex="3"
+                  tabindex="2"
                 >
                 <input
                   class="email required"
                   id="mce-EMAIL"
                   name="EMAIL"
-                  tabindex="2"
+                  tabindex="1"
                 >
               </span>
               <span id="mce-responses">
@@ -146,7 +133,7 @@
               </span>
               <br>
               <span class="note">
-                You can unsubscribe anytime and your information won’t be sold
+                You can unsubscribe anytime and your email address won’t be sold
                 or shared, ever
               </span>
             </span>
@@ -155,26 +142,31 @@
       </div>
       <div id="footer">
         <p>
-          Disconnect is
-          <a
-            href="http://code.google.com/p/byoogle/source/browse/trunk/google/chrome/disconnect/"
-          >open-source software</a>
+          We don’t collect your personal
+          <br>
+          information unless you tell us to
         </p>
-        Copyright 2010 Brian Kennish
+        Copyright 2010, 2011 Disconnect, Inc.
         <br>
         <a
-          href="http://byoogle.blogspot.com/"
-        ><img src="blogger.png" alt="Blogger"></a>
-        <a href="http://byoogle.blogspot.com/">My blog</a>
+          href="https://www.facebook.com/disconnectere"
+        ><img src="facebook.png" alt="Facebook"></a>
+        <a href="https://www.facebook.com/disconnectere">Facebook page</a>
         <a
-          href="http://twitter.com/byoogle"
+          href="https://twitter.com/disconnectme"
         ><img src="twitter.png" alt="Twitter"></a>
-        <a href="http://twitter.com/byoogle">Me on Twitter</a>
+        <a href="https://twitter.com/disconnectme">Twitter profile</a>
         <br>
-        <span id="next">
-          <a href="press.html"><img src="press.png" alt="Press"></a>
-          <a href="press.html">Press kit</a>
-        </span>
+        <a
+          href="http://byoogle.blogspot.com/"
+        ><img src="blogger.png" alt="Blogger"></a>
+        <a href="http://byoogle.blogspot.com/">Brian’s blog</a>
+        <a
+          href="https://code.google.com/p/byoogle/source/browse/trunk/google/chrome/disconnect/"
+        ><img src="github.png" alt="GitHub"></a>
+        <a
+          href="https://code.google.com/p/byoogle/source/browse/trunk/google/chrome/disconnect/"
+        >Source code</a>
       </div>
     </div>
   </body>