Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import SwiftUI
import PlaygroundSupport
//Created for Dark Mode
struct RemoteButton: View {
let label: String
@State var pressed = false
var body: some View {
ZStack {
Circle()
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.25882354378700256, green: 0.25882354378700256, blue: 0.25882354378700256, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.11764705926179886, green: 0.11764705926179886, blue: 0.11764705926179886, alpha: 1)), location: 1)]),
startPoint: UnitPoint(x: 0.69, y: 1.19),
endPoint: UnitPoint(x: 0.58, y: 0.5)))
.frame(width: 93.4, height: 93.4)
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:6.440000057220459, x:0, y:6.440000057220459)
VStack {
Image(systemName: label)
.font(.system(size:24))
}
}
.frame(width: 80, height: 80)
.background(Color(UIColor.secondarySystemBackground))
.cornerRadius(100)
.scaleEffect(self.pressed ? 0.95 : 1.0)
.onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
withAnimation(.easeInOut(duration: 0.1)) {
self.pressed = pressing
}
}, perform: { })
}
}
struct RemoteButtonStroke: View {
let label: String
@State var pressed = false
var body: some View {
ZStack {
Circle()
.fill(Color(#colorLiteral(red: 0.16862745583057404, green: 0.16862745583057404, blue: 0.16862745583057404, alpha: 1)))
Circle()
.strokeBorder(RadialGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.7666666507720947, green: 0.7666666507720947, blue: 0.7666666507720947, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.9541666507720947, green: 0.9541666507720947, blue: 0.9541666507720947, alpha: 1)), location: 1)]),
center: UnitPoint(x: 5, y: 1),
startRadius: 1,
endRadius: 100
), lineWidth: 4)
VStack {
Text(label)
.font(.callout).bold()
.tracking(1.5)
}
}
.frame(width: 80, height: 80)
.cornerRadius(100)
.scaleEffect(self.pressed ? 0.9 : 1.0)
.onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
withAnimation(.easeInOut(duration: 0.1)) {
self.pressed = pressing
}
}, perform: { })
}
}
struct RemoteLongButton: View {
let label1: String
let label2: String
@State var pressed = false
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 161)
.fill(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.25882354378700256, green: 0.25882354378700256, blue: 0.25882354378700256, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.11764705926179886, green: 0.11764705926179886, blue: 0.11764705926179886, alpha: 1)), location: 1)]),
startPoint: UnitPoint(x: 1.2, y: 1.18),
endPoint: UnitPoint(x: 0.57, y: 0.51)))
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:6.440000057220459, x:0, y:0)
}
}
.frame(width: 80, height: 180)
.background(Color(UIColor.secondarySystemBackground))
.cornerRadius(100)
.scaleEffect(self.pressed ? 0.9 : 1.0)
.onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
withAnimation(.easeInOut(duration: 0.1)) {
self.pressed = pressing
}
}, perform: { })
}
}
struct ContentView: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 32)
.fill(Color(#colorLiteral(red: 0.07058823853731155, green: 0.07058823853731155, blue: 0.07058823853731155, alpha: 1)))
RoundedRectangle(cornerRadius: 32)
.strokeBorder(LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(#colorLiteral(red: 0.1458333283662796, green: 0.1458333283662796, blue: 0.1458333283662796, alpha: 1)), location: 0),
.init(color: Color(#colorLiteral(red: 0.09166666865348816, green: 0.09166666865348816, blue: 0.09166666865348816, alpha: 1)), location: 1)]),
startPoint: UnitPoint(x: 0.5, y: 0),
endPoint: UnitPoint(x: 0.5, y: 1)), lineWidth: 1.6100000143051147)
VStack {
HStack {
VStack {
Spacer()
HStack (spacing: 24) {
RemoteButtonStroke(label: "MENU")
RemoteButton(label: "tv")
}
.padding(.bottom, 16)
}
}
.frame(width: 250, height: 350)
.background(Color(#colorLiteral(red: 0.0963541641831398, green: 0.0963541641831398, blue: 0.1041666641831398, alpha: 1)))
VStack {
HStack (spacing: 24) {
VStack (spacing: 24) {
RemoteButton(label: "mic.fill")
RemoteButton(label: "play.fill")
}
VStack (spacing: 24) {
RemoteLongButton(label1: "plus", label2: "minus")
}
}
Spacer()
}
.padding(.top, 8)
.frame(width: 250, height: 400)
}
}
.frame(width: 250, height: 750)
.cornerRadius(32)
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:20, x:0, y:4)
}
}
PlaygroundPage.current.setLiveView(ContentView())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.