Add theme selector

10 years ago · 775ef96cf2
36 changed files with 2002 additions and 14 deletions
--- a/abort.html
+++ b/abort.html
@ -3,7 +3,18 @@
				@@ -3,7 +3,18 @@
  <head>
    <meta charset="utf-8"/>
    <title>Aborting...</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="jquery.min.js"></script>
    <script src="jQueryPlugins.js"></script>
    <script src="jquery.json-2.4.js"></script>
--- a/css/img/ajax-loader.gif
+++ b/css/img/ajax-loader.gif
--- a/css/img/config.png
+++ b/css/img/config.png
--- a/css/img/connections.png
+++ b/css/img/connections.png
--- a/css/img/edit.png
+++ b/css/img/edit.png
--- a/css/img/genericPerson.png
+++ b/css/img/genericPerson.png
--- a/css/img/grayed_avatar_placeholder_24.png
+++ b/css/img/grayed_avatar_placeholder_24.png
--- a/css/img/home.png
+++ b/css/img/home.png
--- a/css/img/icons-18-black.png
+++ b/css/img/icons-18-black.png
--- a/css/img/icons-18-white.png
+++ b/css/img/icons-18-white.png
--- a/css/img/icons-36-black.png
+++ b/css/img/icons-36-black.png
--- a/css/img/icons-36-white.png
+++ b/css/img/icons-36-white.png
--- a/css/img/loader.gif
+++ b/css/img/loader.gif
--- a/css/img/messages.png
+++ b/css/img/messages.png
--- a/css/img/network.png
+++ b/css/img/network.png
--- a/css/img/profile.png
+++ b/css/img/profile.png
--- a/css/img/reply.png
+++ b/css/img/reply.png
--- a/css/img/repost.png
+++ b/css/img/repost.png
--- a/css/img/spinner-medium.gif
+++ b/css/img/spinner-medium.gif
--- a/css/img/spinner-small.gif
+++ b/css/img/spinner-small.gif
--- a/css/img/spinner.gif
+++ b/css/img/spinner.gif
--- a/css/img/tornado_avatar.png
+++ b/css/img/tornado_avatar.png
--- a/css/img/twister_mini.png
+++ b/css/img/twister_mini.png
--- a/css/img/wash-white-30.png
+++ b/css/img/wash-white-30.png
--- a/css/orange/OpenSans-Bold.ttf
+++ b/css/orange/OpenSans-Bold.ttf
--- a/css/orange/OpenSans-Italic.ttf
+++ b/css/orange/OpenSans-Italic.ttf
--- a/css/orange/OpenSans-Regular.ttf
+++ b/css/orange/OpenSans-Regular.ttf
--- a/css/orange/OpenSansCondensed300.ttf
+++ b/css/orange/OpenSansCondensed300.ttf
--- a/css/orange/profile.css
+++ b/css/orange/profile.css
@ -0,0 +1,238 @@
				@@ -0,0 +1,238 @@
+/**************************************
+********************* PROFILE PHOTO ***
+***************************************/
+.profile-card
+{
+    padding: 7px;
+    background: rgba( 255, 255, 255, .5 );
+    border: solid 1px rgba( 69, 71, 77, .05 );
+    position: relative;
+}
+.profile-card-main
+{
+    width: 540px;
+    text-align: center;
+    position: relative;
+    transition: all .2s linear;
+}
+.profile-card-main:before
+{
+    content: "";
+    border: solid 0px #fff;
+    transition: all .2s linear;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    z-index: 0;
+}
+.profile-card-main *
+{
+    position: relative;
+    z-index: 1;
+}
+.profile-card-photo
+{
+    width: 74px;
+    height: 74px;
+    border: solid 6px #45474d;
+    border-radius: 40%;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    box-sizing: content-box;
+    float:left;
+    top: 50%;
+    background-color: #a12a28;
+
+}
+.profile-card-main h1
+{
+    font-size: 24px;
+    font-weight: bold;
+    color: #fff;
+}
+.profile-card-main h2
+{
+    color: #fff;    
+}
+.profile-card .direct-messages,
+.profile-card .direct-messages-with-user,
+.profile-card .follow
+{
+    display: block;
+    position: absolute;
+    bottom: 20px;
+    right: 10px;
+    padding: 10px;
+    font-size: 12px;
+    width: 120px;
+    text-align: center;
+    color: rgba( 0, 0, 0, .7 );
+    background: rgba( 0, 0, 0, .1 );
+    border: none;
+    transition: all .2s linear;
+}
+.profile-card .follow
+{
+    right: 135px;
+}
+.profile-card .direct-messages:hover,
+.profile-card .direct-messages-with-user:hover,
+.profile-card .follow:hover
+{
+    background: rgba( 0, 0, 0, .3 );
+}
+.profile-card.forEdition
+{
+    margin: 0 auto;
+    width: 540px;
+}
+.forEdition .profile-card-photo
+{
+    border: solid 2px #fff;
+    position: relative;
+    cursor: pointer;
+    transition: all .2s linear;
+}
+.forEdition .profile-card-main:hover:after,
+.forEdition .profile-card-photo:after
+{
+    content: "";
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: url(../img/edit.png) no-repeat right top;
+}
+.forEdition .profile-card-main:hover:before
+{
+    border: solid 5px #fff;
+}
+.forEdition .profile-card-main h2
+{
+    margin-bottom: 8px;
+}
+.forEdition .profile-card-main input
+{
+    display: block;
+    margin: 0 auto;
+    background: rgba( 0, 0, 0, .1 );
+    border: none;
+    padding: 6px 4px;
+    color: #fff;
+    margin-bottom: 4px;
+    text-align: center;
+    transition: all .2s linear;
+}
+.forEdition .profile-card-main input:hover,
+.forEdition .profile-card-main input:focus,
+.forEdition .profile-card-photo:hover
+{
+    background: rgba( 0, 0, 0, .3 );    
+}
+.input-description
+{
+    width: 90%;
+}
+.input-name
+{
+    font-size: 20px;
+}
+.forEdition .profile-card-main .input-website,
+.forEdition .profile-card-main .input-city
+{
+    display: inline-block;
+}
+.profile-edition-buttons
+{
+    padding: 10px;
+    text-align: right;
+}
+/*************************************
+****************** PROFILE MODAL
+**************************************/
+.profile-modal .modal-wrapper
+{
+    width: 580px;
+    border-radius: 5px;
+    overflow: hidden;
+    position: absolute;
+    top:10%;
+    height: 80%;
+    margin-left: -300px;
+
+}
+.profile-modal .modal-content
+{
+    padding: 3px;
+    height: 90%;
+}
+.profile-modal .profile-data
+{
+    display: inline-block;
+    margin-left: -4px;
+    border-bottom: 0;
+}
+.profile-modal .postboard
+{
+    margin-left: 0;
+    padding: 5px 0 5px 0;
+    height: 75%;
+}
+.profile-modal .postboard h2
+{
+    width: auto;
+}
+.profile-modal .postboard-posts
+{
+    display: block;
+    height: 90%;
+    overflow: auto;
+}
+.profile-modal .profile-card-main
+{
+    background: #45474d;
+    color: white;
+    width:100%;
+}
+.profile-modal .profile-card-main a {
+    color: #8bb9e0;
+}
+.profile-modal .postboard-posts .post
+{
+    padding: 0;
+}
+.profile-modal .post-interactions
+{
+    margin: 2px 10px 3px 60px;
+}
+.profile-modal .profile-card
+{
+    margin: 0;
+    padding: 0;
+}
+/*
+.profile-card-main
+{
+    height: 200px;
+}
+*/
+.profile-modal .direct-messages,
+.profile-modal .direct-messages-with-user,
+.profile-modal .follow
+{
+    bottom: 10px;
+}
+
+h1.profile-name {
+    display: inline;
+}
+h2.profile-screen-name {
+    display: inline;
+}
+
+.profile-modal .modal-buttons {
+   display: none;
+}
--- a/css/orange/style.css
+++ b/css/orange/style.css
--- a/following.html
+++ b/following.html
@ -3,8 +3,18 @@
				@@ -3,8 +3,18 @@
  <head>
    <meta charset="utf-8"/>
    <title>Following</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
-    <link rel="stylesheet" href="css/profile.css" type="text/css"/>
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jQueryPlugins.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
--- a/home.html
+++ b/home.html
@ -3,9 +3,6 @@
				@@ -3,9 +3,6 @@
  <head>
    <meta charset="utf-8"/>
    <title>twister</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
-    <link rel="stylesheet" href="css/profile.css" type="text/css"/>
-    <link rel="stylesheet" href="jquery-emotions/jquery.emotions.calm.css" type="text/css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/jQueryPlugins.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
@ -30,6 +27,20 @@
				@@ -30,6 +27,20 @@
    <script src="js/calm.js"></script>
    <script src="js/options.js"></script>
    <script src="jquery-emotions/jquery.emotions.js"></script>
+    <script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+$(".userMenu-dhtindicator").hide();
+}
+
+    </script>
    <script>$(function(){setInterval("networkUpdate()", 2000); homeIntInit ();})</script>

    <link rel="icon" type="image/png" href="img/twister_mini.png" />
@ -37,7 +48,8 @@
				@@ -37,7 +48,8 @@

  <body>
    
-  <!-- MENU SUPERIOR INIT --> 
+  <!-- MENU SUPERIOR INIT CALM--> 
+  <div style="display:none" class="calm_menu">
  <nav class="userMenu">
    <ul>
      <li class="userMenu-home"><a href="#"></a></li>
@ -93,7 +105,75 @@
				@@ -93,7 +105,75 @@

    </ul>
  </nav>
-  <!-- MENU SUPERIOR END -->
+  </div>
+    <!-- MENU SUPERIOR END -->
+   <!-- MENU SUPERIOR INIT ORIGINAL--> 
+   <div style="display:none" class="original_menu">
+  <nav class="userMenu">
+    <ul>
+      <li class="userMenu-home current"><a href="#">Home</a></li>
+      <li class="userMenu-network"><a href="network.html">Network</a></li>
+      <li class="userMenu-profile"><a href="profile-edit.html">Profile</a></li>
+      <li class="userMenu-config">
+        <a class="userMenu-config-dropdown" href="#">
+          <div class="config-menu dialog-modal">
+            <div class="mini-profile-info">
+              <div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
+              <a href="#" class="mini-profile-name">Fulano da Silva</a>
+              <span class="mini-profile-view">View</span>
+            </div>
+            <a class="dropdown-menu-item" href="options.html">Options</a>
+            <a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
+            <a class="dropdown-menu-item" href="following.html">Following users</a>
+            <a class="dropdown-menu-item" href="network.html">Network config</a>
+            <a class="dropdown-menu-item" href="login.html">Change user</a>
+            <a class="dropdown-menu-item promoted-posts-only" href="#">Switch to Promoted posts</a>
+            <a class="direct-messages dropdown-menu-item" href="#">Direct Messages</a>
+          </div>
+        </a>
+      </li>
+      <li class="userMenu-connections">
+        <a href="#">
+          <span class="messages-qtd" style="display:none;">12</span>
+        </a>
+      </li>
+      <li class="userMenu-messages">
+        <a href="#">
+          <span class="messages-qtd" style="display:none;">12</span>
+        </a>
+      </li>
+
+      <!-- BUSCA -->
+      <li class="userMenu-search">
+        <input type="text" class="userMenu-search-field" placeholder="search"/>
+        
+        <div class="search-results dialog-modal">
+          <ul class="userMenu-search-sugestions" style="display: none;">
+            <li><a href="#">Fulano</a></li>
+            <li><a href="#">Outro Fulano</a></li>
+            <li><a href="#">Mais outro</a></li>
+          </ul>
+          <ul class="userMenu-search-profiles">
+            <li id="search-profile-template" style="display: none;">
+              <div class="mini-profile-info" data-screen-name="">
+                <a href="#" class="open-profile-modal">
+                  <img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
+                  <span class="mini-screen-name">@<b></b></span>
+                  <span class="mini-profile-name"></span>
+                </a>
+                <button class="follow">Follow</button>
+              </div>
+            </li>
+          </ul>
+        </div>
+      
+      </li>
+    
+
+    </ul>
+  </nav></div>
+  <!-- MENU SUPERIOR END ORIGINAL-->
+


  <div class="wrapper">
@ -445,5 +525,15 @@
				@@ -445,5 +525,15 @@
  <!-- TEMPLATES END -->
  <audio id="player"></audio>
  <audio id="playerSec"></audio> 
+  <!-- hide elements -->
+ <script> 
+if (theme=='calm') {
+$(".calm_menu").show();   
+} else {
+$(".userMenu-dhtindicator").hide();
+$(".original_menu").show();   
+
+}
+</script>
  </body>
 </html>
--- a/login.html
+++ b/login.html
@ -3,7 +3,18 @@
				@@ -3,7 +3,18 @@
  <head>
    <meta charset="utf-8"/>
    <title>twister login</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jQueryPlugins.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
--- a/network.html
+++ b/network.html
@ -3,7 +3,18 @@
				@@ -3,7 +3,18 @@
  <head>
    <meta charset="utf-8"/>
    <title>Network status</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jQueryPlugins.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
--- a/options.html
+++ b/options.html
@ -3,7 +3,18 @@
				@@ -3,7 +3,18 @@
  <head>
    <meta charset="utf-8"/>
    <title>twister login</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jQueryPlugins.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
@ -22,6 +33,13 @@
				@@ -22,6 +33,13 @@
    <script>$(function(){
      initInterfaceCommon();
      InitOptions();})
+      
+    $(document).ready(function(){
+    $('#c_theme').change(function(){
+    localStorage.setItem('theme', $(this).val());
+    location.reload();
+    });
+	});
    </script>
  </head>

@ -114,7 +132,22 @@
				@@ -114,7 +132,22 @@
          </div>
        </div>
      </div>
-  </div>
+            <div class="Theme">
+        <div class="module">
+          <p> Theme </p>
+          <div> 

+              <select name="" id="c_theme">
+                <option value="calm">Calm</option>
+                <option value="original">Original</option>
+              </select>
+          </div>
+        </div>
+      </div>
+  </div>
+<script>
+var theme = localStorage.getItem('theme');
+$("#c_theme").val(theme);
+</script>
  </body>
 </html>
--- a/profile-edit.html
+++ b/profile-edit.html
@ -2,8 +2,18 @@
				@@ -2,8 +2,18 @@
  <head>
    <meta charset="utf-8">
    <title>Edit profile</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css">
-    <link rel="stylesheet" href="css/profile.css" type="text/css">
+<script>
+var theme = localStorage.getItem('theme');
+if (theme=='calm') {
+ document.write('<link rel="stylesheet" type="text/css" href="css/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/profile.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="jquery-emotions/jquery.emotions.calm.css">');
+   
+} else {
+	 document.write('<link rel="stylesheet" type="text/css" href="css/orange/style.css">');
+    document.write('<link rel="stylesheet" type="text/css" href="css/orange/profile.css">');
+}
+    </script>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/qrcode.js"></script>
    <script src="js/jQueryPlugins.js"></script>