Create basic app layout

7 years ago · 6a27604e75
parent 888eff91d8
commit 6a27604e75
2 changed files with 33 additions and 2 deletions
--- a/dist/index.html
+++ b/dist/index.html
@ -1,9 +1,12 @@
 <html>
    <head>
        <title>LED Toggle Demo</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="root"></div>
+
        <script src="./bundle.js"></script>
    </body>
 </html>
--- a/src/app.js
+++ b/src/app.js
@ -3,8 +3,36 @@ import React from 'react';
 export default class Site extends React.Component {
    render() {
        return (
-            <div>
-                Hello React!
+            <div className="ui text container">
+                <div className="ui stackable two column grid">
+                    <div className="one column row">
+                        <div className="center aligned column">
+                            <div className="ui basic segment">
+                                <img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" />
+                                <span className="ui medium header">LED Toggle Demo</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="column">
+                        <div className="ui segment">
+                            <div className="ui top attached label">Digital Out</div>
+                            <div className="ui two column grid">
+                                <div className="twelve wide column">
+                                    <div className="ui right pointing label">
+                                          DO1
+                                    </div>
+                                    <div className="ui buttons">
+                                      <button className="ui red button">On</button>
+                                      <button className="ui button">Off</button>
+                                    </div>
+                                </div>
+                                <div className="four wide right aligned column">
+                                    <i className="red idea big icon"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
            </div>
       );
    }