Add theme selector

11 years ago · 775ef96cf2
36 changed files with 2002 additions and 14 deletions
--- a/abort.html
+++ b/abort.html
@ -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 @@
 /**************************************
 ********************* 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 @@
  <head>
    <meta charset="utf-8"/>
    <title>Following</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css"/>
+<script>
-    <link rel="stylesheet" href="css/profile.css" type="text/css"/>
+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 @@
  <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 @@
    <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 @@
  <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 @@
    </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 @@
  <!-- 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 @@
  <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 @@
  <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 @@
  <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 @@
    <script>$(function(){
      initInterfaceCommon();
      InitOptions();})
    $(document).ready(function(){
    $('#c_theme').change(function(){
    localStorage.setItem('theme', $(this).val());
    location.reload();
    });
 	});
    </script>
  </head>
@ -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 @@
  <head>
    <meta charset="utf-8">
    <title>Edit profile</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css">
+<script>
-    <link rel="stylesheet" href="css/profile.css" type="text/css">
+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>