Skip to content

Commit 7c62a1c

Browse files
joephonjoephon
committed
add apps page
1 parent d31b6db commit 7c62a1c

14 files changed

+54464
-39
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎lib/m.app.js

+26,809-17
Large diffs are not rendered by default.

‎lib/p.app.js

+27,318-18
Large diffs are not rendered by default.

‎src/.DS_Store

0 Bytes
Binary file not shown.

‎src/css/apps.sass

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.apps
2+
width: 100%
3+
height: 100%
4+
background-repeat: no-repeat
5+
background-size: 100%
6+
.container
7+
position: relative
8+
overflow: hidden
9+
width: 100%
10+
height: 100%
11+
.wrap
12+
position: absolute
13+
top: 50%
14+
left: 50%
15+
width: 940px
16+
height: 420px
17+
margin-top: -240px
18+
margin-left: -490px
19+
box-shadow: 0px 0px 0px rgb(10,118,183)
20+
background-color: rgba(10,118,183,0)
21+
transition: all 0.3s ease-in-out
22+
.row1
23+
position: absolute
24+
top: 50%
25+
left: -400px
26+
margin-top: -240px
27+
.row2
28+
position: absolute
29+
top: 50%
30+
right: -400px
31+
margin-top: -20px
32+
.item
33+
width: 300px
34+
height: 200px
35+
padding: 25px
36+
border-radius: 8px
37+
text-align: center
38+
cursor: pointer
39+
color: #fff
40+
background-color: rgba(0,0,0,.5)
41+
transition: all 0.5s ease-in-out
42+
&:hover
43+
box-shadow: 1px 1px 50px rgb(10,118,183)
44+
background-color: rgba(0,0,0,.8)
45+
h1
46+
margin-top: 30px
47+
font-size: 20px
48+
p
49+
margin-top: 30px
50+
font-size: 14px
51+
52+
53+

‎src/css/helloReact.sass

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.hello-react
2+
width: 100%
3+
height: 100%
4+
background-color: #000
5+
.container
6+
position: relative
7+
overflow: hidden
8+
width: 100%
9+
height: 100%
10+
.buttons
11+
position: absolute
12+
bottom: 10px
13+
left: 0
14+
width: 100%
15+
height: 120px
16+
line-height: 120px
17+
text-align: center
18+
font-size: 30px
19+
color: #000
20+
.backward
21+
position: absolute
22+
top: 0
23+
left: 50%
24+
width: 60px
25+
height: 120px
26+
margin-left: -60px
27+
border-radius: 60px 0 0 60px
28+
cursor: pointer
29+
background-color: rgba(255,255,255,.5)
30+
transition: all 0.3s ease-in-out
31+
&:hover
32+
background-color: rgba(255,255,255,.9)
33+
.forward
34+
position: absolute
35+
top: 0
36+
left: 50%
37+
width: 60px
38+
height: 120px
39+
border-radius: 0 60px 60px 0
40+
cursor: pointer
41+
background-color: rgba(10,118,183,.5)
42+
transition: all 0.3s ease-in-out
43+
&:hover
44+
background-color: rgba(10,118,183,.9)
45+
.process
46+
overflow: hidden
47+
position: relative
48+
width: 80%
49+
height: 40px
50+
margin: 10px auto 0 auto
51+
border-radius: 15px
52+
background-color: rgba(255,255,255,.5)
53+
.step
54+
position: absolute
55+
top: 0
56+
left: 50%
57+
line-height: 40px
58+
text-align: center
59+
color: #fff
60+
.inner-process
61+
position: absolute
62+
top: 0
63+
left: 0
64+
width: 0
65+
height: 40px
66+
background-color: rgba(10,118,183,1)
67+
transition: all 0.5s ease-in-out
68+
.back
69+
position: absolute
70+
top: 0
71+
right: 0
72+
width: 50px
73+
height: 50px
74+
line-height: 50px
75+
text-align: center
76+
font-size: 30px
77+
border-radius: 50%
78+
cursor: pointer
79+
color: #fff
80+
background-color: rgba(255,255,255,.5)
81+
&:hover
82+
color: #000
83+
background-color: #fff

‎src/css/m.nav.sass

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@
3737
width: 120px
3838
height: 180px
3939
border-radius: 5px
40-
background-color: #eee
40+
background-color: #ccc
4141
.dress
4242
position: absolute
4343
top: -6px
4444
right: 10px
4545
width: 12px
4646
height: 12px
4747
transform: rotate(45deg)
48-
background-color: #eee
48+
background-color: #ccc
4949
.item
5050
width: 100%
5151
height: 36px

‎src/image/.DS_Store

0 Bytes
Binary file not shown.

‎src/image/aim.jpg

892 KB
Loading

‎src/jsx/app.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ReactDOM from 'react-dom';
55
import { Router, Route, IndexRoute } from 'react-router';
66
import Home from './home.jsx';
77
import Profile from './profile.jsx';
8+
import Apps from './apps.jsx';
9+
import HelloReact from './helloReact.jsx';
810
require('../css/default.sass');
911
require('../css/animate.min.css');
1012
require('../css/app.sass');
@@ -35,6 +37,8 @@ ReactDOM.render((
3537
<Route path='/' component={App}>
3638
<IndexRoute component={Home} />
3739
<Route path='profile' component={Profile} />
40+
<Route path='apps' component={Apps} />
41+
<Route path='app/helloReact' component={HelloReact} />
3842
</Route>
3943
</Router>
4044
),document.getElementById('app')

‎src/jsx/apps.jsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
'use strict'
2+
3+
import React from 'react';
4+
import Nav from './nav.jsx';
5+
require('../css/apps.sass');
6+
7+
class Apps extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
hrefAnimation: () => {
12+
this.refs.apps.className = 'apps animated bounceOutLeft';
13+
},
14+
};
15+
}
16+
componentDidMount() {
17+
this.getIn();
18+
}
19+
20+
showApps(row1s,row2s,i) {
21+
setTimeout(() => {
22+
row1s[i].style.left = '50%';
23+
row1s[i].style.marginLeft = i * 320 - 490 + 'px';
24+
row2s[i].style.right = '50%';
25+
row2s[i].style.marginRight = i * 320 - 450 + 'px';
26+
},(i+1) * 150)
27+
}
28+
29+
showFlash(row1s,row2s,i) {
30+
setTimeout(() => {
31+
row1s[i].setAttribute('class','item row1 animated flash');
32+
row2s[i].setAttribute('class','item row2 animated flash');
33+
},1000)
34+
}
35+
36+
boxShadow() {
37+
setTimeout(() => {
38+
this.refs.wrap.style.boxShadow = '1px 1px 500px rgb(10,118,183)';
39+
this.refs.wrap.style.backgroundColor = 'rgba(10,118,183,.4)';
40+
},2000)
41+
setTimeout(() => {
42+
this.refs.wrap.style.boxShadow = '0px 0px 0px rgb(10,118,183)';
43+
this.refs.wrap.style.backgroundColor = 'rgba(10,118,183,0)';
44+
},2300)
45+
}
46+
47+
getIn() {
48+
let row1s = document.getElementsByClassName('row1');
49+
let row2s = document.getElementsByClassName('row2');
50+
for (let i = 0; i < row1s.length; i ++ ) {
51+
this.showApps(row1s,row2s,i);
52+
this.showFlash(row1s,row2s,i);
53+
}
54+
this.boxShadow();
55+
}
56+
57+
helloReact() {
58+
this.refs.react.className = 'item row1 animated bounceOut';
59+
setTimeout(() => {
60+
window.location.href = '#/app/helloReact';
61+
},800)
62+
}
63+
64+
render() {
65+
return(
66+
<div ref='apps' className='apps animated fadeIn' style={{backgroundImage:'url(../image/aim.jpg)'}}>
67+
<div className='container'>
68+
<div ref='wrap' className='wrap'>
69+
</div>
70+
<div ref='react'
71+
className='item row1'
72+
onClick={this.helloReact.bind(this)}>
73+
<h1>Say Hello to React</h1>
74+
<p>Coming soon!</p>
75+
</div>
76+
<div ref='wiki' className='item row1'>
77+
<h1>Wikipedia Search Engine</h1>
78+
<p>Coming soon!</p>
79+
</div>
80+
<div ref='calculator' className='item row1'>
81+
<h1>Stainless Steel Calculator</h1>
82+
<p>Coming soon!</p>
83+
</div>
84+
<div ref='timer' className='item row2'>
85+
<h1>Pomodoro Timer Zipline</h1>
86+
<p>Coming soon!</p>
87+
</div>
88+
<div ref='weather' className='item row2'>
89+
<h1>Weather App</h1>
90+
<p>Coming soon!</p>
91+
</div>
92+
<div ref='pacman' className='item row2'>
93+
<h1>2048</h1>
94+
<p>Coming soon!</p>
95+
</div>
96+
<Nav title='Apps' hrefAnimation={this.state.hrefAnimation}/>
97+
</div>
98+
{this.props.children}
99+
</div>
100+
);
101+
}
102+
};
103+
104+
export default Apps;
105+
106+
107+
108+
109+
110+

‎src/jsx/helloReact.jsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use strict'
2+
3+
import React from 'react';
4+
require('../css/helloReact.sass');
5+
6+
class HelloReact extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
step: 0,
11+
total: 20,
12+
};
13+
}
14+
15+
componentDidMount() {
16+
window.addEventListener('keydown',(event) => {
17+
event.preventDefault();
18+
if (event.keyCode === 37) {
19+
this.backward();
20+
}
21+
else if (event.keyCode === 39) {
22+
this.forward();
23+
}
24+
},false)
25+
}
26+
27+
hrefBack() {
28+
this.refs.helloReact.className = 'hello-react animated lightSpeedOut';
29+
setTimeout(() => {
30+
history.back();
31+
},800)
32+
}
33+
34+
forward() {
35+
this.setState({step: this.state.step + 1});
36+
}
37+
38+
backward() {
39+
this.setState({step: this.state.step - 1});
40+
}
41+
42+
render() {
43+
return(
44+
<div ref='helloReact' className='hello-react animated lightSpeedIn'>
45+
<div className='container'>
46+
<div ref='back'
47+
className='back'
48+
onClick={this.hrefBack.bind(this)}>X</div>
49+
<div ref='process' className='process'>
50+
<div ref='innerProcess' className='inner-process' style={{width:this.state.step/this.state.total*100 + '%'}}></div>
51+
<div className='step'>{Math.floor(this.state.step/this.state.total*100)}%</div>
52+
</div>
53+
<div className='buttons'>
54+
<div className='backward' onClick={this.backward.bind(this)}>
55+
<span className='glyphicon glyphicon-step-backward'></span>
56+
</div>
57+
<div className='forward' onClick={this.forward.bind(this)}>
58+
<span className='glyphicon glyphicon-step-forward'></span>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
);
64+
}
65+
};
66+
67+
export default HelloReact;

‎src/jsx/home.jsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,20 @@ class Home extends React.Component {
9393
},1000)
9494
}
9595

96+
/*
97+
handle Apps actions
98+
*/
99+
hrefPresent() {
100+
this.refs.present.className = 'nav animated shake';
101+
setTimeout(() => {
102+
this.refs.home.className= 'home animated bounceOutRight';
103+
setTimeout(() => {
104+
window.location.href = '#/apps';
105+
},500)
106+
},1000)
107+
}
108+
109+
96110
/*
97111
handle home page text language
98112
*/
@@ -242,7 +256,9 @@ class Home extends React.Component {
242256
<div className='dress2'><span className='glyphicon glyphicon-pencil'></span></div>
243257
<div className='dress3'>Contains some chit notes, click to see around.</div>
244258
</div>
245-
<div ref ='present' className='nav animated flipInY'>
259+
<div ref ='present'
260+
className='nav animated flipInY'
261+
onClick={this.hrefPresent.bind(this)}>
246262
<div className='dress0'><span className='glyphicon glyphicon-hand-right'></span></div>
247263
<div className='dress1'></div>
248264
<div className='dress2'><span className='glyphicon glyphicon-film'></span></div>

‎src/jsx/nav.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class Nav extends React.Component {
2020
hrefBack() {
2121
this.props.hrefAnimation();
2222
setTimeout(() => {
23-
window.location.href = '#/';
23+
window.history.back();
2424
},500)
2525
}
2626

0 commit comments

Comments
 (0)