add iot app store demo (#96)

This commit is contained in:
luhanzhl
2019-08-14 10:37:39 +08:00
committed by Wang Xin
parent 51ac31eaa1
commit 2f10027447
51 changed files with 3020 additions and 0 deletions

View File

@ -0,0 +1,411 @@
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{% load static %}
<style>
#container{
position:relative;
margin:0px;
height:110px;
}
#content {
margin:0px 20% 0px 18%;
border:solid 1.5px;
border-color: white black white black;
height:50%;
}
#mainnav{
display:table;
margin: 0 auto;
}
#mainnav li{
display: table-cell;
padding-left:10px;
}
#mainnav ul li a{
width:120px;
height:30px;
background:black;
color:white;
margin:0px 50px;
font-size:21px;
font-family:'sansationlight';
display:block;
text-align:center;
text-decoration:none;
}
#mainnav ul li a:hover{
width:120px;
height:33px;
line-height:30px;
border:solid 1.5px;
border-color: black black white black;
color:#3FC3DF;
background:black;
}
.headers{
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
background-repeat: no-repeat;
background-size: 100% 100%;
color:white;
clear:both;
height:50%;
text-align:center;
padding:10px;
margin:0px;
}
#maintitle{
font-size:25px;
font-family:'sansationlight';
}
#section {
position:relative;
top:5px;
width:100%;
float:left;
height:120px;
border-style:double solid;
border-color:black rgb(194, 194, 190) black rgb(248, 248, 248) ;
border-width:0.5px;
padding:10px;
}
#photo{
position: relative;
float: left;
top:18%;
left:10%;
widows: 60px;
}
#IPs{
position: relative;
left: 20%;
top:10%;
width:35%;
font-size:17px;
font-family:'sansationlight';
}
#ports{
position: relative;
left: 20%;
top:30%;
bottom: 5%;
width:35%;
font-size:17px;
font-family:'sansationlight';
}
#installs{
position: relative;
float: left;
left:55%;
bottom:40%;
font-size:17px;
font-family:'sansationlight';
}
#download{
position:relative;
text-align: center;
left:15%;
width:70%;
top:40px;
height:40px;
/*border-color:#192C4F;*/
}
.explain{
width:250px;
height:40px;
top:50%;
float:left;
font-size:18px;
}
#btn{
float:right;
}
#APPS {
position:relative;
top:30px;
left:16.67%;
width:75%;
}
#applications{
position:relative;
float:left;
background-color:white;
width:88.9%;
height:45px;
padding:2px;
margin:5px 0px;
border-style:double solid;
border-color:black;
border-width:0.5px;
}
#applogo{
position:relative;
float:left;
top:10%
}
#appinfo1{ position:relative; float:left; left:40px; width:34%;font-size:15px;height:25px;top:33%}
#appinfo2{ position:relative; float:left; left:20px; width:24%;font-size:15px;height:25px;top:33%}
#appinfo3{ position:relative; float:left; left:20px; width:34%;font-size:15px;height:25px;top:33%}
#delete{
position:relative;
margin:8px 0px;
float:right;
right:7%;
}
.main{
position: absolute;
float:left;
width:650px;
height:350px;
z-index: 9999;
background-color: white;
display:none;
border:solid 1px rgb(4, 30, 66);
border-width: 1.5px;
border-radius: 10px;
}
.close{
background-color: black;
color:white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.hotapps{
background-color:rgb(202, 202, 202);
font-size: 16px;
font-family:'days';
height:30px;
text-align: justify;
border:solid 2px;
border-color: rgb(202, 202, 202) rgb(202, 202, 202) rgb(202, 202, 202) black;
}
#scrollba{
overflow-x: None;
overflow-y: scroll;
height: 270px;
width:650px;
}
#Dapplications{
width:630px;
margin:4px 10px 0px 10px;
height:45px;
border:solid 1px;
border-color: rgb(221, 221, 221) white white white;
/* background-color: rgb(233, 233, 233); */
}
.mybtn2{
position: relative;
float:left;
left:45px;
top:3px;
height:33px;
border-radius: 10px;
background-color: rgb(22, 109, 121);
color:white;
}
#types{
background-color: rgb(3, 90, 90);
color:white;
text-align: left
}
#loading{
position:relative;
float:left;
width: 100%;
display:None;
height:40px;
top:10px;
z-index:1010;
}
.loadapp{
font-size:20px;
text-align: center;
color:rgb(24, 77, 24);
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: rgb(135, 155, 241);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: rgb(23, 62, 146);
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: rgb(21, 44, 87);
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.middlebox{
position:absolute;
z-index:1003;
height:180px;
width:340px;
background-color: white;
border-radius: 7px;
border-style:double;
border-color:rgb(2, 37, 11) solid;
border-width: 0.8px;
display: none;
}
.warning{
position: absolute;
left:10%;
top:6%;
FONT-size:18px;
color:rgb(0, 85, 0);
height:20%;
width:80%;
border-style:none none dashed none;
border-width: 1px;
border-color:rgb(0, 85, 0);
}
.surebtn{
position:relative;
float:left;
left:44%;
top:75%;
}
.findapp{
position:absolute;
left:10%;
height:25%;
top:40%;
width:80%;
font-size:15px;
text-align: center;
border-style:none none solid none;
border-color:rgb(182, 182, 182);
border-width:0.5px;
}
.deletebox{
position:absolute;
z-index:1003;
height:180px;
width:340px;
background-color: white;
border-radius: 7px;
border-style:double;
border-color:rgb(43, 9, 1) solid;
border-width: 0.8px;
display: none;
}
.warning2{
position: absolute;
left:10%;
top:6%;
FONT-size:18px;
color:rgb(185, 0, 0);
height:20%;
width:80%;
border-style:none none dashed none;
border-width: 1px;
border-color:rgb(185, 0, 0);
}
.suresbtn{
position:relative;
float:left;
left:24%;
top:75%;
color:green
}
.cancelsbtn{
position:relative;
float:right;
right:20%;
top:75%;
color:red
}
.footer {
position:absolute;
bottom:0px;
left:0px;
background-color:black;
color:white;
clear:both;
text-align:center;
padding:1px;
width:100%;
height:4%;
z-index: 999;
}

View File

@ -0,0 +1,227 @@
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{% load static %}
<style>
#container{
position:relative;
margin:0px;
height:110px;
}
#content {
margin:0px 20% 0px 18%;
border:solid 1.5px;
border-color: white black white black;
height:50%;
}
#mainnav{
display:table;
margin: 0 auto;
}
#mainnav li{
display: table-cell;
padding-left:10px;
}
#mainnav ul li a{
width:120px;
height:30px;
background:black;
color:white;
margin:0px 50px;
font-size:21px;
font-family:'sansationlight';
display:block;
text-align:center;
text-decoration:none;
}
#mainnav ul li a:hover{
width:120px;
height:33px;
line-height:30px;
border:solid 1.5px;
border-color: black black white black;
color:#3FC3DF;
background:black;
}
.headers{
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
background-repeat: no-repeat;
background-size: 100% 100%;
color:white;
clear:both;
height:50%;
text-align:center;
padding:10px;
margin:0px;
}
#maintitle{
font-size:25px;
font-family:'sansationlight';
}
#introstore{
z-index:1003;
top:10px;
margin:10px 220px 10px 220px;
height:108px;
}
#applicationlist{
margin:26px 0px 0px 0px;
height:100%;
}
.bar{
height:50px;
top:2px;
}
.leftpart{
position:relative;
float:left;
left:30px;
font-size:22px;
display:inline-block;
height:30px;
border:solid 1px black;
border-style: none none solid none;
}
.rightpart{
position:relative;
float:right;
height:50px;
right:20px;
font-size:17px;
}
.rightpart .file{
width: 120px;
height: 35px;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
z-index: 2;
}
.stylehere{
position: relative;
display: inline-block;
width: 120px;
overflow: hidden;
height: 35px;
line-height: 35px;
}
.choosestyle{
position: absolute;
width: 120px;height: 35px;
background-color: rgb(0, 121, 202);color:white;
text-align: center;
left: 0px;top: 0px;
font-size:14px;
border-radius: 4px
}
.appbook{
margin:0px;
border:solid;
border-width: 1.5px;
border-color: white rgb(194, 194, 194) white rgb(194, 194, 194);
background-image:linear-gradient(to right, rgb(245, 243, 240),white)
}
#applications{
margin:1px;
left:0px;
width:100%;
height:50px;
border-style:none none solid none;
border-color:rgb(172, 172, 172);
border-width:0.5px;
padding:5px;
}
#delbutton{
width:100px;
height:40px;
}
#appimage{
float:left;
left:5%;
}
#lable{
color: red;
opacity:50}
.suresbtn{
position:relative;
float:left;
left:50px;
top:135px;
color:green
}
.deletebox{
position:absolute;
z-index:1003;
height:180px;
width:340px;
background-color: white;
border-radius: 7px;
border-style:double;
border-color:rgb(43, 9, 1) solid;
border-width: 0.8px;
display: none;
}
.warning2{
position: absolute;
left:10%;
top:6%;
FONT-size:18px;
color:rgb(185, 0, 0);
height:20%;
width:80%;
border-style:none none dashed none;
border-width: 1px;
border-color:rgb(185, 0, 0);
}
.findapp{
position:absolute;
left:10%;
height:25%;
top:40%;
width:80%;
font-size:15px;
text-align: center;
border-style:none none solid none;
border-color:rgb(182, 182, 182);
border-width:0.5px;
}
.suresbtn{
position:relative;
float:left;
left:24%;
top:75%;
color:green
}
.delsbtn{
position:relative;
float:right;
right:20%;
top:75%;
color:red
}
.footer {
position:absolute;
bottom:0px;
left:0px;
background-color:black;
color:white;
clear:both;
text-align:center;
padding:1px;
width:100%;
height:4%;
z-index: 999;
}

View File

@ -0,0 +1,208 @@
/* Copyright (C) 2019 Intel Corporation. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{% load static %}
<style>
#container{
position:relative;
margin:0px;
height:110px;
}
#content {
margin:0px 20% 0px 18%;
border:solid 1.5px;
border-color: white black white black;
height:50%;
}
#mainnav{
display:table;
margin: 0 auto;
}
#mainnav li{
display: table-cell;
padding-left:10px;
}
#mainnav ul li a{
width:120px;
height:30px;
background:black;
color:white;
margin:0px 50px;
font-size:21px;
font-family:'sansationlight';
display:block;
text-align:center;
text-decoration:none;
}
#mainnav ul li a:hover{
width:120px;
height:33px;
line-height:30px;
border:solid 1.5px;
border-color: black black white black;
color:#3FC3DF;
background:black;
}
.headers{
background-image: url("{%static 'photo/milky-way-2695569_1280.jpg'%}");
background-repeat: no-repeat;
background-size: 100% 100%;
color:white;
clear:both;
height:50%;
text-align:center;
padding:10px;
margin:0px;
}
#maintitle{
font-size:25px;
font-family:'sansationlight';
}
#photo2{
position: relative;
float: left;
top:10%;
left:20%;
}
#devic{
position: relative;
font-size:22px;
float: left;
left:25%;
top:30%;
width:40%;
}
#dividebar{
position: absolute;
top:210px;
margin:10px;
width:100%;
height:1px
}
#devices {
position:relative;
bottom: 2px;
background-color: #F2F2F2;
height:125px;
width:80%;
margin:8px 10%;
}
#section {
position:relative;
background-color:white;
top:14px;
left:13%;
width: 70%;
float:left;
height:96px;
border-style:double solid;
border-color:black;
border-width:0.5px;
padding:10px;
}
#photo{
position: relative;
float: left;
top:0px;
left:6%;
}
#ID{
position:relative;
float:left;
left:12%;
height:20px;
width:8%;
top:75%;
z-index:9999;
/* display:none; */
font-size:15px;
color:rgba(7, 38, 85, 0.87);
}
#IPs{
position: relative;
left: 14%;
top:10%;
width:30%;
font-size:17px;
font-family:'sansationlight';
}
#ports{
position: relative;
left: 14%;
top:25%;
bottom: 5px;
width:30%;
font-size:17px;
font-family:'sansationlight';
}
#installs{
position: relative;
float: right;
right: 20%;
bottom:57%;
font-size:17px;
font-family:'sansationlight';
}
.smenu{
position: relative;
float: right;
top:45px;
right: 5%;
width: 6%;
}
.prev{
position:absolute;
left:72%;
clear:both;
text-align:center;
padding:1px;
width:100px;
height:30px;
color:grey;
background-color:white;
border-radius:5px;
z-index: 996;
}
.next{
position:absolute;
left:80%;
clear:both;
text-align:center;
padding:1px;
width:100px;
height:30px;
color:grey;
background-color:white;
border-radius:5px;
z-index: 996;
}
.footer {
position:absolute;
bottom:0px;
left:0px;
background-color:black;
color:white;
clear:both;
text-align:center;
padding:1px;
width:100%;
height:4%;
z-index: 999;
}
</style>