From ffc62b3f344765f58d201e5da1f9062ff4df13d8 Mon Sep 17 00:00:00 2001 From: neon443 <69979447+neon443@users.noreply.github.com> Date: Thu, 28 Aug 2025 19:46:17 +0100 Subject: [PATCH] finished welcome view --- ShhShell/Views/Onboarding/WelcomeChunk.swift | 22 ++-- ShhShell/Views/Onboarding/WelcomeView.swift | 104 +++++++++++++++---- 2 files changed, 98 insertions(+), 28 deletions(-) diff --git a/ShhShell/Views/Onboarding/WelcomeChunk.swift b/ShhShell/Views/Onboarding/WelcomeChunk.swift index a116dcf..b324e78 100644 --- a/ShhShell/Views/Onboarding/WelcomeChunk.swift +++ b/ShhShell/Views/Onboarding/WelcomeChunk.swift @@ -11,34 +11,44 @@ struct WelcomeChunk: View { @State var symbol: String @State var title: String @State var para: String - @State var timeTarget: TimeInterval = 0 + @State var delay: TimeInterval = 0 @State private var spawnDate: Date = .now var body: some View { TimelineView(.animation) { tl in let time = tl.date.timeIntervalSince(spawnDate) - HStack { - if time > timeTarget { + HStack(spacing: 25) { + if time > delay { Image(systemName: symbol) .resizable().scaledToFit() - .frame(width: 50) + .symbolRenderingMode(.hierarchical) + .frame(width: 50, height: 50) + .transition(.scale) } VStack(alignment: .leading) { - if time > timeTarget+1 { + if time > delay+0.25 { Text(title) .bold() .font(.headline) + .transition(.blurReplace) + } + if time > delay+0.75 && !para.isEmpty { Text(para) .foregroundStyle(.gray) + .font(.footnote) + .transition(.blurReplace) .multilineTextAlignment(.leading) } } + .shadow(color: .white, radius: time > delay+0.75 ? 0 : 5) + Spacer() } .animation(.spring, value: time) .frame(maxWidth: .infinity) - .padding(.horizontal, 50) + .padding(.horizontal, 30) + .padding(10) } } } diff --git a/ShhShell/Views/Onboarding/WelcomeView.swift b/ShhShell/Views/Onboarding/WelcomeView.swift index cf2d1a5..5f47184 100644 --- a/ShhShell/Views/Onboarding/WelcomeView.swift +++ b/ShhShell/Views/Onboarding/WelcomeView.swift @@ -9,34 +9,94 @@ import SwiftUI struct WelcomeView: View { @State private var spawnDate: Date = .now + @Environment(\.dismiss) var dismiss + var body: some View { TimelineView(.animation) { tl in let time = tl.date.timeIntervalSince(spawnDate) -#if DEBUG - Button("reset") { spawnDate = .now } - Text("\(time)") - .frame(width: 150, alignment: .leading) -#endif - VStack { - - Text("Welcome") - .monospaced() - .font(.largeTitle) - .bold() - - if time > 1 { - Image("regular") - .resizable().scaledToFit() - .frame(width: 100) - .clipShape(RoundedRectangle(cornerRadius: 22)) - .shadow(color: .white, radius: 6) - .transition(.scale) - .padding(.bottom) + VStack(spacing: 20) { + if time > 0.1 { + Image("regular") + .resizable().scaledToFit() + .frame(width: 100) + .clipShape(RoundedRectangle(cornerRadius: 22)) + .shadow(color: .white, radius: time > 0.25 ? 5 : 0) + .transition(.scale) + } + if time > 2 { + Text("Welcome") + .monospaced() + .font(.largeTitle) + .bold() + .transition(.blurReplace) + } } - if time > 1 { - WelcomeChunk(symbol: "hare.fill", title: "Blazing fast", para: "hi", timeTarget: 1) + .padding(.top, time > 3 ? 50 : 0) + + if time > 3 { + Spacer() } + + WelcomeChunk( + symbol: "bolt.fill", + title: "Blazing Fast", + para: "", + delay: 4 + ) + WelcomeChunk( + symbol: "apple.terminal.on.rectangle.fill", + title: "Multiple Sessions", + para: "Connect to the same host again and again, or different ones", + delay: 5 + ) + WelcomeChunk( + symbol: "swatchpalette.fill", + title: "Themes", + para: "Customise ShhShell by importing themes, or make your own!", + delay: 6 + ) + WelcomeChunk( + symbol: "lock.shield.fill", + title: "Secure", + para: "ShhShell uses secure Elliptic Curve keys, and keeps you safe by verifying hostkeys haven't changed", + delay: 7 + ) + WelcomeChunk( + symbol: "ellipsis.circle", + title: "And more...", + para: "Snippets, iCloud Sync, Fonts, Terminal Filters, Connection History", + delay: 8 + ) + + if time > 3 { + Spacer() + } + if time > 9 { +#if swift(>=6.2) + Button("Continue") { dismiss() } + .buttonStyle(.glassProminent) +#else + Button { + dismiss() + } label: { + ZStack { + Color.terminalGreen + Text("Continue") + .monospaced() + .bold() + .foregroundStyle(.black) + } + .clipShape(RoundedRectangle(cornerRadius: 50)) + } + .buttonStyle(.plain) + .frame(width: .infinity, height: 50) + .padding(.horizontal, 75) +#endif + } + } + .onDisappear { + } .animation(.spring, value: time) .preferredColorScheme(.dark)