appletv-remote-app.swift

//
//  MyDesign.swift
//  MyProject
//
//  Designed in DetailsPro
//  Copyright © (My Organization). All rights reserved.
//

import SwiftUI

struct MyDesign: View {
    var body: some View {
		ZStack {
			Rectangle()
			VStack {
				HStack {
					Text("Tim Apple TV")
						.font(.system(size: 18, weight: .regular, design: .default))
						.padding(.vertical, 10)
						.foregroundColor(Color.white)
					Image(systemName: "chevron.down")
						.foregroundColor(Color.white)
						.font(.subheadline)
				}
				.frame(maxWidth: .infinity)
				.clipped()
				.padding(.all, 20)
				.offset(x: 0, y: 10)
				ZStack {
					Circle()
						.foregroundColor(Color.secondary)
						.scaleEffect(0.7, anchor: .center)
						.offset(x: 0, y: -50)
					Circle()
						.foregroundColor(Color(.tertiaryLabel))
						.scaleEffect(0.4, anchor: .center)
						.offset(x: 0, y: -50)
						.shadow(color: Color.white, radius: 1, x: 0, y: 2)
						.shadow(color: Color(.sRGBLinear, red: 0/255, green: 0/255, blue: 0/255).opacity(0.5), radius: 8, x: 0, y: 4)
					ZStack {
						Circle()
							.foregroundColor(Color.white)
							.scaleEffect(0.03, anchor: .center)
							.offset(x: 0, y: 61)
						Circle()
							.foregroundColor(Color.white)
							.scaleEffect(0.03, anchor: .center)
							.offset(x: 110, y: -46)
						Circle()
							.foregroundColor(Color.white)
							.scaleEffect(0.03, anchor: .center)
							.offset(x: -110, y: -46)
						Circle()
							.foregroundColor(Color.white)
							.scaleEffect(0.03, anchor: .center)
							.offset(x: 0, y: -157)
					}
				}
				.offset(x: 0, y: 20)
				HStack {
					VStack {
						ZStack {
							Circle()
								.foregroundColor(Color.secondary)
								.scaleEffect(-0.9, anchor: .center)
							Image(systemName: "chevron.left")
								.foregroundColor(Color.white)
								.font(.largeTitle)
						}
						ZStack {
							Circle()
								.foregroundColor(Color.secondary)
								.scaleEffect(-0.9, anchor: .center)
							Image(systemName: "playpause")
								.foregroundColor(Color.white)
								.font(.title)
						}
						ZStack {
							Circle()
								.foregroundColor(Color.secondary)
								.scaleEffect(-0.9, anchor: .center)
							Image(systemName: "speaker.slash")
								.foregroundColor(Color.white)
								.font(.largeTitle)
						}
					}
					.frame(width: 110)
					.clipped()
					.padding()
					VStack {
						ZStack {
							Circle()
								.foregroundColor(Color.secondary)
								.scaleEffect(0.9, anchor: .center)
								.offset(x: 0, y: 0)
							Image(systemName: "tv")
								.foregroundColor(Color.white)
								.font(.title)
						}
						ZStack {
							Capsule(style: .continuous)
								.foregroundColor(Color.secondary)
								.scaleEffect(1, anchor: .center)
								.cornerRadius(373)
								.frame(width: 110, height: 220)
								.clipped()
							VStack {
								Image(systemName: "plus")
									.foregroundColor(Color.white)
									.font(.largeTitle)
									.offset(x: 0, y: -60)
								Image(systemName: "minus")
									.foregroundColor(Color.white)
									.font(.largeTitle)
									.offset(x: 0, y: 40)
							}
						}
					}
					.frame(width: 110)
					.clipped()
					.padding()
				}
				.frame()
				.clipped()
				.offset(x: 0, y: -70)
			}
		}
    }
}

struct MyDesign_Previews: PreviewProvider {
    static var previews: some View {
        MyDesign()
    }
}