summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/Footer.vue17
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue158
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>