Flag Quiz Concept

flag_quiz.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Image(systemName: "xmark")
                    .font(Font.title.weight(.bold))
                    .foregroundColor(.gray)
                ZStack(alignment: .leading) {
                    Capsule(style: .circular)
                        .foregroundColor(.gray.opacity(0.1))
                    Capsule(style: .circular)
                        .foregroundColor(.blue)
                        .frame(width: 60)
                }
                .frame(height: 15)
            }
            Spacer()
            AsyncImage(url: URL(string: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/510px-Flag_of_Canada_%28Pantone%29.svg.png")) { image in
                image.resizable()
                    .scaledToFit()
                    .border(Color.gray.opacity(0.1), width: 1)
                    .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
            } placeholder: {
                ProgressView()
            }
            Spacer()
            VStack(alignment: .leading) {
                Text("Which country has this flag?")
                    .font(.system(size: 24, weight: .bold, design: .rounded))
                VStack(spacing: 15) {
                    HStack(spacing: 15) {
                        Text("Canada")
                            .font(.system(size: 24, weight: .bold, design: .rounded))
                            .foregroundColor(.green)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 110, maxHeight: 110, alignment: .center)
                            .background(RoundedRectangle(cornerRadius: 20, style: .continuous)
                                            .foregroundColor(Color.green.opacity(0.1)))
                            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous)
                                        .stroke(Color.green, lineWidth: 2.5))
                        Text("Australia")
                            .font(.system(size: 24, weight: .bold, design: .rounded))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 110, maxHeight: 110, alignment: .center)
                            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous)
                                        .stroke(Color.gray.opacity(0.25), lineWidth: 2.5))
                    }
                    HStack(spacing: 15) {
                        Text("France")
                            .font(.system(size: 24, weight: .bold, design: .rounded))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 110, maxHeight: 110, alignment: .center)
                            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous)
                                        .stroke(Color.gray.opacity(0.25), lineWidth: 2.5))
                        Text("Germany")
                            .font(.system(size: 24, weight: .bold, design: .rounded))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 110, maxHeight: 110, alignment: .center)
                            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous)
                                        .stroke(Color.gray.opacity(0.25), lineWidth: 2.5))
                    }
                }
            }
            Spacer()
            Text("Next")
                .font(.system(size: 24, weight: .bold, design: .rounded))
                .foregroundColor(.white)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50, maxHeight: 50, alignment: .center)
                .background(Capsule()
                                .foregroundColor(.blue))
        }
        .padding()
    }
}