---
# System prepended metadata

title: 'Project: Web Page UI'

---

# Project: Web Page UI

# codepen URL
https://codepen.io/zz2748/pen/abZOWax
https://hackmd.io/
# Problem
> Experience

Some people may be curious about what a coffee shop is ording, but they don't want to go to that coffee shop in person.

> Interact

Some people want to order things online because it is more efficient.

# Solution
> Experience

Users of this web page can know what is offering in this coffee shop.

> Interact

Users of this web page can order the coffee they like via browsing the menu and find relevant information they are interested in.

# Specification
## The top bar

![](https://i.imgur.com/lRUWMDr.png)

* by clicking find a store, a google map will pop up. 
* If the user's automatic positioning system is on, it will automatically retrieve the nearest cafe to the user.

![](https://i.imgur.com/cpEtcUh.png)
* by clicking the button [sign in], a new wizard will 
* users who are already members can log in directly with their existing accounts and passwords


![](https://i.imgur.com/xkoQn7v.png)
* by clicking the button [join now], a new wizard will pop up automatically.
* Users can choose to register as members of the coffee shop voluntarily.


```htm;=001
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div class="banner">
  <ul class="nav">
    <li><span><img src="https://png.pngtree.com/png-vector/20190115/ourmid/pngtree-vector-search-icon-png-image_320926.jpg" alt="" width="26"></span>&nbsp;find a store</li>
    <li><a href="#">Sign in</a></li>
    <li><a href="#" class="join-now">Join now</a></li>
  </ul>
```

## The search engine bar
![](https://i.imgur.com/Jo8ymJ0.png)

* type in the kind of coffee you'd like to order
* the web page will directly jump to the details of that kind of coffee


```html=+
 <div class="bg">
    <h1>Coffee is what makes your day!</h1>
    <div class="search">
      <button><img src="https://i.pinimg.com/originals/e7/d4/50/e7d450d8c31ae10aa663d082fdbb3db9.png" alt="" width="43"></button>
      <input type="text" placeholder="search for a cup of coffee">
    </div>
  </div>
 </div>
```

## Left component
![](https://i.imgur.com/igdlTig.png)

* by seletcing the detailed order information, then completing the detailed personal information, the users can submit an order by clicking the button [place order], an order will be successfully made to the corressponding coffee shop. The [Reset] button can  help the users to clear everything with one click.
```html=+
<div class="main">
  <div class="left">
    <fieldset>
    <br>
      <legend class="title">Order Infomation</legend>
      <p><span>Order Item:</span>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </p>
      <p><span>Cup Size：</span>
        <select>
          <option>Tall (355ml)</option>
          <option>Grande (473ml)</option>
          <option>Venti (592ml)</option>
        </select>
      </p>
      <p><span>Temperature:</span>
        <select>
          <option>Extra Hot</option>
          <option>Hot</option>
          <option>Kid</option>
          <option>Iced</option>
          <option>Less Ice</option> 
          <option>No Ice</option>
        </select>
      </p>
      <p><span>Expresso:</span>
        <select>
          <option>Standard</option>
          <option>Decaf</option>
        </select>
      </p>
      <p><span>Milk:</span>
        <select>
          <option>Whole milk</option>
          <option>Skim milk</option>
          <option>Soy milk</option>
        </select>
      </p>
      <p><span>Syrup:</span>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </p>
    </fieldset>
    <br>
    <fieldset>
        <br>
      <legend class="title">Your details</legend>
      <p><span>Name:</span>
        <input type="text" class="ipt">
      </p>
      <p><span>Phone number (verified):</span>
        <input type="text" class="ipt">
      </p>
      <p><span>Address:</span>
        <input type="text" class="ipt">
      </p>
      <p><span>Expected delivery time:</span>
        <input type="date" class="ipt">
      </p>
    </fieldset>
    <div class="btn">
      <input type="button" value="Place Order">
      <input type="button" value="Reset">
    </div>
  </div>
```


## Right component
![](https://i.imgur.com/SXl85ZN.png)
* by clicking the icon, the detailed introduction wizard will pop out automatically to let the users know more about the product.
```html=+
  <div class="right">
    <ul class="menu">
      <li><a href="#">Hot Coffees</a></li>
      <li><a href="#">Hot Teas</a></li>
      <li><a href="#">Hot Drinks</a></li>
      <li><a href="#">Frappuccino</a></li>
      <li><a href="#">Cold Coffees</a></li>
      <li><a href="#">Iced Teas</a></li>
      <li><a href="#">Cold drinks</a></li>
    </ul>
    <div class="coffee">
      <div class="tit">Menu<br>
        Drinks</div>
      <ul>
        <li><img src="https://globalassets.starbucks.com/assets/f12bc8af498d45ed92c5d6f1dac64062.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Americano</span></li>
        <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS8SGJuej04SMB9KJ1unkwcqgfmG_Z8xXhhfw&usqp=CAU" alt="" width="50"><span>Caffe Misto</span></li>
        <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRJyZ1q6jHz3dC9bEOVzABGaEOvvcudWQ3X5g&usqp=CAU" alt="" width="50"><span>White Chocolate Moch</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/259c28ab81a34479b56afa212329930b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Pumpkin Cream Cold Brew</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/5c515339667943ce84dc56effdf5fc1b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Cappuccino</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/fedee22e49724cd09fbcc7ee2e567377.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Flat White</span></li>
        <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQAB_Z5YJ0VtBzmZM4KV94ZsAk5ApNNuJJNw&usqp=CAU" alt="" width="50"><span>Caffè Vanilla Frappuccino</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/e4d9e996eb64453eb3ac7adb570c9b7b.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>
Cookie Frappuccino</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/58db701349cb48738069e8c912e2b3ac.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Caramel Macchiato</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/a5e64777b3cc412e9239b8a37328cb37.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Honey Citrus Mint Tea</span></li>
        <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzx5Jl72zKqc0lOIeAJLDM6rM3JnMr2_vRvQ&usqp=CAU" alt="" width="50"><span>Hot Chocolate</span></li>
        <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSvkAQIfoFxol6ZEY4EH_zqVZWQ6x4lq64D_Q&usqp=CAU" alt="" width="50"><span>Matcha Green Tea Latte</span></li>
        <li><img src="https://globalassets.starbucks.com/assets/49bf4333e9d048498a59a5a2b958165f.jpg?impolicy=1by1_wide_1242" alt="" width="50"><span>Chai Tea</span></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
```

# Reflection
Design a web is not about UI(user interface), sometimes the imagination might be wild, but some function may be hard to realize ;(
Css is a good tool to help make the web interface more beautiful and be more well arranged. In the last assignment, I only rely on HTML to do all the arrangement, but in this assignment, I deliberately rely more on CSS to help me beautifier the web page.
In the future, I am eager to learn more about Javascript, which can help me realize the functions!