Render app pages using react
This commit is contained in:
parent
a3c580aae0
commit
2fd57e8f9a
4 changed files with 33 additions and 16 deletions
|
@ -9,20 +9,10 @@
|
|||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
<title>Oriment</title>
|
||||
</head>
|
||||
<body id="main">
|
||||
<div class="container jumbotron header">
|
||||
<h1 class="animated rubberBand">Oriment</h1>
|
||||
<h5>Orient documents and images automagically</h5>
|
||||
</div>
|
||||
<div class="container animated zoomInUp">
|
||||
<img src="img/compass.png" id="compass"/>
|
||||
</div>
|
||||
<footer>
|
||||
<a class="btn btn-success btn-lg animated pulse infinite">Open Document / Images</a>
|
||||
<input type="file" style="display: none" />
|
||||
</footer>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script type="text/javascript" src="cordova.js"></script>
|
||||
<script type="text/javascript" src="js/libs.js"></script>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import './utils';
|
||||
|
||||
import React from 'react';
|
||||
import HomeScreen from './components/homescreen';
|
||||
|
||||
document.addEventListener("deviceready", function () {
|
||||
function onSuccess(heading) {
|
||||
|
@ -28,3 +29,5 @@ $('footer input').on('change', function () {
|
|||
reader.onload = function(e) { $('#compass').attr('src', e.target.result); };
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
React.render(<HomeScreen />, $('#app')[0]);
|
||||
|
|
21
src/js/components/homescreen.js
Normal file
21
src/js/components/homescreen.js
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
|
||||
export default class HomeScreen extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<span id="main">
|
||||
<div className="container jumbotron header">
|
||||
<h1 className="animated rubberBand">Oriment</h1>
|
||||
<h5>Orient documents and images automagically</h5>
|
||||
</div>
|
||||
<div className="container animated zoomInUp">
|
||||
<img src="img/compass.png" id="compass"/>
|
||||
</div>
|
||||
<footer>
|
||||
<a className="btn btn-success btn-lg animated pulse infinite">Open Document / Images</a>
|
||||
<input type="file" />
|
||||
</footer>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
|
@ -63,4 +63,7 @@ footer {
|
|||
left: 0;
|
||||
width: 100vw;
|
||||
padding-bottom: 25px;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue