diff --git a/css/styles.css b/css/styles.css index 24add02..33f28b8 100644 --- a/css/styles.css +++ b/css/styles.css @@ -20,6 +20,79 @@ html, button { cursor: url(../icons/ArrowSmall.cur), default; } +/*navbar*/ + +.navbar{ + display:flex; + flex-direction:row; + background-color: #000000; + justify-content: space-between; + height: 55px; + width: 100%; + padding : 0 55px +} + +.navbar-left{ + display:flex; + flex-direction:row; + justify-content: space-around; + width: 600px; +} +.queryimage{ + margin-left: -25px; +} + +.navbar-right{ + display:flex; + flex-direction:row; + margin-right: 100px; + justify-content: space-evenly; +} +.navbar-right img{ + margin:5px; +} + +.search{ + border: #eeeeee; + border-color: #eeeeee; + outline: none; +} + +.search-image{ + margin-left: 7px; +} + +.search-box{ + background-color: white; + display: flex; + flex-direction: row; + align-items: center; + width: 350px; + height: 35px; + margin-top: 8px; + border-radius: 22px; +} + +/*login or signin*/ +.login{ + display:flex; + flex-direction:column; + align-items:center; + justify-content:flex-end; +} +.login p{ + font-size: 16px; + font-weight: 500; + color:gray +} + +.userLogin{ + display:flex; + flex-direction:row; + justify-content: center; + background-color: #eeeeee; +} + /* sugar-vue-Icon */ .test { width:80px; diff --git a/icons/cloud-warning.svg b/icons/cloud-warning.svg new file mode 100644 index 0000000..bd1005b --- /dev/null +++ b/icons/cloud-warning.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/icons/help.svg b/icons/help.svg new file mode 100644 index 0000000..09f0e8d --- /dev/null +++ b/icons/help.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/icons/login.svg b/icons/login.svg new file mode 100644 index 0000000..dee459c --- /dev/null +++ b/icons/login.svg @@ -0,0 +1,15 @@ + + + + + + image/svg+xml + + + + + + + + + \ No newline at end of file diff --git a/icons/newuser-icon.svg b/icons/newuser-icon.svg new file mode 100644 index 0000000..4dd2d02 --- /dev/null +++ b/icons/newuser-icon.svg @@ -0,0 +1,22 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/view-list.svg b/icons/view-list.svg new file mode 100644 index 0000000..5a70fcb --- /dev/null +++ b/icons/view-list.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/icons/view-neighborhood.svg b/icons/view-neighborhood.svg new file mode 100644 index 0000000..89d48b9 --- /dev/null +++ b/icons/view-neighborhood.svg @@ -0,0 +1,4 @@ + +image/svg+xml + + \ No newline at end of file diff --git a/icons/view-radial.svg b/icons/view-radial.svg new file mode 100644 index 0000000..3a5ce4f --- /dev/null +++ b/icons/view-radial.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index fe6cc86..6970269 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,28 @@
+ +
+ + + +
+ + +

Hello Sugarizer

{{ message }}

{{ message }} {{ message }} Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}}) + + + + +
@@ -239,6 +266,8 @@

{{ message }}

+ + diff --git a/js/app.js b/js/app.js index 85d72dd..f90675e 100644 --- a/js/app.js +++ b/js/app.js @@ -15,7 +15,9 @@ const app = Vue.createApp({ "select-box": SelectBox, "filter-box": FilterBox, "password": Password, - "dialog-box": Dialog + "dialog-box": Dialog, + "login": Login, + "navbar": Navbar, }, data() { return { diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..c2683f9 --- /dev/null +++ b/js/login.js @@ -0,0 +1,24 @@ + +/** + * @module Login + * @desc This is an icon component for both native and simple SVG icons + * @vue-prop {String} svgfile - Url of svg file + * @vue-prop {String} content - whether we are using it for login or signup +*/ +const Login ={ + name: 'Login', + template: `
+ login +

{{contentData}}

+
`, + props: ['svgfile','color','size','content'], + data() { + return { + contentData: this.content, + svgfile: this.svgfile, + } + }, + +}; + +if (typeof module !== 'undefined') module.exports = { Login } \ No newline at end of file diff --git a/js/navbar.js b/js/navbar.js new file mode 100644 index 0000000..a59d705 --- /dev/null +++ b/js/navbar.js @@ -0,0 +1,40 @@ + +/** + * @module Navbar + * @desc This is an component which is used in every page +*/ +const Navbar ={ + name: 'Navbar', + template: `
+
+
+ + +
+ + +
+ + +
+ radial + neighborhood + list +
+ +
`, + props: ["svgfile","first","second","third","queryimage","warningimage"], + data() { + return { + svgfile: this.svgfile, + first: this.first, + second: this.second, + third: this.third, + queryimage: this.queryimage, + warningimage: this.warningimage, + } + }, + +}; + +if (typeof module !== 'undefined') module.exports = { Navbar } \ No newline at end of file