Skip to content

Instantly share code, notes, and snippets.

@DesignOfPowers

DesignOfPowers/stripe-terminal-clone.swift

Created July 7, 2020 23:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DesignOfPowers/d25ac3798f6546d4be63f0142921ce16 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DesignOfPowers/d25ac3798f6546d4be63f0142921ce16 to your computer and use it in GitHub Desktop.
Download ZIP
stripe terminal
Raw
stripe-terminal-clone.swift
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
var body: some View {
/*Terminal*/
VStack {
/*Terminal Body*/
ZStack {
Rectangle()
.frame(width: 430, height: 850)
.foregroundColor(Color.clear)
.background(
ZStack {
RoundedRectangle(cornerRadius: 64, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.2419304252, green: 0.3501415253, blue: 0.4591619968, alpha: 1)))
RoundedRectangle(cornerRadius: 64, style: .continuous)
.fill(Color(#colorLiteral(red: 0.2670701146, green: 0.3838198185, blue: 0.5108735561, alpha: 1)))
.padding(.bottom, 2)
RoundedRectangle(cornerRadius: 64, style: .continuous)
.offset(y: -10)
.border(Color.white, width: 5)
.blur(radius: 10)
RoundedRectangle(cornerRadius: 64, style: .continuous)
.fill(Color(#colorLiteral(red: 0.058823529411764705, green: 0.1803921568627451, blue: 0.24705882352941178, alpha: 1.0)))
.padding(.top, 1)
.blur(radius: 10)
RoundedRectangle(cornerRadius: 64, style: .continuous)
.offset(y: -30)
.fill(Color(#colorLiteral(red: 0.2670701146, green: 0.3838198185, blue: 0.5108735561, alpha: 1)))
.padding(.bottom, 2)
.blur(radius: 20)
})
.clipShape(RoundedRectangle(cornerRadius: 60, style: .continuous))
.offset(y: 20)
.shadow(color: Color(#colorLiteral(red: 0.058823529411764705, green: 0.1803921568627451, blue: 0.24705882352941178, alpha: 1.0)).opacity(0.4), radius: 30, x: 0, y: 40)
/*Terminal Face*/
Rectangle()
.frame(width: 420, height: 800)
.foregroundColor(Color.clear)
.background(
ZStack {
RoundedRectangle(cornerRadius: 60, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.2419304252, green: 0.3501415253, blue: 0.4591619968, alpha: 1)))
RoundedRectangle(cornerRadius: 60, style: .continuous)
.fill(Color(#colorLiteral(red: 0.803921568627451, green: 0.803921568627451, blue: 0.803921568627451, alpha: 1.0)))
.padding(.bottom, 2)
.offset(y:-10)
RoundedRectangle(cornerRadius: 60, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2277415395, green: 0.3295356631, blue: 0.4321472049, alpha: 1)), Color(#colorLiteral(red: 0.1725490196, green: 0.2666666667, blue: 0.3529411765, alpha: 1))]), startPoint: .top, endPoint: .bottom))
.padding(.top, 1)
.blur(radius: 1)
})
.clipShape(RoundedRectangle(cornerRadius: 60, style: .continuous))
/*Terminal Screen*/
VStack(spacing: 12) {
ZStack {
Rectangle()
.frame(width: 375, height: 375)
.foregroundColor(Color.clear)
.background(Color(#colorLiteral(red: 0.1677860916, green: 0.235642314, blue: 0.3286989331, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
Text("")
.frame(width: 375, height: 375)
.background(
ZStack {
Color(#colorLiteral(red: 0.2024160326, green: 0.1339062452, blue: 0.3578739166, alpha: 1))
RoundedRectangle(cornerRadius: 30, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.2419304252, green: 0.3501415253, blue: 0.4591619968, alpha: 1)))
RoundedRectangle(cornerRadius: 30, style: .continuous)
.fill(Color(#colorLiteral(red: 0.07843137255, green: 0.1490196078, blue: 0.2509803922, alpha: 1)))
.padding(.bottom, 2)
RoundedRectangle(cornerRadius: 4, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2039215686, green: 0.2941176471, blue: 0.3843137255, alpha: 1)), Color(#colorLiteral(red: 0.1717939973, green: 0.2652746439, blue: 0.3527610302, alpha: 0.2840592894))]), startPoint: .top, endPoint: .bottom))
.padding(25)
}
)
.clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
}
/*Buttons*/
HStack(spacing: 12) {
Button()
Button()
Button()
}
HStack(spacing: 12) {
Button()
Button()
Button()
}
HStack(spacing: 12) {
Button()
Button()
Button()
}
HStack(spacing: 12) {
ButtonLight()
Button()
ButtonLight()
}
HStack(spacing: 12) {
ButtonRed()
ButtonLight()
ButtonGreen()
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(#colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)))
.edgesIgnoringSafeArea(.all)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Button: View {
var body: some View {
ZStack {
Rectangle()
.frame(width: 116, height: 55)
.foregroundColor(Color.clear)
.background(Color(#colorLiteral(red: 0.1677860916, green: 0.235642314, blue: 0.3286989331, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
Text("")
.frame(width: 110, height: 50)
.background(
ZStack {
Color(#colorLiteral(red: 0.2024160326, green: 0.1339062452, blue: 0.3578739166, alpha: 1))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.2419304252, green: 0.3501415253, blue: 0.4591619968, alpha: 1)))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2039215686, green: 0.2941176471, blue: 0.3843137255, alpha: 1)), Color(#colorLiteral(red: 0.1725490196, green: 0.2666666667, blue: 0.3529411765, alpha: 1))]), startPoint: .top, endPoint: .bottom))
.padding(.top, 1.5)
}
)
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.4176209333)), radius: 8, x: 0, y: 10)
}
}
}
struct ButtonLight: View {
var body: some View {
ZStack {
Rectangle()
.frame(width: 116, height: 55)
.foregroundColor(Color.clear)
.background(Color(#colorLiteral(red: 0.1677860916, green: 0.235642314, blue: 0.3286989331, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
Text("")
.frame(width: 110, height: 50)
.background(
ZStack {
Color(#colorLiteral(red: 0.2024160326, green: 0.1339062452, blue: 0.3578739166, alpha: 1))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.4772428274, green: 0.5527483821, blue: 0.6667001247, alpha: 1)))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.337254902, green: 0.3921568627, blue: 0.4666666667, alpha: 1)), Color(#colorLiteral(red: 0.2745098039, green: 0.337254902, blue: 0.4156862745, alpha: 1))]), startPoint: .top, endPoint: .bottom))
.padding(.top, 1.5)
}
)
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.4176209333)), radius: 8, x: 0, y: 10)
}
}
}
struct ButtonGreen: View {
var body: some View {
ZStack {
Rectangle()
.frame(width: 116, height: 55)
.foregroundColor(Color.clear)
.background(Color(#colorLiteral(red: 0.1677860916, green: 0.235642314, blue: 0.3286989331, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
Text("")
.frame(width: 110, height: 50)
.background(
ZStack {
Color(#colorLiteral(red: 0.2024160326, green: 0.1339062452, blue: 0.3578739166, alpha: 1))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.4550088048, green: 0.8134590983, blue: 0.6504110694, alpha: 1)))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.4039215686, green: 0.7176470588, blue: 0.568627451, alpha: 1)), Color(#colorLiteral(red: 0.3450980392, green: 0.631372549, blue: 0.4784313725, alpha: 1))]), startPoint: .top, endPoint: .bottom))
.padding(.top, 1.5)
}
)
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.4176209333)), radius: 8, x: 0, y: 10)
}
}
}
struct ButtonRed: View {
var body: some View {
ZStack {
Rectangle()
.frame(width: 116, height: 55)
.foregroundColor(Color.clear)
.background(Color(#colorLiteral(red: 0.1677860916, green: 0.235642314, blue: 0.3286989331, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
Text("")
.frame(width: 110, height: 50)
.background(
ZStack {
Color(#colorLiteral(red: 0.2024160326, green: 0.1339062452, blue: 0.3578739166, alpha: 1))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.foregroundColor(Color(#colorLiteral(red: 0.9278564453, green: 0.46985358, blue: 0.4080784619, alpha: 1)))
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.8156862745, green: 0.4117647059, blue: 0.3529411765, alpha: 1)), Color(#colorLiteral(red: 0.7647058824, green: 0.3411764706, blue: 0.2862745098, alpha: 1))]), startPoint: .top, endPoint: .bottom))
.padding(.top, 1.5)
}
)
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.4176209333)), radius: 8, x: 0, y: 10)
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment