diff --git a/src/cordova/src/components/Button.jsx b/src/cordova/src/components/Button.jsx new file mode 100644 index 0000000..c24c589 --- /dev/null +++ b/src/cordova/src/components/Button.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default class Button extends React.Component { + render() { + return
+ {this.props.text} +
+ } +} \ No newline at end of file diff --git a/src/cordova/src/components/Logo.jsx b/src/cordova/src/components/Logo.jsx new file mode 100644 index 0000000..00d4734 --- /dev/null +++ b/src/cordova/src/components/Logo.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +export default class Logo extends React.Component { + render() { + return
+
QR NOTIFICATOR
+
+
2
+
+
+ } +} \ No newline at end of file diff --git a/src/cordova/src/components/Spacer.jsx b/src/cordova/src/components/Spacer.jsx new file mode 100644 index 0000000..a1ddf32 --- /dev/null +++ b/src/cordova/src/components/Spacer.jsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default (props) =>
\ No newline at end of file diff --git a/src/cordova/src/index.html b/src/cordova/src/index.html new file mode 100755 index 0000000..21d12fe --- /dev/null +++ b/src/cordova/src/index.html @@ -0,0 +1,14 @@ + + + + + Basic Setup + + + + + +
+ + + \ No newline at end of file diff --git a/src/cordova/src/index.jsx b/src/cordova/src/index.jsx new file mode 100755 index 0000000..7b6d66c --- /dev/null +++ b/src/cordova/src/index.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import './styles.less' +import './assets/fonts/fonts.less' + +import App from './screens/App' + +ReactDOM.render( + + , document.getElementById('root') +) diff --git a/src/cordova/src/screens/App.jsx b/src/cordova/src/screens/App.jsx new file mode 100644 index 0000000..22ca942 --- /dev/null +++ b/src/cordova/src/screens/App.jsx @@ -0,0 +1,42 @@ +import React from 'react' + +import Home from './Home' +import Scan from './Scan' + +const Screens = { + home: Home, + scan: Scan +} + +export default class App extends React.Component { + + constructor(props) { + super(props) + + this.state = { + route: 'home', + data: {}, + } + + this.navigate = this.navigate.bind(this) + } + + navigate(route, data = {}) { + this.setState({ + route, data + }) + } + + + render() { + const Current = Screens[this.state.route] + + + return
+
+
+ {Current && } +
+
+ } +} \ No newline at end of file diff --git a/src/cordova/src/screens/Home.jsx b/src/cordova/src/screens/Home.jsx new file mode 100644 index 0000000..8e88369 --- /dev/null +++ b/src/cordova/src/screens/Home.jsx @@ -0,0 +1,30 @@ +import React from 'react' + +import Button from '../components/Button' +import Spacer from '../components/Spacer'; +import Logo from '../components/Logo'; + +const list = { + 1: 'Open camera.', + 2: 'Scan QR code.', + 3: 'Get notified', +} + +export default class Home extends React.Component { + render() { + return
+
+ + +
+
+ } +} \ No newline at end of file diff --git a/src/cordova/src/screens/Scan.jsx b/src/cordova/src/screens/Scan.jsx new file mode 100644 index 0000000..6e98a4f --- /dev/null +++ b/src/cordova/src/screens/Scan.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +import Button from '../components/Button' + +export default class Home extends React.Component { + render() { + return
+
Scan
+
+ } +} \ No newline at end of file diff --git a/src/cordova/src/styles.less b/src/cordova/src/styles.less new file mode 100644 index 0000000..529e21b --- /dev/null +++ b/src/cordova/src/styles.less @@ -0,0 +1,87 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + width: 100vw; + height: 100vh; + overflow: hidden +} + +.fill { + width: 100%; + height: 100%; +} + +.column { + display: flex; + flex-direction: column; +} + +.row { + display: flex; + flex-direction: row; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.abs { + position: absolute; + top: 0; + left: 0; + .fill; +} + +.button { + border: 1px solid #000; + height: 45px; + width: 180px; + border-radius: 50px; + .center; +} + +.bold { + font-weight: bold; +} + +#app { + .fill; + font-family: 'Helvetica Neue'; + .bg { + .abs; + z-index: 0; + background-image: linear-gradient(135deg, #6FABFF, #E4FF71); + } + .content { + .abs; + z-index: 1; + } +} + +.Logo { + position: relative; + font-family: 'Jaapokki'; + .title { + font-size: 30px; + } + .badge { + .center; + position: absolute; + right: -20px; + top: -5px; + width: 20px; + height: 20px; + background-color: #f00; + border-radius: 20px; + div { + font-size: 10px; + } + } +} \ No newline at end of file