Skip to content

Instantly share code, notes, and snippets.

@jordansinger
Created July 27, 2020 21:19
Show Gist options
  • Save jordansinger/b3ba0e6063116e5dae01b82301545818 to your computer and use it in GitHub Desktop.
Save jordansinger/b3ba0e6063116e5dae01b82301545818 to your computer and use it in GitHub Desktop.
Swift Playgrounds iPod Classic
import SwiftUI
import PlaygroundSupport
struct iPod: View {
var body: some View {
VStack(spacing: 40) {
Screen()
ClickWheel()
Spacer()
}
.padding(.top, 24)
.frame(width: 368, height: 540)
.background(Color(UIColor.secondarySystemBackground))
.cornerRadius(32)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.15)), radius: 24, x: 0, y: 2)
.overlay(
RoundedRectangle(cornerRadius: 32)
.stroke(Color.clear, lineWidth: 8)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.3)), radius: 12, x: 0, y: 0)
.clipShape(
RoundedRectangle(cornerRadius: 32)
)
)
}
}
struct Screen: View {
var body: some View {
RoundedRectangle(cornerRadius: 12)
.fill(Color.black)
.frame(width: 320, height: 240)
.overlay(
HStack(spacing: 0) {
VStack(spacing: 0) {
StatusBar()
Menu()
}
.frame(width: 156)
.background(Color.white)
Color.gray
// Image(uiImage: #imageLiteral(resourceName: "IMG_0488.PNG"))
// .resizable()
// .aspectRatio(contentMode: .fill)
.frame(width: 156)
.clipShape(Rectangle())
.shadow(color: Color(UIColor.black.withAlphaComponent(0.3)), radius: 12, x: 0, y: 0)
}
.frame(height: 232)
.cornerRadius(8)
.padding(4)
)
}
}
struct StatusBar: View {
var body: some View {
HStack {
Text("iPod")
.fontWeight(.semibold)
Spacer()
Image(systemName: "play.fill")
.foregroundColor(.blue)
Image(systemName: "battery.100")
.foregroundColor(.green)
}
.font(.caption)
.padding(.vertical, 4)
.padding(.horizontal, 6)
.foregroundColor(.secondary)
.background(Color(UIColor.secondarySystemBackground))
}
}
struct Menu: View {
var body: some View {
HStack {
VStack(alignment: .leading, spacing: 4) {
HStack {
Text("Music")
Spacer()
Image(systemName: "chevron.right")
}
.padding(.vertical, 4)
.padding(.horizontal, 6)
.foregroundColor(.white)
.background(Color.blue)
.padding(-6)
.padding(.bottom, 6)
Text("Videos")
Text("Photos")
Text("Podcasts")
Text("Extras")
Text("Settings")
Text("Shuffle Songs")
Spacer()
}
.padding(6)
.foregroundColor(.black)
.font(.headline)
}
.background(Color.white)
}
}
struct ClickWheel: View {
var body: some View {
ZStack {
Circle()
.fill(Color.white)
.frame(height: 192)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.05)), radius: 4, x: 0, y: 0)
.overlay(
Circle()
.fill(Color(UIColor.secondarySystemBackground))
.frame(width: 80, height: 80)
.overlay(
Circle()
.stroke(Color(UIColor.black.withAlphaComponent(0.1)), lineWidth: 0.5)
)
.overlay(
Circle()
.stroke(Color.clear, lineWidth: 2)
.shadow(color: Color(UIColor.black.withAlphaComponent(0.05)), radius: 2, x: 0, y: 1)
.clipShape(
Circle()
)
)
)
VStack(spacing: 0) {
Text("MENU")
.fontWeight(.semibold)
Spacer()
HStack {
Image(systemName: "backward.end.alt.fill")
Spacer()
Image(systemName: "forward.end.alt.fill")
}
Spacer()
Image(systemName: "playpause.fill")
}
.padding()
.frame(width: 192, height: 192)
.foregroundColor(Color(UIColor.tertiaryLabel))
.font(.footnote)
}
}
}
PlaygroundPage.current.setLiveView(iPod())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment