Skip to content

M
Moecube Store
Commit 8ae7dc25 authored by hjistc's avatar hjistc
Browse files
Options

改了一波UI

parent e22da6ac
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 56 deletions
app/store.component.css
View file @ 8ae7dc25
#signups {
color: #00a4d9;
}
#online {
color: rgb(241, 138, 6);
}
.stats {
font-size: 1.25rem;
}
.features {
padding-top: .5rem;
}
.col-md-6 {
box-shadow: 0 0 30px rgba(0,0,0,.1);
border: 1px solid #ccc;
border-radius: 10px;
margin: 0.5%;
padding-top: 1rem;
flex: 0 0 48%;
}
h2 {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
padding: .5rem;
font-size: 1.5rem;
/*border-radius: 8px;*/
/*border: 1px solid #eee;*/
}
sup {
top: -3.6em;
font-size: 20%;
}
.btn-primary {
background-color: #00a4d9;
border-color: #008dbb;
}
#requirements-wrapper {
background-color: #eceeef;
margin-top: 2rem;
padding: 2rem 0;
}
#signups-wrapper {
margin-bottom: 0;
}
#requirements {
font-size: 14px;
}
#setup {
font-size: 1.5rem;
}
/*#main > div:nth-child(1) {*/
/*border-left: 4px solid #aae5ff;*/
/*}*/
/*#main > div:nth-child(2) {*/
/*border-left: 4px solid #a8ffab;*/
/*}*/
/*#main > div:nth-child(3) {*/
/*border-left: 4px solid #ffaabe;*/
/*}*/
/*#main > div:nth-child(4) {*/
/*border-left: 4px solid #fffc9e;*/
/*}*/
app/store.component.html
View file @ 8ae7dc25
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<a class="navbar-brand" href="#">
<img src="https://mycard.moe/logo_60.png" width="30" height="30" class="d-inline-block align-top" alt="">
MyCard
</a>
<!--<a class="navbar-brand" href="#"></a>-->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<a class="nav-link" href="https://ygobbs.com/" target="_blank">社区</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
......@@ -35,13 +25,13 @@
<div class="container">
<div class="row">
<div class="col">
<h1 class="display-3">萌卡喵</h1>
<p>这里是一段介绍</p>
<h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
<p>MyCard 同人游戏平台</p>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">立即安装</a>
<a class="btn btn-primary btn-lg" href="https://wudizhanche.mycard.moe/download?platform=win32" role="button">立即安装</a>
</p>
<p>
同时适用于 <a href="#">Windows</a> 和 <a href="#">Linux</a>。 </p>
萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与 <a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p>
</div>
<div class="col">
<img src="http://i.zgjm.org/uploads/allimg/140118/1334551250-0.jpg">
......@@ -52,50 +42,95 @@
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="row" id="main">
<div class="col-md-6">
<h2>Heading</h2>
<p>用户数 {{signups}}</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<h2>新世界的入口</h2>
<p>或许您曾听说过一些来自同人世界的传说...<br> ~曾有过有无所不能的神奇网上社区，<br> ~存在过无数创造者共同创造的神奇游戏，<br> ~曾有所有人融洽相处的幻想乡...<br>
</p>
<p>
Dalao们所说的那个新世界，<br> 萌新却怎么也不知道在哪里！<br>
</p>不过这一次，你也许找对地方了！
<p>
安装萌卡平台就是您需要做的第一步！<br>
</p>
<p>萌卡平台希望能为萌新打开同人创作新世界的大门！</p>
<p><a class="btn btn-secondary" href="#" role="button">安装萌卡ACG平台 &raquo;</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<h2>为了爱而存在的萌卡</h2>
<p>
如果有过同人创作的经历，<br> 你应该会深深地了解到,<br> 爱的一面是孤独的，忧伤的，边缘化的。<br>
</p>
<p>
但只要你还相信爱，<br> 它就必将创造出爱与忧伤的结晶，给生命赋予意义。<br>
</p>
<p>
萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。<br> 因为有大家在，萌卡才会存在。<br> 也正是萌卡存在的意义。<br>
</p>
<p>萌卡平台希望能为有爱的人提供可能！</p>
<p><a class="btn btn-secondary" href="#" role="button">欢迎勾搭合作 &raquo;</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<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 justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<div class="col-md-6" id="community">
<h2>孤独者的家园</h2>
<p>
世界与我是那么格格不入，<br> 我们总在搜索与我们相似的人，<br> ——同道之人，同好之人，同命之人。<br>
</p>
<p>
在这个一切都被沦为工具的时代，<br> 呼吸似乎都变得困难。<br>
</p>
<p>
孤独的我们，<br> 在无尽的大海中相互取暖，<br> 多么的希望有这么一个共同的家园啊！<br>
</p>
<p id="signups-wrapper"><span id="signups" class="stats">{{signups}}</span> 只萌新已加入萌卡</p>
<p><span id="online" class="stats">{{online}}</span> 位爱的战士正在线游戏</p>
<p><a class="btn btn-secondary" href="#" role="button">加入萌卡社区 &raquo;</a></p>
</div>
<div class="col-md-6">
<h2>Heading</h2>
<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 justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<h2>黑科技创造新希望</h2>
<p>
萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，<br> 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！<br> 这些点点滴滴的积累，或许就能够带动同人产业革新哦！<br>
</p>
<p class="features">已实装黑科技功能</p>
<ul>
<li>能在Mac上玩东方系列及其他 Windows 游戏。</li>
<li>在 PC 平台上玩部分非 PC 平台的游戏。</li>
<li>为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。</li>
<li>自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。</li>
<li>为游戏发布者定制自定义功能（参考 YGOPro）。</li>
<li>为游戏提供在线存档保存功能（云存档）。</li>
<li>一键安装游戏，自动解决各种依赖问题。</li>
</ul>
<p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p>
</div>
</div>
<div class="row">
<div class="col">
<p>那么，您还在犹豫什么呢？</p>
<a class="btn btn-primary btn-lg" href="#" role="button">立即安装</a>
</div>
<div>
<p>系统需求</p>
<p>Windows 7、8 或 10</p>
<p>1G 内存</p>
<p>1 Ghz 或更快的处理器</p>
<p>Mac OS X 版本 10.12 (Sierra) 或更新的版本。</p>
<p>强烈推荐使用双键鼠标</p>
</div>
<div id="requirements-wrapper">
<div class="container">
<div class="row">
<div id="setup" class="col">
<p>欢迎加入萌卡这个大家庭</p>
<a class="btn btn-primary btn-lg" href="https://wudizhanche.mycard.moe/download?platform=win32" role="button">立即安装</a>
</div>
<div id="requirements" class="col">
<p>
系统需求<br> Windows 7、8 或 10<br> 512M 内存<br> 1 Ghz 或更快的处理器 </p>
<p>
Mac OS X 版本 10.12 (Sierra) 或更新的版本。<br> 强烈推荐使用双键鼠标 </p>
<p>1GB 硬盘空间</p>
<p>互联网连接</p>
<p>
1GB 硬盘空间<br> 互联网连接 </p>
</div>
</div>
</div>
</div>
<div class="container">
<hr>
<footer>
<p>&copy; Company 2017</p>
<p>&copy; MyCard 2017</p>
</footer>
</div> <!-- /container -->
</div>
index.html
View file @ 8ae7dc25
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<title>MyCard - 萌卡</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
......@@ -20,6 +20,6 @@
</head>
<body>
<store>Loading AppComponent content here ...</store>
<store>Loading...</store>
</body>
</html>
styles.css
View file @ 8ae7dc25
/* Move down content because we have a fixed navbar that is 50px tall */
body {
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
padding-top: 2rem;
font-size: 15px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment