diff --git a/angular.json b/angular.json index b24811c..fcf586e 100644 --- a/angular.json +++ b/angular.json @@ -27,9 +27,13 @@ "src/assets" ], "styles": [ - "src/styles.css" + "src/styles.css", + "node_modules/font-awesome/css/font-awesome.css", + "./node_modules/bootstrap/dist/css/bootstrap.min.css" ], - "scripts": [] + "scripts": [ + "node_modules/bootstrap-jquery/dist/js/bootstrap.min.js" + ] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index 1487c00..1236451 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,16 @@ "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", + "@fortawesome/angular-fontawesome": "file:0.5.x", + "@fortawesome/fontawesome-free-brands": "^5.0.13", + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "angular-font-awesome": "^3.1.2", + "bootstrap": "^5.1.3", + "bootstrap-jquery": "^3.3.2", + "font-awesome": "^4.7.0", + "jquery": "^3.6.0", + "mdb-ui-kit": "^4.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -35,6 +45,7 @@ "typescript": "~4.5.2" } }, + "0.5.x": {}, "node_modules/@ampproject/remapping": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-1.1.1.tgz", @@ -2323,6 +2334,63 @@ "node": ">=10.0.0" } }, + "node_modules/@fortawesome/angular-fontawesome": { + "resolved": "0.5.x", + "link": true + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free-brands": { + "version": "5.0.13", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz", + "integrity": "sha512-xC/sEPpfcJPvUbud2GyscLCLQlE2DVBYaTHVwuyVGliYBdYejSEYMINU8FN5A0xhO68yCbpCfMlBv6Gqby+jww==", + "deprecated": "This package is deprecated. See https://git.io/fNCzJ for information about upgrading.", + "dependencies": { + "@fortawesome/fontawesome-common-types": "^0.1.7" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free-brands/node_modules/@fortawesome/fontawesome-common-types": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz", + "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -2511,6 +2579,16 @@ "read-package-json-fast": "^2.0.1" } }, + "node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@schematics/angular": { "version": "13.2.6", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-13.2.6.tgz", @@ -3074,6 +3152,19 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-font-awesome": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz", + "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk=", + "engines": { + "node": ">= 6.9.0", + "npm": ">= 3.0.0" + }, + "peerDependencies": { + "@angular/core": ">=2.0.0 || >=4.0.0 || >=5.0.0", + "font-awesome": "^4.7.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -3191,9 +3282,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -3491,6 +3582,26 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "node_modules/bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.10.2" + } + }, + "node_modules/bootstrap-jquery": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/bootstrap-jquery/-/bootstrap-jquery-3.3.2.tgz", + "integrity": "sha1-oUaPdC4qYc94WxHpzwPKH45Gk90=", + "engines": { + "node": "~0.10.1" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5762,6 +5873,14 @@ } } }, + "node_modules/font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=", + "engines": { + "node": ">=0.10.3" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -6939,6 +7058,11 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7593,6 +7717,11 @@ "node": ">= 10" } }, + "node_modules/mdb-ui-kit": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdb-ui-kit/-/mdb-ui-kit-4.0.0.tgz", + "integrity": "sha512-aJNTw1nitPhZyQ3gM+qdBiHbtfUFHQ2+1w4g2wZe6AdyAAp+771sKR7ETUK8h39VS9LiyZLR6GycT+IvT1M1fA==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -13239,6 +13368,45 @@ "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==", "dev": true }, + "@fortawesome/angular-fontawesome": { + "version": "file:0.5.x" + }, + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-free-brands": { + "version": "5.0.13", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz", + "integrity": "sha512-xC/sEPpfcJPvUbud2GyscLCLQlE2DVBYaTHVwuyVGliYBdYejSEYMINU8FN5A0xhO68yCbpCfMlBv6Gqby+jww==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.1.7" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz", + "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==" + } + } + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -13396,6 +13564,12 @@ "read-package-json-fast": "^2.0.1" } }, + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "peer": true + }, "@schematics/angular": { "version": "13.2.6", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-13.2.6.tgz", @@ -13908,6 +14082,12 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-font-awesome": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz", + "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk=", + "requires": {} + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -13992,9 +14172,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -14218,6 +14398,17 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "requires": {} + }, + "bootstrap-jquery": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/bootstrap-jquery/-/bootstrap-jquery-3.3.2.tgz", + "integrity": "sha1-oUaPdC4qYc94WxHpzwPKH45Gk90=" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -15834,6 +16025,11 @@ "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", "dev": true }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -16707,6 +16903,11 @@ } } }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -17202,6 +17403,11 @@ "ssri": "^8.0.0" } }, + "mdb-ui-kit": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdb-ui-kit/-/mdb-ui-kit-4.0.0.tgz", + "integrity": "sha512-aJNTw1nitPhZyQ3gM+qdBiHbtfUFHQ2+1w4g2wZe6AdyAAp+771sKR7ETUK8h39VS9LiyZLR6GycT+IvT1M1fA==" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", diff --git a/package.json b/package.json index 17c7813..8d04521 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,16 @@ "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", + "@fortawesome/angular-fontawesome": "file:0.5.x", + "@fortawesome/fontawesome-free-brands": "^5.0.13", + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "angular-font-awesome": "^3.1.2", + "bootstrap": "^5.1.3", + "bootstrap-jquery": "^3.3.2", + "font-awesome": "^4.7.0", + "jquery": "^3.6.0", + "mdb-ui-kit": "^4.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6559dd4..2f99cf1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,8 +7,8 @@ import { HomeComponent } from './module/pages/home/home.component'; import { SingleFoodItemComponent } from './module/pages/single-food-item/single-food-item.component'; import { CheckOutComponent } from './module/pages/check-out/check-out.component'; import { LoginComponent } from './module/auth/login/login.component'; -import { SignupComponent } from './module/auth/signup/signup.component'; import { PageNotFoundComponent } from './module/pages/page-not-found/page-not-found.component'; +import { SignupComponent } from './module/auth/signup/signup.component'; const routes: Routes = [ {path: '', redirectTo: 'auth/login', pathMatch: 'full'}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8e54b08..63247c9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,16 +14,16 @@ import { MainMenuComponent } from './module/pages/main-menu/main-menu.component' @NgModule({ declarations: [ AppComponent, - HomeComponent, HeaderComponent, FooterComponent, MainMenuComponent ], + imports: [ BrowserModule, AppRoutingModule, - RouterModule + RouterModule, ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/module/auth/login/login.component.css b/src/app/module/auth/login/login.component.css index 4c435a8..e69de29 100644 --- a/src/app/module/auth/login/login.component.css +++ b/src/app/module/auth/login/login.component.css @@ -1,67 +0,0 @@ -body -{ - margin: 0; - padding: 0; - background-color:#6abadeba; - font-family: 'Arial'; -} -.login{ - width: 382px; - overflow: hidden; - margin: auto; - margin: 20 0 0 450px; - padding: 80px; - background: #3c3b3d; - border-radius: 15px ; - - -} - - -.loginbtn{ - - - font-size: 20px; -} -h2{ - text-align: center; - color: #277582; - padding: 20px; -} -label{ - color: #069ff1; - font-size: 17px; -} -#Uname{ - width: 300px; - height: 30px; - border: none; - border-radius: 3px; - padding-left: 8px; -} -#Pass{ - width: 300px; - height: 30px; - border: none; - border-radius: 3px; - padding-left: 8px; - -} -#log{ - width: 300px; - height: 30px; - border: none; - border-radius: 17px; - padding-left: 7px; - color: blue; - - -} -span{ - color: white; - font-size: 17px; -} -a{ - float: right; - background-color: grey; -} \ No newline at end of file diff --git a/src/app/module/auth/login/login.component.html b/src/app/module/auth/login/login.component.html index ac4f4cc..4c79ba2 100644 --- a/src/app/module/auth/login/login.component.html +++ b/src/app/module/auth/login/login.component.html @@ -1,80 +1,5 @@ +

+ login works! +

- - - - - - Log in - - - -

Login Page


- - -
- -

- -
- - -

- - -

- Forgot Password
- - Remember me -
- - -
- -

-

If you are a NEW USER ,Please Sign Up


-Sign Up - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Sign Up diff --git a/src/app/module/auth/login/loginedi.jpg b/src/app/module/auth/login/loginedi.jpg deleted file mode 100644 index a080d98..0000000 Binary files a/src/app/module/auth/login/loginedi.jpg and /dev/null differ diff --git a/src/app/module/auth/signup/signup.component.css b/src/app/module/auth/signup/signup.component.css index e69de29..8b5a411 100644 --- a/src/app/module/auth/signup/signup.component.css +++ b/src/app/module/auth/signup/signup.component.css @@ -0,0 +1,117 @@ +/* You can add global styles to this file, and also import other style files */ + + + +#sign-up{ + width: 100%; + display: flex; + color: #fff; + font-family: 'Open Sans', sans-serif; +} + +#sign-up .left-side{ + width: 50%; + background-color: #232923; +} + +#sign-up .left-side p{ + font-size: 25px; + margin: 10% 5%; + font-weight: 600; +} + +#sign-up .left-side .singup-form{ + text-align: center; + margin: 10% 5%; +} + +#sign-up .left-side .singup-form h1{ + font-size: 40px; +} + +#sign-up .left-side .singup-form p{ + font-weight: 300; + font-size: 20px; + margin: 7% 6% 7% 6%; + color: #C1C1C1; +} + +#sign-up .left-side .singup-form .input-fields .field { + background-color: #2C312C; + width: 350px; + margin: 15px auto; + height: 60px; + border-radius: 30px; + display: flex; + justify-content: space-around; +} + +#sign-up .left-side .singup-form .input-fields .field:hover{ + border: 1px solid #47D17E; +} + +#sign-up .left-side .singup-form .input-fields .field input{ + width: 250px; + font-size: 15px; + color: #fff; + background-color: transparent; + border: none; +} + +#sign-up .left-side .singup-form .input-fields .field input:focus{ + outline: none; +} + +#sign-up .left-side .singup-form .input-fields .field i{ + display: flex; + justify-content: center; + align-items: center; + margin: auto; +} + +#sign-up .left-side .singup-form .signup-btn{ + width: 175px; + height: 50px; + background-color: #47D17E; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + margin: 7% auto; +} + +#sign-up .left-side .singup-form .signup-btn:hover{ + width: 195px; +} + +#sign-up .left-side .singup-form .signup-btn a{ + color: #fff; + font-size: 16px; + text-decoration: none; +} + +#sign-up .left-side .singup-form .bottom-text{ + display: flex; + align-items: center; + justify-content: center; +} + +#sign-up .left-side .singup-form .bottom-text p{ + font-size: 15px; + margin: 0; +} + +#sign-up .left-side .singup-form .bottom-text a{ + cursor: pointer; + color: #47D17E; +} + +#sign-up .left-side .singup-form .bottom-text a:hover{ + color: #fff; +} + +#sign-up .right-side img{ + width: 100%; + height: 100vh; +} + diff --git a/src/app/module/auth/signup/signup.component.html b/src/app/module/auth/signup/signup.component.html index 62c0da8..8c83074 100644 --- a/src/app/module/auth/signup/signup.component.html +++ b/src/app/module/auth/signup/signup.component.html @@ -1,3 +1,42 @@ -

signup works!

-Login + +
+
+

Welcome to EasyDINE

+
+

Create an Account

+

Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without

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

Have an account?  

+ Login +
+
+
+
+ Food image +
+
+ + + diff --git a/src/app/module/auth/signup/signup.component.spec.ts b/src/app/module/auth/signup/signup.component.spec.ts index b1bd346..f004628 100644 --- a/src/app/module/auth/signup/signup.component.spec.ts +++ b/src/app/module/auth/signup/signup.component.spec.ts @@ -1,7 +1,5 @@ /* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; import { SignupComponent } from './signup.component'; diff --git a/src/app/module/pages/check-out/check-out.component.html b/src/app/module/pages/check-out/check-out.component.html index b81014e..0c82cbe 100644 --- a/src/app/module/pages/check-out/check-out.component.html +++ b/src/app/module/pages/check-out/check-out.component.html @@ -1,3 +1,4 @@ +

check-out works!

diff --git a/src/app/module/pages/single-food-item/single-food-item.component.css b/src/app/module/pages/single-food-item/single-food-item.component.css index f1b6241..e69de29 100644 --- a/src/app/module/pages/single-food-item/single-food-item.component.css +++ b/src/app/module/pages/single-food-item/single-food-item.component.css @@ -1,147 +0,0 @@ -/* CSS for Categories */ -.categories{ - padding: 4% 0; -} - -.box-3{ - width: 28%; - float: left; - margin: 2%; -} - - -/* CSS for Food Menu */ -.food-menu{ - background-color: #ececec; - padding: 4% 0; -} -.food-menu-box{ - width: 43%; - margin: 1%; - padding: 2%; - float: left; - background-color: white; - border-radius: 15px; -} - -.food-menu-img{ - width: 100%; - float: center; -} - -.food-menu-desc{ - width: 70%; - float: left; - margin-left: 8%; -} - -.food-price{ - font-size: 1.2rem; - margin: 2% 0; -} -.food-detail{ - font-size: 1rem; - color: #747d8c; -} - -/* for Order Section */ -.order{ - width: 50%; - margin: 0 auto; -} -.input-responsive{ - width: 96%; - padding: 1%; - margin-bottom: 3%; - border: none; - border-radius: 5px; - font-size: 1rem; -} -.order-label{ - margin-bottom: 1%; - font-weight: bold; -} - - - -/* CSS for Mobile Size or Smaller Screen */ - -@media only screen and (max-width:768px){ - .logo{ - width: 80%; - float: none; - margin: 1% auto; - } - - .menu ul{ - text-align: center; - } - - .food-search input[type="search"]{ - width: 90%; - padding: 2%; - margin-bottom: 3%; - } - - .btn{ - width: 91%; - padding: 2%; - } - - .food-search{ - padding: 10% 0; - } - - .categories{ - padding: 20% 0; - } - h2{ - margin-bottom: 10%; - } - .box-3{ - width: 100%; - margin: 4% auto; - } - - .food-menu{ - padding: 20% 0; - } - - .food-menu-box{ - width: 90%; - padding: 5%; - margin-bottom: 5%; - } - .social{ - padding: 5% 0; - } - .order{ - width: 100%; - } -} - -* { - box-sizing: border-box; -} - -.column { - float: left; - padding: 15px; - /* display: flex; */ - justify-content: center; -} - -.left { - width: 25%; -} - -.right { - width: 75%; -} - -/* Clear floats after the columns */ -.row:after { - content: ""; - display: table; - clear: both; -} \ No newline at end of file diff --git a/src/app/module/pages/single-food-item/single-food-item.component.html b/src/app/module/pages/single-food-item/single-food-item.component.html index 255ccd9..1491bdd 100644 --- a/src/app/module/pages/single-food-item/single-food-item.component.html +++ b/src/app/module/pages/single-food-item/single-food-item.component.html @@ -1,87 +1,3 @@ - - - - -
-
-
-

{{foodItemName}}

-
- -
- Chicke Hawain Pizza -
- -
-
-
-

Category

-
-
-
- Vegitable -
-
- Egg -
-
- Chicken -
-
-
-

Size

-
-
-
- Normal -
-
- Large -
-
-
-
\ No newline at end of file +

+ single-food-item works! +

diff --git a/src/app/module/pages/single-food-item/single-food-item.component.ts b/src/app/module/pages/single-food-item/single-food-item.component.ts index d42f31e..a59b387 100644 --- a/src/app/module/pages/single-food-item/single-food-item.component.ts +++ b/src/app/module/pages/single-food-item/single-food-item.component.ts @@ -7,8 +7,6 @@ import { Component, OnInit } from '@angular/core'; }) export class SingleFoodItemComponent implements OnInit { - foodItemName = "Fried Rice" - constructor() { } ngOnInit() { diff --git a/src/app/module/shared/footer/footer.component.css b/src/app/module/shared/footer/footer.component.css index 358e127..e69de29 100644 --- a/src/app/module/shared/footer/footer.component.css +++ b/src/app/module/shared/footer/footer.component.css @@ -1,7 +0,0 @@ -.social ul{ - list-style-type: none; -} -.social ul li{ - display: inline; - padding: 1%; -} \ No newline at end of file diff --git a/src/app/module/shared/footer/footer.component.html b/src/app/module/shared/footer/footer.component.html index 0c3b1cf..6800e0e 100644 --- a/src/app/module/shared/footer/footer.component.html +++ b/src/app/module/shared/footer/footer.component.html @@ -1,21 +1,3 @@ -
-
- -
-
- - +

+ footer works! +

diff --git a/src/app/module/shared/header/header.component.css b/src/app/module/shared/header/header.component.css index e69de29..94f9bcf 100644 --- a/src/app/module/shared/header/header.component.css +++ b/src/app/module/shared/header/header.component.css @@ -0,0 +1,52 @@ +.navbar{ + padding: 1% 5%; + display: flex; + justify-content: space-between; + width: 100%; + background-color: #47D17E !important; +} + +#navbarNav{ + flex-basis: unset; + flex-grow: 0; +} + +.navbar-light .navbar-brand { + color:#00000073; + font-weight: bold; + font-family: 'Open Sans', sans-serif; +} + +.navbar-light .navbar-toggler { + border: none; +} + +.navbar-light .navbar-toggler:focus ,.navbar-light .navbar-toggler:active{ + border: none; + box-shadow: none; +} + +.navbar-light .navbar-toggler:hover{ + background-color: aliceblue; + border-radius: 5px; +} + +.navbar-nav{ + width: 400px; + display: flex; + justify-content: space-between; +} + +.navbar-light .navbar-nav .nav-link { + color: #000; + font-weight: 500; +} + +.navbar-light .navbar-nav .nav-link:hover{ + color: #fff; +} + +.navbar-light .navbar-nav .nav-item:active a{ + color: orange; + font-weight: bold; +} \ No newline at end of file diff --git a/src/app/module/shared/header/header.component.html b/src/app/module/shared/header/header.component.html index 51bfb8c..7b7d624 100644 --- a/src/app/module/shared/header/header.component.html +++ b/src/app/module/shared/header/header.component.html @@ -1,3 +1,22 @@ -

- header works! -

+ \ No newline at end of file diff --git a/src/assets/images/bg.jpg b/src/assets/images/bg.jpg deleted file mode 100644 index cfe2c31..0000000 Binary files a/src/assets/images/bg.jpg and /dev/null differ diff --git a/src/assets/images/fried_rice.jpg b/src/assets/images/fried_rice.jpg deleted file mode 100644 index 8ff3549..0000000 Binary files a/src/assets/images/fried_rice.jpg and /dev/null differ diff --git a/src/assets/img/signup-img.jpg b/src/assets/img/signup-img.jpg new file mode 100644 index 0000000..d31364c Binary files /dev/null and b/src/assets/img/signup-img.jpg differ diff --git a/src/index.html b/src/index.html index 9f2c42a..bbc6733 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + diff --git a/src/styles.css b/src/styles.css index 1ffe84e..b16426e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,134 +1,4 @@ -/* You can add global styles to this file, and also import other style files */ -*{ - margin: 0 0; - padding: 0 0; - font-family: Arial, Helvetica, sans-serif; -} -.container{ - width: 80%; - margin: 0 auto; - padding: 1%; -} -.img-responsive{ - width: 100%; -} -.img-curve{ - border-radius: 15px; -} -.text-right{ - text-align: right; -} -.text-center{ - text-align: center; -} -.text-left{ - text-align: left; -} -.text-white{ - color: white; -} - -.clearfix{ - clear: both; - float: none; -} - -a{ - color: #ff6b81; - text-decoration: none; -} -a:hover{ - color: #ff4757; -} - -.btn{ - padding: 1%; - border: none; - font-size: 1rem; - border-radius: 5px; -} -.btn-primary{ - background-color: #ff6b81; - color: white; - cursor: pointer; -} -.btn-primary:hover{ - color: white; - background-color: #ff4757; -} -h2{ - color: #2f3542; - font-size: 2rem; - margin-bottom: 2%; -} -h3{ - font-size: 1.5rem; -} -.float-container{ - position: relative; -} -.float-text{ - position: absolute; - bottom: 50px; - left: 40%; -} -fieldset{ - border: 1px solid white; - margin: 5%; - padding: 3%; - border-radius: 5px; -} - -.w3-row-padding{ - padding: 0 8px; -} - -.w3-center { - text-align: center!important; -} - -.w3-small { - font-size: 12px!important; -} - -.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter { - float: left; - width: 100%; -} - -.w3-col.m3 { - width: 24.99999%; -} - -.w3-col.s12 { - width: 99.99999%; -} - -.w3-block { - display: block; - width: 100%; -} - -.w3-round, .w3-round-medium { - border-radius: 4px; -} - -.ws-grey { - background-color: #E7E9EB!important; - color: black!important; -} - -.w3-btn, .w3-button { - border: none; - /* display: inline-block; */ - padding: 8px 16px; - vertical-align: middle; - overflow: hidden; - /* text-decoration: none; - color: inherit; - background-color: inherit; */ - text-align: center; - cursor: pointer; - /* white-space: nowrap; */ +body{ + margin: 0; } \ No newline at end of file