Skip to content

M
Moecube Store
Commit 1557bfb7 authored by HJISTC's avatar HJISTC
Browse files
Options

Add Background and adjust

parent 756dacc7
Show whitespace changes
Inline Side-by-side
Showing with 184 additions and 215 deletions
i18n.json
View file @ 1557bfb7
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"CardTitle1": "Enter the Doujin World", "CardTitle1": "Enter the Doujin World",
"CardTitle2": "For all Doujin Believers", "CardTitle2": "For all Doujin Believers",
"CardTitle3": "No Longer Alone", "CardTitle3": "No Longer Alone",
"CardTitle4": "MoeCube Brings Light to the Darkness", "CardTitle4": "Bring Light to the Darkness",
"CardContent1":"New to Doujin world? No problem!\nMoeCube is the best place for you!\nNo more finding doujins games from ten different websites!\nMoeCube collect the best doujins for you!\n( Yes! We also make our own doujin games too! )", "CardContent1":"New to Doujin world? No problem!\nMoeCube is the best place for you!\nNo more finding doujins games from ten different websites!\nMoeCube collect the best doujins for you!\n( Yes! We also make our own doujin games too! )",
"CardContent2":"If you are a doujin creator like us,\nyou may meet the same problem as we do.\nDoujin is hard, lonely and lack of modern platform,\nMoeCube is born to solve this problem.\nLet's get together and make doujin better!", "CardContent2":"If you are a doujin creator like us,\nyou may meet the same problem as we do.\nDoujin is hard, lonely and lack of modern platform,\nMoeCube is born to solve this problem.\nLet's get together and make doujin better!",
"CardContent3":"MoeCube connects people togehter.\nWe'll have communities, chatrooms, friends systems...etc.\nHere, meet the friend you like will be easy.\nWe wish you will no longer feel lonely!", "CardContent3":"MoeCube connects people togehter.\nWe'll have communities, chatrooms, friends systems...etc.\nHere, meet the friend you like will be easy.\nWe wish you will no longer feel lonely!",
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
"CardAction1":"Download", "CardAction1":"Download",
"CardAction2":"Contact Us (Offer Help, Cooperation)", "CardAction2":"Contact Us (Offer Help, Cooperation)",
"CardAction3":"MoeCube Community", "CardAction3":"MoeCube Community",
"CardAction4":"See other Will-Have Functions", "CardAction4":"Give us suggestions",
"WillHaveFunctions":"See other Will-Have Functions",
"Welcome":"Welcome to MoeCube", "Welcome":"Welcome to MoeCube",
"IsRegisted":" player is registered.", "IsRegisted":" player is registered.",
"IsPlaying":" player is playing." "IsPlaying":" player is playing."
...@@ -44,7 +45,8 @@ ...@@ -44,7 +45,8 @@
"CardAction1":"安装萌立方ACG平台", "CardAction1":"安装萌立方ACG平台",
"CardAction2":"欢迎勾搭合作", "CardAction2":"欢迎勾搭合作",
"CardAction3":"加入萌立方社区", "CardAction3":"加入萌立方社区",
"CardAction4":"其他功能目标", "CardAction4":"向萌立方许愿新功能",
"WillHaveFunctions":"其他功能目标",
"Welcome":"欢迎加入萌立方!", "Welcome":"欢迎加入萌立方!",
"IsRegisted":"位萌新已加入萌立方", "IsRegisted":"位萌新已加入萌立方",
"IsPlaying":"位爱的战士正在线进行游戏" "IsPlaying":"位爱的战士正在线进行游戏"
......
src/App.css
View file @ 1557bfb7
...@@ -16,18 +16,19 @@ ...@@ -16,18 +16,19 @@
} }
.App-Poster { .App-Poster {
width: 100%; margin-top: 10px;
width: 295px;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
} }
.App-Poster-Content .ant-btn {
margin: 1.2rem 0
}
.App-Content1 { .App-Content1 {
padding: 50px; margin-top: 64px;
background: #333; height:450px;
background: url(../public/FrontPageBackGround.jpg) 100%/cover;
background-position: center;
overflow:hidden;
width:100%;
} }
.App-Content2 { .App-Content2 {
...@@ -59,19 +60,29 @@ ...@@ -59,19 +60,29 @@
.font-C-Gray{ .font-C-Gray{
color:#ccc; color:#ccc;
} }
.App-Poster-Content
{
display: flex;
flex-direction: column;
align-items: center;
}
.App-Poster-Content .title{ .App-Poster-Content .title{
font-size: 2.5rem; margin-top: -20px;
padding: .8rem 0; margin-bottom: -5px;
font-size: 1.3rem;
color: #eee color: #eee
} }
.App-Poster-Content a{ .App-Poster-Content a{
padding: 0 .5vw padding: 0 .5vw;
margin-top: 8px
} }
.App-Poster-Content .title .sub{ .App-Poster-Content .title .sub{
font-size: 1rem; font-size: 0.7rem;
color: #eee; color: #eee;
padding: 0 1vw padding: 0 0.4vw
} }
.ant-layout-content>p{ .ant-layout-content>p{
...@@ -92,3 +103,8 @@ ...@@ -92,3 +103,8 @@
padding-bottom:0px; padding-bottom:0px;
} }
#Card4Button
{
margin-top: 50px;
}
src/App.js
View file @ 1557bfb7
...@@ -7,33 +7,33 @@ import config from './config' ...@@ -7,33 +7,33 @@ import config from './config'
import i18Data from '../i18data.json' import i18Data from '../i18data.json'
import { FormattedMessage } from 'react-intl' import { FormattedMessage } from 'react-intl'
import { Layout, Row, Col, Button, Card, Timeline} from 'antd' import { Layout, Row, Col, Button, Card, Timeline } from 'antd'
const { Content, Footer, Header} = Layout const { Content, Footer, Header } = Layout
import Nav_Mobile from './Nav' import Nav_Mobile from './Nav'
export default class App extends Component { export default class App extends Component {
constructor(props){ constructor(props) {
super(props) super(props)
this.state = { this.state = {
isMobile: false, isMobile: false,
stats: {signups: null, online: null }, stats: { signups: null, online: null },
latest: {win32: {},drawin: {}}, latest: { win32: {}, drawin: {} },
platform: navigator.platform.match(/Mac/i) ? 'drawin' : 'win32' platform: navigator.platform.match(/Mac/i) ? 'drawin' : 'win32'
} }
} }
async componentDidMount(){ async componentDidMount() {
enquire.register('only screen and (max-width: 767px)', { enquire.register('only screen and (max-width: 767px)', {
match: () => { match: () => {
this.setState({isMobile: true}) this.setState({ isMobile: true })
}, },
unmatch: () => { unmatch: () => {
this.setState({isMobile: false}) this.setState({ isMobile: false })
} }
}) })
...@@ -91,89 +91,48 @@ export default class App extends Component { ...@@ -91,89 +91,48 @@ export default class App extends Component {
} }
render() { render() {
const {latest, isMobile, stats} = this.state const { latest, isMobile, stats } = this.state
const {language} = this.props const { language } = this.props
const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN'] const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN']
return ( return (
<Layout> <Layout>
<Header style={{position:'fixed' ,zIndex:'9',width:'100%'}}> <Header style={{ position: 'fixed', zIndex: '9', width: '100%' }}>
<Nav_Mobile isMobile={isMobile} /> <Nav_Mobile isMobile={isMobile} />
</Header> </Header>
<Content className="App-Content1"> <Content className="App-Content1">
{!isMobile ? (<Row type="flex" justify="space-around" align="middle" >
(<Row type="flex" justify="space-around" align="middle"> <Col span={24} style={{ display: "flex", flexDirection: 'column', alignItems: 'center' }}>
<Col span={12} push={1}>
<div className="App-Poster-Content">
<div className="title">
<FormattedMessage id="MoeCube"/>
<span className="sub">
Beta
</span>
</div>
<div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/>
</div>
<div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/>
<DownLoadLink text='Mac' data={latest.drawin} />
<FormattedMessage id="OperationSystem"/>
</div>
<a href={latest[this.state.platform].url}> <img alt="img" src={require('../public/Cubbit_Full_512.png')} className="App-Poster" />
<Button type="primary" icon="download" size='large'>
<FormattedMessage id={"Download"}/>
</Button>
</a>
</div>
</Col>
<Col span={12} pull={1}>
<img alt="img" src={require('../public/MoeCubeProduct.png')} className="App-Poster"/>
</Col>
</Row>
) : (
<div>
<Row>
<Col span={24}>
<div className="App-Poster-Content"> <div className="App-Poster-Content">
<div className="title"> <div className="title">
<FormattedMessage id="MoeCube"/> <FormattedMessage id="MoeCubeDoujinGamePlatform" />
<span className="sub"> <span className="sub">
Beta Beta
</span> </span>
</div> </div>
<div className="font-C-Gray"> <div className="font-C-Gray">
<FormattedMessage id="MoeCubeDoujinGamePlatform"/> <FormattedMessage id="SupportBoth" />
</div>
<div className="font-C-Gray">
<FormattedMessage id="SupportBoth"/>
<DownLoadLink text='Windows' data={latest.win32} /> <DownLoadLink text='Windows' data={latest.win32} />
<FormattedMessage id="And"/> <FormattedMessage id="And" />
<DownLoadLink text='Mac' data={latest.drawin} /> <DownLoadLink text='Mac' data={latest.drawin} />
<FormattedMessage id="OperationSystem"/> <FormattedMessage id="OperationSystem" />
</div> </div>
<a href={latest[this.state.platform].url}> <a href={latest[this.state.platform].url}>
<Button type="primary" icon="download" size='large'> <Button type="primary" icon="download" size='large'>
<FormattedMessage id={"Download"}/> <FormattedMessage id={"Download"} />
</Button> </Button>
</a> </a>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row>
<Col span={24}>
<img alt="img" src={require('../public/MoeCubeProduct.png')} className="App-Poster"/>
</Col>
</Row>
</div>
)}
</Content> </Content>
<Content> <Content>
...@@ -182,71 +141,64 @@ export default class App extends Component { ...@@ -182,71 +141,64 @@ export default class App extends Component {
(<div> (<div>
<Row> <Row>
<Col span="12"> <Col span="12">
<Card title={<FormattedMessage id={"CardTitle1"}/>} > <Card title={<FormattedMessage id={"CardTitle1"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent1"} /> <FormattedMessage id={"CardContent1"} />
</p> </p>
<a href=""><Button size="large"><FormattedMessage id={"CardAction1"} /></Button></a> <a href=""><Button type="primary" icon="download"><FormattedMessage id={"CardAction1"} /></Button></a>
</Card> </Card>
</Col> </Col>
<Col span="12"> <Col span="12">
<Card title={<FormattedMessage id={"CardTitle2"}/>} > <Card title={<FormattedMessage id={"CardTitle2"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent2"} /> <FormattedMessage id={"CardContent2"} />
</p> </p>
<a href=""><Button type="primary" icon="plus-square-o"><FormattedMessage id={"CardAction2"} /></Button></a>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}>
{realData.CardTimeLine2.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline>
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="12"> <Col span="12">
<Card title={<FormattedMessage id={"CardTitle3"}/>} > <Card title={<FormattedMessage id={"CardTitle3"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent3"} /> <FormattedMessage id={"CardContent3"} />
</p> </p>
<Timeline>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"}/></a>}> <Timeline.Item>{stats.signups || 'loading..'} <FormattedMessage id="IsRegisted" /> </Timeline.Item>
<Timeline.Item>{stats.signups || 'loading..'} <FormattedMessage id="IsRegisted"/> </Timeline.Item> <Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying" /> </Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} <FormattedMessage id="IsPlaying"/> </Timeline.Item>
{realData.CardTimeLine3.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item>
})}
</Timeline> </Timeline>
<a href=""><Button type="primary" icon="star"><FormattedMessage id={"CardAction3"} /></Button></a>
</Card> </Card>
</Col> </Col>
<Col span="12"> <Col span="12">
<Card title={<FormattedMessage id={"CardTitle4"}/>} > <Card title={<FormattedMessage id={"CardTitle4"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent4"} /> <FormattedMessage id={"CardContent4"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"WillHaveFunctions"} /></a>}>
{realData.CardTimeLine4.map((item, i) => { {realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
})} })}
</Timeline> </Timeline>
<a href=""><Button id="Card4Button" type="primary" icon="heart"><FormattedMessage id={"CardAction4"} /></Button></a>
</Card> </Card>
</Col> </Col>
</Row> </Row>
</div>):(<div> </div>) : (<div>
<Row> <Row>
<Col span="24"> <Col span="24">
<Card title={<FormattedMessage id={"CardTitle1"}/>} > <Card title={<FormattedMessage id={"CardTitle1"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent1"} /> <FormattedMessage id={"CardContent1"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction1"}/></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction1"} /></a>}>
{realData.CardTimeLine1.map((item, i) => { {realData.CardTimeLine1.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
...@@ -257,12 +209,12 @@ export default class App extends Component { ...@@ -257,12 +209,12 @@ export default class App extends Component {
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<Card title={<FormattedMessage id={"CardTitle2"}/>} > <Card title={<FormattedMessage id={"CardTitle2"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent2"} /> <FormattedMessage id={"CardContent2"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"} /></a>}>
{realData.CardTimeLine2.map((item, i) => { {realData.CardTimeLine2.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
...@@ -273,12 +225,12 @@ export default class App extends Component { ...@@ -273,12 +225,12 @@ export default class App extends Component {
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<Card title={<FormattedMessage id={"CardTitle3"}/>} > <Card title={<FormattedMessage id={"CardTitle3"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent3"} /> <FormattedMessage id={"CardContent3"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"}/></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"} /></a>}>
<Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item> <Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item>
<Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item> <Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item>
...@@ -286,22 +238,21 @@ export default class App extends Component { ...@@ -286,22 +238,21 @@ export default class App extends Component {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
})} })}
</Timeline> </Timeline>
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<Card title={<FormattedMessage id={"CardTitle4"}/>} > <Card title={<FormattedMessage id={"CardTitle4"} />} >
<p className="App-Card-content"> <p className="App-Card-content">
<FormattedMessage id={"CardContent4"} /> <FormattedMessage id={"CardContent4"} />
</p> </p>
<Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}> <Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}>
{realData.CardTimeLine4.map((item, i) => { {realData.CardTimeLine4.map((item, i) => {
return <Timeline.Item key={i}>{item}</Timeline.Item> return <Timeline.Item key={i}>{item}</Timeline.Item>
})} })}
</Timeline> </Timeline>
<a href=""><Button size="large" type="primary"><FormattedMessage id={"CardAction4"} /></Button></a>
</Card> </Card>
</Col> </Col>
</Row> </Row>
...@@ -313,7 +264,7 @@ export default class App extends Component { ...@@ -313,7 +264,7 @@ export default class App extends Component {
<p><FormattedMessage id={"Welcome"} /></p> <p><FormattedMessage id={"Welcome"} /></p>
<Button type="primary" icon="download" size='large' onClick={() => window.open(latest[this.state.platform].url)}> <Button type="primary" icon="download" size='large' onClick={() => window.open(latest[this.state.platform].url)}>
<FormattedMessage id={"Download"}/> <FormattedMessage id={"Download"} />
</Button> </Button>
</Content> </Content>
...@@ -326,7 +277,7 @@ export default class App extends Component { ...@@ -326,7 +277,7 @@ export default class App extends Component {
} }
} }
const DownLoadLink = ({text, data = {}}) => { const DownLoadLink = ({ text, data = {} }) => {
return ( return (
<a href={data.url} >{text}</a> <a href={data.url} >{text}</a>
......
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