first commit

26 files changed, 563 insertions, 0 deletions

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
--- /dev/null
+++ b/data/images/blackamericano.png
diff --git a/data/images/blacktea.png b/data/images/blacktea.png
new file mode 100644
index 0000000..adeb6aa
--- /dev/null
+++ b/data/images/blacktea.png
diff --git a/data/images/cappuccino.png b/data/images/cappuccino.png
new file mode 100644
index 0000000..7b87999
--- /dev/null
+++ b/data/images/cappuccino.png
diff --git a/data/images/coldbrew.png b/data/images/coldbrew.png
new file mode 100644
index 0000000..eb99e80
--- /dev/null
+++ b/data/images/coldbrew.png
diff --git a/data/images/croissant.png b/data/images/croissant.png
new file mode 100644
index 0000000..7433608
--- /dev/null
+++ b/data/images/croissant.png
diff --git a/data/images/flatwhite.png b/data/images/flatwhite.png
new file mode 100644
index 0000000..63a014f
--- /dev/null
+++ b/data/images/flatwhite.png
diff --git a/data/images/frappuccino.png b/data/images/frappuccino.png
new file mode 100644
index 0000000..557f669
--- /dev/null
+++ b/data/images/frappuccino.png
diff --git a/data/images/greentea.png b/data/images/greentea.png
new file mode 100644
index 0000000..5feea63
--- /dev/null
+++ b/data/images/greentea.png
diff --git a/data/images/icedcoffee.png b/data/images/icedcoffee.png
new file mode 100644
index 0000000..76b2b32
--- /dev/null
+++ b/data/images/icedcoffee.png
diff --git a/data/images/macchiato.png b/data/images/macchiato.png
new file mode 100644
index 0000000..cdf4a85
--- /dev/null
+++ b/data/images/macchiato.png
diff --git a/data/images/muffin.png b/data/images/muffin.png
new file mode 100644
index 0000000..3f942ea
--- /dev/null
+++ b/data/images/muffin.png
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
--- /dev/null
+++ b/images/.DS_Store
diff --git a/images/icons/icon-maskable.png b/images/icons/icon-maskable.png
new file mode 100644
index 0000000..57b3a2b
--- /dev/null
+++ b/images/icons/icon-maskable.png
diff --git a/images/icons/icon.png b/images/icons/icon.png
new file mode 100644
index 0000000..ad2eb2e
--- /dev/null
+++ b/images/icons/icon.png
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..d93e99e
--- /dev/null
+++ b/images/logo.png
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100.786" height="21.226" viewBox="0 0 100.786 21.226">
+  <g id="Group_437" data-name="Group 437" transform="translate(-136.75 -9)">
+    <g id="Group_14" data-name="Group 14" transform="translate(137 9)">
+      <path id="Union_16" data-name="Union 16" d="M3.789,5.423v-2.8h0A1.124,1.124,0,0,0,2.665,1.5H.3C.133,1.5,0,1.164,0,.75S.133,0,.3,0H2.665A2.606,2.606,0,0,1,3.686.206a2.633,2.633,0,0,1,1.4,1.4,2.607,2.607,0,0,1,.206,1.021h0v0l0,2.8c0,.193-.335.35-.749.35S3.789,5.616,3.789,5.423Z" transform="translate(13.942 9.805)" fill="#fbf2c0"/>
+      <path id="Union_16_-_Outline" data-name="Union 16 - Outline" d="M4.538,5.523a.816.816,0,0,0,.5-.125l0-2.769V2.614A2.357,2.357,0,0,0,4.852,1.7,2.382,2.382,0,0,0,3.589.436,2.353,2.353,0,0,0,2.737.251H.349a1.042,1.042,0,0,0-.1.5,1.041,1.041,0,0,0,.1.5H2.665A1.375,1.375,0,0,1,4.017,2.376H4.04V5.4a.816.816,0,0,0,.5.125m0,.25c-.414,0-.749-.157-.749-.35v-2.8h0A1.124,1.124,0,0,0,2.665,1.5H.3C.133,1.5,0,1.164,0,.75S.133,0,.3,0H2.665A2.606,2.606,0,0,1,3.686.206a2.633,2.633,0,0,1,1.4,1.4,2.607,2.607,0,0,1,.206,1.021h0v0l0,2.8C5.287,5.616,4.951,5.773,4.538,5.773Z" transform="translate(13.942 9.805)" fill="#43281c"/>
+      <path id="Path_9" data-name="Path 9" d="M16977.174,430.512a.74.74,0,0,1-.514-.2.747.747,0,0,1-.031-1.06l7.3-7.739h-2.273a.75.75,0,0,1-.529-1.28l2.73-2.73h-6.02a.75.75,0,1,1,0-1.5h7.83a.749.749,0,0,1,.529,1.28l-2.729,2.73h2.2a.75.75,0,0,1,.545,1.264l-8.49,9A.745.745,0,0,1,16977.174,430.512Z" transform="translate(-16972.547 -416)" fill="#fbf2c0"/>
+      <path id="Subtraction_39" data-name="Subtraction 39" d="M-12426.128-40.83a6.46,6.46,0,0,0,1.293-.13,6.406,6.406,0,0,0,1.2-.373,6.388,6.388,0,0,0,1.087-.591,6.445,6.445,0,0,0,.95-.784,6.428,6.428,0,0,0,.783-.95,6.377,6.377,0,0,0,.591-1.088,6.376,6.376,0,0,0,.373-1.2,6.43,6.43,0,0,0,.13-1.293,6.409,6.409,0,0,0-.345-2.081,6.284,6.284,0,0,0-.567-1.218h-10.994a6.347,6.347,0,0,0-.568,1.218,6.383,6.383,0,0,0-.345,2.081,6.5,6.5,0,0,0,.13,1.293,6.377,6.377,0,0,0,.373,1.2,6.313,6.313,0,0,0,.591,1.088,6.482,6.482,0,0,0,.783.95,6.392,6.392,0,0,0,.95.784,6.43,6.43,0,0,0,1.088.591,6.353,6.353,0,0,0,1.2.373,6.476,6.476,0,0,0,1.294.13m0,1.462a7.941,7.941,0,0,1-1.587-.16,7.834,7.834,0,0,1-1.478-.459,7.855,7.855,0,0,1-1.337-.726,7.933,7.933,0,0,1-1.165-.961,7.884,7.884,0,0,1-.961-1.165,7.876,7.876,0,0,1-.727-1.337,7.9,7.9,0,0,1-.459-1.478,7.978,7.978,0,0,1-.159-1.586,7.836,7.836,0,0,1,.424-2.555A7.872,7.872,0,0,1-12432.4-52h12.54a7.823,7.823,0,0,1,1.178,2.205,7.863,7.863,0,0,1,.425,2.555,7.907,7.907,0,0,1-.16,1.586,7.97,7.97,0,0,1-.459,1.478,7.814,7.814,0,0,1-.726,1.337,7.9,7.9,0,0,1-.961,1.165,7.98,7.98,0,0,1-1.165.961,7.83,7.83,0,0,1-1.338.726,7.834,7.834,0,0,1-1.478.459A7.917,7.917,0,0,1-12426.128-39.368Z" transform="translate(12434 60.343)" fill="#fbf2c0"/>
+      <path id="Subtraction_39_-_Outline" data-name="Subtraction 39 - Outline" d="M-12426.128-39.118a8.2,8.2,0,0,1-1.637-.165,8.079,8.079,0,0,1-1.525-.473,8.125,8.125,0,0,1-1.38-.749,8.17,8.17,0,0,1-1.2-.991,8.137,8.137,0,0,1-.991-1.2,8.108,8.108,0,0,1-.75-1.38,8.2,8.2,0,0,1-.474-1.525,8.276,8.276,0,0,1-.164-1.637,8.092,8.092,0,0,1,.438-2.637,8.128,8.128,0,0,1,1.215-2.275l.075-.1h12.788l.075.1a8.055,8.055,0,0,1,1.215,2.276,8.106,8.106,0,0,1,.438,2.636,8.178,8.178,0,0,1-.165,1.637,8.267,8.267,0,0,1-.474,1.524,8.035,8.035,0,0,1-.749,1.38,8.167,8.167,0,0,1-.991,1.2,8.234,8.234,0,0,1-1.2.991,8.108,8.108,0,0,1-1.382.749,8.072,8.072,0,0,1-1.524.473A8.153,8.153,0,0,1-12426.128-39.118Zm-6.146-12.633a7.629,7.629,0,0,0-1.066,2.036,7.582,7.582,0,0,0-.41,2.474,7.709,7.709,0,0,0,.154,1.537,7.675,7.675,0,0,0,.444,1.43,7.641,7.641,0,0,0,.7,1.294,7.645,7.645,0,0,0,.931,1.128,7.686,7.686,0,0,0,1.128.931,7.576,7.576,0,0,0,1.295.7,7.566,7.566,0,0,0,1.43.444,7.738,7.738,0,0,0,3.073,0,7.588,7.588,0,0,0,1.43-.444,7.577,7.577,0,0,0,1.3-.7,7.727,7.727,0,0,0,1.128-.931,7.661,7.661,0,0,0,.931-1.128,7.579,7.579,0,0,0,.7-1.295,7.673,7.673,0,0,0,.444-1.431,7.605,7.605,0,0,0,.155-1.536,7.625,7.625,0,0,0-.411-2.474,7.6,7.6,0,0,0-1.066-2.036Zm6.146,11.171a6.726,6.726,0,0,1-1.344-.135,6.615,6.615,0,0,1-1.249-.388,6.655,6.655,0,0,1-1.13-.614,6.632,6.632,0,0,1-.987-.814,6.744,6.744,0,0,1-.813-.986,6.583,6.583,0,0,1-.614-1.131,6.665,6.665,0,0,1-.388-1.248,6.732,6.732,0,0,1-.135-1.343,6.62,6.62,0,0,1,.358-2.162,6.579,6.579,0,0,1,.591-1.266l.073-.121h11.275l.073.121a6.537,6.537,0,0,1,.59,1.266,6.641,6.641,0,0,1,.358,2.162,6.734,6.734,0,0,1-.135,1.344,6.669,6.669,0,0,1-.388,1.248,6.617,6.617,0,0,1-.614,1.131,6.667,6.667,0,0,1-.813.986,6.645,6.645,0,0,1-.987.814,6.629,6.629,0,0,1-1.129.614,6.674,6.674,0,0,1-1.25.388A6.7,6.7,0,0,1-12426.128-40.58Zm-5.354-9.709a6.14,6.14,0,0,0-.475,1.049,6.134,6.134,0,0,0-.331,2,6.24,6.24,0,0,0,.125,1.244,6.071,6.071,0,0,0,.358,1.154,6.046,6.046,0,0,0,.567,1.045,6.238,6.238,0,0,0,.753.913,6.145,6.145,0,0,0,.913.753,6.147,6.147,0,0,0,1.046.568,6.107,6.107,0,0,0,1.153.358,6.269,6.269,0,0,0,2.487,0,6.181,6.181,0,0,0,1.155-.358,6.132,6.132,0,0,0,1.043-.567,6.164,6.164,0,0,0,.914-.753,6.218,6.218,0,0,0,.753-.913,6.151,6.151,0,0,0,.567-1.046,6.069,6.069,0,0,0,.358-1.154,6.17,6.17,0,0,0,.125-1.243,6.161,6.161,0,0,0-.331-2,6.126,6.126,0,0,0-.474-1.049Z" transform="translate(12434 60.343)" fill="#43281c"/>
+    </g>
+    <path id="Path_1567" data-name="Path 1567" d="M3.931-5.981a1.542,1.542,0,0,0-1.323.642,2.987,2.987,0,0,0-.469,1.79q0,2.388,1.792,2.388a5.665,5.665,0,0,0,1.821-.376v1.27A5.058,5.058,0,0,1,3.789.1,2.994,2.994,0,0,1,1.406-.847,4,4,0,0,1,.581-3.56,4.429,4.429,0,0,1,.986-5.51,2.929,2.929,0,0,1,2.151-6.794a3.445,3.445,0,0,1,1.78-.447,4.8,4.8,0,0,1,2.09.5l-.488,1.23a8.083,8.083,0,0,0-.806-.332A2.4,2.4,0,0,0,3.931-5.981ZM8.34-2.739a2.291,2.291,0,0,0,.266,1.226.952.952,0,0,0,.867.415.937.937,0,0,0,.857-.413,2.324,2.324,0,0,0,.261-1.228,2.255,2.255,0,0,0-.264-1.216.953.953,0,0,0-.864-.405.95.95,0,0,0-.859.4A2.253,2.253,0,0,0,8.34-2.739Zm3.774,0a2.933,2.933,0,0,1-.7,2.085A2.549,2.549,0,0,1,9.453.1,2.739,2.739,0,0,1,8.066-.247a2.291,2.291,0,0,1-.923-.989,3.323,3.323,0,0,1-.322-1.5,2.917,2.917,0,0,1,.7-2.08,2.564,2.564,0,0,1,1.963-.742,2.755,2.755,0,0,1,1.387.342,2.281,2.281,0,0,1,.923.981A3.292,3.292,0,0,1,12.114-2.739Zm4.248-1.6H15.073V0H13.584V-4.341h-.82v-.718l.82-.4v-.4a1.789,1.789,0,0,1,.459-1.362,2.1,2.1,0,0,1,1.47-.43,3.825,3.825,0,0,1,1.372.229L16.5-6.328a2.776,2.776,0,0,0-.83-.142.537.537,0,0,0-.459.188.778.778,0,0,0-.142.481v.342h1.289Zm3.872,0H18.945V0H17.456V-4.341h-.82v-.718l.82-.4v-.4a1.788,1.788,0,0,1,.459-1.362,2.1,2.1,0,0,1,1.47-.43,3.825,3.825,0,0,1,1.372.229l-.381,1.094a2.776,2.776,0,0,0-.83-.142.537.537,0,0,0-.459.188.778.778,0,0,0-.142.481v.342h1.289Zm3.11-.161a.945.945,0,0,0-.742.3,1.39,1.39,0,0,0-.308.852h2.09A1.241,1.241,0,0,0,24.1-4.2.975.975,0,0,0,23.345-4.5Zm.21,4.6A2.818,2.818,0,0,1,21.494-.63a2.755,2.755,0,0,1-.742-2.061,3.03,3.03,0,0,1,.686-2.122,2.443,2.443,0,0,1,1.9-.75,2.4,2.4,0,0,1,1.8.659,2.494,2.494,0,0,1,.645,1.821v.723H22.261a1.433,1.433,0,0,0,.376.991,1.323,1.323,0,0,0,.986.356,4.1,4.1,0,0,0,.933-.1,4.666,4.666,0,0,0,.918-.327V-.288A3.5,3.5,0,0,1,24.639,0,5.264,5.264,0,0,1,23.555.1Zm5.7-4.6a.945.945,0,0,0-.742.3,1.39,1.39,0,0,0-.308.852h2.09A1.241,1.241,0,0,0,30-4.2.975.975,0,0,0,29.253-4.5Zm.21,4.6A2.818,2.818,0,0,1,27.4-.63,2.755,2.755,0,0,1,26.66-2.69a3.03,3.03,0,0,1,.686-2.122,2.443,2.443,0,0,1,1.9-.75,2.4,2.4,0,0,1,1.8.659,2.494,2.494,0,0,1,.645,1.821v.723H28.169a1.433,1.433,0,0,0,.376.991,1.323,1.323,0,0,0,.986.356,4.1,4.1,0,0,0,.933-.1,4.666,4.666,0,0,0,.918-.327V-.288A3.5,3.5,0,0,1,30.547,0,5.264,5.264,0,0,1,29.463.1ZM38.638,0,36.919-5.6h-.044q.093,1.709.093,2.28V0H35.615V-7.139h2.061L39.365-1.68h.029l1.792-5.459h2.061V0H41.836V-3.379q0-.239.007-.552t.066-1.66h-.044L40.024,0Zm9.756,0-.288-.742h-.039a2.2,2.2,0,0,1-.774.657A2.5,2.5,0,0,1,46.255.1a1.678,1.678,0,0,1-1.238-.449,1.725,1.725,0,0,1-.452-1.279,1.441,1.441,0,0,1,.608-1.282,3.522,3.522,0,0,1,1.833-.457l.947-.029v-.239a.742.742,0,0,0-.85-.83,3.872,3.872,0,0,0-1.538.4l-.493-1.006a4.438,4.438,0,0,1,2.09-.493,2.6,2.6,0,0,1,1.685.479,1.768,1.768,0,0,1,.586,1.455V0Zm-.439-2.529-.576.02a1.845,1.845,0,0,0-.967.234.736.736,0,0,0-.317.654q0,.63.723.63a1.145,1.145,0,0,0,.828-.3,1.046,1.046,0,0,0,.31-.791Zm6.821.908a1.5,1.5,0,0,1-.583,1.279A2.883,2.883,0,0,1,52.446.1,5.483,5.483,0,0,1,51.431.017a3.842,3.842,0,0,1-.786-.237V-1.45a5.192,5.192,0,0,0,.935.327,3.786,3.786,0,0,0,.916.132q.811,0,.811-.469a.391.391,0,0,0-.107-.286,1.557,1.557,0,0,0-.371-.249q-.264-.139-.7-.325a4.417,4.417,0,0,1-.925-.488,1.374,1.374,0,0,1-.43-.515,1.7,1.7,0,0,1-.134-.715A1.3,1.3,0,0,1,51.2-5.164a2.747,2.747,0,0,1,1.6-.4,4.539,4.539,0,0,1,1.919.43l-.449,1.074q-.41-.176-.767-.288a2.407,2.407,0,0,0-.728-.112q-.659,0-.659.356a.419.419,0,0,0,.212.347,5.776,5.776,0,0,0,.93.435,4.321,4.321,0,0,1,.938.483,1.43,1.43,0,0,1,.439.518A1.59,1.59,0,0,1,54.775-1.621Zm3.462.532a3.228,3.228,0,0,0,.938-.171V-.151A3.343,3.343,0,0,1,57.808.1a1.673,1.673,0,0,1-1.3-.452A1.966,1.966,0,0,1,56.1-1.709V-4.341h-.713v-.63l.82-.5.43-1.152h.952v1.162h1.528v1.118H57.588v2.632a.581.581,0,0,0,.178.469A.7.7,0,0,0,58.237-1.089Zm4.3-3.413a.945.945,0,0,0-.742.3,1.39,1.39,0,0,0-.308.852h2.09a1.241,1.241,0,0,0-.288-.852A.975.975,0,0,0,62.539-4.5Zm.21,4.6A2.818,2.818,0,0,1,60.688-.63a2.755,2.755,0,0,1-.742-2.061,3.03,3.03,0,0,1,.686-2.122,2.443,2.443,0,0,1,1.9-.75,2.4,2.4,0,0,1,1.8.659,2.494,2.494,0,0,1,.645,1.821v.723H61.455a1.433,1.433,0,0,0,.376.991,1.323,1.323,0,0,0,.986.356,4.1,4.1,0,0,0,.933-.1,4.666,4.666,0,0,0,.918-.327V-.288A3.5,3.5,0,0,1,63.833,0,5.264,5.264,0,0,1,62.749.1Zm6.484-5.659a2.4,2.4,0,0,1,.5.044l-.112,1.4a1.706,1.706,0,0,0-.439-.049,1.579,1.579,0,0,0-1.111.366,1.324,1.324,0,0,0-.4,1.025V0H66.187V-5.459h1.128l.22.918h.073a2.052,2.052,0,0,1,.686-.74A1.692,1.692,0,0,1,69.233-5.562Zm5.3,3.94a1.5,1.5,0,0,1-.583,1.279A2.883,2.883,0,0,1,72.207.1,5.483,5.483,0,0,1,71.191.017a3.842,3.842,0,0,1-.786-.237V-1.45a5.192,5.192,0,0,0,.935.327,3.786,3.786,0,0,0,.916.132q.811,0,.811-.469a.391.391,0,0,0-.107-.286,1.558,1.558,0,0,0-.371-.249q-.264-.139-.7-.325a4.417,4.417,0,0,1-.925-.488,1.374,1.374,0,0,1-.43-.515,1.7,1.7,0,0,1-.134-.715,1.3,1.3,0,0,1,.564-1.125,2.747,2.747,0,0,1,1.6-.4,4.539,4.539,0,0,1,1.919.43l-.449,1.074q-.41-.176-.767-.288a2.407,2.407,0,0,0-.728-.112q-.659,0-.659.356a.419.419,0,0,0,.212.347,5.776,5.776,0,0,0,.93.435,4.321,4.321,0,0,1,.938.483,1.43,1.43,0,0,1,.439.518A1.591,1.591,0,0,1,74.536-1.621Z" transform="translate(163 23)" fill="#fbf2c0"/>
+  </g>
+</svg>
diff --git a/images/screen1.jpg b/images/screen1.jpg
new file mode 100644
index 0000000..e419c40
--- /dev/null
+++ b/images/screen1.jpg
diff --git a/images/screen2.jpg b/images/screen2.jpg
new file mode 100644
index 0000000..4eec690
--- /dev/null
+++ b/images/screen2.jpg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..12a7c31
--- /dev/null
+++ b/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Coffee Masters</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
+    <link rel="stylesheet" href="styles.css">
+    <link rel="manifest" href="app.webmanifest">
+    <link rel="apple-touch-icon" href="images/icons/icon.png">
+    <link rel="icon" href="images/icons/icon.png">
+</head>
+
+<body>
+    <header>
+        <h1><img src="images/logo.svg" width="140" alt="Coffee Masters"></h1>
+        <nav>
+            <a class="navlink material-symbols-outlined" id="linkHome" href="/">
+                    local_cafe
+            </a>
+            <a class="navlink material-symbols-outlined" id="linkOrder" href="/order">
+                    shopping_cart
+            </a>
+            <span id="badge" hidden></span>
+        </nav>
+    </header>
+
+    <main>        
+    </main>
+
+    <template id="menu-page-template">
+        <section>
+            <ul id="menu"></ul>
+        </section>
+    </template>
+
+    <template id="product-item-template">
+        <article>
+            <a href="#">
+                <img>
+                <section>
+                    <div>
+                        <h4></h4>
+                        <p class="price"><p>
+                    </div>
+                    <button>Add</button>
+                </section>
+            </a>
+        </article>
+    </template>
+
+    <template id="order-form-template">
+        <form>
+            <label for="name">Your Name</label>
+            <input name="name" required>
+            <label for="phone">Your Phone Number</label>
+            <input name="phone" type="tel">
+            <label for="email">Your Email</label>
+            <input name="email" type="email">
+            <button type="submit">Place Order</button>
+        </form>
+    </template>
+
+    <template id="details-page-template">
+        <header>   
+            <a href="#" onclick="app.router.go('/'); event.preventDefault()">&lt; Back</a>
+            <h2></h2>
+            <a></a>
+        </header>
+        <img src="">
+        <p class="description"></p>
+        <p class="price"></p>
+        <button>Add to cart</button>
+    </template>
+
+    <template id="cart-item-template">
+        <li>
+            <p class='qty'></p>
+            <p class='name'></p>
+            <p class='price'></p>
+            <p class='toolbar'>
+                <a href="#" class="delete-button">
+                    🗑️
+                </a>
+            </p>
+        </li>
+    </template>
+</body>
+</html>
\ 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