diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c2c59b7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,20 @@
+# SIMPLE Webview
+
+## Shortcuts
+While it's running in your terminal
+
+| | | | |
+| :-: | :-: | :-: | :-: |
+| Functionality | MacOs | Windows | Linux |
+| **Open Dev Tools** | Cmd + j | Ctrl + j | Ctrl + j |
+
+---
+
+## Author
+
+👤 **Mayk Brito**
+
+* Website: gitshowcase.com/maykbrito
+* Twitter: [@maykbrito](https://twitter.com/maykbrito)
+* Github: [@maykbrito](https://github.com/maykbrito)
+* LinkedIn: [@maykbrito](https://linkedin.com/in/maykbrito)
diff --git a/app.js b/app.js
index a3d447b..9bebf3d 100644
--- a/app.js
+++ b/app.js
@@ -16,12 +16,14 @@ function createWindow () {
webPreferences: {
nodeIntegration: true
},
+
})
- win.loadURL(config.url)
+ win.setMenuBarVisibility(false)
+ win.loadFile('index.html')
- contents = win.webContents
+ contents = win.webContents
}
function toggleDevTools() {
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5372029
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Simple Webview
+
+
+
+
+
+ Simple Webview, built for you
+
+
+
+
+
+
+ ABOUT
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..34b487f
--- /dev/null
+++ b/main.js
@@ -0,0 +1,12 @@
+const config = require('./config')
+
+const btnStart = document.querySelector('#btn')
+const url = document.querySelector('#listenUrl')
+
+btnStart.addEventListener('click', redirect)
+url.value = config.url
+
+
+function redirect(){
+ window.location.href = url.value
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..71dc6a6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,98 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
+
+* {
+ --color-primary: #7159c1;
+ --color-secondary: #342958;
+
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: roboto, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: white;
+ outline: none;
+}
+
+html, body {
+ height: 100%;
+}
+
+
+body {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--color-primary)
+}
+
+
+main {
+ height: 80vh;
+ min-height: 200px;
+ width: 60vw;
+ min-width: 300px;
+ background-color: white;
+ border-radius: 5px;
+ padding: 20px;
+ background-color: rgba(255, 255, 255, 0.1);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+
+main h1 {
+ font-size: 3rem;
+ margin-bottom: 2rem;
+ text-shadow: 1px 1px 1px black;
+ letter-spacing: 0.1rem;
+}
+
+main label {
+ width: 100%;
+ text-align: left;
+ text-shadow: 1px 1px 1px black;
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+}
+
+main input {
+ margin-bottom: 1rem;
+}
+
+main a {
+ text-decoration: solid;
+ margin-top: auto;
+ text-shadow: 1px 1px 1px black;
+}
+
+
+
+
+
+
+input[type="text"] {
+ height: 2.5rem;
+ width: 100%;
+ font-size: 1rem;
+ border: 0;
+ border-radius: 2px;
+ color: var(--color-primary);
+ padding-left: 10px;
+}
+
+button {
+ height: 2.5rem;
+ width: 100%;
+ font-size: 1.5rem;
+ border: 0;
+ border-radius: 2px;
+ background-color: var(--color-secondary);
+ cursor: pointer;
+}
+
+button:hover {
+ opacity: 80%;
+}
\ No newline at end of file