Skip to content

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

Adjust UI

parent bf5c1d17
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 99 deletions
app/store.component.css
View file @ e72184a4
#pic {
width: 70%;
.navbar-brand {
height: 50px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
font-size: 1.5rem;
}
#signups {
color: #00a4d9;
.navbar {
border-bottom: 1px solid #dddddd;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
font-size: 1.25rem;
}
#pic {
width: 100%;
}
#online {
......@@ -18,14 +28,20 @@
padding-top: .5rem;
}
#title {
padding-top: 4rem;
padding-left: 4rem;
}
.col-md-6 {
box-shadow: 0 0 30px rgba(0,0,0,.1);
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;
......@@ -48,12 +64,6 @@ sup {
color: #00a4d9;
}
#requirements-wrapper {
background-color: #eceeef;
margin-top: 2rem;
padding: 2rem 0;
}
#signups-wrapper {
margin-bottom: 0;
}
......@@ -61,21 +71,63 @@ sup {
#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-wrapper {
z-index: 1;
position: relative;
padding-top: 2rem;
padding-bottom: 2rem;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
background: linear-gradient( to bottom, #f7f7f7, #eee );
}
/*#main > div:nth-child(3) {*/
/*border-left: 4px solid #ffaabe;*/
/*}*/
#requirements-wrapper {
z-index: 2;
position: relative;
background: linear-gradient( to bottom, #f7f7f7, #eee );
padding: 4rem 0;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#main > div:nth-child(1) {
border-top: 4px solid #9acfe6;
background-color: rgba(255, 255, 255, 0.5);
}
#main > div:nth-child(2) {
border-top: 4px solid #9ACFE6;
background-color: rgba(255, 255, 255, 0.5);
}
#main > div:nth-child(3) {
border-top: 4px solid #9ACFE6;
background-color: rgba(255, 255, 255, 0.5);
}
/*#main > div:nth-child(4) {*/
/*border-left: 4px solid #fffc9e;*/
/*}*/
#main > div:nth-child(4) {
border-top: 4px solid #9ACFE6;
background-color: rgba(255, 255, 255, 0.5);
}
#footer-wrapper {
z-index: 3;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
padding-top: 1rem;
padding-bottom: 1rem;
background: linear-gradient( to bottom, #f7f7f7, #eee );
}
#footer {
text-align: right;
border: 1px solid #eeeeee;
border-radius: 10px;
padding-top: 1rem;
padding-left: 2rem;
padding-right: 2rem;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
}
app/store.component.html
View file @ e72184a4
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<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="#">
<img src="https://mycard.moe/logo_60.png" width="30" height="30" class="d-inline-block align-top" alt=""> MyCard
<img src="https://mycard.moe/logo_60.png" width="40" height="40" class="d-inline-block align-center" alt=""> MyCard
</a>
<!--<a class="navbar-brand" href="#"></a>-->
......@@ -25,7 +25,7 @@
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col">
<div class="col-md-5" id="title">
<h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
<p>MyCard 同人游戏平台</p>
<p>
......@@ -35,78 +35,79 @@
萌卡平台支持 <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" id="pic">
<img src="images/MyCardProduct.png">
<div class="col">
<img id="pic" src="images/MyCardProduct.png">
</div>
</div>
</div>
</div>
<div id="main-wrapper">
<div class="container">
<!-- Example row of columns -->
<div class="row" id="main">
<div class="container">
<!-- Example row of columns -->
<div class="row" id="main">
<div class="col-md-6">
<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>新世界的入口</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>为了爱而存在的萌卡</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>为了爱而存在的萌卡</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" 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" 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>黑科技创造新希望</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 class="col-md-6">
<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>
</div>
......@@ -129,10 +130,13 @@
</div>
</div>
</div>
<div class="container">
<hr>
<footer>
<p>&copy; MyCard 2017</p>
</footer>
<div id="footer-wrapper">
<div class="container">
<footer>
<div id="footer">
<p>&copy; MyCard 2017 all right reserved.</p>
</div>
</footer>
</div>
</div>
styles.css
View file @ e72184a4
/* 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;
}
......@@ -10,6 +9,7 @@ body {
}
.jumbotron {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
background: linear-gradient( 150deg, #f0c3c2, #e0efd1, #9ae2d3 );
background: linear-gradient( to bottom, #f7f7f7, #eee );
border-radius:unset;
margin-bottom:unset;
}
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