Untitled

 avatar
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