mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add dashborad
This commit is contained in:
lh_wang
Generated
-3
@@ -31,9 +31,6 @@
|
||||
<ConfirmationsSetting value="0" id="Remove" />
|
||||
</component>
|
||||
<component name="ProjectRootManager" version="2" />
|
||||
<component name="SvnConfiguration">
|
||||
<configuration>$USER_HOME$/.subversion</configuration>
|
||||
</component>
|
||||
<component name="masterDetails">
|
||||
<states>
|
||||
<state key="ScopeChooserConfigurable.UI">
|
||||
|
||||
Generated
+23
-22
@@ -21,21 +21,11 @@
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf>
|
||||
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
|
||||
<file leaf-file-name="index.html" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-22.25">
|
||||
<caret line="140" column="77" selection-start-line="140" selection-start-column="77" selection-end-line="140" selection-end-column="77" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="main.css" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/css/main.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.7095436">
|
||||
<caret line="261" column="17" selection-start-line="261" selection-start-column="17" selection-end-line="261" selection-end-column="17" />
|
||||
<state vertical-scroll-proportion="0.527897">
|
||||
<caret line="110" column="26" selection-start-line="110" selection-start-column="26" selection-end-line="110" selection-end-column="26" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
@@ -49,8 +39,8 @@
|
||||
<option value="$PROJECT_DIR$/js/home/tools.js" />
|
||||
<option value="$PROJECT_DIR$/js/home/map.js" />
|
||||
<option value="$PROJECT_DIR$/js/home/info.js" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/css/main.css" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
@@ -256,6 +246,9 @@
|
||||
</configuration>
|
||||
</component>
|
||||
<component name="ShelveChangesManager" show_recycled="false" />
|
||||
<component name="SvnConfiguration">
|
||||
<configuration>$USER_HOME$/.subversion</configuration>
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="a5f34c66-58c1-42aa-9dc2-d4941c1b15c5" name="Default" comment="" />
|
||||
@@ -288,6 +281,14 @@
|
||||
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
|
||||
</layout>
|
||||
</component>
|
||||
<component name="Vcs.Log.UiProperties">
|
||||
<option name="RECENTLY_FILTERED_USER_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
<option name="RECENTLY_FILTERED_BRANCH_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
@@ -328,14 +329,6 @@
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-22.25">
|
||||
<caret line="140" column="77" selection-start-line="140" selection-start-column="77" selection-end-line="140" selection-end-column="77" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/css/main.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.7095436">
|
||||
@@ -344,5 +337,13 @@
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.527897">
|
||||
<caret line="110" column="26" selection-start-line="110" selection-start-column="26" selection-end-line="110" selection-end-column="26" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
+154
-72
@@ -44,6 +44,7 @@ html body {
|
||||
}
|
||||
}
|
||||
/*----*/
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -69,7 +70,7 @@ html body {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #ccc;
|
||||
border-left: 0;
|
||||
border-right:0;
|
||||
border-right: 0;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 6px 0 rgba(0, 0, 0, .19);
|
||||
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 6px 0 rgba(0, 0, 0, .19);
|
||||
}
|
||||
@@ -117,16 +118,15 @@ html body {
|
||||
top: 60px;
|
||||
width: 50px;
|
||||
min-height: 50px;
|
||||
z-index:10001;
|
||||
z-index: 10001;
|
||||
}
|
||||
.tools>div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid #CCCAC9;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
border-radius: 1px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
color: #676768;
|
||||
@@ -144,6 +144,7 @@ html body {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.tools_items i {
|
||||
margin-top: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
/*--------------------仪表盘---------------------------*/
|
||||
@@ -174,97 +175,178 @@ html body {
|
||||
margin-top: 3px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color:#0091FF;
|
||||
background-color: #0091FF;
|
||||
}
|
||||
.e_charts_0 {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
top: -11px;
|
||||
color: #E60079;
|
||||
width: 22px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.e_charts_120 {
|
||||
position: relative;
|
||||
right: -18px;
|
||||
top: -24px;
|
||||
color: #E60079;
|
||||
background-color: #FFFFFF;
|
||||
width: 22px;
|
||||
text-align: right;
|
||||
}
|
||||
.charts_data {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 60px;
|
||||
width: 200px;
|
||||
height: 240px;
|
||||
z-index: 10012;
|
||||
background-color: #FFF;
|
||||
opacity: 0.9;
|
||||
display:none;
|
||||
}
|
||||
.speed_dash_container {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.speed_title {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.e_charts_0{
|
||||
position:relative;
|
||||
left:-10px;
|
||||
top:-11px;
|
||||
color:#E60079;
|
||||
width: 22px;
|
||||
background-color:#FFFFFF;
|
||||
.speed_lable{
|
||||
margin-top:-6px;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.e_charts_120{
|
||||
position:relative;
|
||||
right:-18px;
|
||||
top:-24px;
|
||||
color:#E60079;
|
||||
background-color:#FFFFFF;
|
||||
width: 22px;
|
||||
text-align:right;
|
||||
.speed_data{
|
||||
clear: both;
|
||||
width:200px;
|
||||
height:70px;
|
||||
color:#999999;
|
||||
padding:5px;
|
||||
}
|
||||
.speed_data>div{
|
||||
height:20px;
|
||||
}
|
||||
|
||||
.speed_data>div>div{
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.speed_title_strong{
|
||||
color:#0091FF;
|
||||
font-size:13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/*-----------------router----------------------------**/
|
||||
.router{
|
||||
position:absolute;
|
||||
left:10px;
|
||||
top:110px;
|
||||
width:45px;
|
||||
min-height:220px;
|
||||
background-color:#fff;
|
||||
opacity:0.8;
|
||||
}
|
||||
|
||||
#router_canvas{
|
||||
.router {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 110px;
|
||||
width: 45px;
|
||||
min-height: 220px;
|
||||
background-color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#router_canvas {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/*-----------------SN_info--------------------------------*/
|
||||
.SN_info{
|
||||
position:absolute;
|
||||
left:0px;
|
||||
right:0px;
|
||||
bottom:5px;
|
||||
height:130px;
|
||||
z-index:10000;
|
||||
|
||||
.SN_info {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 5px;
|
||||
height: 130px;
|
||||
z-index: 10000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.SN_info_wrapper{
|
||||
height:130px;
|
||||
.SN_info_wrapper {
|
||||
height: 130px;
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.SN_info_item{
|
||||
height:130px;
|
||||
float:left;
|
||||
background-color:#fff;
|
||||
margin-left:10px;
|
||||
margin-right:10px;
|
||||
box-sizing:border-box;
|
||||
border-radius:2px;
|
||||
border:1px solid #ddd;
|
||||
.SN_info_item {
|
||||
height: 130px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.SN_info_img{
|
||||
margin-top:20px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
margin-right:2px;
|
||||
.SN_info_img {
|
||||
margin-top: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.SN_info_img img{
|
||||
max-height:100px;
|
||||
max-width:100px;
|
||||
.SN_info_img img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.SN_info_tui{
|
||||
.SN_info_tui {
|
||||
position: relative;
|
||||
margin-top:20px;
|
||||
margin-left:4px;
|
||||
height:100px;
|
||||
margin-top: 20px;
|
||||
margin-left: 4px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.SN_info_tui_div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 19px;
|
||||
}
|
||||
.SN_info_tui_icon {
|
||||
color: #00C348;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.SN_info_rmb {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
margin
|
||||
}
|
||||
#SN_info_btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 25px;
|
||||
margin-left: -12px;
|
||||
left: 50%;
|
||||
z-index: 10002;
|
||||
}
|
||||
.SN_info_btn_icon {
|
||||
color: #0091FF;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*天气预报*/
|
||||
.tianqi_container{
|
||||
position:absolute;
|
||||
min-width:100px;
|
||||
min-height:100px;
|
||||
left:50%;
|
||||
margin-left:-60px;
|
||||
bottom:140px;
|
||||
z-index:10090;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,809 @@
|
||||
/* SUNNY */
|
||||
.sunny {
|
||||
-webkit-animation: sunny 15s linear infinite;
|
||||
animation: sunny 15s linear infinite;
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
|
||||
height: 140px;
|
||||
width: 20px;
|
||||
margin-left: -15px;
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: 20px;
|
||||
}
|
||||
.sunny:before {
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
|
||||
content: '';
|
||||
height: 140px;
|
||||
width: 20px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.sunny:after {
|
||||
background: #FFEE44;
|
||||
border-radius: 50%;
|
||||
box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
|
||||
content: '';
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 30px;
|
||||
}
|
||||
@-webkit-keyframes sunny {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes sunny {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CLOUDY */
|
||||
.cloudy {
|
||||
-webkit-animation: cloudy 5s ease-in-out infinite;
|
||||
animation: cloudy 5s ease-in-out infinite;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
#FFFFFF 65px -15px 0 -5px,
|
||||
#FFFFFF 25px -25px,
|
||||
#FFFFFF 30px 10px,
|
||||
#FFFFFF 60px 15px 0 -10px,
|
||||
#FFFFFF 85px 5px 0 -5px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
left: 255px;
|
||||
top: 70px;
|
||||
}
|
||||
.cloudy:after {
|
||||
-webkit-animation: cloudy_shadow 5s ease-in-out infinite;
|
||||
animation: cloudy_shadow 5s ease-in-out infinite;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 120px;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
bottom: -60px;
|
||||
-webkit-transform: scale(.7);
|
||||
-ms-transform: scale(.7);
|
||||
transform: scale(.7);
|
||||
}
|
||||
@-webkit-keyframes cloudy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@keyframes cloudy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@-webkit-keyframes cloudy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
|
||||
}
|
||||
@keyframes cloudy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
|
||||
}
|
||||
|
||||
/* RAINY */
|
||||
.rainy {
|
||||
-webkit-animation: rainy 5s ease-in-out infinite 1s;
|
||||
animation: rainy 5s ease-in-out infinite 1s;
|
||||
background: #CCCCCC;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
#CCCCCC 65px -15px 0 -5px,
|
||||
#CCCCCC 25px -25px,
|
||||
#CCCCCC 30px 10px,
|
||||
#CCCCCC 60px 15px 0 -10px,
|
||||
#CCCCCC 85px 5px 0 -5px;
|
||||
display: block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
left: 427px;
|
||||
top: 70px;
|
||||
}
|
||||
.rainy:after {
|
||||
-webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
|
||||
animation: rainy_shadow 5s ease-in-out infinite 1s;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 120px;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
bottom: -60px;
|
||||
-webkit-transform: scale(.7);
|
||||
-ms-transform: scale(.7);
|
||||
transform: scale(.7);
|
||||
}
|
||||
.rainy:before {
|
||||
-webkit-animation: rainy_rain .7s infinite linear;
|
||||
animation: rainy_rain .7s infinite linear;
|
||||
content: '';
|
||||
background: #CCCCCC;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 3px;
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scale(.9);
|
||||
-ms-transform: scale(.9);
|
||||
transform: scale(.9);
|
||||
}
|
||||
@-webkit-keyframes rainy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@keyframes rainy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@-webkit-keyframes rainy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@keyframes rainy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@-webkit-keyframes rainy_rain {
|
||||
0% {
|
||||
box-shadow:
|
||||
rgba(0,0,0,0) 30px 30px,
|
||||
rgba(0,0,0,0) 40px 40px,
|
||||
#000 50px 75px,
|
||||
#000 55px 50px,
|
||||
#000 70px 100px,
|
||||
#000 80px 95px,
|
||||
#000 110px 45px,
|
||||
#000 90px 35px;
|
||||
}
|
||||
25% {
|
||||
box-shadow:
|
||||
#000 30px 45px,
|
||||
#000 40px 60px,
|
||||
#000 50px 90px,
|
||||
#000 55px 65px,
|
||||
rgba(0,0,0,0) 70px 120px,
|
||||
rgba(0,0,0,0) 80px 120px,
|
||||
#000 110px 70px,
|
||||
#000 90px 60px;
|
||||
}
|
||||
26% {
|
||||
box-shadow:
|
||||
#000 30px 45px,
|
||||
#000 40px 60px,
|
||||
#000 50px 90px,
|
||||
#000 55px 65px,
|
||||
rgba(0,0,0,0) 70px 40px,
|
||||
rgba(0,0,0,0) 80px 20px,
|
||||
#000 110px 70px,
|
||||
#000 90px 60px;
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
#000 30px 70px,
|
||||
#000 40px 80px,
|
||||
rgba(0,0,0,0) 50px 100px,
|
||||
#000 55px 80px,
|
||||
#000 70px 60px,
|
||||
#000 80px 45px,
|
||||
#000 110px 95px,
|
||||
#000 90px 85px;
|
||||
}
|
||||
51% {
|
||||
box-shadow:
|
||||
#000 30px 70px,
|
||||
#000 40px 80px,
|
||||
rgba(0,0,0,0) 50px 45px,
|
||||
#000 55px 80px,
|
||||
#000 70px 60px,
|
||||
#000 80px 45px,
|
||||
#000 110px 95px,
|
||||
#000 90px 85px;
|
||||
}
|
||||
75% {
|
||||
box-shadow:
|
||||
#000 30px 95px,
|
||||
#000 40px 100px,
|
||||
#000 50px 60px,
|
||||
rgba(0,0,0,0) 55px 95px,
|
||||
#000 70px 80px,
|
||||
#000 80px 70px,
|
||||
rgba(0,0,0,0) 110px 120px,
|
||||
rgba(0,0,0,0) 90px 110px;
|
||||
}
|
||||
76% {
|
||||
box-shadow:
|
||||
#000 30px 95px,
|
||||
#000 40px 100px,
|
||||
#000 50px 60px,
|
||||
rgba(0,0,0,0) 55px 35px,
|
||||
#000 70px 80px,
|
||||
#000 80px 70px,
|
||||
rgba(0,0,0,0) 110px 25px,
|
||||
rgba(0,0,0,0) 90px 15px;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
rgba(0,0,0,0) 30px 120px,
|
||||
rgba(0,0,0,0) 40px 120px,
|
||||
#000 50px 75px,
|
||||
#000 55px 50px,
|
||||
#000 70px 100px,
|
||||
#000 80px 95px,
|
||||
#000 110px 45px,
|
||||
#000 90px 35px;
|
||||
}
|
||||
}
|
||||
@keyframes rainy_rain {
|
||||
0% {
|
||||
box-shadow:
|
||||
rgba(0,0,0,0) 30px 30px,
|
||||
rgba(0,0,0,0) 40px 40px,
|
||||
#000 50px 75px,
|
||||
#000 55px 50px,
|
||||
#000 70px 100px,
|
||||
#000 80px 95px,
|
||||
#000 110px 45px,
|
||||
#000 90px 35px;
|
||||
}
|
||||
25% {
|
||||
box-shadow:
|
||||
#000 30px 45px,
|
||||
#000 40px 60px,
|
||||
#000 50px 90px,
|
||||
#000 55px 65px,
|
||||
rgba(0,0,0,0) 70px 120px,
|
||||
rgba(0,0,0,0) 80px 120px,
|
||||
#000 110px 70px,
|
||||
#000 90px 60px;
|
||||
}
|
||||
26% {
|
||||
box-shadow:
|
||||
#000 30px 45px,
|
||||
#000 40px 60px,
|
||||
#000 50px 90px,
|
||||
#000 55px 65px,
|
||||
rgba(0,0,0,0) 70px 40px,
|
||||
rgba(0,0,0,0) 80px 20px,
|
||||
#000 110px 70px,
|
||||
#000 90px 60px;
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
#000 30px 70px,
|
||||
#000 40px 80px,
|
||||
rgba(0,0,0,0) 50px 100px,
|
||||
#000 55px 80px,
|
||||
#000 70px 60px,
|
||||
#000 80px 45px,
|
||||
#000 110px 95px,
|
||||
#000 90px 85px;
|
||||
}
|
||||
51% {
|
||||
box-shadow:
|
||||
#000 30px 70px,
|
||||
#000 40px 80px,
|
||||
rgba(0,0,0,0) 50px 45px,
|
||||
#000 55px 80px,
|
||||
#000 70px 60px,
|
||||
#000 80px 45px,
|
||||
#000 110px 95px,
|
||||
#000 90px 85px;
|
||||
}
|
||||
75% {
|
||||
box-shadow:
|
||||
#000 30px 95px,
|
||||
#000 40px 100px,
|
||||
#000 50px 60px,
|
||||
rgba(0,0,0,0) 55px 95px,
|
||||
#000 70px 80px,
|
||||
#000 80px 70px,
|
||||
rgba(0,0,0,0) 110px 120px,
|
||||
rgba(0,0,0,0) 90px 110px;
|
||||
}
|
||||
76% {
|
||||
box-shadow:
|
||||
#000 30px 95px,
|
||||
#000 40px 100px,
|
||||
#000 50px 60px,
|
||||
rgba(0,0,0,0) 55px 35px,
|
||||
#000 70px 80px,
|
||||
#000 80px 70px,
|
||||
rgba(0,0,0,0) 110px 25px,
|
||||
rgba(0,0,0,0) 90px 15px;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
rgba(0,0,0,0) 30px 120px,
|
||||
rgba(0,0,0,0) 40px 120px,
|
||||
#000 50px 75px,
|
||||
#000 55px 50px,
|
||||
#000 70px 100px,
|
||||
#000 80px 95px,
|
||||
#000 110px 45px,
|
||||
#000 90px 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RAINBOW */
|
||||
.rainbow {
|
||||
-webkit-animation: rainbow 5s ease-in-out infinite;
|
||||
animation: rainbow 5s ease-in-out infinite;
|
||||
border-radius: 170px 0 0 0;
|
||||
box-shadow:
|
||||
#FB323C -2px -2px 0 1px,
|
||||
#F99716 -4px -4px 0 3px,
|
||||
#FEE124 -6px -6px 0 5px,
|
||||
#AFDF2E -8px -8px 0 7px,
|
||||
#6AD7F8 -10px -10px 0 9px,
|
||||
#60B1F5 -12px -12px 0 11px,
|
||||
#A3459B -14px -14px 0 13px;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
margin-left: -40px;
|
||||
position: absolute;
|
||||
left: 610px;
|
||||
top: 71px;
|
||||
-webkit-transform: rotate(40deg);
|
||||
-ms-transform: rotate(40deg);
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
.rainbow:after {
|
||||
-webkit-animation: rainbow_shadow 5s ease-in-out infinite;
|
||||
animation: rainbow_shadow 5s ease-in-out infinite;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
opacity: 0.2;
|
||||
height: 15px;
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
bottom: -23px;
|
||||
left: 17px;
|
||||
-webkit-transform: rotate(-40deg);
|
||||
-ms-transform: rotate(-40deg);
|
||||
transform: rotate(-40deg);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
@-webkit-keyframes rainbow {
|
||||
50% { -webkit-transform: rotate(50deg); transform: rotate(50deg); }
|
||||
}
|
||||
@keyframes rainbow {
|
||||
50% { -webkit-transform: rotate(50deg); transform: rotate(50deg); }
|
||||
}
|
||||
@-webkit-keyframes rainbow_shadow {
|
||||
50% { -webkit-transform: rotate(-50deg) translate(10px) scale(.7); transform: rotate(-50deg) translate(10px) scale(.7); opacity: 0.05; }
|
||||
}
|
||||
@keyframes rainbow_shadow {
|
||||
50% { -webkit-transform: rotate(-50deg) translate(10px) scale(.7); transform: rotate(-50deg) translate(10px) scale(.7); opacity: 0.05; }
|
||||
}
|
||||
|
||||
/* STARRY */
|
||||
.starry {
|
||||
-webkit-animation: starry_star 5s ease-in-out infinite;
|
||||
animation: starry_star 5s ease-in-out infinite;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
#FFFFFF 26px 7px 0 -1px,
|
||||
rgba(255,255,255,0.1) -36px -19px 0 -1px,
|
||||
rgba(255,255,255,0.1) -51px -34px 0 -1px,
|
||||
#FFFFFF -52px -62px 0 -1px,
|
||||
#FFFFFF 14px -37px,
|
||||
rgba(255,255,255,0.1) 41px -19px,
|
||||
#FFFFFF 34px -50px,
|
||||
rgba(255,255,255,0.1) 14px -71px 0 -1px,
|
||||
#FFFFFF 64px -21px 0 -1px,
|
||||
rgba(255,255,255,0.1) 32px -85px 0 -1px,
|
||||
#FFFFFF 64px -90px,
|
||||
rgba(255,255,255,0.1) 60px -67px 0 -1px,
|
||||
#FFFFFF 34px -127px,
|
||||
rgba(255,255,255,0.1) -26px -103px 0 -1px;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
margin-left: -10px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
left: 777px;
|
||||
top: 150px;
|
||||
}
|
||||
.starry:after {
|
||||
-webkit-animation: starry 5s ease-in-out infinite;
|
||||
animation: starry 5s ease-in-out infinite;
|
||||
border-radius: 50%;
|
||||
box-shadow: #FFFFFF -25px 0;
|
||||
content: '';
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
top: -106px;
|
||||
-webkit-transform: rotate(-5deg);
|
||||
-ms-transform: rotate(-5deg);
|
||||
transform: rotate(-5deg);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
-ms-transform-origin: 0 50%;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
@-webkit-keyframes starry {
|
||||
50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
|
||||
}
|
||||
|
||||
@keyframes starry {
|
||||
50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
|
||||
}
|
||||
@-webkit-keyframes starry_star {
|
||||
50% {
|
||||
box-shadow:
|
||||
rgba(255,255,255,0.1) 26px 7px 0 -1px,
|
||||
#FFFFFF -36px -19px 0 -1px,
|
||||
#FFFFFF -51px -34px 0 -1px,
|
||||
rgba(255,255,255,0.1) -52px -62px 0 -1px,
|
||||
rgba(255,255,255,0.1) 14px -37px,
|
||||
#FFFFFF 41px -19px,
|
||||
rgba(255,255,255,0.1) 34px -50px,
|
||||
#FFFFFF 14px -71px 0 -1px,
|
||||
rgba(255,255,255,0.1) 64px -21px 0 -1px,
|
||||
#FFFFFF 32px -85px 0 -1px,
|
||||
rgba(255,255,255,0.1) 64px -90px,
|
||||
#FFFFFF 60px -67px 0 -1px,
|
||||
rgba(255,255,255,0.1) 34px -127px,
|
||||
#FFFFFF -26px -103px 0 -1px;
|
||||
}
|
||||
}
|
||||
@keyframes starry_star {
|
||||
50% {
|
||||
box-shadow:
|
||||
rgba(255,255,255,0.1) 26px 7px 0 -1px,
|
||||
#FFFFFF -36px -19px 0 -1px,
|
||||
#FFFFFF -51px -34px 0 -1px,
|
||||
rgba(255,255,255,0.1) -52px -62px 0 -1px,
|
||||
rgba(255,255,255,0.1) 14px -37px,
|
||||
#FFFFFF 41px -19px,
|
||||
rgba(255,255,255,0.1) 34px -50px,
|
||||
#FFFFFF 14px -71px 0 -1px,
|
||||
rgba(255,255,255,0.1) 64px -21px 0 -1px,
|
||||
#FFFFFF 32px -85px 0 -1px,
|
||||
rgba(255,255,255,0.1) 64px -90px,
|
||||
#FFFFFF 60px -67px 0 -1px,
|
||||
rgba(255,255,255,0.1) 34px -127px,
|
||||
#FFFFFF -26px -103px 0 -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* STORMY */
|
||||
.stormy {
|
||||
-webkit-animation: stormy 5s ease-in-out infinite;
|
||||
animation: stormy 5s ease-in-out infinite;
|
||||
background: #222222;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
#222222 65px -15px 0 -5px,
|
||||
#222222 25px -25px,
|
||||
#222222 30px 10px,
|
||||
#222222 60px 15px 0 -10px,
|
||||
#222222 85px 5px 0 -5px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
left: 947px;
|
||||
top: 70px;
|
||||
}
|
||||
.stormy:after {
|
||||
-webkit-animation: stormy_shadow 5s ease-in-out infinite;
|
||||
animation: stormy_shadow 5s ease-in-out infinite;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 120px;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
bottom: -60px;
|
||||
-webkit-transform: scale(.7);
|
||||
-ms-transform: scale(.7);
|
||||
transform: scale(.7);
|
||||
}
|
||||
.stormy:before {
|
||||
-webkit-animation: stormy_thunder 2s steps(1, end) infinite;
|
||||
animation: stormy_thunder 2s steps(1, end) infinite;
|
||||
border-left: 0px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 43px solid yellow;
|
||||
box-shadow: yellow -7px -32px;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
top: 70px;
|
||||
-webkit-transform: rotate(14deg);
|
||||
-ms-transform: rotate(14deg);
|
||||
transform: rotate(14deg);
|
||||
-webkit-transform-origin: 50% -60px;
|
||||
-ms-transform-origin: 50% -60px;
|
||||
transform-origin: 50% -60px;
|
||||
}
|
||||
@-webkit-keyframes stormy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@keyframes stormy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@-webkit-keyframes stormy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@keyframes stormy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@-webkit-keyframes stormy_thunder {
|
||||
0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); opacity:1; }
|
||||
5% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:1; }
|
||||
10% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity:1; }
|
||||
15% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:0; }
|
||||
}
|
||||
@keyframes stormy_thunder {
|
||||
0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); opacity:1; }
|
||||
5% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:1; }
|
||||
10% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity:1; }
|
||||
15% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:0; }
|
||||
}
|
||||
|
||||
/* SNOWY */
|
||||
.snowy {
|
||||
-webkit-animation: snowy 5s ease-in-out infinite 1s;
|
||||
animation: snowy 5s ease-in-out infinite 1s;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
#FFFFFF 65px -15px 0 -5px,
|
||||
#FFFFFF 25px -25px,
|
||||
#FFFFFF 30px 10px,
|
||||
#FFFFFF 60px 15px 0 -10px,
|
||||
#FFFFFF 85px 5px 0 -5px;
|
||||
display: block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: -60px;
|
||||
position: absolute;
|
||||
left: 1112px;
|
||||
top: 70px;
|
||||
}
|
||||
.snowy:after {
|
||||
-webkit-animation: snowy_shadow 5s ease-in-out infinite 1s;
|
||||
animation: snowy_shadow 5s ease-in-out infinite 1s;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 120px;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
bottom: -60px;
|
||||
-webkit-transform: scale(.7);
|
||||
-ms-transform: scale(.7);
|
||||
transform: scale(.7);
|
||||
}
|
||||
.snowy:before {
|
||||
-webkit-animation: snowy_snow 2s infinite linear;
|
||||
animation: snowy_snow 2s infinite linear;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
opacity: 0.8;
|
||||
-webkit-transform: scale(.9);
|
||||
-ms-transform: scale(.9);
|
||||
transform: scale(.9);
|
||||
}
|
||||
@-webkit-keyframes snowy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@keyframes snowy {
|
||||
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
|
||||
}
|
||||
@-webkit-keyframes snowy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@keyframes snowy_shadow {
|
||||
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
|
||||
}
|
||||
@-webkit-keyframes snowy_snow {
|
||||
0% {
|
||||
box-shadow:
|
||||
rgba(238,238,238,0) 30px 30px,
|
||||
rgba(238,238,238,0) 40px 40px,
|
||||
#EEEEEE 50px 75px,
|
||||
#EEEEEE 55px 50px,
|
||||
#EEEEEE 70px 100px,
|
||||
#EEEEEE 80px 95px,
|
||||
#EEEEEE 110px 45px,
|
||||
#EEEEEE 90px 35px;
|
||||
}
|
||||
25% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 45px,
|
||||
#EEEEEE 40px 60px,
|
||||
#EEEEEE 50px 90px,
|
||||
#EEEEEE 55px 65px,
|
||||
rgba(238,238,238,0) 70px 120px,
|
||||
rgba(238,238,238,0) 80px 120px,
|
||||
#EEEEEE 110px 70px,
|
||||
#EEEEEE 90px 60px;
|
||||
}
|
||||
26% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 45px,
|
||||
#EEEEEE 40px 60px,
|
||||
#EEEEEE 50px 90px,
|
||||
#EEEEEE 55px 65px,
|
||||
rgba(238,238,238,0) 70px 40px,
|
||||
rgba(238,238,238,0) 80px 20px,
|
||||
#EEEEEE 110px 70px,
|
||||
#EEEEEE 90px 60px;
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 70px,
|
||||
#EEEEEE 40px 80px,
|
||||
rgba(238,238,238,0) 50px 100px,
|
||||
#EEEEEE 55px 80px,
|
||||
#EEEEEE 70px 60px,
|
||||
#EEEEEE 80px 45px,
|
||||
#EEEEEE 110px 95px,
|
||||
#EEEEEE 90px 85px;
|
||||
}
|
||||
51% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 70px,
|
||||
#EEEEEE 40px 80px,
|
||||
rgba(238,238,238,0) 50px 45px,
|
||||
#EEEEEE 55px 80px,
|
||||
#EEEEEE 70px 60px,
|
||||
#EEEEEE 80px 45px,
|
||||
#EEEEEE 110px 95px,
|
||||
#EEEEEE 90px 85px;
|
||||
}
|
||||
75% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 95px,
|
||||
#EEEEEE 40px 100px,
|
||||
#EEEEEE 50px 60px,
|
||||
rgba(238,238,238,0) 55px 95px,
|
||||
#EEEEEE 70px 80px,
|
||||
#EEEEEE 80px 70px,
|
||||
rgba(238,238,238,0) 110px 120px,
|
||||
rgba(238,238,238,0) 90px 110px;
|
||||
}
|
||||
76% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 95px,
|
||||
#EEEEEE 40px 100px,
|
||||
#EEEEEE 50px 60px,
|
||||
rgba(238,238,238,0) 55px 35px,
|
||||
#EEEEEE 70px 80px,
|
||||
#EEEEEE 80px 70px,
|
||||
rgba(238,238,238,0) 110px 25px,
|
||||
rgba(238,238,238,0) 90px 15px;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
rgba(238,238,238,0) 30px 120px,
|
||||
rgba(238,238,238,0) 40px 120px,
|
||||
#EEEEEE 50px 75px,
|
||||
#EEEEEE 55px 50px,
|
||||
#EEEEEE 70px 100px,
|
||||
#EEEEEE 80px 95px,
|
||||
#EEEEEE 110px 45px,
|
||||
#EEEEEE 90px 35px;
|
||||
}
|
||||
}
|
||||
@keyframes snowy_snow {
|
||||
0% {
|
||||
box-shadow:
|
||||
rgba(238,238,238,0) 30px 30px,
|
||||
rgba(238,238,238,0) 40px 40px,
|
||||
#EEEEEE 50px 75px,
|
||||
#EEEEEE 55px 50px,
|
||||
#EEEEEE 70px 100px,
|
||||
#EEEEEE 80px 95px,
|
||||
#EEEEEE 110px 45px,
|
||||
#EEEEEE 90px 35px;
|
||||
}
|
||||
25% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 45px,
|
||||
#EEEEEE 40px 60px,
|
||||
#EEEEEE 50px 90px,
|
||||
#EEEEEE 55px 65px,
|
||||
rgba(238,238,238,0) 70px 120px,
|
||||
rgba(238,238,238,0) 80px 120px,
|
||||
#EEEEEE 110px 70px,
|
||||
#EEEEEE 90px 60px;
|
||||
}
|
||||
26% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 45px,
|
||||
#EEEEEE 40px 60px,
|
||||
#EEEEEE 50px 90px,
|
||||
#EEEEEE 55px 65px,
|
||||
rgba(238,238,238,0) 70px 40px,
|
||||
rgba(238,238,238,0) 80px 20px,
|
||||
#EEEEEE 110px 70px,
|
||||
#EEEEEE 90px 60px;
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 70px,
|
||||
#EEEEEE 40px 80px,
|
||||
rgba(238,238,238,0) 50px 100px,
|
||||
#EEEEEE 55px 80px,
|
||||
#EEEEEE 70px 60px,
|
||||
#EEEEEE 80px 45px,
|
||||
#EEEEEE 110px 95px,
|
||||
#EEEEEE 90px 85px;
|
||||
}
|
||||
51% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 70px,
|
||||
#EEEEEE 40px 80px,
|
||||
rgba(238,238,238,0) 50px 45px,
|
||||
#EEEEEE 55px 80px,
|
||||
#EEEEEE 70px 60px,
|
||||
#EEEEEE 80px 45px,
|
||||
#EEEEEE 110px 95px,
|
||||
#EEEEEE 90px 85px;
|
||||
}
|
||||
75% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 95px,
|
||||
#EEEEEE 40px 100px,
|
||||
#EEEEEE 50px 60px,
|
||||
rgba(238,238,238,0) 55px 95px,
|
||||
#EEEEEE 70px 80px,
|
||||
#EEEEEE 80px 70px,
|
||||
rgba(238,238,238,0) 110px 120px,
|
||||
rgba(238,238,238,0) 90px 110px;
|
||||
}
|
||||
76% {
|
||||
box-shadow:
|
||||
#EEEEEE 30px 95px,
|
||||
#EEEEEE 40px 100px,
|
||||
#EEEEEE 50px 60px,
|
||||
rgba(238,238,238,0) 55px 35px,
|
||||
#EEEEEE 70px 80px,
|
||||
#EEEEEE 80px 70px,
|
||||
rgba(238,238,238,0) 110px 25px,
|
||||
rgba(238,238,238,0) 90px 15px;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
rgba(238,238,238,0) 30px 120px,
|
||||
rgba(238,238,238,0) 40px 120px,
|
||||
#EEEEEE 50px 75px,
|
||||
#EEEEEE 55px 50px,
|
||||
#EEEEEE 70px 100px,
|
||||
#EEEEEE 80px 95px,
|
||||
#EEEEEE 110px 45px,
|
||||
#EEEEEE 90px 35px;
|
||||
}
|
||||
}
|
||||
|
||||
+215
-159
@@ -1,159 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="width:100%;height:100%;">
|
||||
<head>
|
||||
<!--360极速模式-->
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="format-detection" content="telephone=no" searchtype="map">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="apple-mobile-web-app-title" content="美途">
|
||||
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />-->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,minimal-ui">
|
||||
<meta name="misapplication-tap-highlight" content="no"/>
|
||||
<!-- uc强制竖屏 -->
|
||||
<meta name="screen-orientation" content="portrait">
|
||||
<!-- QQ强制竖屏 -->
|
||||
<meta name="x5-orientation" content="portrait">
|
||||
<!-- UC强制全屏 -->
|
||||
<meta name="full-screen" content="yes">
|
||||
<!-- QQ强制全屏 -->
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<!-- UC应用模式 -->
|
||||
<meta name="browsermode" content="application">
|
||||
<!-- QQ应用模式 -->
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<!-- windows phone 点击无高光 -->
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<title>美途</title>
|
||||
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
|
||||
<link type="text/css" rel="stylesheet" href="css/main.css"/>
|
||||
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<!--描述：地图模块-->
|
||||
<div id="map"></div>
|
||||
<!--描述：搜索-->
|
||||
<div class="search">
|
||||
<div class="fl">
|
||||
<img src="img/logo.png"/>
|
||||
</div>
|
||||
<div class="fl search_input">
|
||||
<input placeholder="请输入产品路线"/>
|
||||
</div>
|
||||
<button class="fl search_btn">
|
||||
<i class="fa fa-search" style="font-size:20px;color:#FFFFFF;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--描述：其他功能-->
|
||||
<div class="tools">
|
||||
<div id="tools_list" class="sh tools_items">
|
||||
<div style="width:30px;height:30px;">
|
||||
<i class="fa fa-windows" style="color:#999999;margin-top:13px;font-size:20px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-weixin" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>吐槽</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-hand-paper-o" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>活动</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-microphone" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>上报</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-share-alt" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>分享</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-refresh" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div onclick="(function(){location.reload();return false;})()">刷新</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--仪表盘-->
|
||||
<div id="charts" class="e_charts sh">
|
||||
<div>
|
||||
<div class="e_charts_arrow"></div>
|
||||
<div class="e_charts_0">0</div>
|
||||
<div class="e_charts_120">120</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--路线图-->
|
||||
<div class="router sh">
|
||||
<canvas id="router_canvas" ></canvas>
|
||||
</div>
|
||||
<!--信息窗-->
|
||||
<div class="SN_info">
|
||||
<div id="SN_TPL"></div>
|
||||
|
||||
<script type="text/template" id="tpl">
|
||||
<div id="SN_info_btn" style="position:absolute;top:2px;width:25px;margin-left:-12px;left:50%;z-index:10002;">
|
||||
<i class="fa fa-bars" style="color:#1DBAFF;font-size:16px;cursor:pointer;"></i>
|
||||
</div>
|
||||
<div class="SN_info_wrapper">
|
||||
<% for(var i = 0; i < list.length; i++) { %>
|
||||
<div style="width:<%=width%>px;" class="SN_info_item sh">
|
||||
<div class="fl SN_info_tui" style="width:<%=tui_width%>px;">
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
那座城市 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
今夜无人入眠 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
回锅肉， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
那个人咖啡， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
苏州10景， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr SN_info_img">
|
||||
<img src="img/iio.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
|
||||
<script type="text/javascript" data-main="js/main" src="js/lib/require.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html style="width:100%;height:100%;">
|
||||
|
||||
<head>
|
||||
<!--360极速模式-->
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="format-detection" content="telephone=no" searchtype="map">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="apple-mobile-web-app-title" content="美途">
|
||||
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />-->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,minimal-ui">
|
||||
<meta name="misapplication-tap-highlight" content="no" />
|
||||
<!-- uc强制竖屏 -->
|
||||
<meta name="screen-orientation" content="portrait">
|
||||
<!-- QQ强制竖屏 -->
|
||||
<meta name="x5-orientation" content="portrait">
|
||||
<!-- UC强制全屏 -->
|
||||
<meta name="full-screen" content="yes">
|
||||
<!-- QQ强制全屏 -->
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<!-- UC应用模式 -->
|
||||
<meta name="browsermode" content="application">
|
||||
<!-- QQ应用模式 -->
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<!-- windows phone 点击无高光 -->
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<title>美途</title>
|
||||
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
|
||||
<link type="text/css" rel="stylesheet" href="css/main.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/tianqi.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--描述：地图模块-->
|
||||
<div id="map"></div>
|
||||
<!--描述：搜索-->
|
||||
<div class="search">
|
||||
<div class="fl">
|
||||
<img src="img/logo.png" />
|
||||
</div>
|
||||
<div class="fl search_input">
|
||||
<input placeholder="请输入产品路线" />
|
||||
</div>
|
||||
<button class="fl search_btn">
|
||||
<i class="fa fa-search" style="font-size:20px;color:#FFFFFF;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--描述：其他功能-->
|
||||
<div class="tools">
|
||||
<div id="tools_list" class="sh tools_items">
|
||||
<div style="width:30px;height:30px;">
|
||||
<i class="fa fa-windows" style="color:#999999;margin-top:13px;font-size:20px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-weixin" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>吐槽</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-hand-paper-o" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>活动</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-microphone" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>上报</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-share-alt" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div>分享</div>
|
||||
</div>
|
||||
<div class="sh tools_items">
|
||||
<div>
|
||||
<i class="fa fa-refresh" style="color:#999999;"></i>
|
||||
</div>
|
||||
<div onclick="(function(){location.reload();return false;})()">刷新</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--仪表盘-->
|
||||
<div id="charts" class="e_charts sh">
|
||||
<div>
|
||||
<div class="e_charts_arrow"></div>
|
||||
<div class="e_charts_0">0</div>
|
||||
<div class="e_charts_120">120</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="charts_dash" class="charts_data sh">
|
||||
<div class="speed_dash_container">
|
||||
<div class="speed_title">时速</div>
|
||||
<canvas id="speed_dash" style="width:100px;height:50px;" width="100px" height="50px"></canvas>
|
||||
<div class="speed_lable">
|
||||
<div class="fl" style="margin-left:8px;">0</div>
|
||||
<div class="fl" style="margin-left:24px;">km/h</div>
|
||||
<div class="fr" style="margin-right:3px;">120</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="speed_data">
|
||||
<div>
|
||||
<div class="fl">
|
||||
<span>时速:</span>
|
||||
<span class="speed_title_strong">50km/h</span>
|
||||
</div>
|
||||
<div class="fl">
|
||||
<span>时长:</span>
|
||||
<span class="speed_title_strong">50km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fl">
|
||||
<span>到达:</span>
|
||||
<span class="speed_title_strong">18:56</span>
|
||||
</div>
|
||||
<div class="fl">
|
||||
<span>距离:</span>
|
||||
<span class="speed_title_strong">245km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>模拟车速:</span><span>50,000 km/h</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-map-marker" style="color:#E82D00;"></i>
|
||||
<span>
|
||||
安徽省安庆市望江县长岭镇农信社1001号
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--天气预报-->
|
||||
<!--<div class="tianqi_container">
|
||||
<div class="sunny"></div>
|
||||
<div class="cloudy"></div>
|
||||
<div class="rainy"></div>
|
||||
<div class="snowy"></div>
|
||||
<div class="rainbow"></div>
|
||||
<div class="starry"></div>
|
||||
<div class="stormy"></div>
|
||||
</div>-->
|
||||
<!--路线图-->
|
||||
<div class="router sh">
|
||||
<canvas id="router_canvas"></canvas>
|
||||
</div>
|
||||
<!--信息窗-->
|
||||
<div class="SN_info">
|
||||
<div id="SN_info_btn">
|
||||
<i class="fa fa-bars SN_info_btn_icon" style="font-size:17px;"></i>
|
||||
</div>
|
||||
<div id="SN_TPL"></div>
|
||||
<script type="text/template" id="tpl">
|
||||
<div class="SN_info_wrapper">
|
||||
<% for(var i = 0; i < list.length; i++) { %>
|
||||
<div style="width:<%=width%>px;" class="SN_info_item sh">
|
||||
<div class="fl SN_info_tui" style="width:<%=tui_width%>px;">
|
||||
<div class="SN_info_tui_div" style="width:<%=tui_width%>px;">
|
||||
<a target="_blank">
|
||||
<i class="fa fa-star SN_info_tui_icon"></i> 那座城市 特价
|
||||
<span class="SN_info_rmb"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="SN_info_tui_div" style="width:<%=tui_width%>px;">
|
||||
<a target="_blank">
|
||||
<i class="fa fa-star SN_info_tui_icon"></i> 那座城市 特价
|
||||
<span class="SN_info_rmb"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="SN_info_tui_div" style="width:<%=tui_width%>px;">
|
||||
<a target="_blank">
|
||||
<i class="fa fa-star SN_info_tui_icon"></i> 那座城市 特价
|
||||
<span class="SN_info_rmb"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="SN_info_tui_div" style="width:<%=tui_width%>px;">
|
||||
<a target="_blank">
|
||||
<i class="fa fa-star SN_info_tui_icon"></i> 那座城市 特价
|
||||
<span class="SN_info_rmb"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="SN_info_tui_div" style="width:<%=tui_width%>px;">
|
||||
<a target="_blank">
|
||||
<i class="fa fa-star SN_info_tui_icon"></i> 那座城市 特价
|
||||
<span class="SN_info_rmb"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="fr SN_info_img">
|
||||
<img src="img/iio.png" />
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/lib/gauge.min.js"></script>
|
||||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
|
||||
<script type="text/javascript" data-main="js/main" src="js/lib/require.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,6 +1,42 @@
|
||||
|
||||
define('home/dashboard', function(require, exports, module) {
|
||||
|
||||
var zepto = require('lib/zepto_pj');
|
||||
var mapInstance = require('home/map');
|
||||
|
||||
var charts = $('#charts');
|
||||
var charts_dash = $('#charts_dash');
|
||||
|
||||
|
||||
charts.on('click', function() {
|
||||
if(charts_dash.css('display') === 'none'){
|
||||
charts_dash.fadeIn();
|
||||
var opts = {
|
||||
lines: 12,
|
||||
angle: 0,
|
||||
lineWidth: 0.22,
|
||||
pointer: {
|
||||
length: 0.9,
|
||||
strokeWidth: 0.061,
|
||||
color: '#3BC1FF'
|
||||
},
|
||||
limitMax: 'false',
|
||||
colorStart: '#00C348',
|
||||
colorStop: '#00C348',
|
||||
strokeColor: '#E0E0E0',
|
||||
generateGradient: true
|
||||
};
|
||||
var target = document.getElementById('speed_dash');
|
||||
var gauge = new Gauge(target).setOptions(opts);
|
||||
gauge.maxValue = 100;
|
||||
gauge.animationSpeed = 10;
|
||||
gauge.set(50);
|
||||
|
||||
setInterval(function(){
|
||||
gauge.set(50 + Math.random() * (-40));
|
||||
}, 500);
|
||||
}else{
|
||||
charts_dash.fadeOut();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -90,12 +90,17 @@ define('home/info', function (require, exports, module) {
|
||||
//隐藏和显示
|
||||
var SN_info_btn = $('#SN_info_btn');
|
||||
var SN_info = $('.SN_info');
|
||||
var SN_info_item = $('.SN_info_item');
|
||||
|
||||
SN_info_btn.on('click', function(){
|
||||
if(parseInt(SN_info.css('height')) > 100){
|
||||
SN_info.css('height', '20px');
|
||||
SN_info.css('height', '25px');
|
||||
$('.SN_info_btn_icon').css('fontSize', '20px');
|
||||
SN_info_item.hide();
|
||||
}else{
|
||||
SN_info.css('height', '130px');
|
||||
SN_info_item.show();
|
||||
$('.SN_info_btn_icon').css('fontSize', '17px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Vendored
+61
@@ -0,0 +1,61 @@
|
||||
|
||||
(function(){var AnimatedText,AnimatedTextFactory,Bar,BaseDonut,BaseGauge,Donut,Gauge,GaugePointer,TextRenderer,ValueUpdater,addCommas,cutHex,formatNumber,mergeObjects,secondsToString,updateObjectValues,_ref,_ref1,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key];}function ctor(){this.constructor=child;}ctor.prototype=parent.prototype;child.prototype=new ctor();child.__super__=parent.prototype;return child;};(function(){var browserRequestAnimationFrame,isCancelled,lastId,vendor,vendors,_i,_len;vendors=['ms','moz','webkit','o'];for(_i=0,_len=vendors.length;_i<_len;_i++){vendor=vendors[_i];if(window.requestAnimationFrame){break;}
|
||||
window.requestAnimationFrame=window[vendor+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendor+'CancelAnimationFrame']||window[vendor+'CancelRequestAnimationFrame'];}
|
||||
browserRequestAnimationFrame=null;lastId=0;isCancelled={};if(!requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime,id,lastTime,timeToCall;currTime=new Date().getTime();timeToCall=Math.max(0,16-(currTime-lastTime));id=window.setTimeout(function(){return callback(currTime+timeToCall);},timeToCall);lastTime=currTime+timeToCall;return id;};return window.cancelAnimationFrame=function(id){return clearTimeout(id);};}else if(!window.cancelAnimationFrame){browserRequestAnimationFrame=window.requestAnimationFrame;window.requestAnimationFrame=function(callback,element){var myId;myId=++lastId;browserRequestAnimationFrame(function(){if(!isCancelled[myId]){return callback();}},element);return myId;};return window.cancelAnimationFrame=function(id){return isCancelled[id]=true;};}})();String.prototype.hashCode=function(){var char,hash,i,_i,_ref;hash=0;if(this.length===0){return hash;}
|
||||
for(i=_i=0,_ref=this.length;0<=_ref?_i<_ref:_i>_ref;i=0<=_ref?++_i:--_i){char=this.charCodeAt(i);hash=((hash<<5)-hash)+char;hash=hash&hash;}
|
||||
return hash;};secondsToString=function(sec){var hr,min;hr=Math.floor(sec/3600);min=Math.floor((sec-(hr*3600))/60);sec-=(hr*3600)+(min*60);sec+='';min+='';while(min.length<2){min='0'+min;}
|
||||
while(sec.length<2){sec='0'+sec;}
|
||||
hr=hr?hr+':':'';return hr+min+':'+sec;};formatNumber=function(num){return addCommas(num.toFixed(0));};updateObjectValues=function(obj1,obj2){var key,val;for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];obj1[key]=val;}
|
||||
return obj1;};mergeObjects=function(obj1,obj2){var key,out,val;out={};for(key in obj1){if(!__hasProp.call(obj1,key))continue;val=obj1[key];out[key]=val;}
|
||||
for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];out[key]=val;}
|
||||
return out;};addCommas=function(nStr){var rgx,x,x1,x2;nStr+='';x=nStr.split('.');x1=x[0];x2='';if(x.length>1){x2='.'+x[1];}
|
||||
rgx=/(\d+)(\d{3})/;while(rgx.test(x1)){x1=x1.replace(rgx,'$1'+','+'$2');}
|
||||
return x1+x2;};cutHex=function(nStr){if(nStr.charAt(0)==="#"){return nStr.substring(1,7);}
|
||||
return nStr;};ValueUpdater=(function(){ValueUpdater.prototype.animationSpeed=32;function ValueUpdater(addToAnimationQueue,clear){if(addToAnimationQueue==null){addToAnimationQueue=true;}
|
||||
this.clear=clear!=null?clear:true;if(addToAnimationQueue){AnimationUpdater.add(this);}}
|
||||
ValueUpdater.prototype.update=function(force){var diff;if(force==null){force=false;}
|
||||
if(force||this.displayedValue!==this.value){if(this.ctx&&this.clear){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);}
|
||||
diff=this.value-this.displayedValue;if(Math.abs(diff/this.animationSpeed)<=0.001){this.displayedValue=this.value;}else{this.displayedValue=this.displayedValue+diff/this.animationSpeed;}
|
||||
this.render();return true;}
|
||||
return false;};return ValueUpdater;})();BaseGauge=(function(_super){__extends(BaseGauge,_super);function BaseGauge(){_ref=BaseGauge.__super__.constructor.apply(this,arguments);return _ref;}
|
||||
BaseGauge.prototype.displayScale=1;BaseGauge.prototype.setTextField=function(textField){return this.textField=textField instanceof TextRenderer?textField:new TextRenderer(textField);};BaseGauge.prototype.setMinValue=function(minValue,updateStartValue){var gauge,_i,_len,_ref1,_results;this.minValue=minValue;if(updateStartValue==null){updateStartValue=true;}
|
||||
if(updateStartValue){this.displayedValue=this.minValue;_ref1=this.gp||[];_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.displayedValue=this.minValue);}
|
||||
return _results;}};BaseGauge.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
this.options=mergeObjects(this.options,options);if(this.textField){this.textField.el.style.fontSize=options.fontSize+'px';}
|
||||
if(this.options.angle>.5){this.gauge.options.angle=.5;}
|
||||
this.configDisplayScale();return this;};BaseGauge.prototype.configDisplayScale=function(){var backingStorePixelRatio,devicePixelRatio,height,prevDisplayScale,width;prevDisplayScale=this.displayScale;if(this.options.highDpiSupport===false){delete this.displayScale;}else{devicePixelRatio=window.devicePixelRatio||1;backingStorePixelRatio=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1;this.displayScale=devicePixelRatio/backingStorePixelRatio;}
|
||||
if(this.displayScale!==prevDisplayScale){width=this.canvas.G__width||this.canvas.width;height=this.canvas.G__height||this.canvas.height;this.canvas.width=width*this.displayScale;this.canvas.height=height*this.displayScale;this.canvas.style.width=""+width+"px";this.canvas.style.height=""+height+"px";this.canvas.G__width=width;this.canvas.G__height=height;}
|
||||
return this;};return BaseGauge;})(ValueUpdater);TextRenderer=(function(){function TextRenderer(el){this.el=el;}
|
||||
TextRenderer.prototype.render=function(gauge){return this.el.innerHTML=formatNumber(gauge.displayedValue);};return TextRenderer;})();AnimatedText=(function(_super){__extends(AnimatedText,_super);AnimatedText.prototype.displayedValue=0;AnimatedText.prototype.value=0;AnimatedText.prototype.setVal=function(value){return this.value=1*value;};function AnimatedText(elem,text){this.elem=elem;this.text=text!=null?text:false;this.value=1*this.elem.innerHTML;if(this.text){this.value=0;}}
|
||||
AnimatedText.prototype.render=function(){var textVal;if(this.text){textVal=secondsToString(this.displayedValue.toFixed(0));}else{textVal=addCommas(formatNumber(this.displayedValue));}
|
||||
return this.elem.innerHTML=textVal;};return AnimatedText;})(ValueUpdater);AnimatedTextFactory={create:function(objList){var elem,out,_i,_len;out=[];for(_i=0,_len=objList.length;_i<_len;_i++){elem=objList[_i];out.push(new AnimatedText(elem));}
|
||||
return out;}};GaugePointer=(function(_super){__extends(GaugePointer,_super);GaugePointer.prototype.displayedValue=0;GaugePointer.prototype.value=0;GaugePointer.prototype.options={strokeWidth:0.035,length:0.1,color:"#000000"};function GaugePointer(gauge){this.gauge=gauge;this.ctx=this.gauge.ctx;this.canvas=this.gauge.canvas;GaugePointer.__super__.constructor.call(this,false,false);this.setOptions();}
|
||||
GaugePointer.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
updateObjectValues(this.options,options);this.length=this.canvas.height*this.options.length;this.strokeWidth=this.canvas.height*this.options.strokeWidth;this.maxValue=this.gauge.maxValue;this.minValue=this.gauge.minValue;this.animationSpeed=this.gauge.animationSpeed;return this.options.angle=this.gauge.options.angle;};GaugePointer.prototype.render=function(){var angle,centerX,centerY,endX,endY,startX,startY,x,y;angle=this.gauge.getAngle.call(this,this.displayedValue);centerX=this.canvas.width/2;centerY=this.canvas.height*0.9;x=Math.round(centerX+this.length*Math.cos(angle));y=Math.round(centerY+this.length*Math.sin(angle));startX=Math.round(centerX+this.strokeWidth*Math.cos(angle-Math.PI/2));startY=Math.round(centerY+this.strokeWidth*Math.sin(angle-Math.PI/2));endX=Math.round(centerX+this.strokeWidth*Math.cos(angle+Math.PI/2));endY=Math.round(centerY+this.strokeWidth*Math.sin(angle+Math.PI/2));this.ctx.fillStyle=this.options.color;this.ctx.beginPath();this.ctx.arc(centerX,centerY,this.strokeWidth,0,Math.PI*2,true);this.ctx.fill();this.ctx.beginPath();this.ctx.moveTo(startX,startY);this.ctx.lineTo(x,y);this.ctx.lineTo(endX,endY);return this.ctx.fill();};return GaugePointer;})(ValueUpdater);Bar=(function(){function Bar(elem){this.elem=elem;}
|
||||
Bar.prototype.updateValues=function(arrValues){this.value=arrValues[0];this.maxValue=arrValues[1];this.avgValue=arrValues[2];return this.render();};Bar.prototype.render=function(){var avgPercent,valPercent;if(this.textField){this.textField.text(formatNumber(this.value));}
|
||||
if(this.maxValue===0){this.maxValue=this.avgValue*2;}
|
||||
valPercent=(this.value/this.maxValue)*100;avgPercent=(this.avgValue/this.maxValue)*100;$(".bar-value",this.elem).css({"width":valPercent+"%"});return $(".typical-value",this.elem).css({"width":avgPercent+"%"});};return Bar;})();Gauge=(function(_super){__extends(Gauge,_super);Gauge.prototype.elem=null;Gauge.prototype.value=[20];Gauge.prototype.maxValue=80;Gauge.prototype.minValue=0;Gauge.prototype.displayedAngle=0;Gauge.prototype.displayedValue=0;Gauge.prototype.lineWidth=40;Gauge.prototype.paddingBottom=0.1;Gauge.prototype.percentColors=null;Gauge.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:0.8,strokeWidth:0.035},angle:0.15,lineWidth:0.44,fontSize:40,limitMax:false};function Gauge(canvas){this.canvas=canvas;Gauge.__super__.constructor.call(this);this.percentColors=null;if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
|
||||
this.ctx=this.canvas.getContext('2d');this.gp=[new GaugePointer(this)];this.setOptions();this.render();}
|
||||
Gauge.prototype.setOptions=function(options){var gauge,_i,_len,_ref1;if(options==null){options=null;}
|
||||
Gauge.__super__.setOptions.call(this,options);this.configPercentColors();this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.render();_ref1=this.gp;for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];gauge.setOptions(this.options.pointer);gauge.render();}
|
||||
return this;};Gauge.prototype.configPercentColors=function(){var bval,gval,i,rval,_i,_ref1,_results;this.percentColors=null;if(this.options.percentColors!==void 0){this.percentColors=new Array();_results=[];for(i=_i=0,_ref1=this.options.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){rval=parseInt((cutHex(this.options.percentColors[i][1])).substring(0,2),16);gval=parseInt((cutHex(this.options.percentColors[i][1])).substring(2,4),16);bval=parseInt((cutHex(this.options.percentColors[i][1])).substring(4,6),16);_results.push(this.percentColors[i]={pct:this.options.percentColors[i][0],color:{r:rval,g:gval,b:bval}});}
|
||||
return _results;}};Gauge.prototype.set=function(value){var i,max_hit,val,_i,_j,_len,_ref1;if(!(value instanceof Array)){value=[value];}
|
||||
if(value.length>this.gp.length){for(i=_i=0,_ref1=value.length-this.gp.length;0<=_ref1?_i<_ref1:_i>_ref1;i=0<=_ref1?++_i:--_i){this.gp.push(new GaugePointer(this));}}
|
||||
i=0;max_hit=false;for(_j=0,_len=value.length;_j<_len;_j++){val=value[_j];if(val>this.maxValue){this.maxValue=this.value*1.1;max_hit=true;}
|
||||
this.gp[i].value=val;this.gp[i++].setOptions({maxValue:this.maxValue,angle:this.options.angle});}
|
||||
this.value=value[value.length-1];if(max_hit){if(!this.options.limitMax){return AnimationUpdater.run();}}else{return AnimationUpdater.run();}};Gauge.prototype.getAngle=function(value){return(1+this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*(1-this.options.angle*2)*Math.PI;};Gauge.prototype.getColorForPercentage=function(pct,grad){var color,endColor,i,rangePct,startColor,_i,_ref1;if(pct===0){color=this.percentColors[0].color;}else{color=this.percentColors[this.percentColors.length-1].color;for(i=_i=0,_ref1=this.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){if(pct<=this.percentColors[i].pct){if(grad===true){startColor=this.percentColors[i-1];endColor=this.percentColors[i];rangePct=(pct-startColor.pct)/(endColor.pct-startColor.pct);color={r:Math.floor(startColor.color.r*(1-rangePct)+endColor.color.r*rangePct),g:Math.floor(startColor.color.g*(1-rangePct)+endColor.color.g*rangePct),b:Math.floor(startColor.color.b*(1-rangePct)+endColor.color.b*rangePct)};}else{color=this.percentColors[i].color;}
|
||||
break;}}}
|
||||
return'rgb('+[color.r,color.g,color.b].join(',')+')';};Gauge.prototype.getColorForValue=function(val,grad){var pct;pct=(val-this.minValue)/(this.maxValue-this.minValue);return this.getColorForPercentage(pct,grad);};Gauge.prototype.render=function(){var displayedAngle,fillStyle,gauge,h,w,_i,_len,_ref1,_results;w=this.canvas.width/2;h=this.canvas.height*(1-this.paddingBottom);displayedAngle=this.getAngle(this.displayedValue);if(this.textField){this.textField.render(this);}
|
||||
this.ctx.lineCap="butt";if(this.options.customFillStyle!==void 0){fillStyle=this.options.customFillStyle(this);}else if(this.percentColors!==null){fillStyle=this.getColorForValue(this.displayedValue,true);}else if(this.options.colorStop!==void 0){if(this.options.gradientType===0){fillStyle=this.ctx.createRadialGradient(w,h,9,w,h,70);}else{fillStyle=this.ctx.createLinearGradient(0,0,w,0);}
|
||||
fillStyle.addColorStop(0,this.options.colorStart);fillStyle.addColorStop(1,this.options.colorStop);}else{fillStyle=this.options.colorStart;}
|
||||
this.ctx.strokeStyle=fillStyle;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1+this.options.angle)*Math.PI,displayedAngle,false);this.ctx.lineWidth=this.lineWidth;this.ctx.stroke();this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,displayedAngle,(2-this.options.angle)*Math.PI,false);this.ctx.stroke();_ref1=this.gp;_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.update(true));}
|
||||
return _results;};return Gauge;})(BaseGauge);BaseDonut=(function(_super){__extends(BaseDonut,_super);BaseDonut.prototype.lineWidth=15;BaseDonut.prototype.displayedValue=0;BaseDonut.prototype.value=33;BaseDonut.prototype.maxValue=80;BaseDonut.prototype.minValue=0;BaseDonut.prototype.options={lineWidth:0.10,colorStart:"#6f6ea0",colorStop:"#c0c0db",strokeColor:"#eeeeee",shadowColor:"#d5d5d5",angle:0.35};function BaseDonut(canvas){this.canvas=canvas;BaseDonut.__super__.constructor.call(this);if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
|
||||
this.ctx=this.canvas.getContext('2d');this.setOptions();this.render();}
|
||||
BaseDonut.prototype.getAngle=function(value){return(1-this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*((2+this.options.angle)-(1-this.options.angle))*Math.PI;};BaseDonut.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
BaseDonut.__super__.setOptions.call(this,options);this.lineWidth=this.canvas.height*this.options.lineWidth;this.radius=this.canvas.height/2-this.lineWidth/2;return this;};BaseDonut.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value*1.1;}
|
||||
return AnimationUpdater.run();};BaseDonut.prototype.render=function(){var displayedAngle,grdFill,h,start,stop,w;displayedAngle=this.getAngle(this.displayedValue);w=this.canvas.width/2;h=this.canvas.height/2;if(this.textField){this.textField.render(this);}
|
||||
grdFill=this.ctx.createRadialGradient(w,h,39,w,h,70);grdFill.addColorStop(0,this.options.colorStart);grdFill.addColorStop(1,this.options.colorStop);start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,false);this.ctx.lineWidth=this.lineWidth;this.ctx.lineCap="round";this.ctx.stroke();this.ctx.strokeStyle=grdFill;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,displayedAngle,false);return this.ctx.stroke();};return BaseDonut;})(BaseGauge);Donut=(function(_super){__extends(Donut,_super);function Donut(){_ref1=Donut.__super__.constructor.apply(this,arguments);return _ref1;}
|
||||
Donut.prototype.strokeGradient=function(w,h,start,stop){var grd;grd=this.ctx.createRadialGradient(w,h,start,w,h,stop);grd.addColorStop(0,this.options.shadowColor);grd.addColorStop(0.12,this.options._orgStrokeColor);grd.addColorStop(0.88,this.options._orgStrokeColor);grd.addColorStop(1,this.options.shadowColor);return grd;};Donut.prototype.setOptions=function(options){var h,start,stop,w;if(options==null){options=null;}
|
||||
Donut.__super__.setOptions.call(this,options);w=this.canvas.width/2;h=this.canvas.height/2;start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.options._orgStrokeColor=this.options.strokeColor;this.options.strokeColor=this.strokeGradient(w,h,start,stop);return this;};return Donut;})(BaseDonut);window.AnimationUpdater={elements:[],animId:null,addAll:function(list){var elem,_i,_len,_results;_results=[];for(_i=0,_len=list.length;_i<_len;_i++){elem=list[_i];_results.push(AnimationUpdater.elements.push(elem));}
|
||||
return _results;},add:function(object){return AnimationUpdater.elements.push(object);},run:function(){var animationFinished,elem,_i,_len,_ref2;animationFinished=true;_ref2=AnimationUpdater.elements;for(_i=0,_len=_ref2.length;_i<_len;_i++){elem=_ref2[_i];if(elem.update()){animationFinished=false;}}
|
||||
if(!animationFinished){return AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run);}else{return cancelAnimationFrame(AnimationUpdater.animId);}}};window.Gauge=Gauge;window.Donut=Donut;window.BaseDonut=BaseDonut;window.TextRenderer=TextRenderer;}).call(this);
|
||||
Vendored
+12
File diff suppressed because one or more lines are too long
Vendored
+10
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user