search

glowbom · Jul 9, 2024 · 40ab9d5 · 40ab9d5
1 parent 3fe7a80
commit 40ab9d5
Show file tree

Hide file tree

Showing 2 changed files with 184 additions and 0 deletions.
diff --git a/video/ai-extensions/video-93-search/AiExtensions.swift b/video/ai-extensions/video-93-search/AiExtensions.swift
@@ -0,0 +1,110 @@
+
+
+
+import SwiftUI
+
+struct GlowbyScreen: View {
+    // This is a designated area where the OpenAI model can add or modify code.
+    // To enable the screen, set this value to true
+    // If it is false, the screen won't be visible in the app
+    static let enabled = true
+
+    // Change the title according to the assigned task
+    // This will be the name of the screen in the app
+    static let title = "Search Results"
+
+    @State private var searchText = ""
+    @State private var selectedCategory = ""
+    @State private var data = [
+        Item(title: "Beautiful Nature Scene", category: "nature", imageUrl: "https://picsum.photos/200/300?nature,forest"),
+        Item(title: "Urban Cityscape", category: "city", imageUrl: "https://picsum.photos/200/300?city,buildings"),
+        Item(title: "Tech Innovation", category: "technology", imageUrl: "https://picsum.photos/200/300?technology,innovation"),
+        Item(title: "Mountain Landscape", category: "nature", imageUrl: "https://picsum.photos/200/300?mountains"),
+        Item(title: "City Nightlife", category: "city", imageUrl: "https://picsum.photos/200/300?city,night"),
+        Item(title: "Futuristic Gadget", category: "technology", imageUrl: "https://picsum.photos/200/300?gadget,technology")
+    ]
+
+    var filteredData: [Item] {
+        data.filter { item in
+            (item.title.lowercased().contains(searchText.lowercased()) || searchText.isEmpty) &&
+            (item.category == selectedCategory || selectedCategory.isEmpty)
+        }
+    }
+
+    var body: some View {
+        VStack {
+            Text("Search Results")
+                .font(.largeTitle)
+                .fontWeight(.bold)
+                .padding(.bottom, 20)
+
+            HStack {
+                TextField("Search...", text: $searchText)
+                    .textFieldStyle(RoundedBorderTextFieldStyle())
+                    .padding(.trailing, 10)
+
+                Picker("Category", selection: $selectedCategory) {
+                    Text("All Categories").tag("")
+                    Text("Nature").tag("nature")
+                    Text("City").tag("city")
+                    Text("Technology").tag("technology")
+                }
+                .pickerStyle(MenuPickerStyle())
+                .padding(.trailing, 10)
+
+                Button(action: {
+                    // Apply filters
+                }) {
+                    Text("Apply Filters")
+                        .padding()
+                        .background(Color.blue)
+                        .foregroundColor(.white)
+                        .cornerRadius(8)
+                }
+            }
+            .padding(.bottom, 20)
+
+            ScrollView {
+                LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
+                    ForEach(filteredData) { item in
+                        VStack {
+                            AsyncImage(url: URL(string: item.imageUrl)) { image in
+                                image
+                                    .resizable()
+                                    .aspectRatio(contentMode: .fill)
+                                    .frame(width: 180, height: 120)
+                                    .clipped()
+                            } placeholder: {
+                                ProgressView()
+                            }
+                            .frame(width: 180, height: 120)
+                            .background(Color.gray.opacity(0.3))
+                            .cornerRadius(10)
+
+                            Text(item.title)
+                                .font(.headline)
+                                .padding(.top, 5)
+
+                            Text("Category: \(item.category)")
+                                .font(.subheadline)
+                                .foregroundColor(.gray)
+                        }
+                        .padding()
+                        .background(Color.white)
+                        .cornerRadius(10)
+                        .shadow(radius: 5)
+                    }
+                }
+                .padding(.horizontal)
+            }
+        }
+        .padding()
+    }
+}
+
+struct Item: Identifiable {
+    let id = UUID()
+    let title: String
+    let category: String
+    let imageUrl: String
+}
diff --git a/video/ai-extensions/video-93-search/search.html b/video/ai-extensions/video-93-search/search.html
@@ -0,0 +1,74 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search Results</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 p-6">
+    <div class="max-w-7xl mx-auto">
+        <h1 class="text-3xl font-bold mb-6">Search Results</h1>
+        <div class="flex space-x-4 mb-6">
+            <input id="searchInput" type="text" placeholder="Search..." class="flex-1 p-2 border border-gray-300 rounded">
+            <select id="categoryFilter" class="p-2 border border-gray-300 rounded">
+                <option value="">All Categories</option>
+                <option value="nature">Nature</option>
+                <option value="city">City</option>
+                <option value="technology">Technology</option>
+            </select>
+            <button onclick="applyFilters()" class="bg-blue-500 text-white p-2 rounded">Apply Filters</button>
+        </div>
+        <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Cards will be inserted here by JavaScript -->
+        </div>
+    </div>
+
+    <script>
+        const data = [
+            { title: "Beautiful Nature Scene", category: "nature", imageUrl: "https://picsum.photos/200/300?nature,forest" },
+            { title: "Urban Cityscape", category: "city", imageUrl: "https://picsum.photos/200/300?city,buildings" },
+            { title: "Tech Innovation", category: "technology", imageUrl: "https://picsum.photos/200/300?technology,innovation" },
+            { title: "Mountain Landscape", category: "nature", imageUrl: "https://picsum.photos/200/300?mountains" },
+            { title: "City Nightlife", category: "city", imageUrl: "https://picsum.photos/200/300?city,night" },
+            { title: "Futuristic Gadget", category: "technology", imageUrl: "https://picsum.photos/200/300?gadget,technology" }
+        ];
+
+        function renderResults(results) {
+            const resultsGrid = document.getElementById('resultsGrid');
+            resultsGrid.innerHTML = '';
+            results.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'bg-white rounded-lg shadow-md overflow-hidden';
+                card.innerHTML = `
+                    <img src="${item.imageUrl}" alt="${item.title}" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h2 class="text-xl font-bold mb-2">${item.title}</h2>
+                        <p class="text-gray-600">Category: ${item.category}</p>
+                    </div>
+                `;
+                resultsGrid.appendChild(card);
+            });
+        }
+
+        function applyFilters() {
+            const searchInput = document.getElementById('searchInput').value.toLowerCase();
+            const categoryFilter = document.getElementById('categoryFilter').value;
+            const filteredResults = data.filter(item => {
+                return (item.title.toLowerCase().includes(searchInput) || searchInput === '') &&
+                       (item.category === categoryFilter || categoryFilter === '');
+            });
+            renderResults(filteredResults);
+        }
+
+        // Initial render
+        renderResults(data);
+    </script>
+</body>
+</html>