xuyue/OnlineJudge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加新的首页

Browse Source
This commit is contained in:
virusdefender
2015-08-19 20:16:30 +08:00
parent 096873c028
commit 016dc1b79f
6 changed files with 3609 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
template/oj/index.html
View File

@@ -1,39 +1,139 @@
{% extends "oj_base.html" %}
{% block body %}
<div class="container">
<div class="container">
<!DOCTYPE html>
<html>
<div class="jumbotron">
<h1>青岛大学在线评测平台</h1>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>青岛大学在线评测平台 - 首页</title>
<p class="lead">走心的在线评测平台和算法交流社区，全新登场~</p>
<link rel="stylesheet" type="text/css" href="/static/css/fullpage/jquery.fullPage.css">
<style>
html, textarea, input, option, select, button {
font: 1em "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
color: #FFF;
}
<p><a class="btn btn-lg btn-primary" href="/problems/" role="button">开始刷题！</a></p>
</div>
a {
text-decoration: none;
color: #FFF;
}
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>全新UI 全新设计</h2>
#header {
position: fixed;
height: 30px;
display: block;
width: 100%;
background: transparent;
z-index: 10;
padding: 20px 20px 0 20px;
}
<p>精心设计的UI和交互让你。。。编不下去了 </p>
</div>
<div class="col-lg-4">
<h2>分布式评测</h2>
#name {
font-size: 45px;
margin-right: 20px;
}
<p>技术领先的高性能分布式评测机制，根据提交数量自动伸缩判题机器实例。</p>
</div>
<div class="col-lg-4">
<h2>高质量原创题目</h2>
.section {
position: relative;
}
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id
ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh,
ut fermentum massa.</p>
</div>
</div>
.section h1 {
font-size: 60px;
}
.section h3 {
font-size: 30px;
font-weight: normal;
}
.bottom-pointer {
top: auto;
bottom: 20px;
position: absolute;
left: 48%;
}
.index-section-text {
position: absolute;
top: 30%;
width: 100%;
text-align: center;
}
.section-text {
text-align: center;
}
.icon {
max-height: 300px;
max-width: 300px;
}
</style>
<link rel="stylesheet" href="/static/css/animate/animate.css">
<script src="/static/js/lib/jquery/jquery.js"></script>
<script src="/static/js/lib/fullpage/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['#28ac72', '#2f7ddb', '#FAC832', '#B01414'],
css3: true,
navigation: true,
loopBottom: true
});
});
</script>
</head>
<body>
<div id="header">
<span id="name">qduoj</span>
<a href="#">题目</a>&nbsp;&nbsp;<a href="#">比赛</a>&nbsp;&nbsp;<a href="#">小组</a>
</div>
<div id="fullpage">
<div class="section" id="section0">
<div class="index-section-text animated bounceInUp">
<h1>青岛大学在线评测平台</h1>
<h3>全新面貌，新的开始~</h3>
</div>
<div class="bottom-pointer">↓继续滚动~</div>
</div>
<div class="section" id="section1">
<div class="section-text">
<img class="icon" id="img1" src="/static/img/index/a.png">
<h1>青岛大学在线评测平台</h1>
<h3>全新面貌，新的开始~</h3>
</div>
</div>
<div class="section" id="section2">
<div class="section-text">
<img class="icon" id="img2" src="/static/img/index/c.png">
<h1>青岛大学在线评测平台</h1>
<h3>全新面貌，新的开始~</h3>
</div>
</div>
{% endblock %}
<div class="section" id="section3">
<div class="section-text">
<img class="icon" id="img3" src="/static/img/index/m.png">
<h1>青岛大学在线评测平台</h1>
<h3>全新面貌，新的开始~</h3>
</div>
</div>
</div>
</body>
</html>