2021_day2_ordering.swift

//
//  ContentView.swift
//  Day2
//
//  Created by Amos Gyamfi on 2.1.2021.
//

import SwiftUI

struct ContentView: View {
    
    @State private var moveDashPhase = false
    @State private var moving = false
    
    var body: some View {
        VStack {
            
            Image("logo")
            
            ZStack {
                Circle()
                    .frame(width: 332, height: 332)
                    .foregroundColor(Color(#colorLiteral(red: 0.5137254902, green: 0.7215686275, blue: 0.9294117647, alpha: 1)))
                
                VStack(spacing: 50) {
                    Image(systemName: "house.fill")
                        .font(.system(size: 104))
                        .offset(y: -40)
                    
                    Text("Order Now")
                        .offset(x: 10, y: 8)
                }
                
                Path { path in
                           
                    path.move(to: CGPoint(x: 20.204018, y: 1))
                    path.addLine(to: CGPoint(x: 19.17432, y: 1))
                    path.addCurve(to: CGPoint(x: 1, y: 19.17432), control1: CGPoint(x: 9.13692, y: 1), control2: CGPoint(x: 1, y: 9.13692))
                    path.addCurve(to: CGPoint(x: 1, y: 19.17432), control1: CGPoint(x: 1, y: 19.17432), control2: CGPoint(x: 1, y: 19.17432))
                    path.addCurve(to: CGPoint(x: 1, y: 19.17432), control1: CGPoint(x: 1, y: 19.17432), control2: CGPoint(x: 1, y: 19.17432))
                    path.addCurve(to: CGPoint(x: 19.17432, y: 37.34864), control1: CGPoint(x: 1, y: 29.21172), control2: CGPoint(x: 9.13692, y: 37.34864))
                    path.addLine(to: CGPoint(x: 99, y: 37.34864))
                    path.addCurve(to: CGPoint(x: 125, y: 63.34864), control1: CGPoint(x: 113.359406, y: 37.34864), control2: CGPoint(x: 125, y: 48.989239))
                    path.addCurve(to: CGPoint(x: 125, y: 65.596107), control1: CGPoint(x: 125, y: 64.097794), control2: CGPoint(x: 125, y: 64.846954))
                    path.addCurve(to: CGPoint(x: 125, y: 67.843575), control1: CGPoint(x: 125, y: 66.345261), control2: CGPoint(x: 125, y: 67.094414))
                    path.addCurve(to: CGPoint(x: 99, y: 93.843575), control1: CGPoint(x: 125, y: 82.202972), control2: CGPoint(x: 113.359406, y: 93.843575))
                    path.addLine(to: CGPoint(x: 39.185356, y: 93.843575))
                    path.addCurve(to: CGPoint(x: 15.607131, y: 117.421783), control1: CGPoint(x: 26.163462, y: 93.843559), control2: CGPoint(x: 15.607131, y: 104.399895))
                    path.addCurve(to: CGPoint(x: 15.607131, y: 117.421783), control1: CGPoint(x: 15.607131, y: 117.421783), control2: CGPoint(x: 15.607131, y: 117.421783))
                    path.addCurve(to: CGPoint(x: 15.607131, y: 117.421783), control1: CGPoint(x: 15.607131, y: 117.421783), control2: CGPoint(x: 15.607131, y: 117.421783))
                    path.addCurve(to: CGPoint(x: 39.18531, y: 141), control1: CGPoint(x: 15.607131, y: 130.443649), control2: CGPoint(x: 26.163443, y: 140.999969))
                    path.addLine(to: CGPoint(x: 56.938484, y: 141))
                    path.addLine(to: CGPoint(x: 56.938484, y: 141))
                    path.addLine(to: CGPoint(x: 99, y: 141))
                    path.addCurve(to: CGPoint(x: 125, y: 115), control1: CGPoint(x: 113.359406, y: 141), control2: CGPoint(x: 125, y: 129.359406))
                    path.addLine(to: CGPoint(x: 125, y: 102.660721))
                    path.addLine(to: CGPoint(x: 125, y: 102.660721))
                    
                }.stroke(style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round,  dash: [7, 7], dashPhase: moveDashPhase ? -100 : 100))
                .offset(x: 146, y: 260)
                .animation(Animation.linear(duration: 30).repeatForever(autoreverses: false).speed(2.5))
                .onAppear(){
                    moveDashPhase.toggle()
                }
                
                Image("deliverer")
                    .rotationEffect(.degrees(moving ? 2 : -2))
                    .offset(y: moving ? 48 : 45)
                    .animation(Animation.linear(duration: 0.5
                    ).repeatForever(autoreverses: true).speed(2))
                    .onAppear(){
                        moving.toggle()
                    }
                
            }
            
            VStack {
                Text("Track Your Order")
                    .font(.system(size: 22))
                Text("See your order in real-time")
                    .foregroundColor(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)))
            }.padding()
           
           
            
            
            HStack {
                Circle()
                    .frame(width: 9, height: 9)
                ForEach(0 ..< 4) { item in
                    Circle()
                        .frame(width: 9, height: 9)
                        .foregroundColor(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)))
                }
            }  // Indicators
            
            HStack(spacing: 30) {
                RoundedRectangle(cornerRadius: 4)
                    .stroke()
                    .frame(width: 160, height: 48, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .overlay(Text("Sign In"))
                
                RoundedRectangle(cornerRadius: 4)
                    .frame(width: 160, height: 48, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .foregroundColor(Color(#colorLiteral(red: 0.5137254902, green: 0.7215686275, blue: 0.9294117647, alpha: 1)))
                    .overlay(Text("Get Started"))
            }.padding()
            
        } // Container for all views
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
    }
}