Skip to content

Instantly share code, notes, and snippets.

@joeyabanks
Created May 20, 2021 23:48
Show Gist options
  • Save joeyabanks/e9e2b67396d2f52f069060d6bac7771f to your computer and use it in GitHub Desktop.
Save joeyabanks/e9e2b67396d2f52f069060d6bac7771f to your computer and use it in GitHub Desktop.
import SwiftUI
import PlaygroundSupport
struct ClickWheel: View {
var body: some View {
ZStack {
Circle()
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.21568627655506134, green: 0.21568627655506134, blue: 0.21568627655506134, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.10196078568696976, green: 0.10196078568696976, blue: 0.10196078568696976, alpha: 1)), location: 0.25),
.init(color: Color(#colorLiteral(red: 0.15416666865348816, green: 0.15416666865348816, blue: 0.15416666865348816, alpha: 1)), location: 0.75),
.init(color: Color(#colorLiteral(red: 0.0941176488995552, green: 0.0941176488995552, blue: 0.0941176488995552, alpha: 1)), location: 1)]),
startPoint: UnitPoint(x: 0.5, y: -2),
endPoint: UnitPoint(x: 0.5, y: 3)))
.frame(height: 180)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.5)), radius: 4, x: 0, y: 0)
.overlay(
Circle()
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.0941176488995552, green: 0.0941176488995552, blue: 0.0941176488995552, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.21176470816135406, green: 0.21176470816135406, blue: 0.21176470816135406, alpha: 1)), location: 1)]),
startPoint: UnitPoint(x: 0.5, y: -0.5),
endPoint: UnitPoint(x: 0.5, y: 1)))
.frame(width: 110, height: 110)
.overlay(
Circle()
.stroke(Color(UIColor.black.withAlphaComponent(0.2)), lineWidth: 2)
)
)
VStack(spacing: 0) {
Image(systemName: "circle.fill")
.font(.system(size: 4))
Spacer()
HStack {
Image(systemName: "circle.fill")
.font(.system(size: 4))
Spacer()
Image(systemName: "circle.fill")
.font(.system(size: 4))
}
Spacer()
Image(systemName: "circle.fill")
.font(.system(size: 4))
}
.padding()
.frame(width: 190, height: 190)
.foregroundColor(Color(UIColor.lightGray))
.font(.body)
}
}
}
struct RemoteButton: View {
let label: String
var body: some View {
ZStack {
Circle()
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.11764705926179886, green: 0.11764705926179886, blue: 0.11764705926179886, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.258794367313385, green: 0.2588439881801605, blue: 0.2587878108024597, alpha: 1.0)), location: 1)]),
startPoint: .top,
endPoint: .bottom))
VStack {
Image(systemName: label)
.font(.system(size:24))
.foregroundColor(Color.white)
}
}
.frame(width: 80, height: 80)
.background(Color(UIColor.secondarySystemBackground))
.cornerRadius(100)
}
}
struct RemoteLongButton: View {
let label1: String
let label2: String
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 100)
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.11764705926179886, green: 0.11764705926179886, blue: 0.11764705926179886, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.258794367313385, green: 0.2588439881801605, blue: 0.2587878108024597, alpha: 1.0)), location: 1)]),
startPoint: .top,
endPoint: .bottom))
VStack {
Image(systemName: label1)
.font(.system(size: 24))
.padding(.top, 32)
Spacer()
Image(systemName: label2)
.font(.system(size:24))
.padding(.bottom, 32)
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius: 10, x: 0, y: 0)
}
}
.foregroundColor(Color.white)
.frame(width: 80)
}
}
struct Remote: View {
var body: some View {
VStack (spacing: 16) {
//mic & power
HStack {
Spacer()
Spacer()
Rectangle()
.fill(Color.black)
.frame(width: 20, height: 8)
.cornerRadius(10)
Spacer()
Image(systemName: "power")
.padding()
.overlay(
RoundedRectangle(cornerRadius: 100)
.stroke(Color.gray, lineWidth: 1)
)
.foregroundColor(Color.black)
}
VStack (spacing: 16) {
ClickWheel()
//back & tv
HStack {
RemoteButton(label: "chevron.left")
Spacer()
RemoteButton(label: "tv")
}
// play, mute, volume
VStack {
HStack (alignment: .top) {
VStack {
RemoteButton(label: "playpause")
Spacer()
RemoteButton(label: "speaker.slash")
}
Spacer()
VStack {
VStack {
RemoteLongButton(label1: "plus", label2: "minus")
}
}
}
}
.frame(height: 175)
Spacer()
}
.frame(width: 180)
}
.padding(32)
.frame(width: 220 , height: 850)
.background(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.9251028299331665, green: 0.9257039427757263, blue: 0.935480535030365, alpha: 1.0)), location: 0),
.init(color: Color(#colorLiteral(red: 0.5960784554481506, green: 0.5960784554481506, blue: 0.6039215922355652, alpha: 1)), location: 1)]),
startPoint: .top,
endPoint: .bottom))
.cornerRadius(56)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.2)), radius: 8, x: 0, y: 8)
}
}
PlaygroundPage.current.setLiveView(Remote())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment