add iot app store demo (#96)
This commit is contained in:
luhanzhl
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user