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 { .navbar-brand {
width: 70%; height: 50px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
font-size: 1.5rem;
} }
#signups { .navbar {
color: #00a4d9; border-bottom: 1px solid #dddddd;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
font-size: 1.25rem;
}
#pic {
width: 100%;
} }
#online { #online {
...@@ -18,14 +28,20 @@ ...@@ -18,14 +28,20 @@
padding-top: .5rem; padding-top: .5rem;
} }
#title {
padding-top: 4rem;
padding-left: 4rem;
}
.col-md-6 { .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: 1px solid #ccc;
border-radius: 10px; border-radius: 10px;
margin: 0.5%; margin: 0.5%;
padding-top: 1rem; padding-top: 1rem;
flex: 0 0 48%; flex: 0 0 48%;
} }
h2 { h2 {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/ /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
padding: .5rem; padding: .5rem;
...@@ -48,12 +64,6 @@ sup { ...@@ -48,12 +64,6 @@ sup {
color: #00a4d9; color: #00a4d9;
} }
#requirements-wrapper {
background-color: #eceeef;
margin-top: 2rem;
padding: 2rem 0;
}
#signups-wrapper { #signups-wrapper {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -61,21 +71,63 @@ sup { ...@@ -61,21 +71,63 @@ sup {
#requirements { #requirements {
font-size: 14px; font-size: 14px;
} }
#setup { #setup {
font-size: 1.5rem; font-size: 1.5rem;
} }
/*#main > div:nth-child(1) {*/
/*border-left: 4px solid #aae5ff;*/
/*}*/
/*#main > div:nth-child(2) {*/ #main-wrapper {
/*border-left: 4px solid #a8ffab;*/ 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) {*/ #requirements-wrapper {
/*border-left: 4px solid #ffaabe;*/ 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) {*/ #main > div:nth-child(4) {
/*border-left: 4px solid #fffc9e;*/ 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"> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#"> <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>
<!--<a class="navbar-brand" href="#"></a>--> <!--<a class="navbar-brand" href="#"></a>-->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="jumbotron"> <div class="jumbotron">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col-md-5" id="title">
<h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1> <h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
<p>MyCard 同人游戏平台</p> <p>MyCard 同人游戏平台</p>
<p> <p>
...@@ -35,78 +35,79 @@ ...@@ -35,78 +35,79 @@
萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与 萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与
<a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p> <a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p>
</div> </div>
<div class="col" id="pic"> <div class="col">
<img src="images/MyCardProduct.png"> <img id="pic" src="images/MyCardProduct.png">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="main-wrapper">
<div class="container">
<!-- Example row of columns -->
<div class="row" id="main">
<div class="container"> <div class="col-md-6">
<!-- Example row of columns --> <h2>新世界的入口</h2>
<div class="row" id="main"> <p>或许您曾听说过一些来自同人世界的传说...<br> ~曾有过有无所不能的神奇网上社区，<br> ~存在过无数创造者共同创造的神奇游戏，<br> ~曾有所有人融洽相处的幻想乡...<br>
</p>
<div class="col-md-6"> <p>
<h2>新世界的入口</h2> Dalao们所说的那个新世界，<br> 萌新却怎么也不知道在哪里！<br>
<p>或许您曾听说过一些来自同人世界的传说...<br> ~曾有过有无所不能的神奇网上社区，<br> ~存在过无数创造者共同创造的神奇游戏，<br> ~曾有所有人融洽相处的幻想乡...<br> </p>不过这一次，你也许找对地方了！
</p> <p>
<p> 安装萌卡平台就是您需要做的第一步！<br>
Dalao们所说的那个新世界，<br> 萌新却怎么也不知道在哪里！<br> </p>
</p>不过这一次，你也许找对地方了！ <p>萌卡平台希望能为萌新打开同人创作新世界的大门！</p>
<p> <p><a class="btn btn-secondary" href="#" role="button">安装萌卡ACG平台 &raquo;</a></p>
安装萌卡平台就是您需要做的第一步！<br> </div>
</p>
<p>萌卡平台希望能为萌新打开同人创作新世界的大门！</p>
<p><a class="btn btn-secondary" href="#" role="button">安装萌卡ACG平台 &raquo;</a></p>
</div>
<div class="col-md-6"> <div class="col-md-6">
<h2>为了爱而存在的萌卡</h2> <h2>为了爱而存在的萌卡</h2>
<p> <p>
如果有过同人创作的经历，<br> 你应该会深深地了解到,<br> 爱的一面是孤独的，忧伤的，边缘化的。<br> 如果有过同人创作的经历，<br> 你应该会深深地了解到,<br> 爱的一面是孤独的，忧伤的，边缘化的。<br>
</p> </p>
<p> <p>
但只要你还相信爱，<br> 它就必将创造出爱与忧伤的结晶，给生命赋予意义。<br> 但只要你还相信爱，<br> 它就必将创造出爱与忧伤的结晶，给生命赋予意义。<br>
</p> </p>
<p> <p>
萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。<br> 因为有大家在，萌卡才会存在。<br> 也正是萌卡存在的意义。<br> 萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。<br> 因为有大家在，萌卡才会存在。<br> 也正是萌卡存在的意义。<br>
</p> </p>
<p>萌卡平台希望能为有爱的人提供可能！</p> <p>萌卡平台希望能为有爱的人提供可能！</p>
<p><a class="btn btn-secondary" href="#" role="button">欢迎勾搭合作 &raquo;</a></p> <p><a class="btn btn-secondary" href="#" role="button">欢迎勾搭合作 &raquo;</a></p>
</div> </div>
<div class="col-md-6" id="community"> <div class="col-md-6" id="community">
<h2>孤独者的家园</h2> <h2>孤独者的家园</h2>
<p> <p>
世界与我是那么格格不入，<br> 我们总在搜索与我们相似的人，<br> ——同道之人，同好之人，同命之人。<br> 世界与我是那么格格不入，<br> 我们总在搜索与我们相似的人，<br> ——同道之人，同好之人，同命之人。<br>
</p> </p>
<p> <p>
在这个一切都被沦为工具的时代，<br> 呼吸似乎都变得困难。<br> 在这个一切都被沦为工具的时代，<br> 呼吸似乎都变得困难。<br>
</p> </p>
<p> <p>
孤独的我们，<br> 在无尽的大海中相互取暖，<br> 多么的希望有这么一个共同的家园啊！<br> 孤独的我们，<br> 在无尽的大海中相互取暖，<br> 多么的希望有这么一个共同的家园啊！<br>
</p> </p>
<p id="signups-wrapper"><span id="signups" class="stats">{{signups}}</span> 只萌新已加入萌卡</p> <p id="signups-wrapper"><span id="signups" class="stats">{{signups}}</span> 只萌新已加入萌卡</p>
<p><span id="online" class="stats">{{online}}</span> 位爱的战士正在线游戏</p> <p><span id="online" class="stats">{{online}}</span> 位爱的战士正在线游戏</p>
<p><a class="btn btn-secondary" href="#" role="button">加入萌卡社区 &raquo;</a></p> <p><a class="btn btn-secondary" href="#" role="button">加入萌卡社区 &raquo;</a></p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h2>黑科技创造新希望</h2> <h2>黑科技创造新希望</h2>
<p> <p>
萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，<br> 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！<br> 这些点点滴滴的积累，或许就能够带动同人产业革新哦！<br> 萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，<br> 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！<br> 这些点点滴滴的积累，或许就能够带动同人产业革新哦！<br>
</p> </p>
<p class="features">已实装黑科技功能</p> <p class="features">已实装黑科技功能</p>
<ul> <ul>
<li>能在Mac上玩东方系列及其他 Windows 游戏。</li> <li>能在Mac上玩东方系列及其他 Windows 游戏。</li>
<li>在 PC 平台上玩部分非 PC 平台的游戏。</li> <li>在 PC 平台上玩部分非 PC 平台的游戏。</li>
<li>为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。</li> <li>为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。</li>
<li>自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。</li> <li>自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。</li>
<li>为游戏发布者定制自定义功能（参考 YGOPro）。</li> <li>为游戏发布者定制自定义功能（参考 YGOPro）。</li>
<li>为游戏提供在线存档保存功能（云存档）。</li> <li>为游戏提供在线存档保存功能（云存档）。</li>
<li>一键安装游戏，自动解决各种依赖问题。</li> <li>一键安装游戏，自动解决各种依赖问题。</li>
</ul> </ul>
<p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p> <p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -129,10 +130,13 @@ ...@@ -129,10 +130,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div id="footer-wrapper">
<hr> <div class="container">
<footer>
<footer> <div id="footer">
<p>&copy; MyCard 2017</p> <p>&copy; MyCard 2017 all right reserved.</p>
</footer> </div>
</footer>
</div>
</div> </div>
styles.css
View file @ e72184a4
/* Move down content because we have a fixed navbar that is 50px tall */ /* Move down content because we have a fixed navbar that is 50px tall */
body { body {
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif; font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
padding-top: 2rem;
font-size: 15px; font-size: 15px;
} }
...@@ -10,6 +9,7 @@ body { ...@@ -10,6 +9,7 @@ body {
} }
.jumbotron { .jumbotron {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/ background: linear-gradient( to bottom, #f7f7f7, #eee );
background: linear-gradient( 150deg, #f0c3c2, #e0efd1, #9ae2d3 ); 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