Setup development build script and dev server

package.json

@@ -6,7 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build resources/js/main.js",
     "lint": "vue-cli-service lint",
-    "dev": "npm run development",
+    "dev": "vue-cli-service --mode dev --watch build resources/js/main.js",
     "development": "mix",
     "hot": "mix watch --hot",
     "prod": "npm run production",
@@ -35,7 +35,8 @@
     "eslint-plugin-vue": "^7.0.0",
     "laravel-mix": "^6.0.6",
     "lodash": "^4.17.19",
-    "postcss": "^8.2.13"
+    "postcss": "^8.2.13",
+    "webpack-dev-server": "^3.11.2"
   },
   "eslintConfig": {
     "root": true,

resources/images/lighting.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" fill="#f67602" enable-background="new 0 0 511.999 511.999" height="512" viewBox="0 0 511.999 511.999" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m389.053 7.603c-2.666-4.703-7.647-7.603-13.052-7.603h-180c-6.885 0-12.876 4.688-14.546 11.367l-60 241c-1.128 4.482-.117 9.229 2.725 12.861 2.842 3.647 7.207 5.771 11.821 5.771h68.35l-82.397 220.727c-2.637 7.031.337 14.927 6.943 18.486 6.636 3.556 14.846 1.653 19.233-4.395l240-331c3.325-4.556 3.794-10.591 1.245-15.63-2.563-5.024-7.734-8.188-13.374-8.188h-63.501l76.362-128.28c2.784-4.643 2.857-10.414.191-15.116z"/></g></svg>

resources/images/statistics.svg

@@ -0,0 +1 @@
+<svg height="512pt" fill="#f67602" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m76 240c12.101562 0 23.054688-4.855469 31.148438-12.652344l44.402343 22.199219c-.222656 1.808594-.550781 3.585937-.550781 5.453125 0 24.8125 20.1875 45 45 45s45-20.1875 45-45c0-6.925781-1.703125-13.410156-4.511719-19.277344l60.234375-60.234375c5.867188 2.808594 12.351563 4.511719 19.277344 4.511719 24.8125 0 45-20.1875 45-45 0-4.671875-.917969-9.089844-2.246094-13.328125l52.335938-39.242187c7.140625 4.769531 15.699218 7.570312 24.910156 7.570312 24.8125 0 45-20.1875 45-45s-20.1875-45-45-45-45 20.1875-45 45c0 4.671875.917969 9.089844 2.246094 13.328125l-52.335938 39.242187c-7.140625-4.769531-15.699218-7.570312-24.910156-7.570312-24.8125 0-45 20.1875-45 45 0 6.925781 1.703125 13.410156 4.511719 19.277344l-60.234375 60.234375c-5.867188-2.808594-12.351563-4.511719-19.277344-4.511719-12.101562 0-23.054688 4.855469-31.148438 12.652344l-44.402343-22.199219c.222656-1.808594.550781-3.585937.550781-5.453125 0-24.8125-20.1875-45-45-45s-45 20.1875-45 45 20.1875 45 45 45zm0 0"/><path d="m497 482h-16v-317c0-8.289062-6.710938-15-15-15h-60c-8.289062 0-15 6.710938-15 15v317h-30v-227c0-8.289062-6.710938-15-15-15h-60c-8.289062 0-15 6.710938-15 15v227h-30v-107c0-8.289062-6.710938-15-15-15h-60c-8.289062 0-15 6.710938-15 15v107h-30v-167c0-8.289062-6.710938-15-15-15h-60c-8.289062 0-15 6.710938-15 15v167h-16c-8.289062 0-15 6.710938-15 15s6.710938 15 15 15h482c8.289062 0 15-6.710938 15-15s-6.710938-15-15-15zm0 0"/></svg>

resources/images/tap.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" fill="#f67602" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g transform="translate(-1 -1)">
+	<g>
+		<g>
+			<path d="M223.127,43.667c4.71,0,8.533-3.823,8.533-8.533v-25.6c0-4.71-3.823-8.533-8.533-8.533c-4.71,0-8.533,3.823-8.533,8.533
+				v25.6C214.594,39.844,218.417,43.667,223.127,43.667z"/>
+			<path d="M129.872,103.4h25.429c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-25.429
+				c-4.71,0-8.533,3.823-8.533,8.533S125.162,103.4,129.872,103.4z"/>
+			<path d="M273.936,94.867c0,4.71,3.823,8.533,8.533,8.533h25.429c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533
+				h-25.429C277.759,86.333,273.936,90.156,273.936,94.867z"/>
+			<path d="M265.515,60.733c2.193,0,4.386-0.845,6.05-2.517l16.956-17.067c3.319-3.345,3.302-8.747-0.043-12.066
+				c-3.328-3.319-8.738-3.302-12.066,0.034l-16.947,17.067c-3.328,3.345-3.311,8.747,0.034,12.066
+				C261.163,59.906,263.339,60.733,265.515,60.733z"/>
+			<path d="M166.207,58.213c1.664,1.681,3.866,2.517,6.05,2.517c2.176,0,4.352-0.819,6.016-2.475
+				c3.345-3.319,3.362-8.73,0.043-12.066L161.36,29.122c-3.328-3.354-8.73-3.371-12.066-0.043
+				c-3.345,3.319-3.362,8.721-0.043,12.066L166.207,58.213z"/>
+			<path d="M397.835,231.4c-7.885,0-15.232,2.389-21.333,6.485v-2.219c0-21.171-17.229-38.4-38.4-38.4
+				c-7.885,0-15.232,2.389-21.333,6.485v-2.219c0-21.171-17.229-38.4-38.4-38.4c-7.859,0-15.181,2.372-21.282,6.451V99.995
+				c0-21.649-17.135-39.262-38.212-39.262c-21.069,0-38.212,17.613-38.212,39.262l0.017,168.653
+				c-18.142-26.274-53.99-39.322-81.391-28.629c-4.267,1.664-7.936,4.028-10.325,5.666c-11.529,7.91-11.213,17.579-10.999,20.958
+				c-0.768,4.463,0.29,5.734,10.436,17.86c13.065,15.633,40.252,48.154,57.54,80.324c0.546,0.87,8.747,13.764,20.309,29.414
+				c1.306,0.512,2.526,1.22,3.482,2.372c3.516,4.232,23.04,17.698,34.705,25.737c9.011,6.212,16.12,11.119,19.422,13.867
+				c3.618,3.021,4.105,8.405,1.092,12.023c-1.69,2.022-4.113,3.072-6.562,3.072c-1.929,0-3.857-0.657-5.453-1.98
+				c-2.714-2.261-10.231-7.441-18.185-12.928c-2.039-1.408-3.994-2.765-5.914-4.096l-0.068,12.527
+				c0,40.132,31.556,68.164,76.749,68.164h76.297c35.388,0,63.667-20.744,70.357-51.627c0.717-3.302,1.468-6.025,2.21-8.337
+				c-12.015,4.301-23.142,7.398-27.128,8.474c-0.742,0.196-1.493,0.29-2.219,0.29c-3.772,0-7.219-2.509-8.243-6.315
+				c-1.22-4.557,1.476-9.233,6.025-10.462c16.657-4.471,33.698-10.633,44.416-15.718c4.975-11.127,9.003-26.778,9.003-45.995V269.8
+				C436.235,248.629,419.007,231.4,397.835,231.4z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/js/register-area/register-form.vue

@@ -22,7 +22,7 @@
 	name='sender_password' placeholder='' spellcheck='false'>
 	</div>
 	<button class="submit-btn" type="submit">Submit</button>
-	<div class="cancel-button"></div>
+	<div v-on:click="closeArea" class="cancel-button"></div>
 	</form>
 </template>
 
@@ -43,11 +43,15 @@
 		});
 		event.preventDefault();
 	}
+
 	/* document.getElementById('register-form').addEventListener('submit', register) */
 	/* document.getElementById('register-form').addEventListener('submit', register) */
 	module.exports = {
 		methods: {
-			register
+			register,
+			closeArea() {
+				document.querySelector(".register-area").classList.remove("active")
+			}
 		}
 	}
 </script>

resources/views/home.blade.php

@@ -111,17 +111,17 @@
 		<h2>A User-Friendly Control Panel</h2>
 		<img class="panel-preview" src="/images/host-panel.webp" alt="panel-preview">
 		<div class="panel-info">
-		<img src="/images/tap.svg" alt="">
+		<img src="./img/tap.svg" alt="">
 		<h3>Easy to Use</h3>
 		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
 		</div>
 		<div class="panel-info">
-		<img src="/images/goal.svg" alt="">
+		<img src="./img/lighting.svg" alt="">
 		<h3>Powerful</h3>
 		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
 		</div>
 		<div class="panel-info">
-		<img src="/images/diagram.svg" alt="">
+		<img src="./img/statistics.svg" alt="">
 		<h3>Scalable</h3>
 		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
 		</div>