diff options
Diffstat (limited to 'iridescence/src/components')
| -rw-r--r-- | iridescence/src/components/Footer.vue | 17 | ||||
| -rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 158 |
2 files changed, 137 insertions, 38 deletions
diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue index 709f2c0..d0d4f70 100644 --- a/iridescence/src/components/Footer.vue +++ b/iridescence/src/components/Footer.vue @@ -3,7 +3,15 @@ <footer class="footer"> <nav class="level"> <div class="level-item has-text-centered"> - (Social links) + <ul> + <li> + <a + class="navbar-item" + href="https://www.facebook.com/glassyladiesart" + >Like Us on Facebook</a + > + </li> + </ul> </div> <div class="level-item has-text-centered"> @@ -18,6 +26,13 @@ </router-link> </a> </li> + <li> + <a + ><router-link to="/privacy" class="navbar-item"> + Privacy Policy</router-link + ></a + > + </li> </ul> </div> </nav> diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue index a2ddfad..ee6c898 100644 --- a/iridescence/src/components/checkout/CheckoutForm.vue +++ b/iridescence/src/components/checkout/CheckoutForm.vue @@ -1,48 +1,132 @@ <template> <div class="container"> - <section class="section"> - <h1 class="title">Customer Info</h1> - <hr /> + <form> + <section class="section"> + <h1 class="title">Customer Info</h1> + <hr /> - <div class="field is-horizontal"> - <div class="field-label"> - <label class="label">Name</label> - </div> - <div class="field-body"> - <div class="field"> - <p class="control is-expanded "> - <input class="input" type="text" placeholder="given name" /> - </p> + <div class="columns"> + <div class="column"> + <div class="field"> + <label for="firstName" class="label">First Name</label> + + <div class="control"> + <input id="firstName" class="input" type="text" required /> + </div> + </div> + <div class="field"> + <label class="label">Last Name</label> + + <div class="control"> + <input class="input" type="text" required /> + </div> + </div> + + <div class="field"> + <label class="label">Email Address</label> + + <div class="control"> + <input class="input" type="email" required /> + </div> + <p class="help">Example: you@example.com</p> + </div> + + <div class="field"> + <label class="label">Phone Number</label> + <div class="control"> + <input class="input" type="tel" pattern="[0-9]{10}" required /> + </div> + <p class="help">Example: 7571234567</p> + </div> + + <label class="checkbox"> + <input type="checkbox" /> + May we text order updates and questions to this number? + </label> </div> - <div class="field"> - <p class="control is-expanded"> - <input class="input" type="text" placeholder="surname" /> - </p> + <div class="column"> + <div class="field"> + <label class="label">Country</label> + + <div class="control"> + <div class="select"> + <select required> + <option selected>United States</option> + </select> + </div> + </div> + </div> + + <div class="field"> + <label class="label">Address</label> + + <div class="control"> + <input class="input" type="text" required /> + </div> + </div> + <div class="field"> + <label class="label">Address 2 (Optional)</label> + + <div class="control"> + <input class="input" type="text" /> + </div> + </div> + + <div class="field"> + <label class="label">City</label> + <div class="control"> + <input class="input" type="text" required /> + </div> + </div> + + <div class="field"> + <label class="label">State</label> + + <div class="select"> + <select required> + <option selected>VA</option> + </select> + </div> + </div> + + <div class="field"> + <label class="label">Zip Code</label> + + <input class="input" type="text" pattern="[0-9]{5}" required /> + </div> </div> </div> - </div> + </section> - <div class="field is-horizontal"> - <div class="field-label"> - <label class="label">E-mail Address</label> - </div> - <div class="field-body"> - <div class="field"> - <p class="control is-expanded"> - <input class="input" type="email" placeholder="email address" /> - </p> - </div> + <section class="section"> + <h1 class="title">Payment</h1> + <hr /> + payment option (mailed check, paypal, cash or check on delivery) + </section> + + <section class="section"> + <h1 class="title">Delivery Options</h1> + <hr /> + <div class="control"> + <label class="radio"> + <input type="radio" name="delivery" /> + Pick up at studio + </label> + <label class="radio"> + <input type="radio" name="delivery" /> + Pick up at Simply Vintage Art Gallery + </label> + <label class="radio"> + <input type="radio" name="delivery" /> + Delivery + </label> </div> - </div> - </section> - <section class="section"> - <h1 class="title">Payment</h1> - <hr /> - </section> - <section class="section"> - <h1 class="title">Delivery</h1> - <hr /> - </section> + </section> + + <section class="section"> + <button class="button is-primary">Continue to Confirmation</button> + </section> + </form> </div> </template> |