diff --git a/client/src/index.html b/client/src/index.html index 980a0d5..8fda86b 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -1 +1,44 @@ -Hello World! + + + Cryptography Assistant + + + +
+
+
+
Input 1
+
Input 2
+
+
+
+
Test Block
+
Custom code will go here
+
+
+
+ Output +
+
+
+
+
+
+
Input 1
+
Input 2
+
+
+
+
Test Block
+
Custom code will go here
+
+
+
+ Output +
+
+
+ + diff --git a/client/src/index.js b/client/src/index.js index 5047e06..da440c3 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1 +1 @@ -alert("Hello World 2"); +require("./styles.scss"); diff --git a/client/src/styles.scss b/client/src/styles.scss new file mode 100644 index 0000000..beda52c --- /dev/null +++ b/client/src/styles.scss @@ -0,0 +1,54 @@ +html, body{ + margin: 0; + border: 0; + font-family: sans-serif; +} + +body{ + display: flex; + flex-direction: column; +} + +.block{ + width: 200px; + height: 200px; + border: 1px solid black; + display: flex; + flex-direction: column; + .inputs{ + display: flex; + flex-direction: row; + >div{ + border: 1px solid black; + flex-grow: 1; + text-align: center; + padding-top: 5px; + padding-bottom: 5px; + } + } + .main{ + flex-grow: 1; + display: flex; + >div{ + margin: auto; + >.title{ + text-align: center; + } + } + } + >.output{ + border: 1px solid black; + text-align: center; + padding-top: 5px; + padding-bottom: 5px; + } +} + +#workspace{ + position: relative; + .block{ + position: absolute; + top: 40px; + left: 40px; + } +} diff --git a/client/webpack.config.js b/client/webpack.config.js index e80d329..532a575 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -12,5 +12,21 @@ module.exports = { new HtmlWebpackPlugin({ template: "./index.html" }) - ] + ], + module: { + rules: [ + { + test: /\.scss$/, + use: [{ + loader: "style-loader" + }, { + loader: "css-loader" + }, { + loader: "sass-loader" + }] + } + ] + } } + +//SASS code from https://github.com/jtangelder/sass-loader licensed under MIT, see https://github.com/jtangelder/sass-loader/blob/master/LICENSE diff --git a/package.json b/package.json index bc5438e..2b18a07 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,11 @@ }, "homepage": "https://github.com/TimStallard/CryptoAssist#readme", "devDependencies": { + "css-loader": "^0.26.1", "html-webpack-plugin": "^2.28.0", + "node-sass": "^4.5.0", + "sass-loader": "^6.0.1", + "style-loader": "^0.13.1", "webpack": "^2.2.1", "webpack-dev-server": "^2.3.0" }