Changeset 29696


Ignore:
Timestamp:
2015-01-27T13:44:20+13:00 (8 years ago)
Author:
bmt11
Message:
 
File:
1 edited

Legend:

Unmodified
Added
Removed

  • other-projects/nz-flag-design/trunk/render-3d/flag.html

    r29694 r29696  
    1010            <link rel="stylesheet" type="text/css" href="CSS/button.css">
    1111            <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
    12         <style>
    13             body {
    14                 font-family: Monospace;
    15                 background-color: transparent;
    16                 color: #000;
    17                 margin: 0px;
    18                 overflow: hidden;
    19                 position: fixed;
    20             }
    21            
    22             #menuContainer{
    23                 position: fixed;
    24                 right: -18vw;
    25                 float: right;
    26                 width: 25vw;
    27                 transition: right 0.5s;
    28                 background-image: url("./images/slider.png");
    29                 background-size: cover;
    30                 background-position: center;
    31             }
    32 
    33             #weatherMenu {
    34                 text-align: center;
    35                 padding: 0px;
    36                 width: 20vw;
    37                 z-index: 10;
    38                 height: 100vh;
    39                 position: relative;
    40                 float: right;
    41             }
    42            
    43             #arrow{
    44                 float: left;
    45                 background-image: url("./images/arrow.png");
    46                 background-position: center;
    47                 background-size: cover;
    48                 background-repeat: no-repeat;
    49                 margin: auto;
    50                 right: 1vw;
    51                 width: 5vw;
    52                 height: 5vw;
    53                 position: relative;
    54                 border-radius: 100%;
    55                 top: 45vh;
    56                 z-index: 9;
    57                 transition: transform 0.5s;
    58                 transform: rotate(360deg);
    59             }
    60            
    61         </style>
    62     <style type="text/css"></style></head>
     12            <style>
     13                body {
     14                    font-family: Monospace;
     15                    background-color: transparent;
     16                    color: #000;
     17                    margin: 0px;
     18                    overflow: hidden;
     19                    position: fixed;
     20                }
     21               
     22                #menuContainer{
     23                    position: fixed;
     24                    right: -18vw;
     25                    float: right;
     26                    width: 25vw;
     27                    transition: right 0.5s;
     28                    background-image: url("./images/slider.png");
     29                    background-size: cover;
     30                    background-position: center;
     31                }
     32
     33                #weatherMenu {
     34                    text-align: center;
     35                    padding: 0px;
     36                    width: 20vw;
     37                    z-index: 10;
     38                    height: 100vh;
     39                    position: relative;
     40                    float: right;
     41                }
     42               
     43                #arrow{
     44                    float: left;
     45                    background-image: url("./images/arrow.png");
     46                    background-position: center;
     47                    background-size: cover;
     48                    background-repeat: no-repeat;
     49                    margin: auto;
     50                    right: 1vw;
     51                    width: 5vw;
     52                    height: 5vw;
     53                    position: relative;
     54                    border-radius: 100%;
     55                    top: 45vh;
     56                    z-index: 9;
     57                    transition: transform 0.5s;
     58                    transform: rotate(360deg);
     59                }
     60               
     61            </style>
     62        </head>
    6363   
    6464    <body>
    6565       
     66        <!----------------------------- Weather Menu ----------------------------------->
     67        <!------------------------------------------------------------------------------>
     68       
    6669        <div id="menuContainer">
    67             <div id="weatherMenu" style="color : white">
    68                 <!--Toggle:
    69                 <a onclick="wind = !wind;">Wind</a> |-->
     70       
     71            <div id="weatherMenu">
    7072                <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
    7173                <a class="myButton" style="background-image:url('./images/rainButton.jpg')" onclick="raining = !raining;"></a>
    7274                <a class="myButton" style="background-image:url('./images/snowButton.jpg')" onclick="snowing = !snowing;"></a>
    7375            </div>
    74             <div id="arrow" onclick="openclose()">
    75             </div>
     76           
     77            <div id="arrow" onclick="openclose()"></div>
     78           
    7679        </div>
     80       
     81        <!------------------------------------------------------------------------------>
     82        <!------------------------------------------------------------------------------>
     83       
     84       
     85       
     86        <!-------------------------- Wind Speed Control -------------------------------->
     87        <!------------------------------------------------------------------------------>
    7788       
    7889        <div id="slider">
    … …  
    8293        <link rel="stylesheet" href="./CSS/slider.css" />
    8394       
     95        <!------------------------------------------------------------------------------>
     96        <!------------------------------------------------------------------------------>
     97       
     98       
     99       
     100        <!----------------- Opening of the weather menu -------------------------------->
     101        <!----------------- slides out from right to left ------------------------------>
    84102        <script type="text/javascript">
    85            
    86             /*              JQUERY SLIDER                   */
    87            
    88            
    89            
    90            
    91             /*----------------------------------------------*/
    92        
    93103            var open = false;
     104           
    94105            function openclose(){
    95106                if (open){
    … …  
    99110                    document.getElementById("arrow").style.transform = "rotate(180deg)";
    100111                }
    101                 open = !open;
    102                
     112                open = !open;   
    103113            }
    104114        </script>
     115        <!------------------------------------------------------------------------------>
     116        <!------------------------------------------------------------------------------>
     117       
    105118       
    106119        <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    … …  
    184197            var snowing = false;
    185198            var sunny = false;
     199            var visible = true;
    186200           
    187201            var snowSystem;
Note: See TracChangeset for help on using the changeset viewer.