ADDED A SEARCH BAR

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

ViewController.swift

@@ -0,0 +1,26 @@
+import UIKit
+
+class MainViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
+
+    // Connect this to your "Add Story" button in Interface Builder
+    @IBAction func addStoryButtonTapped(_ sender: UIButton) {
+        let imagePicker = UIImagePickerController()
+        imagePicker.delegate = self
+        imagePicker.sourceType = .camera // or .photoLibrary if you prefer
+        present(imagePicker, animated: true, completion: nil)
+    }
+
+    // MARK: - UIImagePickerControllerDelegate
+
+    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
+        if let image = info[.originalImage] as? UIImage {
+            // Handle the selected image here, you can save it, process it, or upload it
+            // You might want to navigate the user to another screen for editing or adding captions
+        }
+        picker.dismiss(animated: true, completion: nil)
+    }
+
+    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
+        picker.dismiss(animated: true, completion: nil)
+    }
+}

app/.dart_tool/main.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'search_page.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Search Bar',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: SearchPage(),
+    );
+  }
+}

app/.dart_tool/search_page.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+class SearchPage extends StatefulWidget {
+  @override
+  _SearchPageState createState() => _SearchPageState();
+}
+
+class _SearchPageState extends State<SearchPage> {
+  TextEditingController _searchController = TextEditingController();
+  List<String> _dataList = ["Item 1", "Item 2", "Item 3", "Item 4"];
+  List<String> _searchResult = [];
+
+  @override
+  void initState() {
+    super.initState();
+    _searchResult.addAll(_dataList);
+  }
+
+  void _filterSearchResults(String query) {
+    List<String> searchResults = [];
+    if (query.isNotEmpty) {
+      _dataList.forEach((item) {
+        if (item.toLowerCase().contains(query.toLowerCase())) {
+          searchResults.add(item);
+        }
+      });
+    } else {
+      searchResults.addAll(_dataList);
+    }
+
+    setState(() {
+      _searchResult.clear();
+      _searchResult.addAll(searchResults);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Search Page"),
+      ),
+      body: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: TextField(
+              controller: _searchController,
+              onChanged: (value) {
+                _filterSearchResults(value);
+              },
+              decoration: InputDecoration(
+                labelText: "Search",
+                hintText: "Search...",
+                prefixIcon: Icon(Icons.search),
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.all(
+                    Radius.circular(25.0),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Expanded(
+            child: ListView.builder(
+              itemCount: _searchResult.length,
+              itemBuilder: (context, index) {
+                return ListTile(
+                  title: Text(_searchResult[index]),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

app/android/app/src/debug/script.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const storyButton = document.getElementById('storyButton');
+
+    storyButton.addEventListener('click', function () {
+        // Toggle the 'active' class to change the button appearance
+        storyButton.classList.toggle('active');
+
+        // Add your logic to handle the story creation or navigation
+        if (storyButton.classList.contains('active')) {
+            // The button is active, handle story creation or navigation
+            handleStoryClick();
+        } else {
+            // The button is not active, handle closing the story or other actions
+            handleStoryClose();
+        }
+    });
+});
+
+function handleStoryClick() {
+    // Add your logic for story creation or navigation when the button is clicked
+    console.log('Story button clicked - handle story creation or navigation.');
+}
+
+function handleStoryClose() {
+    // Add your logic for closing the story or other actions when the button is not active
+    console.log('Story button closed - handle closing the story or other actions.');
+}

app/android/app/src/debug/styles.css

@@ -0,0 +1,17 @@
+/* Add your styles here */
+.container {
+    padding: 20px;
+}
+
+.story-button {
+    padding: 10px 20px;
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.story-button.active {
+    background-color: #e74c3c; /* Change the color when active */
+}

app/windows/runner/h.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css"> <!-- Add your styles if necessary -->
+    <title>Your App</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to Your App</h1>
+        <input type="text" id="searchInput" placeholder="Search...">
+        <ul id="searchResults"></ul> <!-- Display search results here, if needed -->
+    </div>
+    <script src="script.js"></script> <!-- Add your JavaScript file -->
+</body>
+</html>

app/windows/runner/sytles.css

@@ -0,0 +1,10 @@
+/* Add your styles here */
+.container {
+    padding: 20px;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+}