-
-
Save indyfromoz/4dc957de5cbbcc2b5daf276397bbde59 to your computer and use it in GitHub Desktop.
iPhone 12 Pro Buying Experience
This file contains 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