diff --git a/README.md b/README.md index 5b14649..ace786b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Hipster Shop: Cloud-Native Microservices Demo Application +# Online Boutique: Cloud-Native Microservices Demo Application This project contains a 10-tier microservices application. The application is a -web-based e-commerce app called **“Hipster Shop”** where users can browse items, +web-based e-commerce app called **“Online Boutique”** where users can browse items, add them to the cart, and purchase them. **Google uses this application to demonstrate use of technologies like @@ -19,11 +19,11 @@ If you’re using this demo, please **★Star** this repository to show your int | Home Page | Checkout Screen | | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| [![Screenshot of store homepage](./docs/img/hipster-shop-frontend-1.png)](./docs/img/hipster-shop-frontend-1.png) | [![Screenshot of checkout screen](./docs/img/hipster-shop-frontend-2.png)](./docs/img/hipster-shop-frontend-2.png) | +| [![Screenshot of store homepage](./docs/img/online-boutique-frontend-1.png)](./docs/img/online-boutique-frontend-1.png) | [![Screenshot of checkout screen](./docs/img/online-boutique-frontend-2.png)](./docs/img/online-boutique-frontend-2.png) | ## Service Architecture -**Hipster Shop** is composed of many microservices written in different +**Online Boutique** is composed of many microservices written in different languages that talk to each other over gRPC. [![Architecture of @@ -310,7 +310,7 @@ If you've deployed the application with `kubectl apply -f [...]`, you can run `kubectl delete -f [...]` with the same argument to clean up the deployed resources. -## Conferences featuring Hipster Shop +## Conferences featuring Online Boutique - [Google Cloud Next'18 London – Keynote](https://youtu.be/nIq2pkNcfEI?t=3071) showing Stackdriver Incident Response Management diff --git a/src/adservice/.classpath b/src/adservice/.classpath new file mode 100644 index 0000000..93b77fa --- /dev/null +++ b/src/adservice/.classpath @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/adservice/.settings/org.eclipse.buildship.core.prefs b/src/adservice/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 0000000..382c6d4 --- /dev/null +++ b/src/adservice/.settings/org.eclipse.buildship.core.prefs @@ -0,0 +1,13 @@ +arguments= +auto.sync=false +build.scans.enabled=false +connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER) +connection.project.dir= +eclipse.preferences.version=1 +gradle.user.home= +java.home=/Library/Java/JavaVirtualMachines/jdk-13.0.2.jdk/Contents/Home +jvm.arguments= +offline.mode=false +override.workspace.settings=true +show.console.view=true +show.executions.view=true diff --git a/src/frontend/handlers.go b/src/frontend/handlers.go index d7e8765..cb6ad33 100644 --- a/src/frontend/handlers.go +++ b/src/frontend/handlers.go @@ -22,6 +22,7 @@ import ( "net/http" "os" "strconv" + "strings" "time" "github.com/gorilla/mux" @@ -32,6 +33,11 @@ import ( "github.com/GoogleCloudPlatform/microservices-demo/src/frontend/money" ) +type platformDetails struct { + css string + provider string +} + var ( templates = template.Must(template.New(""). Funcs(template.FuncMap{ @@ -72,6 +78,11 @@ func (fe *frontendServer) homeHandler(w http.ResponseWriter, r *http.Request) { ps[i] = productView{p, price} } + //get env and render correct platform banner. + var env = os.Getenv("ENV_PLATFORM") + plat := platformDetails{} + plat.setPlatformDetails(strings.ToLower(env)) + if err := templates.ExecuteTemplate(w, "home", map[string]interface{}{ "session_id": sessionID(r), "request_id": r.Context().Value(ctxKeyRequestID{}), @@ -81,11 +92,26 @@ func (fe *frontendServer) homeHandler(w http.ResponseWriter, r *http.Request) { "cart_size": len(cart), "banner_color": os.Getenv("BANNER_COLOR"), // illustrates canary deployments "ad": fe.chooseAd(r.Context(), []string{}, log), + "platform_css": plat.css, + "platform_name": plat.provider, }); err != nil { log.Error(err) } } +func (plat *platformDetails) setPlatformDetails(env string) { + if env == "aws" { + plat.provider = "AWS" + plat.css = "aws-platform" + } else if env == "onprem" { + plat.provider = "On-Premises" + plat.css = "onprem-platform" + } else { + plat.provider = "Google Cloud" + plat.css = "gcp-platform" + } +} + func (fe *frontendServer) productHandler(w http.ResponseWriter, r *http.Request) { log := r.Context().Value(ctxKeyLog{}).(logrus.FieldLogger) id := mux.Vars(r)["id"] diff --git a/src/frontend/static/favicon.ico b/src/frontend/static/favicon.ico new file mode 100755 index 0000000..30acb27 Binary files /dev/null and b/src/frontend/static/favicon.ico differ diff --git a/src/frontend/static/icons/Hipster_Advert2.svg b/src/frontend/static/icons/Hipster_Advert2.svg new file mode 100755 index 0000000..6c32d48 --- /dev/null +++ b/src/frontend/static/icons/Hipster_Advert2.svg @@ -0,0 +1,40 @@ + + + + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_CartIcon.svg b/src/frontend/static/icons/Hipster_CartIcon.svg new file mode 100755 index 0000000..3f80cff --- /dev/null +++ b/src/frontend/static/icons/Hipster_CartIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_CheckOutIcon.svg b/src/frontend/static/icons/Hipster_CheckOutIcon.svg new file mode 100755 index 0000000..3fef436 --- /dev/null +++ b/src/frontend/static/icons/Hipster_CheckOutIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_CurrencyIcon.svg b/src/frontend/static/icons/Hipster_CurrencyIcon.svg new file mode 100755 index 0000000..58ba998 --- /dev/null +++ b/src/frontend/static/icons/Hipster_CurrencyIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_DownArrow.svg b/src/frontend/static/icons/Hipster_DownArrow.svg new file mode 100755 index 0000000..0c7cd19 --- /dev/null +++ b/src/frontend/static/icons/Hipster_DownArrow.svg @@ -0,0 +1,11 @@ + + + + + Hipster + + diff --git a/src/frontend/static/icons/Hipster_FacebookIcon.svg b/src/frontend/static/icons/Hipster_FacebookIcon.svg new file mode 100755 index 0000000..988ce79 --- /dev/null +++ b/src/frontend/static/icons/Hipster_FacebookIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_GooglePlayIcon.svg b/src/frontend/static/icons/Hipster_GooglePlayIcon.svg new file mode 100755 index 0000000..71ebf78 --- /dev/null +++ b/src/frontend/static/icons/Hipster_GooglePlayIcon.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_HelpIcon.svg b/src/frontend/static/icons/Hipster_HelpIcon.svg new file mode 100755 index 0000000..cb17349 --- /dev/null +++ b/src/frontend/static/icons/Hipster_HelpIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_HeroLogo.svg b/src/frontend/static/icons/Hipster_HeroLogo.svg new file mode 100755 index 0000000..b275f29 --- /dev/null +++ b/src/frontend/static/icons/Hipster_HeroLogo.svg @@ -0,0 +1,55 @@ + + + + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_HeroLogoCyan.svg b/src/frontend/static/icons/Hipster_HeroLogoCyan.svg new file mode 100755 index 0000000..523cb58 --- /dev/null +++ b/src/frontend/static/icons/Hipster_HeroLogoCyan.svg @@ -0,0 +1,55 @@ + + + + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_HotProducts.svg b/src/frontend/static/icons/Hipster_HotProducts.svg new file mode 100755 index 0000000..b1b7ae5 --- /dev/null +++ b/src/frontend/static/icons/Hipster_HotProducts.svg @@ -0,0 +1,28 @@ + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_InstagramIcon.svg b/src/frontend/static/icons/Hipster_InstagramIcon.svg new file mode 100755 index 0000000..73653f4 --- /dev/null +++ b/src/frontend/static/icons/Hipster_InstagramIcon.svg @@ -0,0 +1,15 @@ + + + + + Hipster + + + + + + diff --git a/src/frontend/static/icons/Hipster_KitchenwareOffer.svg b/src/frontend/static/icons/Hipster_KitchenwareOffer.svg new file mode 100755 index 0000000..827a851 --- /dev/null +++ b/src/frontend/static/icons/Hipster_KitchenwareOffer.svg @@ -0,0 +1,36 @@ + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_NavLogo.svg b/src/frontend/static/icons/Hipster_NavLogo.svg new file mode 100755 index 0000000..c566913 --- /dev/null +++ b/src/frontend/static/icons/Hipster_NavLogo.svg @@ -0,0 +1,36 @@ + + + + + Hipster + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_OtherProducts.svg b/src/frontend/static/icons/Hipster_OtherProducts.svg new file mode 100755 index 0000000..dbe320a --- /dev/null +++ b/src/frontend/static/icons/Hipster_OtherProducts.svg @@ -0,0 +1,36 @@ + + Hipster + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/static/icons/Hipster_PinterestIcon.svg b/src/frontend/static/icons/Hipster_PinterestIcon.svg new file mode 100755 index 0000000..08714df --- /dev/null +++ b/src/frontend/static/icons/Hipster_PinterestIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_ProfileIcon.svg b/src/frontend/static/icons/Hipster_ProfileIcon.svg new file mode 100755 index 0000000..3dc87e4 --- /dev/null +++ b/src/frontend/static/icons/Hipster_ProfileIcon.svg @@ -0,0 +1,14 @@ + + + + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_SearchIcon.svg b/src/frontend/static/icons/Hipster_SearchIcon.svg new file mode 100755 index 0000000..583f959 --- /dev/null +++ b/src/frontend/static/icons/Hipster_SearchIcon.svg @@ -0,0 +1,11 @@ + + + + + Hipster + + diff --git a/src/frontend/static/icons/Hipster_TwitterIcon.svg b/src/frontend/static/icons/Hipster_TwitterIcon.svg new file mode 100755 index 0000000..8a4ff80 --- /dev/null +++ b/src/frontend/static/icons/Hipster_TwitterIcon.svg @@ -0,0 +1,11 @@ + + + + + Hipster + + diff --git a/src/frontend/static/icons/Hipster_UpDownControl.svg b/src/frontend/static/icons/Hipster_UpDownControl.svg new file mode 100755 index 0000000..be33647 --- /dev/null +++ b/src/frontend/static/icons/Hipster_UpDownControl.svg @@ -0,0 +1,7 @@ + + Hipster + + + + + diff --git a/src/frontend/static/icons/Hipster_YoutubeIcon.svg b/src/frontend/static/icons/Hipster_YoutubeIcon.svg new file mode 100755 index 0000000..edfe961 --- /dev/null +++ b/src/frontend/static/icons/Hipster_YoutubeIcon.svg @@ -0,0 +1,15 @@ + + + + + Hipster + + + + + + diff --git a/src/frontend/static/images/Advert2BannerImage.png b/src/frontend/static/images/Advert2BannerImage.png new file mode 100755 index 0000000..5754a0e Binary files /dev/null and b/src/frontend/static/images/Advert2BannerImage.png differ diff --git a/src/frontend/static/images/AdvertBannerImage.png b/src/frontend/static/images/AdvertBannerImage.png new file mode 100755 index 0000000..7d32353 Binary files /dev/null and b/src/frontend/static/images/AdvertBannerImage.png differ diff --git a/src/frontend/static/images/HeroBannerImage.png b/src/frontend/static/images/HeroBannerImage.png new file mode 100755 index 0000000..b05df63 Binary files /dev/null and b/src/frontend/static/images/HeroBannerImage.png differ diff --git a/src/frontend/static/images/HeroBannerImage2.png b/src/frontend/static/images/HeroBannerImage2.png new file mode 100755 index 0000000..26c4cef Binary files /dev/null and b/src/frontend/static/images/HeroBannerImage2.png differ diff --git a/src/frontend/static/images/VRHeadsets.png b/src/frontend/static/images/VRHeadsets.png new file mode 100755 index 0000000..ed4491a Binary files /dev/null and b/src/frontend/static/images/VRHeadsets.png differ diff --git a/src/frontend/static/images/products/Bowl.png b/src/frontend/static/images/products/Bowl.png new file mode 100755 index 0000000..57325d7 Binary files /dev/null and b/src/frontend/static/images/products/Bowl.png differ diff --git a/src/frontend/static/images/products/Cactus.png b/src/frontend/static/images/products/Cactus.png new file mode 100755 index 0000000..4cdb6b9 Binary files /dev/null and b/src/frontend/static/images/products/Cactus.png differ diff --git a/src/frontend/static/images/products/CoffeeMachine.png b/src/frontend/static/images/products/CoffeeMachine.png new file mode 100755 index 0000000..c424546 Binary files /dev/null and b/src/frontend/static/images/products/CoffeeMachine.png differ diff --git a/src/frontend/static/images/products/ColouredPencils.png b/src/frontend/static/images/products/ColouredPencils.png new file mode 100755 index 0000000..5f55ff6 Binary files /dev/null and b/src/frontend/static/images/products/ColouredPencils.png differ diff --git a/src/frontend/static/images/products/Globe.png b/src/frontend/static/images/products/Globe.png new file mode 100755 index 0000000..ca9e0ef Binary files /dev/null and b/src/frontend/static/images/products/Globe.png differ diff --git a/src/frontend/static/images/products/LightShade.png b/src/frontend/static/images/products/LightShade.png new file mode 100755 index 0000000..f641704 Binary files /dev/null and b/src/frontend/static/images/products/LightShade.png differ diff --git a/src/frontend/static/images/products/Mugs.png b/src/frontend/static/images/products/Mugs.png new file mode 100755 index 0000000..88d1a95 Binary files /dev/null and b/src/frontend/static/images/products/Mugs.png differ diff --git a/src/frontend/static/images/products/Notebook.png b/src/frontend/static/images/products/Notebook.png new file mode 100755 index 0000000..3256ad6 Binary files /dev/null and b/src/frontend/static/images/products/Notebook.png differ diff --git a/src/frontend/static/images/products/Robot1.png b/src/frontend/static/images/products/Robot1.png new file mode 100755 index 0000000..962a0f6 Binary files /dev/null and b/src/frontend/static/images/products/Robot1.png differ diff --git a/src/frontend/static/images/products/Robot2.png b/src/frontend/static/images/products/Robot2.png new file mode 100755 index 0000000..fbf87ec Binary files /dev/null and b/src/frontend/static/images/products/Robot2.png differ diff --git a/src/frontend/static/images/products/Sunnies.png b/src/frontend/static/images/products/Sunnies.png new file mode 100755 index 0000000..0b1502f Binary files /dev/null and b/src/frontend/static/images/products/Sunnies.png differ diff --git a/src/frontend/static/images/products/Unicorn.png b/src/frontend/static/images/products/Unicorn.png new file mode 100755 index 0000000..3d36325 Binary files /dev/null and b/src/frontend/static/images/products/Unicorn.png differ diff --git a/src/frontend/static/img/products/air-plant.jpg b/src/frontend/static/img/products/air-plant.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/barista-kit.jpg b/src/frontend/static/img/products/barista-kit.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/camera-lens.jpg b/src/frontend/static/img/products/camera-lens.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/camp-mug.jpg b/src/frontend/static/img/products/camp-mug.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/city-bike.jpg b/src/frontend/static/img/products/city-bike.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/credits.txt b/src/frontend/static/img/products/credits.txt old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/film-camera.jpg b/src/frontend/static/img/products/film-camera.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/record-player.jpg b/src/frontend/static/img/products/record-player.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/terrarium.jpg b/src/frontend/static/img/products/terrarium.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/img/products/typewriter.jpg b/src/frontend/static/img/products/typewriter.jpg old mode 100644 new mode 100755 diff --git a/src/frontend/static/styles/cart.css b/src/frontend/static/styles/cart.css new file mode 100755 index 0000000..5ec006f --- /dev/null +++ b/src/frontend/static/styles/cart.css @@ -0,0 +1,99 @@ +.cart-bg { + background: #f0f0f0; +} + +.cart .form-control { + border: none; + border-radius: 0; + -webkit-appearance: none; +} + +.cart h3 { + font-size: 36px; +} + +.cart form label { + color: #707070; +} + +.empty-btn { + margin-right: 20px; +} + +.btn { + border-radius: 0; + color: #111111; + background: #e9ecef; + border: 1px solid #d1d7dc; + font-size: 18px; + padding: 10px 15px; + text-transform: uppercase; + letter-spacing: 1.8px; +} + +.btn-info { + border: none; + background: #4cc8c6; +} + +.center-contents > * { + margin: auto; +} + +.product-item { + max-width: 540px; + margin: auto; + margin-bottom: 30px; +} + +.product-item .image { + max-width: 180px; + padding: 0; +} + +.product-item .image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.product-item .text { + background: white; + padding: 25px 30px; +} + +.product-item .text h4 { + font-size: 24px; + letter-spacing: 4.8px; + margin-bottom: 0; +} + +.product-item .text p { + margin-bottom: 20px; +} + +.product-item .text small { + font-size: 18px; +} + +.product-item .text .details { + font-size: 18px; +} + +.order-summary { + font-size: 24px; + color: #000000; + margin-bottom: 30px; +} + +.order-summary p { + font-size: 18px; +} + +.checkout h3 { + font-size: 36px; + margin-bottom: 30px; +} +.last-row { + margin-top: 30px; +} \ No newline at end of file diff --git a/src/frontend/static/styles/order.css b/src/frontend/static/styles/order.css new file mode 100755 index 0000000..27b0b75 --- /dev/null +++ b/src/frontend/static/styles/order.css @@ -0,0 +1,32 @@ +.order { + background: #f0f0f0; +} + +.order .container { + border-top: 1px solid #b4b2bb; +} + +.order-logo { + height: 100px; + margin-bottom: 35px; +} + +.order h3 { + font-size: 36px; + margin-bottom: 40px; +} + +.order p { + font-size: 24px; + margin-bottom: 0; + color: #707070; +} + +.order .mg-bt { + color: #111111; + margin-bottom: 35px; +} + +.order .btn { + margin: auto; +} \ No newline at end of file diff --git a/src/frontend/static/styles/styles.css b/src/frontend/static/styles/styles.css new file mode 100755 index 0000000..89d8039 --- /dev/null +++ b/src/frontend/static/styles/styles.css @@ -0,0 +1,598 @@ +/* general */ + + +body { + color: #111111; + font-family: 'Roboto', sans-serif; +} + +hr { + border-top: 1px solid #b4b2bb; +} + +.text-muted { + color: #707070; +} + +.badge { + display: inline-block !important; + width: 15px; + height: 15px; + color: #111111; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + margin-left: 7px; + border-radius: 50%; +} + +.badge.badge-blue { + background-color: #4bc7c7; + padding-bottom: 2px; +} + +/*header*/ + +header .badge.badge-blue { + transform: translateY(-3px); +} + +header .navbar { + height: 38px; +} + +header .h-free-shipping { + font-size: 15px; +} + +header .h-free-shipping span:first-child { + font-weight: bold; +} + +header .h-free-shipping span:last-child { + font-size: 12px; + cursor: pointer; + text-decoration: underline; +} + +header .h-controls { + display: flex; + justify-content: flex-end; +} + +header .h-control { + display: flex; + align-items: center; + font-size: 12px; + position: relative; + margin-left: 40px; + color: #605f64; +} + +header .h-control:first-child { + margin-left: 0; +} + +header .h-control img { + width: 20px; + height: 20px; + margin-right: 8px; +} + +header .h-control input { + border: none; + padding: 0 31px 0 31px; + width: 250px; + height: 24px; + flex-shrink: 0; + background-color: #f2f2f2; + display: flex; + align-items: center; +} + +header .h-control input:focus { + outline: 0; + border: 0; + box-shadow: 0; +} + +header .icon { + width: 20px; + height: 20px; +} + +header .icon.arrow { + position: absolute; + right: 4px; + width: 11px; + height: 7px; +} + +header .icon.search-icon { + width: 12px; + height: 13px; + position: absolute; + left: 10px; +} + +header .h-control select { + background: transparent; + border-radius: 0; + border: 1px solid #acacac; + width: 100px; + height: 20px; + flex-shrink: 0; + padding: 0 7px; + display: flex; + align-items: center; +} + + +header .h-control::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + font-size: 12px; + color: #605f64; +} + +header .h-control::-moz-placeholder { + /* Firefox 19+ */ + font-size: 12px; + color: #605f64; +} + +header .h-control :-ms-input-placeholder { + /* IE 10+ */ + font-size: 12px; + color: #605f64; +} + +header .h-control :-moz-placeholder { + /* Firefox 18- */ + font-size: 12px; + color: #605f64; +} + +header .navbar.sub-navbar { + height: 60px; + background-color: #111111; + font-size: 15px; + color: #b4b2bb; + padding-top: 0; + padding-bottom: 0; +} + +header .navbar.sub-navbar .logo { + width: 209px; + height: 40px; +} + +header .navbar.sub-navbar .navbar-brand { + padding: 0; +} + +header .navbar.sub-navbar a { + color: #b4b2bb; +} + +header .navbar.sub-navbar nav a { + margin: 0 10px; +} + +header .navbar.sub-navbar .controls { + display: flex; + height: 60px; +} + +header .navbar.sub-navbar .controls a { + display: block; + width: 120px; + border-left: 1px solid #b4b2bb; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} + +header .navbar.sub-navbar .controls a img { + width: 20px; + height: 20px; + margin-bottom: 3px; +} + +header .navbar.sub-navbar .controls a:last-child { + border-right: 1px solid #b4b2bb; +} + +/*footer*/ + +footer.py-5 { + padding: 0 !important; +} + +footer .footer-top { + background-color: #f0f0f0; +} + +footer .footer-top .footer-social, +footer .footer-top .footer-app, +footer .footer-links, +footer .footer-top .social, +footer .footer-top .app { + display: flex; + align-items: center; +} + +footer .footer-top .footer-social { + padding: 31px; + border-bottom: 1px solid #b4b2bb; +} + +footer .footer-top .footer-social h4 { + margin-bottom: 0; +} + +footer .footer-top .footer-social div { + width: 50%; +} + +.footer-top .social { + border-right: 1px solid #b4b2bb; +} + +.footer-top .social h4 { + font-size: 24px; + color: #111111; + font-weight: bold; + text-transform: uppercase; + margin-right: 37px; + line-height: 0.92; +} + +.footer-top .social img { + margin-right: 16px; + width: 48px; + height: 48px; +} + +.footer-top .app { + justify-content: flex-end; +} + +.footer-top .app h4 { + font-size: 24px; + font-weight: bold; + color: #111111; + line-height: 0.92; +} + +.footer-top .app h4 span { + color: #707070; + font-style: italic; +} + +.footer-top .app img { + width: 136px; + height: 41px; + margin-left: 42px; +} + +footer .footer-links { + padding-top: 37px; + justify-content: space-between; + align-items: flex-start; +} + +footer .links-group { + width: 164px; + flex-shrink: 0; + list-style: none; + color: #707070; + padding: 0; +} + +footer .links-group .group-header { + font-size: 16px; + text-transform: uppercase; + color: #111111; + font-weight: bold; + margin-bottom: 12px; +} + +footer .links-group li { + margin-bottom: 10px; + cursor: pointer; +} + +footer .links-group li:hover { + text-decoration: underline; +} + +footer .footer-bottom { + background-color: #111111; + font-size: 16px; + height: 80px; + padding: 23px 0; + display: flex; + justify-content: center; + flex-flow: column; +} + +footer .footer-bottom p { + text-align: center; + color: #b4b2bb; + padding: 0; + margin: 0; +} + +footer .footer-bottom p:first-child { + color: white; +} + +/*Home*/ + +main.home { + background-color: white; +} + +.h-jumbotron { + border-radius: 0; + background: url(/static/images/HeroBannerImage2.png) no-repeat top center; + background-size: cover; +} + +.h-jumbotron .container img { + width: 280px; + height: 210px; +} + +.h-row { + display: flex; + justify-content: center; + align-items: center; +} + +.h-row img { + width: 156px; + height: 100px; + margin-bottom: 45px; +} + +.h-grid .bg-light { + background-color: white; +} + +.card-title.h-card-title { + width: 100%; + font-size: 22px; + letter-spacing: 4.8px; + text-align: center; + color: #111111; + text-transform: uppercase; + margin-bottom: 0; +} + +.card-body.h-card-body { + padding: 1.25rem 0.75rem; +} + +.h-card-body .text-muted { + font-size: 18px; +} + +.ad-row { + padding-left: 68px; + height: 400px; + display: flex; + align-items: center; + background: url(/static/images/AdvertBannerImage.png) no-repeat top center; + background-size: cover; +} + +.ad-row-2 { + background: url(/static/images/Advert2BannerImage.png) no-repeat top center; +} + +.ad-row img { + width: 292px; + height: 280px; +} + +/*Product*/ + +.h-product { + background-color: #f0f0f0; + padding: 65px 16.96428571%; + color: #707070; + font-size: 18px; +} + +.h-product .col { + height: 540px; +} + +.h-product .col img { + width: 540px; +} + +.h-product .product-info { + width: calc(100% - 540px); +} + +.h-product .product-info .product-wrapper { + border-top: 1px solid #b4b2bb; + border-bottom: 1px solid #b4b2bb; + height: 100%; + margin-left: 15px; + display: flex; + flex-flow: column; + justify-content: center; +} + +.h-product .text-muted { + color: #707070 !important; + margin: 20px 0; +} + +.h-product .product-info h2 { + font-size: 48px; + line-height: 1.1; + letter-spacing: 9.6px; + color: #111111; +} + +.h-product .product-info h6 { + font-size: 18px; + color: #111111; + text-transform: uppercase; + margin: 0 0 3px 0; +} + +.h-product .product-info form { + margin-top: 100px; +} + +.h-product .input-group-text, +.h-product .btn.btn-info { + font-size: 18px; + line-height: 1.89; + letter-spacing: 3.6px; + text-align: center; + color: #111111; + text-transform: uppercase; + border-radius: 0; +} + +.h-product .input-group-text { + width: 150px; + height: 49px; + border: solid 1px #d1d7dc; + background-color: #e9ecef; +} + +.h-product select.form-control-lg.custom-select { + height: 49px; +} + +.h-product .btn.btn-info { + width: 178px; + height: 49px; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: #4cc8c6; + margin-left: 30px; +} + +.h-product .btn.btn-info:hover { + color: #fff; + background-color: #138496; + border-color: #117a8b; +} + +.other-products-img { + width: 234px !important; + height: 80px !important; +} + +/*recommendations*/ + +.h-card.card { + border: none; + border-radius: 0 !important; + position: relative; + cursor: pointer; +} + +.h-card.card a { + position: relative; +} + +.h-card.card a .card-hover { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + background-color: transparent; +} + +.h-card.card:hover a .card-hover { + background-color: rgba(0, 0, 0, 0.3); +} + +/*platform banner*/ + +.aws-platform, +.onprem-platform, +.gcp-platform { + position: fixed; + top: 0; + left: 0; + width: 10px; + height: 100vh; + color: white; + font-size: 24px; + z-index: 999; +} + +.aws-platform, +.aws-platform .platform-flag { + background-color: #ff9900; + color: #000000; +} + +.onprem-platform, +.onprem-platform .platform-flag { + background-color: #34A853; +} + +.gcp-platform, +.gcp-platform .platform-flag { + background-color: #4285f4; +} + +.platform-flag { + position: absolute; + top: 98px; + left: 0; + width: 190px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +@media (min-width: 1679px) { + + header .navbar, + header .navbar.sub-navbar, + footer .footer-top { + padding: 0 16.96428571%; + } +} + +.recommendations { + background: white; +} + +.recommendations .container .image { + text-align: center; +} + +.recommendations .container .image>img { + height: 80px; + margin: 50px 0; +} + +.recommendations .prods { + padding-bottom: 50px; +} + +.recommendations .card-img-top { + border-radius: 0; +} + +select { + -webkit-appearance: none; + -webkit-border-radius: 0px; +} \ No newline at end of file diff --git a/src/frontend/templates/ad.html b/src/frontend/templates/ad.html old mode 100644 new mode 100755 diff --git a/src/frontend/templates/cart.html b/src/frontend/templates/cart.html old mode 100644 new mode 100755 index 99812c9..857cffe --- a/src/frontend/templates/cart.html +++ b/src/frontend/templates/cart.html @@ -1,13 +1,13 @@ {{ define "cart" }} {{ template "header" . }} -
-
-
+
+
+
{{ if eq (len $.items) 0 }}

Your shopping cart is empty!

Items you add to your shopping cart will appear here.

- Browse Products → + Browse Products → {{ else }}
@@ -18,8 +18,8 @@
- - Browse more products → + + Keep browsing
@@ -27,34 +27,36 @@
{{ range $.items }} -
-
- -
-
- {{.Item.Name}}
- SKU: #{{.Item.Id}} -
-
- Qty: {{.Quantity}}
- - {{ renderMoney .Price}} - +
+
+
+ +
+
+

{{.Item.Name}}

+

SKU: #{{.Item.Id}}

+
+ Quantity: {{.Quantity}}
+ + USD {{ renderMoney .Price}} + +
+
{{ end }}
-
-

Shipping Cost: {{ renderMoney .shipping_cost }}

- Total Cost: {{ renderMoney .total_cost }} +
+

Shipping Cost: USD {{ renderMoney .shipping_cost }}

+ Total Cost: USD {{ renderMoney .total_cost }}
-
+
-

Checkout

+

Checkout

@@ -116,7 +118,7 @@ - +
@@ -132,25 +134,22 @@
-
-
- +
+
{{ end }} - - {{ if $.recommendations}} -
- {{ template "recommendations" $.recommendations }} - {{ end }} - +
+ {{ if $.recommendations}} + {{ template "recommendations" $.recommendations }} + {{ end }}
diff --git a/src/frontend/templates/error.html b/src/frontend/templates/error.html old mode 100644 new mode 100755 diff --git a/src/frontend/templates/footer.html b/src/frontend/templates/footer.html old mode 100644 new mode 100755 index 0ca31e1..60bca98 --- a/src/frontend/templates/footer.html +++ b/src/frontend/templates/footer.html @@ -1,25 +1,81 @@ {{ define "footer" }} -
-
-

- © 2018 Google Inc - - (Source Code) - -

-

- - This website is hosted for demo purposes only. It is not an - actual shop. This is not an official Google project. - -

- - {{ if $.session_id }}session-id: {{ $.session_id }}
{{end}} - {{ if $.request_id }}request-id: {{ $.request_id }}
{{end}} - + +
+
+
+ +
+

DOWNLOAD THE ONLINE
BOUTIQUE APP

+ icon +
-
- +
+
    +
  • CUSTOMER SERVICE
    • +
  • Contact Us
    • +
  • Shipping
    • +
  • Returns
    • +
  • Rebates
    • +
  • Recalls
    • +
  • Product Guides
    • +
  • Store Survey
    • +
  • O.B. Cash
    • +
+
    +
  • SHOP
    • +
  • Get 15% off when you sign up for our emails
    • +
  • My Lists
    • +
  • Site Map
    • +
  • Store Locator
    • +
  • Gift Cards
    • +
  • Today’s Ad
    • +
  • O.B. Coupons
    • +
+
    +
  • MY ACCOUNT
    • +
  • Sign in
    • +
  • My Account
    • +
  • Update Password
    • +
  • Order Status
    • +
  • Gift Card Balance
    • +
  • O.B. Cash Balance
    • +
+
    +
  • O.B. CHARGE
    • +
  • Pay & Manage Card
    • +
  • Apply for a O.B. Charge
    • +
  • See if you prequalify
    • +
+
    +
  • ABOUT O.B.
    • +
  • Our Websites
    • +
  • Community
    • +
  • Sustainability
    • +
  • Careers
    • +
  • Apply for Seasonal Jobs
    • +
  • Associate Services
    • +
  • Investor Relations
    • +
  • Affiliate Program
    • +
+
+
+ +
+

© 2019 Google Inc

+

This website is hosted for demo purposes only. It is not an actual shop.

+
+
+ + -{{ end }} +{{ end }} \ No newline at end of file diff --git a/src/frontend/templates/header.html b/src/frontend/templates/header.html old mode 100644 new mode 100755 index 62444cf..9fd55ec --- a/src/frontend/templates/header.html +++ b/src/frontend/templates/header.html @@ -1,35 +1,78 @@ {{ define "header" }} + - Hipster Shop - + Online Boutique Shop + + + + + + +
-
+
+
+
FREE shipping with $75 purchase   see details
+
+
+ icon + +
+
+ icon + My Account +
+
+ icon + Help +
+
+ icon + + icon +
+
+
+
+
- Hipster Shop + - {{ if $.currencies }} -
- - View Cart ({{$.cart_size}}) -
- {{ end }} + +
+ + + View Cart + {{ if $.cart_size }} + {{$.cart_size}} x + {{ end }} + + +
-{{end}} + {{end}} \ No newline at end of file diff --git a/src/frontend/templates/home.html b/src/frontend/templates/home.html old mode 100644 new mode 100755 index 1d97c6a..022ac05 --- a/src/frontend/templates/home.html +++ b/src/frontend/templates/home.html @@ -1,63 +1,52 @@ {{ define "home" }} - {{ template "header" . }} -
-
-
-

- One-stop for Hipster Fashion & Style Online -

-

- Tired of mainstream fashion ideas, popular trends and - societal norms? This line of lifestyle products will help - you catch up with the hipster trend and express your - personal style. Start shopping hip and vintage items now! -

-
-
+{{ template "header" . }} +
+ + {{$.platform_name}} + +
+
+
+
+ icon +
+
-
-
-
- {{ range $.products }} -
-
- - - -
-
- {{ .Item.Name }} -
-
-
- - - -
- - {{ renderMoney .Price }} - - -
-
-
-
- {{ end }} -
-
- {{ with $.ad }}{{ template "text_ad" . }}{{ end}} -
+
+
+
+ icon +
+
+ {{ range $.products }} +
+
+ + +
+ +
+
+ {{ .Item.Name }} +
+
+ + - {{ renderMoney .Price }} - + +
+
-
+ {{ end }} +
+
+ icon +
+
+ +
- {{ template "footer" . }} +{{ template "footer" . }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/src/frontend/templates/order.html b/src/frontend/templates/order.html old mode 100644 new mode 100755 index 7784918..3587508 --- a/src/frontend/templates/order.html +++ b/src/frontend/templates/order.html @@ -1,35 +1,35 @@ {{ define "order" }} {{ template "header" . }} -
+
-
+
-
-

- Your order is complete! -

-

- Order Confirmation ID: {{.order.OrderId}} -
- Shipping Tracking ID: {{.order.ShippingTrackingId}} -

-

- Shipping Cost: {{renderMoney .order.ShippingCost}} -
- Total Paid: {{renderMoney .total_paid}} -

- Browse other products → +
+ +

+ Your order is complete! +

+

Order Confirmation ID

+

{{.order.OrderId}}

+

Shipping Tracking ID

+

{{.order.ShippingTrackingId}}

+

Shipping Cost

+

USD {{renderMoney .order.ShippingCost}}

+

Total Paid

+

USD {{renderMoney .total_paid}}

-
- - {{ if $.recommendations }} -
- {{ template "recommendations" $.recommendations }} -
- {{ end }} +
+
+
+ Keep Browsing +
+
+ {{ if $.recommendations }} + {{ template "recommendations" $.recommendations }} + {{ end }}
diff --git a/src/frontend/templates/product.html b/src/frontend/templates/product.html old mode 100644 new mode 100755 index e939987..8b514ec --- a/src/frontend/templates/product.html +++ b/src/frontend/templates/product.html @@ -1,56 +1,54 @@ {{ define "product" }} - {{ template "header" . }} +{{ template "header" . }} -
-
-
-
-
- -
-
-

{{$.product.Item.Name}}

- -

- {{ renderMoney $.product.Price}} -

-
-

-

Product Description:
- {{$.product.Item.Description}} -

-
+
+
+
+
+ +
+
+
+

{{$.product.Item.Name}}

-
- -
-
- -
- - -
-
-
-
- - {{ if $.recommendations}} -
- {{ template "recommendations" $.recommendations }} - {{ end }} - - {{ with $.ad }}{{ template "text_ad" . }}{{ end}} +

+ - {{ renderMoney $.product.Price}} - +

+
+
Product Description:
+ {{$.product.Item.Description}} +
+ +
+ +
+
+ +
+ +
+
- -
- {{ template "footer" . }} -{{ end }} +
+
+
+
+ {{ if $.recommendations}} + {{ template "recommendations" $.recommendations }} + {{ end }} + +
+ icon +
+
+
+{{ template "footer" . }} +{{ end }} \ No newline at end of file diff --git a/src/frontend/templates/recommendations.html b/src/frontend/templates/recommendations.html old mode 100644 new mode 100755 index 10525af..5d83017 --- a/src/frontend/templates/recommendations.html +++ b/src/frontend/templates/recommendations.html @@ -1,21 +1,26 @@ {{ define "recommendations" }} -
Products you might like
-
- {{range . }} -
-
- - - -
- - {{ .Name }} - -
+
+
+
+ icon +
+
+ {{range . }} +
+
+ + +
+ +
+
+ {{ .Name }} +
+
+
+ {{ end }}
- {{ end }} -
-{{ end }} +
+ +{{ end }} \ No newline at end of file diff --git a/src/productcatalogservice/products.json b/src/productcatalogservice/products.json index f41b2d9..e5bba79 100644 --- a/src/productcatalogservice/products.json +++ b/src/productcatalogservice/products.json @@ -1,110 +1,148 @@ { "products": [ { - "id": "OLJCESPC7Z", - "name": "Vintage Typewriter", - "description": "This typewriter looks good in your living room.", - "picture": "/static/img/products/typewriter.jpg", + "id": "1YMWWN1N4O", + "name": "HOME BARISTA KIT", + "description": "Always wanted to make barista quality coffee at home?", + "picture": "/static/images/products/CoffeeMachine.png", "priceUsd": { "currencyCode": "USD", - "units": 67, + "units": 139, + "nanos": 999000000 + }, + "categories": ["cookware"] + }, + { + "id": "OLJCESPC7Z", + "name": "COLORING PENCILS", + "description": "Create a masterpiece with our coloured pencil set.", + "picture": "/static/images/products/ColouredPencils.png", + "priceUsd": { + "currencyCode": "USD", + "units": 5, "nanos": 990000000 }, - "categories": ["vintage"] + "categories": ["art"] }, { "id": "66VCHSJNUP", - "name": "Vintage Camera Lens", - "description": "You won't have a camera to use it and it probably doesn't work anyway.", - "picture": "/static/img/products/camera-lens.jpg", + "name": "CACTUS", + "description": "Ferocactus echidne is a barrel cactus in the genus Ferocactus. It is found in nature in Mexico. The white pottery vase has been hand crafted by local artisans.", + "picture": "/static/images/products/Cactus.png", "priceUsd": { "currencyCode": "USD", "units": 12, - "nanos": 490000000 + "nanos": 999000000 }, - "categories": ["photography", "vintage"] - }, - { - "id": "1YMWWN1N4O", - "name": "Home Barista Kit", - "description": "Always wanted to brew coffee with Chemex and Aeropress at home?", - "picture": "/static/img/products/barista-kit.jpg", - "priceUsd": { - "currencyCode": "USD", - "units": 124 - }, - "categories": ["cookware"] + "categories": ["plants", "art"] }, { "id": "L9ECAV7KIM", - "name": "Terrarium", - "description": "This terrarium will looks great in your white painted living room.", - "picture": "/static/img/products/terrarium.jpg", + "name": "GLOBE", + "description": "Dream about your next travel adventure with this decorative globe.", + "picture": "/static/images/products/Globe.png", "priceUsd": { "currencyCode": "USD", - "units": 36, - "nanos": 450000000 + "units": 19, + "nanos": 990000000 }, - "categories": ["gardening"] + "categories": ["accessories"] }, { "id": "2ZYFJ3GM2N", - "name": "Film Camera", - "description": "This camera looks like it's a film camera, but it's actually digital.", - "picture": "/static/img/products/film-camera.jpg", + "name": "NOTEBOOKS", + "description": "Jot down your thoughts. Anywhere! Anytime!", + "picture": "/static/images/products/Notebook.png", "priceUsd": { "currencyCode": "USD", - "units": 2245 + "units": 8, + "nanos": 990000000 }, - "categories": ["photography", "vintage"] + "categories": ["notebooks", "vintage"] }, { "id": "0PUK6V6EV0", - "name": "Vintage Record Player", - "description": "It still works.", - "picture": "/static/img/products/record-player.jpg", + "name": "UNICORN", + "description": "Brighten up your mantelpiece with this colorful ornament.", + "picture": "/static/images/products/Unicorn.png", "priceUsd": { "currencyCode": "USD", - "units": 65, - "nanos": 500000000 + "units": 19, + "nanos": 999000000 }, - "categories": ["music", "vintage"] + "categories": ["accessories", "alternative"] }, { "id": "LS4PSXUNUM", - "name": "Metal Camping Mug", - "description": "You probably don't go camping that often but this is better than plastic cups.", - "picture": "/static/img/products/camp-mug.jpg", + "name": "FRAMED ROBOT", + "description": "Lighten up your wall with this kitsch piece.", + "picture": "/static/images/products/Robot1.png", "priceUsd": { "currencyCode": "USD", - "units": 24, - "nanos": 330000000 + "units": 49, + "nanos": 999000000 }, - "categories": ["cookware"] + "categories": ["accessories"] }, { "id": "9SIQT8TOJO", - "name": "City Bike", - "description": "This single gear bike probably cannot climb the hills of San Francisco.", - "picture": "/static/img/products/city-bike.jpg", + "name": "SUNGLASSES", + "description": "Prepare for summer with these stylish sunglasses!", + "picture": "/static/images/products/Sunnies.png", "priceUsd": { "currencyCode": "USD", - "units": 789, - "nanos": 500000000 + "units": 19, + "nanos": 999000000 }, - "categories": ["cycling"] + "categories": ["clothing"] }, { "id": "6E92ZMYYFZ", - "name": "Air Plant", - "description": "Have you ever wondered whether air plants need water? Buy one and figure out.", - "picture": "/static/img/products/air-plant.jpg", + "name": "POTTERY BOWL", + "description": "Colorful bowl for your favourite fruit!", + "picture": "/static/images/products/Bowl.png", "priceUsd": { "currencyCode": "USD", - "units": 12, - "nanos": 300000000 + "units": 16, + "nanos": 999000000 }, - "categories": ["gardening"] + "categories": ["hobbies"] + }, + { + "id": "5E9JZMYYFA", + "name": "MUG", + "description": "Never miss your morning coffee with your new favourite mug!", + "picture": "/static/images/products/Mugs.png", + "priceUsd": { + "currencyCode": "USD", + "units": 6, + "nanos": 999000000 + }, + "categories": ["crockery"] + }, + { + "id": "E692ZMLLFW", + "name": "LAMP SHADE", + "description": "Brighten up your lounge with this stylish lamp shade!", + "picture": "/static/images/products/LightShade.png", + "priceUsd": { + "currencyCode": "USD", + "units": 27, + "nanos": 999000000 + }, + "categories": ["furniture"] + }, + { + "id": "1A92SMYYDc", + "name": "MECHANICAL ROBOT", + "description": "Surprise your tech-savvy friend with this retro robot!", + "picture": "/static/images/products/Robot2.png", + "priceUsd": { + "currencyCode": "USD", + "units": 26, + "nanos": 999000000 + }, + "categories": ["accessories"] } ] }