2021Remote.swift

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