diff --git a/package.json b/package.json index bd16eda..503a6a9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "license": "MIT", "author": "Jose Jimenez", "type": "commonjs", - "main": "main.js", + "main": "src/main.js", "scripts": { "start": "electron .", "test": "test", diff --git a/src/gui/gui.html b/src/gui/gui.html new file mode 100644 index 0000000..a98a9ab --- /dev/null +++ b/src/gui/gui.html @@ -0,0 +1,102 @@ + + + + + + + + + Wireguard GUI + + +

Wireguard GUI!

+
+
+
+

Server Side

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+
+
+
+ +
+ +
+
+
+
+
+

Client Side

+
+ + +
+ + + +
+ + +
+ + +
+
+
+
+
+ +
+ +
+
+
+
+ + + + diff --git a/src/gui/gui.js b/src/gui/gui.js new file mode 100644 index 0000000..b49f43f --- /dev/null +++ b/src/gui/gui.js @@ -0,0 +1,2 @@ +console.log("GUI works"); +// Complete Wireguard conf yielding diff --git a/src/gui/styles.css b/src/gui/styles.css new file mode 100644 index 0000000..f0f6d63 --- /dev/null +++ b/src/gui/styles.css @@ -0,0 +1,69 @@ +#gui-wrapper { + width: 100%; + height: 80vh; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.side-wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + border-radius: 0.5rem; + border: 1px solid black; + gap: 2rem; + margin: 0.3rem; +} + +#left-side-wrapper { + width: 100%; + height: 100%; + + .conf-server-form { + width: 90%; + margin: 1rem; + > form { + display: flex; + flex-direction: column; + } + } + .conf-server { + height: 100%; + width: 90%; + margin: 1rem; + > form { + display: flex; + flex-direction: column; + } + } +} + +#right-side-wrapper { + width: 60%; + + .conf-client-form { + height: 100%; + width: 90%; + margin: 1rem; + + > form { + display: flex; + flex-direction: column; + } + } + .conf-server { + height: 100%; + width: 90%; + margin: 1rem; + > form { + display: flex; + flex-direction: column; + } + } +} + +.conf-server-input { + min-height: 100%; +} diff --git a/index.html b/src/index.html similarity index 90% rename from index.html rename to src/index.html index 4a39eea..1585d04 100644 --- a/index.html +++ b/src/index.html @@ -16,5 +16,6 @@

Trying out electron rendering for Wireguard GUI!

👋

+

CLICK

diff --git a/main.js b/src/main.js similarity index 92% rename from main.js rename to src/main.js index a40f5cd..3e25cf6 100644 --- a/main.js +++ b/src/main.js @@ -6,7 +6,7 @@ const createWindow = () => { height: 600, }); - win.loadFile("index.html"); + win.loadFile("src/gui/gui.html"); }; app.whenReady().then(() => {