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
+
+
+
+
+
+
+
+
+
Test Block
+
Custom code will go here
+
+
+
+ Output
+
+
+
+
+
+
+
+
+
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"
}