Lockscreen.swift

import SwiftUI
import PlaygroundSupport

struct Screen: View {
    var body: some View {
            VStack {
                // status bar
                HStack { 
                    Text("Verizon")
                        .font(.body)
                    Spacer()
                    HStack (spacing: 4) {
                        Image(systemName: "wifi")
                        Image(systemName: "battery.100")
                    }
                    .font(.system(size: 16))
                }
                .padding(.bottom, 0)
                .padding(.trailing, 24)
                .padding(.leading, 24)
                .padding(.top, 16)
                
                // lock & time
                VStack {
                    Image(systemName: "lock.fill")
                        .font(.system(size: 40))
                    Text("9:41")
                        .font(.system(size: 88, weight: .thin))
                    Text("Tuesday, January 9")
                        .font(.system(size: 24, weight: .light))
                }
                .padding(.top, 32)
                
                // notification
                VStack {
                        VStack(alignment: .leading) {
                            HStack {
                                Rectangle()
                                    .frame(width: 16, height: 16)
                                    .foregroundColor(Color.yellow)
                                    .cornerRadius(4)
                                Text("APP NAME").font(.body)
                                    .opacity(0.75)
                                Spacer()
                                Text("12m ago").font(.body)
                                    .opacity(0.75)
                            }
                            VStack (alignment: .leading, spacing: 4) {
                                Text("Notification title")
                                    .font(.system(size: 16, weight: .medium))
                                Text("This is the notification body")
                                    .font(.system(size: 16))
                            }
                        }
                        .padding()
                    }
                .background(Rectangle().fill(Color.white).opacity(0.25).cornerRadius(12))
                .padding()
                
                Spacer()
                
                // flashlight & camera
                VStack {
                    HStack {
                        ZStack {
                            VStack { 
                                Circle()
                            }
                            .frame(width: 56, height: 56)
                            .background(Rectangle().fill(Color.white).cornerRadius(100))
                            .opacity(0.1)
                            
                            VStack { 
                                Image(systemName: "flashlight.off.fill")
                                    .foregroundColor(Color.white)
                                    .font(.system(size: 22))
                                    .frame(width: 56, height: 56)
                                    .cornerRadius(100)
                            }
                        }
                        
                        Spacer()
                        
                        ZStack {
                            VStack { 
                                Circle()
                            }
                            .frame(width: 56, height: 56)
                            .background(Rectangle().fill(Color.white).cornerRadius(100))
                            .opacity(0.1)
                            VStack { 
                                Image(systemName: "camera.fill")
                                    .foregroundColor(Color.white)
                                    .font(.system(size: 22))
                                    .frame(width: 56, height: 56)
                                    .cornerRadius(100)
                            }
                        }
                    }
                }
                .padding(.leading, 40)
                .padding(.trailing, 40)
                
                // swipe up to open
                VStack (spacing: 16) { 
                    Text("Swipe up to open")
                        .font(.system(size: 16))
                        .opacity(0.75)
                    Rectangle()
                        .frame(width: 150, height: 5)
                        .cornerRadius(100)
                }
                .padding(.bottom, 14)
        }
        .frame(width: 375, height: 812)
            .background( LinearGradient(
                gradient: Gradient(colors: [.blue, .purple, .orange]),
                startPoint: .top,
                endPoint: .bottom
            ))
            .cornerRadius(2)
    }
}

PlaygroundPage.current.setLiveView(Screen())