Fitness app UI

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Circular progress bar for daily step goal
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.blue)
                
                Circle()
                    .trim(from: 0.0, to: 0.4)
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.purple)
                    .rotationEffect(Angle(degrees: 270.0))
                
                Text("7,235 steps")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .frame(width: 200, height: 200)
            
            // Icons for calories, distance, and active minutes
            HStack {
                // Calories burned
                Image(systemName: "flame.fill")
                    .foregroundColor(Color.red)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1)
                    .clipShape(Circle())
                
                // Distance covered
                Image(systemName: "figure.walk.circle")
                    .foregroundColor(Color.blue)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Active minutes
                Image(systemName: "clock.fill")
                    .foregroundColor(Color.green)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
            }
            .padding()
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                let width = geometry.size.width
                let height = geometry.size.height
                let stepHeight = height / 7
                
                // Dummy data for graph points
                let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                
                // Draw the line for the graph
                for index in dataPoints.indices {
                    let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                    let yPosition = stepHeight * dataPoints[index]
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: height - yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: height - yPosition))
                    }
                }
            }
            .stroke(Color.blue, lineWidth: 2)
            
            // Highlight the current day
            Circle()
                .fill(Color.purple)
                .frame(width: 10, height: 10)
                .position(x: geometry.size.width * 0.5, y: geometry.size.height * 0.4) // Example position for current day
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Tabs for Daily, Week, and Month
            HStack {
                Text("DAILY")
                    .foregroundColor(.white)
                    .padding(.vertical, 10)
                    .padding(.horizontal, 20)
                    .background(Color.purple.opacity(0.3))
                    .clipShape(Capsule())
                
                Text("WEEK")
                    .foregroundColor(.white)
                    .padding(.vertical, 10)
                    .padding(.horizontal, 20)
                    .background(Color.purple)
                    .clipShape(Capsule())
                
                Text("MONTH")
                    .foregroundColor(.white)
                    .padding(.vertical, 10)
                    .padding(.horizontal, 20)
                    .background(Color.purple.opacity(0.3))
                    .clipShape(Capsule())
            }
            .background(RoundedRectangle(cornerRadius: 20).fill(LinearGradient(colors: [Color.purple.opacity(0.5), Color.purple], startPoint: .top, endPoint: .bottom)))
            .clipShape(Capsule())
            .padding()
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
                .background(RoundedRectangle(cornerRadius: 20).fill(LinearGradient(colors: [Color.purple.opacity(0.5), Color.purple], startPoint: .top, endPoint: .bottom)))
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                    
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = height * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
                }
                .stroke(LinearGradient(colors: [Color.white.opacity(0.5), Color.white], startPoint: .leading, endPoint: .trailing), style: StrokeStyle(lineWidth: 2, lineJoin: .round))
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.white)
                        .frame(width: 10, height: 10)
                        .position(x: geometry.size.width * CGFloat(index) / 6, y: geometry.size.height * (1 - [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9][index]))
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Circular progress bar for daily step goal
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(.blue)
                
                Circle()
                    .trim(from: 0.0, to: 0.4)
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(.purple)
                    .rotationEffect(Angle(degrees: 270.0))
                
                Text("7,235 steps")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .frame(width: 200, height: 200)
            
            // Icons for calories, distance, and active minutes
            HStack {
                // Calories burned
                Image(systemName: "flame.fill")
                    .foregroundColor(.red)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Distance covered
                Image(systemName: "figure.walk.circle")
                    .foregroundColor(.blue)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Active minutes
                Image(systemName: "clock.fill")
                    .foregroundColor(.green)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
            }
            .padding()
            
            // Tabs for Daily, Week, Month
            HStack {
                Text("DAILY")
                    .foregroundColor(.gray)
                Text("WEEK")
                    .foregroundColor(.white)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .background(Capsule().fill(Color.purple))
                Text("MONTH")
                    .foregroundColor(.gray)
            }
            .font(.headline)
            .padding(.vertical)
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 25)
                        .fill(LinearGradient(
                            colors: [Color.purple.opacity(0.6), Color.purple],
                            startPoint: .top,
                            endPoint: .bottom
                        ))
                )
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let stepHeight = height / 7
                    
                    // Dummy data for graph points
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                    
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = stepHeight * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
                .stroke(Color.white, lineWidth: 2)
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: 10, height: 10)
                        .position(
                            x: geometry.size.width * CGFloat(index) / 6,
                            y: geometry.size.height * (1 - CGFloat(index) / 6) // Dummy y position for illustration
                        )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    @State private var selectedTab: Tab = .week

    var body: some View {
        VStack {
            // Tabs for Daily, Week, and Month
            TabView(selection: $selectedTab) {
                Text("DAILY VIEW")
                    .tag(Tab.daily)
                LineGraphView()
                    .tag(Tab.week)
                Text("MONTH VIEW")
                    .tag(Tab.month)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .frame(height: 200)
            .padding()
            .background(RoundedRectangle(cornerRadius: 20).fill(LinearGradient(colors: [Color.purple.opacity(0.5), Color.purple], startPoint: .top, endPoint: .bottom)))
            
            // Line graph for weekly step count
            if selectedTab == .week {
                LineGraphView()
                    .frame(height: 200)
                    .padding()
                    .background(RoundedRectangle(cornerRadius: 20).fill(LinearGradient(colors: [Color.purple.opacity(0.5), Color.purple], startPoint: .top, endPoint: .bottom)))
            }
        }
    }
}

enum Tab: Hashable {
    case daily, week, month
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                    
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = height * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
                }
                .stroke(LinearGradient(colors: [Color.white.opacity(0.5), Color.white], startPoint: .leading, endPoint: .trailing), style: StrokeStyle(lineWidth: 2, lineJoin: .round))
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.white)
                        .frame(width: 10, height: 10)
                        .position(x: geometry.size.width * CGFloat(index) / 6, y: geometry.size.height * (1 - [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9][index]))
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Circular progress bar for daily step goal
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(.blue)
                
                Circle()
                    .trim(from: 0.0, to: 0.4)
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(.purple)
                    .rotationEffect(Angle(degrees: 270.0))
                
                Text("7,235 steps")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .frame(width: 200, height: 200)
            
            // Icons for calories, distance, and active minutes
            HStack {
                // Calories burned
                Image(systemName: "flame.fill")
                    .foregroundColor(.red)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Distance covered
                Image(systemName: "figure.walk.circle")
                    .foregroundColor(.blue)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Active minutes
                Image(systemName: "clock.fill")
                    .foregroundColor(.green)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
            }
            .padding()
            
            // Tabs for Daily, Week, Month
            HStack {
                Text("DAILY")
                    .foregroundColor(.gray)
                Text("WEEK")
                    .foregroundColor(.white)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .background(Capsule().fill(Color.purple))
                Text("MONTH")
                    .foregroundColor(.gray)
            }
            .font(.headline)
            .padding(.vertical)
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 25)
                        .fill(LinearGradient(
                            colors: [Color.purple.opacity(0.6), Color.purple],
                            startPoint: .top,
                            endPoint: .bottom
                        ))
                )
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let stepHeight = height / 7
                    
                    // Dummy data for graph points
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                    
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = stepHeight * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
               }
                .stroke(Color.white, lineWidth: 2)
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: 10, height: 10)
                        .position(
                            x: geometry.size.width * CGFloat(index) / 6,
                            y: geometry.size.height * (1 - CGFloat(index) / 6) // Dummy y position for illustration
                        )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
                .tag(0)

            SearchView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Search")
                }
                .tag(1)

            NotificationsView()
                .tabItem {
                    Image(systemName: "bell")
                    Text("Notifications")
                }
                .tag(2)

            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
                .tag(3)
        }
    }
}

struct HomeView: View {
    var body: some View {
        Text("Home View")
    }
}

struct SearchView: View {
    var body: some View {
        Text("Search View")
    }
}

struct NotificationsView: View {
    var body: some View {
        Text("Notifications View")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("Profile View")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                
                // Icons for calories, distance, and active minutes
                HStack {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding()
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
                }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let stepHeight = height / 7
                    
                    // Dummy data for graph points
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                   
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = stepHeight * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
               }
                .stroke(Color.white, lineWidth: 2)
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: 10, height: 10)
                        .position(
                            x: geometry.size.width * CGFloat(index) / 6,
                            y: geometry.size.height * (1 - CGFloat(index) / 6) // Dummy y position for illustration
                        )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                
                // Icons for calories, distance, and active minutes
                HStack {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding()
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
                }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding() // Add padding around the TabView to reduce the size and give space between edges
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let stepHeight = height / 7
                    
                    // Dummy data for graph points
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                   
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = stepHeight * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
               }
                .stroke(Color.white, lineWidth: 2)
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: 10, height: 10)
                        .position(
                            x: geometry.size.width * CGFloat(index) / 6,
                            y: geometry.size.height * (1 - CGFloat(index) / 6) // Dummy y position for illustration
                        )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                
                // Icons for calories, distance, and active minutes
                HStack {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding()
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
                }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding() // Add padding around the TabView to reduce the size and give space between edges
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
            let stepHeight = geometry.size.height
            let stepWidth = geometry.size.width / CGFloat(dataPoints.count - 1)
            
            Path { path in
                for index in dataPoints.indices {
                    let xPosition = stepWidth * CGFloat(index)
                    let yPosition = stepHeight * (1 - dataPoints[index])
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                    }
               }
            }
            .stroke(Color.white, lineWidth: 2)
            
            ForEach(dataPoints.indices, id: \.self) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 8, height: 8)
                    .position(x: stepWidth * CGFloat(index), y: stepHeight * (1 - dataPoints[index]))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    @State private var selectedDay: Int? = nil
    let daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
    let daysOfMonth = Array(10...17)
    
    var body: some View {
        TabView {
            VStack {
                // Days of the week
                HStack {
                    ForEach(daysOfWeek, id: \.self) { day in
                        Text(day)
                            .frame(maxWidth: .infinity)
                    }
                }
                
                // Days of the month
                HStack {
                    ForEach(daysOfMonth, id: \.self) { day in
                        Text("\(day)")
                            .frame(maxWidth: .infinity)
                            .background(selectedDay == day ? Color.blue : Color.clear)
                            .onTapGesture {
                                selectedDay = day
                            }
                    }
                }
                
                // Rest of the content
                // ...
                // Existing content from CODE_TO_UPDATE
                // ...
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            // Other tabs
            // ...
            // Existing content from CODE_TO_UPDATE
            // ...
        }
        .padding() // Add padding around the TabView to reduce the size and give space between edges
    }
}

// Existing LineGraphView from CODE_TO_UPDATE
// ...

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    let calendar = Calendar.current
    let today = Date()
    
    var body: some View {
        TabView {
            VStack {
                // Weekly calendar
                HStack(spacing: 0) {
                    ForEach(0..<7, id: \.self) { index in
                        let weekdayDate = calendar.date(byAdding: .day, value: index, to: startOfWeek)!
                        VStack {
                            Text(weekdayDate, format: .dateTime.weekday(.abbreviated))
                                .font(.caption)
                            Text(weekdayDate, format: .dateTime.day())
                        }
                        .frame(maxWidth: .infinity)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                       .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                
                // Icons for calories, distance, and active minutes
                HStack {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding()
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
               }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding() // Add padding around the TabView to reduce the size and give space between edges
    }
    
    var startOfWeek: Date {
        let components = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: today)
        return calendar.date(from: components)!
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
            let stepHeight = geometry.size.height
            let stepWidth = geometry.size.width / CGFloat(dataPoints.count - 1)
            
            Path { path in
                for index in dataPoints.indices {
                    let xPosition = stepWidth * CGFloat(index)
                    let yPosition = stepHeight * (1 - dataPoints[index])
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                    }
               }
            }
            .stroke(Color.white, lineWidth: 2)
            
            ForEach(dataPoints.indices, id: \.self) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 8, height: 8)
                    .position(x: stepWidth * CGFloat(index), y: stepHeight * (1 - dataPoints[index]))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    let calendar = Calendar.current
    let today = Date()
    
    var body: some View {
        TabView {
            VStack(spacing: 20) { // Added spacing between components
                // Weekly calendar
                HStack(spacing: 8) { // Added space between days
                    ForEach(0..<7, id: \.self) { index in
                        let weekdayDate = calendar.date(byAdding: .day, value: index, to: startOfWeek)!
                        VStack {
                            Text(weekdayDate, format: .dateTime.weekday(.abbreviated))
                                .font(.caption)
                            Text(weekdayDate, format: .dateTime.day())
                        }
                        .frame(maxWidth: .infinity)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                .padding(.vertical, 8) // Added padding
                
                // Icons for calories, distance, and active minutes
                HStack(spacing: 16) { // Added space between icons
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1)
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding(.vertical, 8) // Added padding
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical, 8) // Added padding
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
               }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding() // Add padding around the TabView to reduce the size and give space between edges
    }
    
    var startOfWeek: Date {
        let components = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: today)
        return calendar.date(from: components)!
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
            let stepHeight = geometry.size.height
            let stepWidth = geometry.size.width / CGFloat(dataPoints.count - 1)
            
            Path { path in
                for index in dataPoints.indices {
                    let xPosition = stepWidth * CGFloat(index)
                    let yPosition = stepHeight * (1 - dataPoints[index])
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                    }
               }
            }
            .stroke(Color.white, lineWidth: 2)
            
            ForEach(dataPoints.indices, id: \.self) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 8, height: 8)
                    .position(x: stepWidth * CGFloat(index), y: stepHeight * (1 - dataPoints[index]))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    let calendar = Calendar.current
    let today = Date()
    
    var body: some View {
        TabView {
            VStack(spacing: 20) {
                // Weekly calendar
                HStack(spacing: 8) {
                    ForEach(0..<7, id: \.self) { index in
                        let weekdayDate = calendar.date(byAdding: .day, value: index, to: startOfWeek)!
                        VStack {
                            Text(weekdayDate, format: .dateTime.weekday(.abbreviated))
                                .font(.caption)
                            Text(weekdayDate, format: .dateTime.day())
                        }
                        .frame(maxWidth: .infinity)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                .padding(.vertical, 8)
                
                // Icons for calories, distance, and active minutes
                HStack(spacing: 16) {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding(.vertical, 8)
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical, 8)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
              }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding()
    }
    
    var startOfWeek: Date {
        let components = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: today)
        return calendar.date(from: components)!
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
            let stepHeight = geometry.size.height
            let stepWidth = geometry.size.width / CGFloat(dataPoints.count - 1)
            
            Path { path in
                for index in dataPoints.indices {
                    let xPosition = stepWidth * CGFloat(index)
                    let yPosition = stepHeight * (1 - dataPoints[index])
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                    }
               }
            }
            .stroke(Color.white, lineWidth: 2)
            
            ForEach(dataPoints.indices, id: \.self) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 8, height: 8)
                    .position(x: stepWidth * CGFloat(index), y: stepHeight * (1 - dataPoints[index]))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    let calendar = Calendar.current
    let today = Date()
    
    var body: some View {
        TabView {
            VStack(spacing: 200) {
                // Weekly calendar
                HStack(spacing: 8) {
                    ForEach(0..<7, id: \.self) { index in
                        let weekdayDate = calendar.date(byAdding: .day, value: index, to: startOfWeek)!
                        VStack {
                            Text(weekdayDate, format: .dateTime.weekday(.abbreviated))
                                .font(.caption)
                            Text(weekdayDate, format: .dateTime.day())
                        }
                        .frame(maxWidth: .infinity)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                
                // Circular progress bar for daily step goal
                ZStack {
                    Circle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(.blue)
                    
                    Circle()
                        .trim(from: 0.0, to: 0.4)
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(.purple)
                        .rotationEffect(Angle(degrees: 270.0))
                    
                    Text("7,235 steps")
                        .font(.title)
                        .fontWeight(.bold)
                }
                .frame(width: 200, height: 200)
                .padding(.vertical, 8)
                
                // Icons for calories, distance, and active minutes
                HStack(spacing: 16) {
                    // Calories burned
                    Image(systemName: "flame.fill")
                        .foregroundColor(.red)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Distance covered
                    Image(systemName: "figure.walk.circle")
                        .foregroundColor(.blue)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                    
                    // Active minutes
                    Image(systemName: "clock.fill")
                        .foregroundColor(.green)
                        .imageScale(.large)
                        .frame(width: 50, height: 50)
                        .background(Color.gray.opacity(0.1))
                        .clipShape(Circle())
                }
                .padding(.vertical, 8)
                
                // Tabs for Daily, Week, Month
                HStack {
                    Text("DAILY")
                        .foregroundColor(.gray)
                    Text("WEEK")
                        .foregroundColor(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Capsule().fill(Color.purple))
                    Text("MONTH")
                        .foregroundColor(.gray)
                }
                .font(.headline)
                .padding(.vertical, 8)
                
                // Line graph for weekly step count
                LineGraphView()
                    .frame(height: 200)
                    .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .fill(LinearGradient(
                                colors: [Color.purple.opacity(0.6), Color.purple],
                                startPoint: .top,
                                endPoint: .bottom
                            ))
                    )
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
            
            Text("Search")
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
            
            Text("Notifications")
                .tabItem {
                    Label("Notifications", systemImage: "bell")
              }
            
            Text("Profile")
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
        .padding()
    }
    
    var startOfWeek: Date {
        let components = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: today)
        return calendar.date(from: components)!
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
            let stepHeight = geometry.size.height
            let stepWidth = geometry.size.width / CGFloat(dataPoints.count - 1)
            
            Path { path in
                for index in dataPoints.indices {
                    let xPosition = stepWidth * CGFloat(index)
                    let yPosition = stepHeight * (1 - dataPoints[index])
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                    }
               }
            }
            .stroke(Color.white, lineWidth: 2)
            
            ForEach(dataPoints.indices, id: \.self) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 8, height: 8)
                    .position(x: stepWidth * CGFloat(index), y: stepHeight * (1 - dataPoints[index]))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Circular progress bar for daily step goal
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.blue)
                
                Circle()
                    .trim(from: 0.0, to: 0.4)
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.purple)
                    .rotationEffect(Angle(degrees: 270.0))
                
                Text("7,235 steps")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .frame(width: 200, height: 200)
            
            // Icons for calories, distance, and active minutes
            HStack {
                // Calories burned
                Image(systemName: "flame.fill")
                    .foregroundColor(Color.red)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Distance covered
                Image(systemName: "figure.walk.circle")
                    .foregroundColor(Color.blue)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Active minutes
                Image(systemName: "clock.fill")
                    .foregroundColor(Color.green)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
            }
            .padding()
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                let width = geometry.size.width
                let height = geometry.size.height
                let stepHeight = height / 7
                
                // Dummy data for graph points
                let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                
                // Draw the line for the graph
                for index in dataPoints.indices {
                    let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                    let yPosition = stepHeight * dataPoints[index]
                    
                    if index == 0 {
                        path.move(to: CGPoint(x: xPosition, y: height - yPosition))
                    } else {
                        path.addLine(to: CGPoint(x: xPosition, y: height - yPosition))
                    }
                }
            }
            .stroke(Color.blue, lineWidth: 2)
            
            // Highlight the current day
            Circle()
                .fill(Color.purple)
                .frame(width: 10, height: 10)
                .position(x: geometry.size.width * 0.5, y: geometry.size.height * 0.4) // Example position for current day
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Circular progress bar for daily step goal
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(.blue)
                
                Circle()
                    .trim(from: 0.0, to: 0.4)
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(.purple)
                    .rotationEffect(Angle(degrees: 270.0))
                
                Text("7,235 steps")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .frame(width: 200, height: 200)
            
            // Icons for calories, distance, and active minutes
            HStack {
                // Calories burned
                Image(systemName: "flame.fill")
                    .foregroundColor(.red)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Distance covered
                Image(systemName: "figure.walk.circle")
                    .foregroundColor(.blue)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
                
                // Active minutes
                Image(systemName: "clock.fill")
                    .foregroundColor(.green)
                    .imageScale(.large)
                    .frame(width: 50, height: 50)
                    .background(Color.gray.opacity(0.1))
                    .clipShape(Circle())
            }
            .padding()
            
            // Tabs for Daily, Week, Month
            HStack {
                Text("DAILY")
                    .foregroundColor(.gray)
                Text("WEEK")
                    .foregroundColor(.white)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .background(Capsule().fill(Color.purple))
                Text("MONTH")
                    .foregroundColor(.gray)
            }
            .font(.headline)
            .padding(.vertical)
            
            // Line graph for weekly step count
            LineGraphView()
                .frame(height: 200)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 25)
                        .fill(LinearGradient(
                            colors: [Color.purple.opacity(0.6), Color.purple],
                            startPoint: .top,
                            endPoint: .bottom
                        ))
                )
        }
    }
}

struct LineGraphView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Draw the line graph
                Path { path in
                    let width = geometry.size.width
                    let height = geometry.size.height
                    let stepHeight = height / 7
                    
                    // Dummy data for graph points
                    let dataPoints: [CGFloat] = [0.2, 0.5, 0.3, 0.8, 0.7, 0.6, 0.9]
                    
                    for index in dataPoints.indices {
                        let xPosition = width * CGFloat(index) / CGFloat(dataPoints.count - 1)
                        let yPosition = stepHeight * (1 - dataPoints[index])
                        
                        if index == 0 {
                            path.move(to: CGPoint(x: xPosition, y: yPosition))
                        } else {
                            path.addLine(to: CGPoint(x: xPosition, y: yPosition))
                        }
                    }
                }
                .stroke(Color.white, lineWidth: 2)
                
                // Draw the points on the graph
                ForEach(0..<7) { index in
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: 10, height: 10)
                        .position(
                            x: geometry.size.width * CGFloat(index) / 6,
                            y: geometry.size.height * (1 - CGFloat(index) / 6) // Dummy y position for illustration
                        )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


test