Created
July 15, 2020 19:05
-
-
Save navsing/8740cca6642d32858c775cb056d20741 to your computer and use it in GitHub Desktop.
iPhone 12 Pro Buying Experience
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // Apple.swift | |
| // Playground | |
| // | |
| // Created by Navdeep Singh on 7/14/20. | |
| // | |
| import SwiftUI | |
| struct Apple: View { | |
| var body: some View { | |
| ScrollView(.vertical) { | |
| AddressBar() | |
| Navbar() | |
| TitleBar() | |
| AppleCard() | |
| Display() | |
| Model() | |
| Charger() | |
| Footer().edgesIgnoringSafeArea(.bottom) | |
| } | |
| } | |
| } | |
| struct Footer: View { | |
| var body: some View { | |
| HStack { | |
| Button(action:{}){ | |
| Text("Continue").foregroundColor(.white) | |
| }.frame(width: 300, height: 35).background(Color("button")).shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 20).cornerRadius(8) | |
| Image(systemName: "heart").foregroundColor(.secondary) | |
| } | |
| } | |
| } | |
| struct Charger: View { | |
| var body: some View { | |
| VStack { | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Do you need a charger in box?").font(.headline).fontWeight(.bold) | |
| Text("iPhone 12 models will not include a power adapter in the box. You can order a 20W USB-C Charger separately or use your existing one.").font(.footnote).foregroundColor(.secondary).padding(.bottom, 8) | |
| VStack (spacing: 12) { | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Text("No").font(.headline) | |
| VStack { | |
| Text("Receive $25 Apple Gift Card").multilineTextAlignment(.center) | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Text("Yes").font(.headline) | |
| VStack { | |
| Text("20W USB-C") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| } | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| } | |
| } | |
| } | |
| struct Model: View { | |
| var body: some View { | |
| VStack { | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Choose your model.").font(.headline).fontWeight(.bold) | |
| VStack { | |
| HStack { | |
| VStack (alignment: .leading, spacing: 4) { | |
| Text("iPhone 12 Pro").font(.headline).fontWeight(.bold) | |
| Text("5.8-inch display").font(.footnote).foregroundColor(.secondary) | |
| } | |
| Spacer() | |
| VStack (alignment: .trailing) { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| } | |
| } | |
| }.padding(.vertical, 20).padding(.horizontal, 5).border(Color.secondary.opacity(0.4), width: 0.6 ) | |
| VStack { | |
| HStack { | |
| VStack (alignment: .leading, spacing: 4) { | |
| Text("iPhone 12 Pro Max").font(.headline).fontWeight(.bold) | |
| Text("6.5-inch display").font(.footnote).foregroundColor(.secondary) | |
| } | |
| Spacer() | |
| VStack (alignment: .trailing) { | |
| Text("From $45.79/mo.*") | |
| Text("or $1099") | |
| } | |
| } | |
| }.padding(.vertical, 20).padding(.horizontal, 5).border(Color.secondary.opacity(0.4), width: 0.6 ) | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Choose your finish.").font(.headline).fontWeight(.bold) | |
| VStack { | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Circle().frame(width: 30, height: 30).foregroundColor(Color("gray")) | |
| Text("Space Gray").font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Circle().frame(width: 30, height: 30).foregroundColor(Color("silver")) | |
| Text("Silver").font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Circle().frame(width: 30, height: 30).foregroundColor(Color("green")) | |
| Text("Midnight Green").font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Circle().frame(width: 30, height: 30).foregroundColor(Color("gold")) | |
| Text("Gold").font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| } | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Choose your capacity.").font(.headline).fontWeight(.bold) | |
| VStack (spacing: 12) { | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| HStack (spacing: 4) { | |
| Text("128").font(.title) | |
| Text("GB").font(.subheadline).offset(y: 5) | |
| } | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| HStack (spacing: 4) { | |
| Text("256").font(.title) | |
| Text("GB").font(.subheadline).offset(y: 5) | |
| } | |
| VStack { | |
| Text("From $47.87/mo.*") | |
| Text("or $1149") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| HStack (spacing: 4) { | |
| Text("512").font(.title) | |
| Text("GB").font(.subheadline).offset(y: 5) | |
| } | |
| VStack { | |
| Text("From $56.20/mo.*") | |
| Text("or $1349") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| Spacer() | |
| } | |
| } | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Choose your carrier.").font(.headline).fontWeight(.bold) | |
| Text("We'll work with your current carrier to activate your new iPhone so you can keep your existing number and rate plan").font(.footnote).foregroundColor(.secondary).padding(.bottom, 8) | |
| VStack (spacing: 12) { | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Text("AT&T").bold() | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Text("Sprint").bold() | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Text("T-Mobile").bold() | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Text("Verizon").bold() | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Text("SIM-Free - activate with any").bold() | |
| Text("carrier later.").bold() | |
| VStack { | |
| Text("From $41.62/mo.*") | |
| Text("or $999") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 352, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| } | |
| Text("Will my new iPhone be unlocked?").foregroundColor(.blue).font(.caption).padding(.top, 12) | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| VStack (alignment: .leading, spacing: 12) { | |
| Text("Do you have a smartphone to trade in?").font(.headline).fontWeight(.bold) | |
| Text("See how Apple Trade In works").font(.footnote).foregroundColor(.blue).padding(.bottom, 8) | |
| VStack (spacing: 12) { | |
| HStack (spacing: 12) { | |
| VStack (spacing: 4) { | |
| Text("No").font(.headline) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| VStack (spacing: 4) { | |
| Text("Yes").font(.headline) | |
| VStack { | |
| Text("Up to $280 off*") | |
| }.font(.footnote).foregroundColor(.secondary) | |
| }.frame(width: 170, height: 100).border(Color.secondary.opacity(0.4), width: 0.6) | |
| } | |
| } | |
| }.padding() | |
| Divider().padding(.all, 12) | |
| } | |
| } | |
| } | |
| struct Display: View { | |
| var body: some View { | |
| VStack { | |
| VStack (spacing: 4) { | |
| Text("Buy iPhone 12 Pro").font(.title).fontWeight(.bold).padding(.top, 8).padding(.bottom, 4) | |
| Text("Get up to $280 off with trade-in*") | |
| Text("See how Apple Trade In works").font(.caption).foregroundColor(.blue) | |
| } | |
| Image("iphone").resizable().aspectRatio(contentMode: .fill).frame(width: UIScreen.main.bounds.width, height: 500) | |
| HStack { | |
| Image(systemName: "bubble.left.and.bubble.right").foregroundColor(.blue) | |
| Text("Chat with an iPhone Specialist").foregroundColor(.blue).font(.caption) | |
| } | |
| } | |
| } | |
| } | |
| struct AppleCard: View { | |
| var body: some View { | |
| VStack { | |
| Text("Pay for your new iPhone over 24 months at 0% APR with Apple Card. Just select Apple Card Monthly Installments and continue to apple").font(.footnote).multilineTextAlignment(.center).foregroundColor(.secondary) | |
| HStack { | |
| Text("Learn more").font(.footnote) | |
| Image(systemName: "chevron.right").font(.footnote) | |
| }.foregroundColor(.blue) | |
| }.padding().background(Color.gray.opacity(0.06)) | |
| } | |
| } | |
| struct TitleBar: View { | |
| var body: some View { | |
| VStack { | |
| HStack { | |
| Text("iPhone 12 Pro").font(.headline).fontWeight(.bold) | |
| Spacer() | |
| Text("From $41.62/mo.* or $999").font(.subheadline) | |
| }.padding() | |
| } | |
| } | |
| } | |
| struct AddressBar: View { | |
| var body: some View { | |
| HStack { | |
| HStack { | |
| Image(systemName: "textformat.size") | |
| Spacer() | |
| Image(systemName: "lock.fill") | |
| Text("apple.com") | |
| Spacer() | |
| Image(systemName: "arrow.clockwise") | |
| }.padding(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)).frame(width: 350).foregroundColor(.primary).background(Color.gray.opacity(0.1)).cornerRadius(12).padding(.horizontal) | |
| } | |
| } | |
| } | |
| struct Navbar: View { | |
| var body: some View { | |
| HStack { | |
| Image(systemName:"xmark") | |
| Spacer() | |
| Image(systemName: "applelogo") | |
| Spacer() | |
| Image(systemName: "bag") | |
| }.padding().background(Color("navbar")).foregroundColor(Color.white.opacity(0.8)) | |
| } | |
| } | |
| struct Apple_Previews: PreviewProvider { | |
| static var previews: some View { | |
| Apple() | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment