Skip to content

Commit 61cea6b

Browse files
oxxostudiooxxostudio
committed
add remind area
1 parent d029dfc commit 61cea6b

9 files changed

Lines changed: 125 additions & 0 deletions

File tree

‎code.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -708,6 +708,21 @@ Code.ga = function (blockArea, toolManu, i) {
708708
}
709709
};
710710

711+
Code.remind = function(){
712+
var remindButton = document.getElementById('remind-button');
713+
var remind = document.querySelector('.remind');
714+
var cookie = document.cookie;
715+
if(cookie.indexOf('webduinoBlocklyRemind=close')!=-1){
716+
remind.style.display = 'none';
717+
}else{
718+
remindButton.addEventListener('click',function(){
719+
remind.style.display = 'none';
720+
document.cookie = 'webduinoBlocklyRemind=close';
721+
ga('send', 'event', 'Webduino-blockly', 'remind click');
722+
});
723+
}
724+
}
725+
711726
/**
712727
* Populate the currently selected pane with content generated from the blocks.
713728
*/
@@ -1875,6 +1890,7 @@ Promise.all([
18751890
Code.loadDemoArea();
18761891
Code.loadGa();
18771892
Code.ga();
1893+
Code.remind();
18781894
Code.importPrettify();
18791895
Code.bindHotkey(window.document);
18801896
Promise.all([

‎css/style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1107,3 +1107,100 @@ td#copyCode div {
11071107
border: none;
11081108
z-index: 2;
11091109
}
1110+
1111+
1112+
.remind{
1113+
position: fixed;
1114+
z-index:9999;
1115+
width:100%;
1116+
height:100%;
1117+
}
1118+
.remind-top{
1119+
width:100%;
1120+
height:500px;
1121+
}
1122+
.remind-top div{
1123+
height:100%;
1124+
float:left;
1125+
}
1126+
.remind-top-1{
1127+
width:550px;
1128+
background:url(../media/remind-1.png);
1129+
}
1130+
.remind-top-2{
1131+
background:#000;
1132+
opacity:.6;
1133+
width:calc(100% - 800px);
1134+
}
1135+
.remind-top-3{
1136+
width:250px;
1137+
background:url(../media/remind-3.png);
1138+
}
1139+
.remind-bottom{
1140+
width:100%;
1141+
height:calc(100% - 500px);
1142+
background:#000;
1143+
opacity:.6;
1144+
}
1145+
.remind .owl{
1146+
position:absolute;
1147+
display:inline-block;
1148+
bottom:30px;
1149+
right:20px;
1150+
z-index:2;
1151+
width:800px;
1152+
}
1153+
.remind .owl .owl-img{
1154+
position:absolute;
1155+
z-index:2;
1156+
bottom:0;
1157+
right:0;
1158+
width:100%;
1159+
pointer-events: none;
1160+
}
1161+
.remind .owl .owl-button{
1162+
position:absolute;
1163+
display:inline-block;
1164+
z-index:1;
1165+
bottom:50px;
1166+
left:11%;
1167+
width:350px;
1168+
height:130px;
1169+
cursor:pointer;
1170+
background-image:url(../media/owl-button.png);
1171+
background-repeat: no-repeat;
1172+
background-size: 100% auto;
1173+
cursor:pointer;
1174+
}
1175+
.remind .owl .owl-button:hover{
1176+
background-image:url(../media/owl-button-push.png);
1177+
}
1178+
1179+
1180+
@media (max-width: 1500px){
1181+
.remind .owl{
1182+
width:700px;
1183+
}
1184+
.remind .owl .owl-button{
1185+
width:310px;
1186+
height:120px;
1187+
bottom:40px;
1188+
}
1189+
}
1190+
1191+
@media (max-width: 1200px){
1192+
.remind .owl{
1193+
width:600px;
1194+
}
1195+
.remind .owl .owl-button{
1196+
width:260px;
1197+
height:110px;
1198+
bottom:30px;
1199+
}
1200+
}
1201+
1202+
@media (max-width: 800px){
1203+
.remind{
1204+
display:none;
1205+
}
1206+
}

‎media/owl-button-push.png‎

51.4 KB
Loading

‎media/owl-button.png‎

39.5 KB
Loading

‎media/owl.png‎

184 KB
Loading

‎media/remind-1.png‎

82.3 KB
Loading

‎media/remind-3.png‎

23.4 KB
Loading

‎media/remind-owl.psd‎

1.8 MB
Binary file not shown.

‎views/index.handlebars‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
<div class="remind">
2+
<div class="owl">
3+
<img class="owl-img" src="media/owl.png"/>
4+
<a class="owl-button" id="remind-button"></a>
5+
</div>
6+
<div class="remind-top">
7+
<div class="remind-top-1"></div>
8+
<div class="remind-top-2"></div>
9+
<div class="remind-top-3"></div>
10+
</div>
11+
<div class="remind-bottom"></div>
12+
</div>
113
<header>
214
<a href="https://webduino.io" target="_blank"><img class="logo" src="media/logo.png" id="logo"></a>
315
<h1>{{title}}<a href="https://goo.gl/xV2xLV" target="_blank"><i class="icon-cloud_done"></i><b>{{gotoCloud}}</b></a></h1>

0 commit comments

Comments
 (0)