Created login screen

matfranca · Jun 19, 2020 · 008cefb · 008cefb
1 parent c39bf6d
commit 008cefb
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 22 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/README.md b/README.md
@@ -5,12 +5,12 @@
   <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/matfranca/electron-desktop-app">
 
   <img alt="Repository size" src="https://img.shields.io/github/repo-size/matfranca/electron-desktop-app">
-  
-  <a href="https://github.com/Rocketseat/semana-omnistack-10/commits/master">
+
+  <a href="https://github.com/matfranca/electron-desktop-app/commits/master">
     <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/matfranca/electron-desktop-app">
   </a>
 
-  <a href="https://github.com/Rocketseat/semana-omnistack-10/issues">
+  <a href="https://github.com/matfranca/electron-desktop-app/issues">
     <img alt="Repository issues" src="https://img.shields.io/github/issues/matfranca/electron-desktop-app">
   </a>
 </p>
@@ -31,4 +31,4 @@ This project is being developed using:
 
 ## Project
 
-This is a project to discovery and experiment electron. 
+This is a project to discovery and experiment electron.
diff --git a/public/assets/inpakta_logo.png b/public/assets/inpakta_logo.png
diff --git a/public/assets/logo_16x16.png b/public/assets/logo_16x16.png
diff --git a/public/assets/logo_20x20.png b/public/assets/logo_20x20.png
diff --git a/public/assets/logo_24x24.png b/public/assets/logo_24x24.png
diff --git a/public/assets/logo_32x32.png b/public/assets/logo_32x32.png
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,114 @@
+:root{
+  --title-color: #322153;
+  --primary-color: #34cb79;
+  --dark-primary-color: #2fb86e;
+  --white-color: #fff;
+  --background-color: #f0f0f5;
+  --form-color: #75758a;
+  --dark-form-color: #5e5e6e;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Roboto, sans-serif;
+  color: var(--title-color);
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: var(--background-color);
+  -webkit-app-region: drag;
+  -webkit-font-smoothing: antialiased;
   margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
+}
+
+header {
+  margin: 30px 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+header img {
+  max-width: 80%;
+  height: auto;
+  margin-bottom: 5px;
+  opacity: 100%;
+}
+
+header p {
+  margin-bottom: 15px;
+}
+
+a {
+  text-decoration: none;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+form {
+  background-color: var(--white-color);
+  padding: 30px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+form .field {
+  -webkit-app-region: no-drag;
+  flex: 1;
+  display:flex;
+  border-radius: 8px;
+}
+
+form .field + .field {
+  margin-top: 20px;
+}
+
+main form .field-group {
+  display: flex;
+  flex-direction: column;
+}
+
+form input {
+  background-color: var(--background-color);
+  border: 0;
+  padding: 16px 24px;
+  font-size: 16px;
+  border-radius: 8px;
+  outline: none;
+}
+
+form div a {
+  display: flex;
+  align-self: center;
+  margin-top: 15px;
+  text-align: center;
+}
+
+button {
+  -webkit-app-region: no-drag;
+  width: 260px;
+  height: 56px;
+  background-color: var(--form-color);
+  border-radius: 8px;
+  color: var(--white-color);
+  font-weight: 700;
+  font-size: 16px;
+  border: 0;
+  margin-top: 20px;
+  outline: none;
+}
+
+button:active {
+  background-color: var(--dark-form-color);
 }
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,39 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Hello World!</title>
-    <link rel="stylesheet" href="index.css">
-  </head>
-  <body>
-    <h1>💖 Hello World!</h1>
-    <p>Welcome to your Electron application.</p>
-  </body>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Electron Desktop App</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="responsive.css">
+</head>
+
+<body>
+  <div class="content">
+    <header>
+      <img src="../public/assets/inpakta_logo.png" alt="Logomarca">
+      <p>Startup de proteção de dados</p>
+    </header>
+    <main>
+      <form action="">
+        <div class="field-group">
+          <div class="field">
+            <input type="text" name="username" required="required" placeholder="Usuário">
+          </div>
+          <div class="field">
+            <input type="password" name="password" required="required" placeholder="Senha">
+          </div>
+          <div class="field">
+            <a href="#"><strong>Criar nova conta</strong></a>
+          </div>
+        </div>
+      </form>
+      <button>Login</button>
+    </main>
+  </div>
+  <script src="/scripts/index.js"></script>
+</body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,4 @@
-const { app, BrowserWindow } = require('electron');
-const path = require('path');
+const { app, BrowserWindow, Tray } = require('electron');
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
@@ -9,8 +8,16 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 340,
+    height: 500,
+    maximizable: false,
+    frame: false,
+    enableLargerThanScreen: false,
+    opacity: 0.95,
+    titleBarStyle: "hidden",
+    webPreferences: {
+      nodeIntegration: true
+    },
   });
 
   // and load the index.html of the app.
@@ -20,11 +27,18 @@ const createWindow = () => {
   // mainWindow.webContents.openDevTools();
 };
 
+app.whenReady().then(createWindow);
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow);
+//app.on('ready', createWindow);
+
 
+app.on('minimize', function(event){
+  event.preventDefault();
+  mainWindow.hide();
+});
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar

diff --git a/src/responsive.css b/src/responsive.css