From 36bd438867b7dc135c3be04b6d62d9ee8b0a545a Mon Sep 17 00:00:00 2001 From: Maximiliano Firtman Date: Tue, 2 May 2023 08:07:29 -0500 Subject: first commit --- app.webmanifest | 33 ++++++++++++ components/DetailsPage.css | 54 +++++++++++++++++++ components/MenuPage.css | 69 +++++++++++++++++++++++++ components/OrderPage.css | 115 +++++++++++++++++++++++++++++++++++++++++ data/images/blackamericano.png | Bin 0 -> 100186 bytes data/images/blacktea.png | Bin 0 -> 99074 bytes data/images/cappuccino.png | Bin 0 -> 128079 bytes data/images/coldbrew.png | Bin 0 -> 91316 bytes data/images/croissant.png | Bin 0 -> 103190 bytes data/images/flatwhite.png | Bin 0 -> 97525 bytes data/images/frappuccino.png | Bin 0 -> 104058 bytes data/images/greentea.png | Bin 0 -> 113425 bytes data/images/icedcoffee.png | Bin 0 -> 88541 bytes data/images/macchiato.png | Bin 0 -> 104807 bytes data/images/muffin.png | Bin 0 -> 109789 bytes data/menu.json | 99 +++++++++++++++++++++++++++++++++++ images/.DS_Store | Bin 0 -> 6148 bytes images/icons/icon-maskable.png | Bin 0 -> 21515 bytes images/icons/icon.png | Bin 0 -> 55759 bytes images/logo.png | Bin 0 -> 8109 bytes images/logo.svg | 12 +++++ images/screen1.jpg | Bin 0 -> 399176 bytes images/screen2.jpg | Bin 0 -> 146279 bytes index.html | 94 +++++++++++++++++++++++++++++++++ serviceworker.js | 7 +++ styles.css | 80 ++++++++++++++++++++++++++++ 26 files changed, 563 insertions(+) create mode 100644 app.webmanifest create mode 100644 components/DetailsPage.css create mode 100644 components/MenuPage.css create mode 100644 components/OrderPage.css create mode 100644 data/images/blackamericano.png create mode 100644 data/images/blacktea.png create mode 100644 data/images/cappuccino.png create mode 100644 data/images/coldbrew.png create mode 100644 data/images/croissant.png create mode 100644 data/images/flatwhite.png create mode 100644 data/images/frappuccino.png create mode 100644 data/images/greentea.png create mode 100644 data/images/icedcoffee.png create mode 100644 data/images/macchiato.png create mode 100644 data/images/muffin.png create mode 100644 data/menu.json create mode 100644 images/.DS_Store create mode 100644 images/icons/icon-maskable.png create mode 100644 images/icons/icon.png create mode 100644 images/logo.png create mode 100644 images/logo.svg create mode 100644 images/screen1.jpg create mode 100644 images/screen2.jpg create mode 100644 index.html create mode 100644 serviceworker.js create mode 100644 styles.css diff --git a/app.webmanifest b/app.webmanifest new file mode 100644 index 0000000..e20b750 --- /dev/null +++ b/app.webmanifest @@ -0,0 +1,33 @@ +{ + "name": "Coffee Masters", + "short_name": "CoffeeMasters", + "theme_color": "#43281C", + "display": "standalone", + "background_color": "#EFEFEF", + "start_url": "/", + "scope": "/", + "description": "The app for order at Coffee Masters, the best coffee shop in the Frontend world, by Frontend Masters.", + "icons": [ + { + "src": "images/icons/icon.png", + "sizes": "1024x1024", + "type": "image/png" + }, + { + "src": "images/icons/icon-maskable.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "screenshots": [ + { + "src": "images/screen1.jpg", + "type": "image/jpeg" + }, + { + "src": "images/screen2.jpg", + "type": "image/jpeg" + } + ] +} \ No newline at end of file diff --git a/components/DetailsPage.css b/components/DetailsPage.css new file mode 100644 index 0000000..37e4ed1 --- /dev/null +++ b/components/DetailsPage.css @@ -0,0 +1,54 @@ +button { + display: block; + background-color: var(--color5); + border: 0; + width: 80%; + margin: 16px 10%; + padding: 12px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; +} + +header { + display: flex; + flex-direction: row; +} + +header>a { + display: block; + flex: 1; + text-decoration: none; + color: var(--primaryColor); + padding: 12px 0 12px 8px; + text-align: center; + font-size: 14px; +} + +h2 { + color: var(--secondaryColor); + font-weight: normal; + font-size: 20px; + flex: 5; + margin: 8px; + text-align: center; +} + +img { + width: 96%; + margin: 0 2%; + margin-top: 12px; +} + +.description { + margin: 4px; + padding: 0 12px; + color: var(--primaryColor); + font-size: 13px; +} + +.price { + color: var(--secondaryColor); + padding: 0 24px; +} + diff --git a/components/MenuPage.css b/components/MenuPage.css new file mode 100644 index 0000000..20f3786 --- /dev/null +++ b/components/MenuPage.css @@ -0,0 +1,69 @@ +ul { + list-style: none; + padding: 0; +} + +h3 { + color: var(--color4); + font-weight: normal; + padding-top: 15px; + font-size: 17px; +} + +button { + background-color: var(--color5); + border: 0; + margin: 10px 3%; + padding: 5px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; + flex-grow: 1; +} + +article section div { + flex-grow: 2; +} + +ul { + background-color: var(--color6); + margin: 4px 6px; + padding: 0px 12px; + border-radius: 10px; + padding-bottom: 10px; +} + +article { + background-color: white; + margin-bottom: 16px; + padding-bottom: 1px; + border-radius: 5px; +} + +article img { + width: 100%; +} + +article a { + text-decoration: none; + display: block; +} + +article section { + display: flex; +} + + + + +h4 { + margin: 8px 0 0 12px; + color: #333D29; + font-size: 18px; + font-weight: bold; +} + +.price { + margin: 0px 0 0px 12px; + color: #B08968 +} \ No newline at end of file diff --git a/components/OrderPage.css b/components/OrderPage.css new file mode 100644 index 0000000..6e7b0ca --- /dev/null +++ b/components/OrderPage.css @@ -0,0 +1,115 @@ +ul { + list-style: none; + padding: 0; +} + +h3 { + color: var(--color4); + font-weight: normal; + padding-top: 15px; + font-size: 17px; +} + +button { + display: block; + background-color: var(--color5); + border: 0; + width: 80%; + margin: 16px 10%; + padding: 12px 0; + border-radius: 40px; + color: var(--color3); + font-size: 16px; +} + +h2 { + text-align: center; + color: var(--secondaryColor); + font-weight: normal; + font-size: 20px; + flex: 5; + margin: 8px; + text-align: center; +} + +.empty { + text-align: center; + color: var(--color3) +} + +ul { + background-color: var(--color6); + padding: 16px; + margin: 12px; + border-radius: 5px; + box-shadow: 2px 2px 10px silver; + +} + +li { + display: flex; + border-bottom: 1px solid var(--color5); +} + +li:last-child { + border: 0; +} + +.qty { + color: var(--color4); + flex: 1; +} + +.name { + font-weight: bold; + color: var(--secondaryColor); + flex: 5; +} + +.total { + font-weight: bold; + color: var(--color3); + flex: 5; + text-align: right; + margin-right: 16px; + font-size: 17px; + +} + +.toolbar span { + display: block; + padding: 0 8px; +} + +.price, .price-total { + color: var(--secondaryColor); + flex: 1; + + text-align: right; +} + +.price-total { + font-weight: bold; + font-size: 17px; + flex: 2; + text-align: left; +} + + +a { + text-decoration: none; +} + +label, input { + display: block; + width: 90%; + margin-left: 5%; +} + +input { + background-color: var(--color6); + margin-bottom: 6px; + font-size: large; + border: 1px solid var(--color3); + border-radius: 15px; +} \ No newline at end of file diff --git a/data/images/blackamericano.png b/data/images/blackamericano.png new file mode 100644 index 0000000..51ff22a Binary files /dev/null and b/data/images/blackamericano.png differ diff --git a/data/images/blacktea.png b/data/images/blacktea.png new file mode 100644 index 0000000..adeb6aa Binary files /dev/null and b/data/images/blacktea.png differ diff --git a/data/images/cappuccino.png b/data/images/cappuccino.png new file mode 100644 index 0000000..7b87999 Binary files /dev/null and b/data/images/cappuccino.png differ diff --git a/data/images/coldbrew.png b/data/images/coldbrew.png new file mode 100644 index 0000000..eb99e80 Binary files /dev/null and b/data/images/coldbrew.png differ diff --git a/data/images/croissant.png b/data/images/croissant.png new file mode 100644 index 0000000..7433608 Binary files /dev/null and b/data/images/croissant.png differ diff --git a/data/images/flatwhite.png b/data/images/flatwhite.png new file mode 100644 index 0000000..63a014f Binary files /dev/null and b/data/images/flatwhite.png differ diff --git a/data/images/frappuccino.png b/data/images/frappuccino.png new file mode 100644 index 0000000..557f669 Binary files /dev/null and b/data/images/frappuccino.png differ diff --git a/data/images/greentea.png b/data/images/greentea.png new file mode 100644 index 0000000..5feea63 Binary files /dev/null and b/data/images/greentea.png differ diff --git a/data/images/icedcoffee.png b/data/images/icedcoffee.png new file mode 100644 index 0000000..76b2b32 Binary files /dev/null and b/data/images/icedcoffee.png differ diff --git a/data/images/macchiato.png b/data/images/macchiato.png new file mode 100644 index 0000000..cdf4a85 Binary files /dev/null and b/data/images/macchiato.png differ diff --git a/data/images/muffin.png b/data/images/muffin.png new file mode 100644 index 0000000..3f942ea Binary files /dev/null and b/data/images/muffin.png differ diff --git a/data/menu.json b/data/menu.json new file mode 100644 index 0000000..4a5d532 --- /dev/null +++ b/data/menu.json @@ -0,0 +1,99 @@ +[ + { + "name": "HOT COFFEE", + "products": [ + { + "id": 11, + "name": "Black Americano", + "price": 1.50, + "description": "Freshly pulled shots of espresso combined with hot water.", + "image": "blackamericano.png" + }, + { + "id": 12, + "name": "Cappuccino", + "price": 3.75, + "description": "A freshly pulled shot of espresso layered with steamed whole milk and thick rich foam to offer a luxurious velvety texture and complex aroma.", + "image": "cappuccino.png" + }, + { + "id": 13, + "name": "Macchiato", + "price": 3.25, + "description": "Our perfectly roasted coffees are blended with our powders, steamed non-fat milk and topped with thick foam to create a delicious pick-me-up treat.", + "image": "macchiato.png" + }, + { + "id": 14, + "name": "Flat White", + "price": 3.25, + "description": "We start with an extra shot of espresso, combine them with one of our signature powders, and finished with lightly aerated milk to create the perfect, velvety espresso beverage. Available in hazelnut, vanilla, mocha or classic flat white.", + "image": "flatwhite.png" + } + ] + }, + { + "name": "ICED COFFEE", + "products": [ + { + "id": 21, + "name": "Frappuccino", + "price": 3.75, + "description": "Non-fat milk blended with our signature powders and ice and then topped with whipped cream. A delicious non-caffeinated treat.", + "image": "frappuccino.png" + }, + { + "id": 22, + "name": "Iced Coffee", + "price": 3.15, + "description": "Our specially brewed coffee served over ice for a refreshing and bold coffee taste", + "image": "icedcoffee.png" + }, + { + "id": 23, + "name": "Cold Brew", + "price": 1.85, + "description": "Our signature Cold Brew Coffee is a premium blend of Bali Blue Moon and Ethiopia Yirgacheffe coffees with chicory steeped cold for 20 hours for rich, vibrant flavors.", + "image": "coldbrew.png" + } + ] + }, + { + "name": "TEA", + "products": [ + { + "id": 31, + "name": "Green Tea", + "price": 1.75, + "description": "Like oolong and black tea, green tea comes from the plant Camellia sinensis. Green tea's delightfully delicate flavor is due to its minimal oxidation. It is processed to take a variety of forms, from finely ground powder to long, curling leaves. Though it originated in China, where it has been consumed for over 4,000 years, green tea is now grown in Japan and Sri Lanka, and enjoyed throughout the world.", + "image": "greentea.png" + }, + { + "id": 32, + "name": "Black Tea", + "price": 1.75, + "description": "Like green and oolong teas, black tea comes from the Camellia sinensis plant. Its darker hue and stronger taste result from the greater level of oxidation it undergoes during processing. From delicate Darjeeling to strong Ceylon, each variety has distinct characteristics, making black tea a beloved beverage across the globe.", + "image": "blacktea.png" + } + ] + }, + { + "name": "SNACKS", + "products": [ + { + "id": 41, + "name": "Croissant", + "price": 2.80, + "description": "Buttery, crescent-shaped French pastry", + "image": "croissant.png" + }, + { + "id": 42, + "name": "Chocolate Chip Muffin", + "price": 1.75, + "description": "The muffins are incredibly rich, mega chocolate-y, and loaded with chocolate chips in every single bite", + "image": "muffin.png" + } + ] + } +] \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..91b5a95 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/icons/icon-maskable.png b/images/icons/icon-maskable.png new file mode 100644 index 0000000..57b3a2b Binary files /dev/null and b/images/icons/icon-maskable.png differ diff --git a/images/icons/icon.png b/images/icons/icon.png new file mode 100644 index 0000000..ad2eb2e Binary files /dev/null and b/images/icons/icon.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..d93e99e Binary files /dev/null and b/images/logo.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..52a95d3 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/screen1.jpg b/images/screen1.jpg new file mode 100644 index 0000000..e419c40 Binary files /dev/null and b/images/screen1.jpg differ diff --git a/images/screen2.jpg b/images/screen2.jpg new file mode 100644 index 0000000..4eec690 Binary files /dev/null and b/images/screen2.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..12a7c31 --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + Coffee Masters + + + + + + + + + + + + + +
+

Coffee Masters

+ +
+ +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/serviceworker.js b/serviceworker.js new file mode 100644 index 0000000..a5fc3eb --- /dev/null +++ b/serviceworker.js @@ -0,0 +1,7 @@ +self.addEventListener("install", async event => { + // TODO +}); + +self.addEventListener("fetch", async event => { + // TODO +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7defa33 --- /dev/null +++ b/styles.css @@ -0,0 +1,80 @@ +:root { + --background-surface: #EFEFEF; + --primaryColor: #43281C; + --secondaryColor: #333D29; + --color3: #7F4F24; + --color4: #B08968; + --color5: #DDB892; + --color6: #EDE0D4; + --highlight: #FBF2C6; +} + +body { + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; +} + +body>header { + position: fixed; + width: 100%; + top: 0; +} + +body>main { + margin: auto; + margin-top: 60px; + max-width: 500px; +} + +h1 { + background-color: var(--primaryColor); + color: white; + margin: 0; + text-align: center; + padding: 10px 0 5px 0; + font-size: 20px; + font-weight: normal; +} + +ul { + display: none; + padding: 0; +} + +a.navlink { + color: var(--highlight); + padding: 8px; + text-decoration: none; +} + +#linkHome { + display: block; + position: absolute; + top: 5px; + left: 5px; +} + +#linkOrder { + display: block; + position: absolute; + top: 5px; + right: 5px; +} + +section.page { + display: none; +} + +#badge { + padding: 4px; + background-color: red; + border-radius: 15px; + width: 10px; + text-align: center; + font-size: x-small; + color: white; + position: absolute; + right: 5px; + top: 6px; +} \ No newline at end of file -- cgit v1.3