Untitled
unknown
plain_text
2 months ago
36 kB
6
Indexable
//
// SessionDetailsView.swift
// Fitness
//
// Created by Phoenix@TNM#Mac on 30/09/24.
//
import Foundation
import SwiftUI
//import BottomSheet
//struct SessionDetailsView: View2
struct SessionDetailsView_Previews: PreviewProvider {
static var previews: some View {
SessionDetailsView()
}
}
import SwiftUI
struct SessionDetailsView: View {
@State private var showBottomSheet = false
@State private var note: String = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution..."
@State private var firstsession: [(String)] = [("5x"), ("5x"), ("5x")]
@State private var firstsecond: [(String)] = [( "10s"), ("10s"), ( "10s")]
@State private var secondsession: [(String)] = [("5x"), ("5x"), ("5x")]
@State private var secondsecond: [(String)] = [( "10s"), ("10s"), ( "10s")]
@Environment(\.presentationMode) var presentationMode
var body: some View {
VStack (spacing: 10){
VStack{
ScrollView(showsIndicators: false) {
VStack(alignment: .leading, spacing: 15) {
// Header Image with Text Overlay
ZStack(alignment: .bottomLeading) {
Image("session_expand") // Replace with your image name
.resizable()
.scaledToFill()
//.frame(height: 250)
.clipped()
VStack(alignment: .leading, spacing: 8) {
Text("Yoga Session")
.font(.plusJakartaSans(size: 22 , weight: .bold))
.foregroundColor(Color.white)
HStack{
Image("clock_session")
Text("24 minutes")
.font(.plusJakartaSans(size: 11 , weight: .bold))
.foregroundColor(Color.white)
}
Text("Strengthen your core and enhance flexibility with this low-impact workout.")
.font(.plusJakartaSans(size: 11 , weight: .medium)) .lineLimit(2)
.foregroundColor(Color.white)
}
.padding()
HStack{
Spacer()
VStack{
Image("more_img")
.padding(.top,15)
Spacer()
}
}
.padding(.top,40)
.padding(.horizontal,20)
VStack{
Text("Today")
.font(.plusJakartaSans(size: 18 , weight: .bold))
.foregroundColor(.white)
.padding(.top,15)
Spacer()
}
.padding(.top,40)
.frame(maxWidth: .infinity, maxHeight: .infinity)
// .background(
// LinearGradient(
// colors: [Color.black.opacity(0.6), Color.clear],
// startPoint: .bottom,
// endPoint: .top
// )
// )
}
.cornerRadius(5)
// First session content
HStack(alignment: .center) {
VStack(alignment: .leading, spacing: 4) {
Text("Arnold press")
.foregroundColor(Color.green)
.font(.plusJakartaSans(size: 18 , weight: .semibold))
Text("10 kcal")
.font(.plusJakartaSans(size: 12, weight: .medium))
.foregroundColor(Color(hex: "#8F8F8F"))
}
Spacer()
Image("arnold_Press") // Replace with actual image
.resizable()
.scaledToFit()
.frame(width: 60, height: 60)
}
.padding(.horizontal,10)
VStack(spacing: 20) {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(firstsession.indices, id: \.self) { index in
VStack {
Text(firstsession[index])
.font(.plusJakartaSans(size: 18, weight: .semibold))
.foregroundColor(.black)
// Text(firstsession[index].1)
// .font(.plusJakartaSans(size: 12, weight: .medium))
// .foregroundColor(Color(hex: "8F8F8F"))
}
.padding()
.background(Color(hex:"#E6EBED")) .frame(width: 64,height: 56)
.cornerRadius(5)
}
// Plus Button
Button(action: {
firstsession.append("5x")
firstsecond.append("10s")
})
//plus image
{
Image(systemName: "plus")
.font(.headline)
.foregroundColor(.gray)
.frame(width: 80,height: 20)
.padding()
.background(Color(hex:"#E6EBED")) .cornerRadius(5)
}
}
// Second horizontal session
HStack(spacing: 20) {
ForEach(firstsecond.indices, id: \.self) { index in
VStack {
Text("10s")
.foregroundColor(Color(hex: "#7A7A7A"))
}
.padding()
.background(Color(hex:"#E6EBED")) .frame(width: 64,height: 30)
.cornerRadius(5)
}
// Plus Button
Button(action: {}) {
Image(systemName: "")
.font(.headline)
.foregroundColor(.gray)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding()
.background(Color(hex:"#E6EBED")) .cornerRadius(5)
.frame(height: 30)
}
}
}
}
.padding(.horizontal,10)
// Second session content (similar to first session)
// Second session horizontal scroll
HStack(alignment: .center) {
VStack(alignment: .leading, spacing: 4) {
Text("nick press")
.foregroundColor(Color.green)
.font(.plusJakartaSans(size: 18 , weight: .semibold))
Text("10 kcal")
.font(.plusJakartaSans(size: 12, weight: .medium))
.foregroundColor(Color(hex: "8F8F8F"))
}
Spacer()
Image("arnold_Press") // Replace with actual image
.resizable()
.scaledToFit()
.frame(width: 60, height: 60)
}
.padding(.horizontal,10)
VStack(spacing: 20) {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(secondsession.indices, id: \.self) { index in
VStack {
Text(secondsession[index])
.font(.system(size: 16, weight: .bold))
.foregroundColor(.black)
// Text(secondsession[index].1)
// .font(.subheadline)
// .foregroundColor(.gray)
}
.padding()
.background(Color(hex:"#E6EBED"))
.frame(width: 64,height: 56)
.cornerRadius(5)
}
// Plus Button
Button(action: {
secondsession.append("5x")
secondsecond.append("10s")
})
{
Image(systemName: "plus")
.font(.headline)
.foregroundColor(.gray)
.frame(width: 80,height: 20)
.padding()
.background(Color(hex: "#E6EBED"))
.cornerRadius(5)
}
}
// Second horizontal second
HStack(spacing: 20) {
ForEach(secondsecond.indices, id: \.self) { index in
VStack {
Text("10s")
.foregroundColor(Color(hex: "#7A7A7A"))
}
.padding()
.background(Color(hex:"#E6EBED")) .frame(width:64,height: 30)
.cornerRadius(5)
}
Button(action: {}) {
Image(systemName: "")
.font(.headline)
.foregroundColor(.gray)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding()
.background(Color(hex:"#E6EBED")) .cornerRadius(8)
.frame(height: 30)
}
}
}
}
.padding(.horizontal,10)
}
}
.overlay {
VStack{
Spacer()
HStack{
Spacer()
Button(action: {
showBottomSheet = true
}) {
Image("create_icon")
.resizable()
.scaledToFit()
.frame(width: 66, height: 66)
}
// Spacer()
}
.padding(.trailing,10)
//.padding(.leading,250)
}
}
// }
.edgesIgnoringSafeArea(.top)
.sheet(isPresented: $showBottomSheet) {
BottomSheetWithButtons()
.presentationDetents([.fraction(0.5)])
}
}
// Add Workout Button
}
.navigationBarBackButtonHidden(true) // Hide the default back button
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {
// Dismiss the view manually
presentationMode.wrappedValue.dismiss()
}) {
ZStack {
Image("btnBackRound")
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
}
}
}
} // .navigationBarBackButtonHidden(true)
.navigationBarTitleDisplayMode(.inline)
// .navigationTitle("Push-ups")
// // .ignoresSafeArea(edges: .top) // Ensures it ignores the top safe area
}
}
// Reusable component for exercise details
struct ExerciseView: View {
let exerciseName: String
let kcal: String
let repetitions: [String]
let imageName: String
var body: some View {
VStack {
VStack(alignment: .leading, spacing: 10) {
HStack {
VStack(alignment: .leading, spacing: 10) {
Text(exerciseName)
.font(Font.custom("PlusJakartaSans", size: 18).weight(.semibold))
.foregroundColor(Color(red: 0.13, green: 0.77, blue: 0.37))
Text(kcal)
.font(Font.custom("PlusJakartaSans", size: 12).weight(.medium))
.foregroundColor(Color.gray)
}
Spacer()
Image(imageName)
.frame(width: 60, height: 60)
.cornerRadius(30)
.padding(.trailing,60)
.padding(.top,10)
.padding(.bottom,10)
}
.padding(.leading,60)
} .padding(.horizontal, 20)
}.background(.white)
}
}
struct BottomSheetWithButtons: View {
@State private var selectedScreen: Int = 0
var body: some View {
VStack{
Rectangle()
.foregroundColor(.clear)
.frame(width: 60, height: 6)
.background(.white)
.cornerRadius(23)
// Horizontal ScrollView with Buttons
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 10) {
HStack {
Button(action: {
selectedScreen = 0 // Switch to Screen 1
}) {
Text("Notes")
.font(Font.custom("PlusJakartaSans", size: 21.46).weight(.bold))
.foregroundColor(Color(red: 0.15, green: 0.16, blue: 0.21))
}
}
.padding()
.frame(maxWidth: .infinity,maxHeight: 30)
.background(selectedScreen == 0 ? Color(red: 0.60, green: 0.89, blue: 0.71) : Color(red: 0.90, green: 0.92, blue: 0.93) )
.cornerRadius(16)
HStack {
Button(action: {
selectedScreen = 1 // Switch to Screen 1
}) {
Text("Voice notes")
.font(Font.custom("PlusJakartaSans", size: 21.46).weight(.bold))
.foregroundColor(Color(red: 0.15, green: 0.16, blue: 0.21))
}
}
.padding()
.frame(maxWidth: .infinity,maxHeight: 30)
.background(selectedScreen == 1 ? Color(red: 0.60, green: 0.89, blue: 0.71) : Color(red: 0.90, green: 0.92, blue: 0.93) )
.cornerRadius(16)
HStack {
Button(action: {
selectedScreen = 2 // Switch to Screen 3
}) {
Text("Video notes")
.font(Font.custom("PlusJakartaSans", size: 21.46).weight(.bold))
.foregroundColor(Color(red: 0.15, green: 0.16, blue: 0.21))
}
}
.padding()
.frame(maxWidth: .infinity,maxHeight: 30)
.background(selectedScreen == 2 ? Color(red: 0.60, green: 0.89, blue: 0.71) : Color(red: 0.90, green: 0.92, blue: 0.93) )
.cornerRadius(16)
}
.padding(.horizontal, 10)
}
.padding(.top, 5)
// Switch between the different screen views
VStack {
if selectedScreen == 0 {
ScreenOneView()
} else if selectedScreen == 1 {
ScreenTwoView()
} else if selectedScreen == 2 {
ScreenThreeView()
}
}
.animation(.easeInOut, value: selectedScreen)
}
.background(Color(red: 0.91, green: 0.98, blue: 0.94))
}
}
struct ScreenOneView: View {
var body: some View {
VStack{
ScrollView{
VStack(spacing: 20) {
Text("Lorem ipsum dolor sit amet consectetur. Id amet amet est pellentesque enim sagittis. Eu vitae molestie iaculis tellus. Egestas venenatis amet pretium sit enim aliquam. Pharetra commodo sed diam lectus ornare ultrices malesuada integer. Molestie tellus nisl tellus cras.")
.font(Font.custom("PlusJakartaSans", size: 14).weight(.medium))
.foregroundColor(Color(red: 0.34, green: 0.46, blue: 0.53))
Text("Lorem ipsum dolor sit amet consectetur. Id amet amet est pellentesque enim sagittis. Eu vitae molestie iaculis tellus. Egestas venenatis amet pretium sit enim aliquam. Pharetra commodo sed diam lectus ornare ultrices malesuada integer. Molestie tellus nisl tellus cras.")
.font(Font.custom("PlusJakartaSans", size: 14).weight(.medium))
.foregroundColor(Color(red: 0.34, green: 0.46, blue: 0.53))
}
.padding(.horizontal, 20)
.padding(.top, 20)
}
}
.background(Color(red: 0.91, green: 0.98, blue: 0.94))
}
}
struct ScreenTwoView: View {
var body: some View {
VStack{
VStack{
ScrollView{
VStack(spacing: 20) {
HStack{
VStack(spacing: 10){
Text("Sunday at 11:27")
.font(Font.custom("PlusJakartaSans", size: 16).weight(.semibold))
.foregroundColor(Color.mainTitleBlack)
.frame(maxWidth: .infinity,alignment: .leading)
Text("June 12, New york")
.font(Font.custom("PlusJakartaSans", size: 14).weight(.semibold))
.foregroundColor(Color.gray)
.frame(maxWidth: .infinity,alignment: .leading)
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]),
startPoint: .leading,
endPoint: .trailing))
.frame(height: 5) // Adjust thickness here
// .padding()
.padding(.top,10)
.frame(maxWidth: .infinity)
}
Spacer()
VStack(spacing: 10){
Image("play_Circled")
.resizable()
.frame(width: 24, height: 24)
.background(.green)
.cornerRadius(15)
Text("00:43")
.font(Font.custom("PlusJakartaSans", size: 16).weight(.semibold))
.foregroundColor(Color.mainTitleBlack)
}
.padding(.bottom,20)
}
.padding(15)
.background(.white)
.cornerRadius(15)
HStack{
VStack(spacing: 10){
Text("Sunday at 11:27")
.font(Font.custom("PlusJakartaSans", size: 16).weight(.semibold))
.frame(maxWidth: .infinity,alignment: .leading)
.foregroundColor(Color.mainTitleBlack)
Text("June 12, New york")
.font(Font.custom("PlusJakartaSans", size: 14).weight(.semibold))
.frame(maxWidth: .infinity,alignment: .leading)
.foregroundColor(Color.gray)
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]),
startPoint: .leading,
endPoint: .trailing))
.frame(height: 5) // Adjust thickness here
// .padding()
.padding(.top,10)
// .cornerRadius(1)
}
Spacer()
VStack(spacing: 10){
Image("play_Circled")
.resizable()
.frame(width: 24, height: 24)
.background(.green)
.cornerRadius(15)
Text("00:43")
.font(Font.custom("PlusJakartaSans", size: 16).weight(.semibold))
.foregroundColor(Color.mainTitleBlack)
}
.padding(.bottom,20)
}
.padding(15)
.background(.white)
.cornerRadius(15)
}
.padding(.horizontal, 24)
.padding(.top, 20)
.cornerRadius(15)
}
.background(Color(red: 0.91, green: 0.98, blue: 0.94))
}
HStack(spacing: 30) {
Circle()
.fill(Color.gray.opacity(0.2))
.frame(width: 50, height: 50)
.overlay(
Image(systemName: "xmark")
.font(.title)
.foregroundColor(.black)
)
ZStack {
Circle()
.fill(Color.green)
.frame(width: 70, height: 70)
Circle()
.fill(Color.white)
.frame(width: 30, height: 30)
}
Circle()
.fill(Color.gray.opacity(0.2))
.frame(width: 50, height: 50)
.overlay(
Image(systemName: "pause")
.font(.title)
.foregroundColor(.black)
)
}
}
.background(.white)
}
}
struct ScreenThreeView: View {
@State private var isShowingCamera = false
@State private var selectedImage: UIImage? // To store captured image
var body: some View {
VStack{
VStack(spacing: 20) {
ScrollView{
VStack(spacing: 20) {
HStack{
Image("videonote_img")
.frame(width: 72, height: 72)
//.cornerRadius(5)
// .background(
// Image("play_Circled")
// .resizable()
// .frame(width: 24, height: 24)
// .cornerRadius(5)
//
// )
//
VStack(alignment: .leading,spacing: 10){
Text("Clip One")
.foregroundColor(Color(red: 0.12, green: 0.12, blue: 0.13))
.padding(.leading,10)
Text("Description")
.foregroundColor(Color(red: 0.61, green: 0.61, blue: 0.76))
.padding(.leading,10)
}
Spacer()
VStack(alignment: .trailing){
Image("delete")
.resizable()
.frame(width: 20, height: 21)
}
}
.padding()
.background(Color.white)
.cornerRadius(15)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.gray.opacity(0.3), lineWidth: 0.5)
)
}
.padding(.horizontal, 24)
.cornerRadius(15)
.background(.clear)
VStack(alignment: .leading,spacing: 20){
HStack(spacing: 10){
Image("videonote_img")
.frame(width: 72, height: 72)
.cornerRadius(5)
VStack(alignment: .leading,spacing: 10){
Text("Clip One")
.font(Font.custom("Overpass", size: 16).weight(.semibold))
.foregroundColor(Color(red: 0.12, green: 0.12, blue: 0.13))
Text("Description")
.font(Font.custom("Overpass", size: 14))
.foregroundColor(Color(red: 0.61, green: 0.61, blue: 0.76))
}
Spacer()
VStack(alignment: .trailing){
Image("delete")
.resizable()
.frame(width: 20, height: 21)
}
}
.padding()
.background(Color.white)
.cornerRadius(15)
// .overlay(
// RoundedRectangle(cornerRadius: 5)
// .stroke(Color.gray.opacity(0.3), lineWidth: 0.5)
// )
//
}
.padding(.horizontal, 24)
.padding(.top, 20)
.cornerRadius(15)
}
}
.background(Color(red: 0.91, green: 0.98, blue: 0.94))
VStack {
Button(action: {
isShowingCamera = true
}) {
Circle()
.fill(Color.green)
.frame(width: 70, height: 90)
.overlay(
Image(systemName: "camera.fill") // Use system image or your custom image
.font(.title)
.foregroundColor(.black)
)
}
.sheet(isPresented: $isShowingCamera) {
CameraView(isPresented: $isShowingCamera, selectedImage: $selectedImage)
}
// Show Captured Image
if let image = selectedImage {
Image(uiImage: image)
.resizable()
.frame(width: 100, height: 100)
.clipShape(RoundedRectangle(cornerRadius: 10))
}
}
// Image("camera_img")
// .resizable()
// .scaledToFit()
//
// .frame(width: 43,height: 90)
// .background(.green)
}
.background(.white)
}
}
//struct BottomSheetWithButtonsView_Previews: PreviewProvider {
// static var previews: some View {
// BottomSheetWithButtons()
// }
//}
Editor is loading...
Leave a Comment