Remote.swift

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())