Skip to content

D
django

小柴很菜 / django

通知 4
Star 2
Fork 0
D
django

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7456ce4c 编写于 作者: 小柴很菜's avatar 小柴很菜 🏅
浏览文件
操作

admin页面加入，首页导航栏

上级 d5510b58
展开全部 隐藏空白更改
内联 并排
Showing with 2546 addition and 12 deletion
MyDjango/MyDjango/settings.py
浏览文件 @ 7456ce4c
......@@ -31,6 +31,8 @@ ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'simpleui',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
......
MyDjango/MyDjango/urls.py
浏览文件 @ 7456ce4c
......@@ -15,6 +15,8 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from django.contrib import admin
from index.views import index
# 在view视图里面把函数导进来
......@@ -24,4 +26,5 @@ urlpatterns = [
path('', include('index.urls'), name='index'),#首页
path('', include('index.urls'), name='show'),#数据展示
path('', include('index.urls'), name='show2'),
#path('admin',admin.site.urls),
]
MyDjango/index/admin.py
浏览文件 @ 7456ce4c
from django.contrib import admin
# Register your models here.
from index import models
admin.site.register(models.work)
\ No newline at end of file
MyDjango/static/css/demo.css 0 → 100644
浏览文件 @ 7456ce4c
@import url(http://fonts.useso.com/css?family=Raleway:200,400,700,800);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
background: #b4bad2;
color: #fffce1;
font-weight: 400;
font-size: 1em;
font-family: 'Raleway', Arial, sans-serif;
}
a {
color: #4e4a46;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #c94e50;
outline: none;
}
button:focus {
outline: none;
}
section {
padding: 1em;
text-align: center;
}
/* Header */
.codrops-header {
margin: 0 auto;
padding: 3em 2em;
text-align: center;
height: 100%;
}
.codrops-header h1 {
margin: 0 auto;
font-weight: 800;
font-size: 3.75em;
line-height: 1;
}
.codrops-header h1 span {
display: block;
font-size: 50%;
font-weight: 400;
padding-top: 0.325em;
}
.codrops-links {
text-transform: uppercase;
font-weight: 700;
font-size: 0.69em;
line-height: 2.2;
padding: 1.61em 5em;
}
.codrops-links a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 1px;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
font-size: 1em;
max-width: 1200px;
margin: 3em auto 5em;
padding: 2em 10em 0;
}
.codrops-demos > a {
display: inline-block;
margin: 0.75em;
padding: 1.35em 1.1em;
width: 15em;
background: #fffce1;
outline: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 800;
border-radius: 20px/50px;
}
.codrops-demos > a.current-demo {
background: #c94e50;
color: #fffce1;
}
/* Related demos */
.related {
margin-top: 5em;
padding: 0 3em 5em;
}
.related p {
font-size: 1.5em;
font-weight: 700;
}
.related > a {
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
border-radius: 35px/200px;
background: #fffce1;
max-width: 100%;
}
.related a img {
max-width: 100%;
opacity: 0.8;
border-radius: 20px/100px;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related a h3 {
margin: 0;
padding: 0.5em 0.75em 0.3em;
max-width: 300px;
text-align: left;
}
body #cdawrap {
top: auto;
bottom: 35px;
right: 35px;
background: #b4bad2;
border: 1px solid rgba(131,135,151,0.6);
}
.demo-wave body #cdawrap {
top: 35px;
right: 35px;
bottom: auto;
}
@media screen and (max-width: 40em) {
body {
font-size: 80%;
}
.codrops-header h1 {
font-size: 2.5em;
}
.codrops-demos {
max-width: 900px;
padding: 2em 2em 0;
}
.related > a {
margin: 20px 0;
}
}
@media screen and (max-width: 25em) {
.codrops-icon {
font-size: 250%;
}
.codrops-icon span {
display: none;
}
}
\ No newline at end of file
MyDjango/static/css/font-awesome.min.css 0 → 100644
浏览文件 @ 7456ce4c
此差异已折叠。
MyDjango/static/css/menu_bubble.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 280px;
height: 100%;
font-size: 1.15em;
-webkit-transform: translate3d(-280px,0,0);
transform: translate3d(-280px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: relative;
z-index: 1000;
padding: 3em 1em 0;
}
.menu,
.close-button {
opacity: 0;
-webkit-transform: translate3d(-160px,0,0);
transform: translate3d(-160px,0,0);
-webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0s 0.3s, transform 0s 0.3s;
-webkit-transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
}
.icon-list a {
display: block;
padding: 0.8em;
}
.icon-list i {
font-size: 1.5em;
vertical-align: middle;
color: #282a35;
}
.icon-list a span {
margin-left: 10px;
font-size: 0.85em;
font-weight: 700;
vertical-align: middle;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
fill: #373a47;
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .menu-wrap,
.show-menu .menu,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu,
.show-menu .close-button {
opacity: 1;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
\ No newline at end of file
MyDjango/static/css/menu_cornerbox.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.content {
position: relative;
background: #b4bad2;
}
/* Overlay */
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #b8b7ad;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 320px;
height: 320px;
background: #fdfdf8;
color: #373a47;
padding: 2em;
-webkit-transform: translate3d(-320px,-320px,0);
transform: translate3d(-320px,-320px,0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.profile {
display: inline-block;
line-height: 42px;
margin-bottom: 1em;
font-weight: 700;
}
.profile img {
float: left;
border-radius: 50%;
margin-right: 10px;
}
.icon-list a {
display: block;
color: #b8b7ad;
font-weight: 700;
padding: 0.8em 0.55em;
}
.icon-list a:hover,
.icon-list a:focus {
color: #c94e50;
}
.icon-list a i {
opacity: 0.5;
color: #c94e50;
}
.icon-list a span {
margin-left: 10px;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .content-wrap {
-webkit-transform: translate3d(80px,80px,0);
transform: translate3d(80px,80px,0);
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
\ No newline at end of file
MyDjango/static/css/menu_cornerbox_nested.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap {
color: #64697d;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before,
.menu-wrap::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0s 0.5s;
transition: opacity 0.5s, transform 0s 0.5s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 0.5em;
padding: 0;
border: none;
font-size: 3em;
color: #373a47;
background: transparent;
}
.menu-button span {
display: none;
}
.menu-button:hover,
.close-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 50vw;
height: 50vw;
max-height: 80%;
min-height: 360px;
min-width: 320px;
background: #fff;
padding: 3em;
overflow: hidden;
-webkit-transform: translate3d(-100%,-100%,0);
transform: translate3d(-100%,-100%,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.menu-wrap[data-level="2"] {
height: 30vw;
}
.menu {
height: 100%;
}
.menu h2 {
margin: 0 0 0.5em 0;
}
.menu h2 span {
padding-right: 1em;
}
.menu h2 span:last-child {
font-size: 0.5em;
padding: 0.25em 0.5em;
display: inline-block;
vertical-align: middle;
color: rgb(218,73,97);
border: 2px solid black;
border-color: initial;
}
/* Calendario style http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/ */
.fc-calendar-container {
height: 80%;
height: calc(100% - 4.5em);
margin-top: 2em;
width: 100%;
position: relative;
}
.fc-calendar {
width: 100%;
height: 100%;
}
.fc-calendar .fc-head {
height: 35px;
text-transform: uppercase;
line-height: 30px;
letter-spacing: 1px;
font-size: 0.75em;
}
.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
float: left;
height: 100%;
width: 14%;
position: relative;
text-align: center;
font-weight: bold;
}
.fc-calendar .fc-head > div {
border-bottom: 1px solid #000;
border-bottom-color: initial;
}
.fc-calendar .fc-body,
.content-edit {
position: relative;
width: 100%;
height: 100%;
height: calc(100% - 35px);
}
.content-edit {
height: calc(100% - 80px);
border: 1px solid #000;
border-color: initial;
padding: 2em;
}
.content-edit:focus {
outline: none;
}
.default-button {
border: none;
color: #fff;
background: #64697d;
padding: 1em 1.25em;
font-weight: 700;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0.75em;
float: right;
}
.fc-calendar .fc-row {
width: 100%;
}
.fc-five-rows .fc-row {
height: 20%;
}
.fc-calendar .fc-row > div {
cursor: pointer;
padding: 4px;
overflow: hidden;
position: relative;
}
.fc-calendar .fc-row > div:not(:empty):hover {
background: rgba(180,186,210,0.3);
}
.fc-calendar .fc-row > div > span.fc-date {
position: absolute;
width: 30px;
height: 20px;
font-size: 20px;
line-height: 20px;
color: #686a6e;
bottom: 5px;
right: 5px;
top: 50%;
left: 50%;
text-align: center;
margin: -10px 0 0 -15px;
}
.fc-calendar .fc-row > div > span.fc-weekday {
display: none;
}
/* Shown menu */
.show-menu .menu-wrap[data-level="1"],
.show-submenu .menu-wrap[data-level="2"],
.show-menu .content::before,
.show-submenu .menu-wrap[data-level="1"]::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-submenu .menu-wrap[data-level="1"],
.show-menu .content-wrap {
-webkit-transform: translate3d(40px,40px,0);
transform: translate3d(40px,40px,0);
}
.show-submenu .content-wrap {
-webkit-transform: translate3d(120px,120px,0);
transform: translate3d(120px,120px,0);
}
.show-menu .content::before,
.show-submenu .menu-wrap[data-level="1"]::before {
opacity: 0.5;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.show-submenu .content::before {
opacity: 1;
}
\ No newline at end of file
MyDjango/static/css/menu_cornermorph.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
height: 100%;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
font-size: 1.5em;
color: #373a47;
background: transparent;
}
.menu-button span {
display: none;
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
position: fixed;
z-index: 999;
background: #ebedf4;
-webkit-transition: width 0.3s, height 0.3s;
transition: width 0.3s, height 0.3s;
width: 0;
height: 0;
font-size: 1.5em;
bottom: 1em;
left: 1em;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
@media screen and (max-width: 50em) {
.menu-button {
margin: 0.25em;
}
.menu-wrap {
bottom: 0.25em;
left: 0.25em;
}
}
.menu {
height: 100%;
opacity: 0;
font-size: 0.65em;
color: #64697d;
text-align: right;
}
.profile {
display: inline-block;
line-height: 42px;
font-weight: 700;
padding: 1em;
}
.profile img {
float: right;
border-radius: 50%;
margin-left: 10px;
}
.link-list {
padding: 1.35em 0;
margin: 0 0.75em;
border-bottom: 3px solid rgba(125,129,148,0.2);
border-top: 3px solid rgba(125,129,148,0.2);
}
.link-list a {
display: block;
margin: 0.25em 0;
color: #7d8194;
padding: 0.5em 1.5em;
}
.link-list a:hover,
.link-list a:focus {
color: #64697d;
}
.link-list a span {
margin-left: 10px;
font-weight: 700;
vertical-align: middle;
}
.icon-list {
position: absolute;
right: 1em;
bottom: 0.9em;
}
.icon-list a {
font-size: 1.5em;
margin-left: 0.25em;
color: rgba(125,129,148,0.5);
}
/* Shown menu */
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap {
width: 280px;
height: 340px;
-webkit-animation: anim-jelly 0.8s linear forwards;
animation: anim-jelly 0.8s linear forwards;
}
.show-menu .menu {
opacity: 1;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
/* Generated with Bounce.js. Edit at http://goo.gl/PJ93gs */
@-webkit-keyframes anim-jelly {
0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
}
@keyframes anim-jelly {
0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
}
MyDjango/static/css/menu_elastic.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #95a5a6;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
font-size: 1.15em;
-webkit-transform: translate3d(-300px,0,0);
transform: translate3d(-300px,0,0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu {
background: #373a47;
width: calc(100% - 120px);
height: 100%;
padding: 2em 1em;
}
.icon-list {
width: 280px;
}
.icon-list a {
display: block;
padding: 0.8em;
}
.icon-list a i {
opacity: 0.5;
}
.icon-list a span {
margin-left: 10px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 0.75em;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 120px;
height: 100%;
top: 0;
right: 0;
fill: #373a47;
z-index: 1000;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .content-wrap {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transform: translate3d(100px,0,0);
transform: translate3d(100px,0,0);
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
\ No newline at end of file
MyDjango/static/css/menu_sideslide.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
\ No newline at end of file
MyDjango/static/css/menu_topexpand.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #0080ff;
}
.menu-wrap a {
color: #555d7c;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #fffce1;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.content {
position: relative;
background-image: linear-gradient(to right, rgba(185 ,211, 238,0), rgba(0, 178 ,238,1),rgba(72, 118, 255,1),rgba( 99, 184, 255,1));
padding-bottom: 2em;
}
/* Common styles for menu button and menu-wrap */
.menu-button,
.menu-wrap {
position: fixed;
width: 2.5em;
height: 2.25em;
font-size: 1.5em;
-webkit-transform: translate3d(1.5em,1.5em,0);
transform: translate3d(1.5em,1.5em,0);
}
/* Menu Button */
.menu-button {
z-index: 1000;
margin: 0;
padding: 0;
border: none;
text-indent: 2.5em;
color: transparent;
background: #6283cb;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#fffce1 20%, transparent 20%, transparent 40%, #fffce1 40%, #fffce1 60%, transparent 60%, transparent 80%, #fffce1 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
z-index: 999;
background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(0,191,255,1));
-webkit-transition: width 0.4s, height 0.4s, -webkit-transform 0.4s;
transition: width 0.4s, height 0.4s, transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu {
height: 100%;
overflow: hidden;
font-size: 0.75em;
}
.icon-list {
float: right;
padding: 2.5em 2em 0 6em;
}
.icon-list a {
opacity: 0;
display: inline-block;
padding: 0 0.2em;
margin: 0 15px;
text-align: center;
font-size: 1.2em;
}
.icon-list a span {
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.5em;
font-weight: 700;
padding-top: 0.5em;
}
@media screen and (max-width: 50em) {
.icon-list a {
padding: 0.5em 0em;
margin: 0 5px;
font-size: 1em;
}
.icon-list a span {
display: none;
}
}
/* Shown menu */
.show-menu .content-wrap {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate3d(0,125px,0);
transform: translate3d(0,125px,0);
}
.show-menu .menu-wrap {
width: 100%;
height: 125px;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a {
opacity: 1;
-webkit-transition: opacity 0.4s 0.4s;
transition: opacity 0.4s 0.4s;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.44s;
transition-delay: 0.44s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.46s;
transition-delay: 0.46s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
\ No newline at end of file
MyDjango/static/css/menu_topside.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.content {
position: relative;
background: #b4bad2;
}
/* Overlay */
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
position: absolute;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.menu-top {
line-height: 58px;
}
.menu-top .profile {
display: inline-block;
padding: 8px 10px;
line-height: 42px;
}
.menu-top .profile,
.menu-side {
width: 300px;
}
.menu-top .profile img {
float: left;
margin-right: 1em;
}
.icon-list {
display: inline-block;
font-size: 1.25em;
}
.icon-list a {
margin: 0 1em 0 0;
padding: 0;
}
@media screen and (max-width: 32em) {
.icon-list {
padding-left: 1em;
}
}
.menu-side a {
display: block;
padding: 1.2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.menu-side a:first-child {
border-top: 1px solid rgba(0,0,0,0.1);
}
/* Shown menu */
.show-menu .menu-wrap {
opacity: 1;
}
.show-menu .content-wrap,
.show-menu .menu-button {
-webkit-transform: translate3d(300px,60px,0);
transform: translate3d(300px,60px,0);
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
\ No newline at end of file
MyDjango/static/css/menu_wave.css 0 → 100644
浏览文件 @ 7456ce4c
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
height: 100%;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
\ No newline at end of file
MyDjango/static/css/normalize.css 0 → 100644
浏览文件 @ 7456ce4c
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
\ No newline at end of file
MyDjango/static/js/classie.js 0 → 100644
浏览文件 @ 7456ce4c
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
MyDjango/static/js/main.js 0 → 100644
浏览文件 @ 7456ce4c
/**
* main.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();
\ No newline at end of file
MyDjango/static/js/main2.js 0 → 100644
浏览文件 @ 7456ce4c
/**
* main2.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
/**
* based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
*/
function hasParent( e, p ) {
if (!e) return false;
var el = e.target||e.srcElement||e||false;
while (el && el != p) {
el = el.parentNode||false;
}
return (el!==false);
};
var bodyEl = document.body,
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
closebtnsub = document.getElementById( 'close-button-sub' ),
caldays = [].slice.call( document.getElementById( 'calendar' ).querySelectorAll( '.fc-body > div.fc-row > div' ) ),
menu = document.querySelector( '.menu-wrap[data-level="1"]' ),
submenu = document.querySelector( '.menu-wrap[data-level="2"]' ),
isMenuOpen = false, isSubMenuOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
caldays.forEach( function( cell ) {
if( cell.hasChildNodes() ) {
cell.addEventListener( 'click', toggleSubMenu );
}
} );
if( closebtnsub ) {
closebtnsub.addEventListener( 'click', toggleSubMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
document.addEventListener( 'mousedown', function(ev) {
var target = ev.target;
if( isSubMenuOpen ) {
if( target !== submenu && target !== closebtnsub && !hasParent( target, submenu ) ) {
closeMenus();
}
}
else if( isMenuOpen ) {
if( target !== menu && target !== closebtn && !hasParent( target, menu ) ) {
closeMenus();
}
}
} );
}
function toggleMenu() {
if( isMenuOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isMenuOpen = !isMenuOpen;
}
function toggleSubMenu() {
if( isSubMenuOpen ) {
classie.remove( bodyEl, 'show-submenu' );
}
else {
classie.add( bodyEl, 'show-submenu' );
}
isSubMenuOpen = !isSubMenuOpen;
}
function closeMenus() {
if( isSubMenuOpen ) {
toggleSubMenu();
}
if( isMenuOpen ) {
toggleMenu();
}
}
init();
})();
\ No newline at end of file
MyDjango/static/js/main3.js 0 → 100644
浏览文件 @ 7456ce4c
/**
* main3.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false,
morphEl = document.getElementById( 'morph-shape' ),
s = Snap( morphEl.querySelector( 'svg' ) );
path = s.select( 'path' );
initialPath = this.path.attr('d'),
pathOpen = morphEl.getAttribute( 'data-morph-open' ),
isAnimating = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isAnimating ) return false;
isAnimating = true;
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
// animate path
setTimeout( function() {
// reset path
path.attr( 'd', initialPath );
isAnimating = false;
}, 300 );
}
else {
classie.add( bodyEl, 'show-menu' );
// animate path
path.animate( { 'path' : pathOpen }, 400, mina.easeinout, function() { isAnimating = false; } );
}
isOpen = !isOpen;
}
init();
})();
\ No newline at end of file
MyDjango/static/js/main4.js 0 → 100644
浏览文件 @ 7456ce4c
/**
* main4.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false,
morphEl = document.getElementById( 'morph-shape' ),
s = Snap( morphEl.querySelector( 'svg' ) );
path = s.select( 'path' );
initialPath = this.path.attr('d'),
steps = morphEl.getAttribute( 'data-morph-open' ).split(';');
stepsTotal = steps.length;
isAnimating = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isAnimating ) return false;
isAnimating = true;
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
// animate path
setTimeout( function() {
// reset path
path.attr( 'd', initialPath );
isAnimating = false;
}, 300 );
}
else {
classie.add( bodyEl, 'show-menu' );
// animate path
var pos = 0,
nextStep = function( pos ) {
if( pos > stepsTotal - 1 ) {
isAnimating = false;
return;
}
path.animate( { 'path' : steps[pos] }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() { nextStep(pos); } );
pos++;
};
nextStep(pos);
}
isOpen = !isOpen;
}
init();
})();
\ No newline at end of file
MyDjango/static/js/snap.svg-min.js 0 → 100644
浏览文件 @ 7456ce4c
此差异已折叠。
MyDjango/templates/shouye.html
浏览文件 @ 7456ce4c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>测试网页，这里是首页。点击show跳转到数据展示页面</p>
<a href="{% url 'show'%}">show</a>
<a href="{% url 'show2'%}">show2</a>
</body>
</html>
\ No newline at end of file
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" type="text/css" href="../static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../static/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../static/css/menu_topexpand.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<a href="{% url 'show'%}">show</a>
<a href="{% url 'show2'%}">show2</a>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"></button>
<div class="content-wrap">
<div class="content">
<header class="codrops-header">
<h1>煤矿工作面安全预警平台 <span>安全检测反馈</span></h1>
<!--在这里添加东西，比如照片或者什么玩意的-->
<!--css去topexpand.css更改，看类名就能找到-->
<img src="">
</nav>
</header>
</div>
</div><!-- /content-wrap -->
<script src="../static/js/classie.js"></script>
<script src="../static/js/main.js"></script>
</div>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或