bill

glowbom · Sep 9, 2024 · dd47e71 · dd47e71
1 parent cf8f336
commit dd47e71
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 0 deletions.
diff --git a/video/ai-extensions/video-106-bill/AiExtensions.swift b/video/ai-extensions/video-106-bill/AiExtensions.swift
@@ -0,0 +1,102 @@
+import SwiftUI
+
+struct GlowbyScreen: View {
+    static let enabled = true
+    static let title = "Bill Splitter"
+
+    @State private var totalBill: Double = 100.0
+    @State private var people: [Person] = [
+        Person(share: 33.33),
+        Person(share: 33.33),
+        Person(share: 33.34)
+    ]
+
+    var body: some View {
+        VStack {
+            Spacer()
+            HStack {
+                Spacer()
+                ScrollView {
+                    VStack(spacing: 20) {
+                        Text("Bill Splitting App")
+                            .font(.title)
+                            .fontWeight(.bold)
+                            .foregroundColor(.indigo)
+
+                        Image(systemName: "dollarsign.circle.fill")
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .frame(height: 100)
+                            .foregroundColor(.indigo)
+
+                        TextField("Total Bill Amount ($)", value: $totalBill, formatter: NumberFormatter())
+                            .textFieldStyle(RoundedBorderTextFieldStyle())
+                            .keyboardType(.decimalPad)
+
+                        ForEach(people.indices, id: \.self) { index in
+                            PersonShareView(person: $people[index], index: index, totalBill: totalBill)
+                        }
+
+                        SummaryView(totalBill: totalBill, remainingAmount: remainingAmount)
+                    }
+                    .padding()
+                }
+                .frame(maxWidth: 360)
+                Spacer()
+            }
+            Spacer()
+        }
+        .background(Color(.systemGray6))
+    }
+
+    private var remainingAmount: Double {
+        totalBill - people.reduce(0) { $0 + (totalBill * $1.share / 100) }
+    }
+}
+
+struct Person: Identifiable {
+    let id = UUID()
+    var share: Double
+}
+
+struct PersonShareView: View {
+    @Binding var person: Person
+    let index: Int
+    let totalBill: Double
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 5) {
+            Text("Person \(index + 1) Share (%)")
+                .font(.caption)
+                .foregroundColor(.secondary)
+            Slider(value: $person.share, in: 0...100, step: 0.01)
+            HStack {
+                Text("\(person.share, specifier: "%.2f")%")
+                Spacer()
+                Text("$\((totalBill * person.share / 100), specifier: "%.2f")")
+            }
+            .font(.caption)
+            .foregroundColor(.secondary)
+        }
+    }
+}
+
+struct SummaryView: View {
+    let totalBill: Double
+    let remainingAmount: Double
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 10) {
+            Text("Summary")
+                .font(.headline)
+                .foregroundColor(.indigo)
+            Text("Total: $\(totalBill, specifier: "%.2f")")
+                .foregroundColor(.indigo)
+            Text("Remaining: $\(remainingAmount, specifier: "%.2f")")
+                .foregroundColor(.indigo)
+        }
+        .padding()
+        .background(Color(.systemIndigo).opacity(0.1))
+        .cornerRadius(10)
+    }
+}
diff --git a/video/ai-extensions/video-106-bill/bill.html b/video/ai-extensions/video-106-bill/bill.html
@@ -0,0 +1,58 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bill Splitting App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md" x-data="billSplitter()">
+        <h1 class="text-2xl font-bold mb-4 text-center text-indigo-600">Bill Splitting App</h1>
+        <img src="https://picsum.photos/400/200" alt="Bill splitting illustration" class="w-full rounded-lg mb-4">
+
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 mb-2">Total Bill Amount ($)</label>
+            <input type="number" x-model="totalBill" @input="updateShares()" class="w-full p-2 border rounded-md">
+        </div>
+
+        <template x-for="(person, index) in people" :key="index">
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-2" x-text="`Person ${index + 1} Share (%)`"></label>
+                <input type="range" x-model="person.share" @input="updateShares()" min="0" max="100" class="w-full">
+                <div class="flex justify-between text-sm text-gray-600">
+                    <span x-text="`${person.share}%`"></span>
+                    <span x-text="`$${(totalBill * person.share / 100).toFixed(2)}`"></span>
+                </div>
+            </div>
+        </template>
+
+        <div class="mt-6 p-4 bg-indigo-100 rounded-lg">
+            <h2 class="text-lg font-semibold text-indigo-800 mb-2">Summary</h2>
+            <p class="text-indigo-600">Total: $<span x-text="totalBill.toFixed(2)"></span></p>
+            <p class="text-indigo-600">Remaining: $<span x-text="remainingAmount.toFixed(2)"></span></p>
+        </div>
+    </div>
+
+    <script>
+        function billSplitter() {
+            return {
+                totalBill: 100,
+                people: [
+                    { share: 33.33 },
+                    { share: 33.33 },
+                    { share: 33.34 }
+                ],
+                remainingAmount: 0,
+                updateShares() {
+                    let total = this.people.reduce((sum, person) => sum + parseFloat(person.share || 0), 0);
+                    if (total > 100) {
+                        this.people.forEach(person => person.share = (person.share / total) * 100);
+                    }
+                    this.remainingAmount = this.totalBill - this.people.reduce((sum, person) => sum + (this.totalBill * person.share / 100), 0);
+                }
+            }
+        }
+    </script>
+</body>
+</html>