From 46a655784f8daa551049fca45683b3e6fb48b777 Mon Sep 17 00:00:00 2001
From: Jacob <jacob@glowbom.com>
Date: Thu, 11 Jul 2024 11:47:12 -0300
Subject: [PATCH] ceo calendar

---
 video/video-94-ceo/AiExtensions.swift | 96 +++++++++++++++++++++++++++
 video/video-94-ceo/ceo.html           | 85 ++++++++++++++++++++++++
 2 files changed, 181 insertions(+)
 create mode 100644 video/video-94-ceo/AiExtensions.swift
 create mode 100644 video/video-94-ceo/ceo.html

diff --git a/video/video-94-ceo/AiExtensions.swift b/video/video-94-ceo/AiExtensions.swift
new file mode 100644
index 0000000..f2b39ee
--- /dev/null
+++ b/video/video-94-ceo/AiExtensions.swift
@@ -0,0 +1,96 @@
+
+
+
+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 = "Interactive Calendar"
+
+    @State private var selectedEvent: Event? = nil
+
+    struct Event: Identifiable {
+        let id = UUID()
+        let title: String
+        let description: String
+        let image: String
+    }
+
+    let events: [Int: Event] = [
+        1: Event(title: "Event 1", description: "Meeting with investors", image: "https://picsum.photos/200/300?business"),
+        7: Event(title: "Event 2", description: "Product launch", image: "https://picsum.photos/200/300?tech")
+    ]
+
+    var body: some View {
+        VStack {
+            Text("Calendar")
+                .font(.largeTitle)
+                .bold()
+                .padding()
+
+            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 7), spacing: 10) {
+                ForEach(1...31, id: \.self) { day in
+                    ZStack {
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(Color.gray.opacity(0.2))
+                            .frame(height: 50)
+                        if let event = events[day] {
+                            VStack {
+                                Text("\(day)")
+                                Text(event.title)
+                                    .font(.caption)
+                                    .padding(4)
+                                    .background(Color.blue)
+                                    .foregroundColor(.white)
+                                    .cornerRadius(5)
+                                    .onTapGesture {
+                                        selectedEvent = event
+                                    }
+                            }
+                        } else {
+                            Text("\(day)")
+                        }
+                    }
+                }
+            }
+            .padding()
+
+            if let event = selectedEvent {
+                VStack {
+                    Text(event.title)
+                        .font(.title)
+                        .bold()
+                    Text(event.description)
+                        .padding()
+                    AsyncImage(url: URL(string: event.image)) { image in
+                        image
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .frame(maxWidth: 300)
+                    } placeholder: {
+                        ProgressView()
+                    }
+                    Button("Close") {
+                        selectedEvent = nil
+                    }
+                    .padding()
+                    .background(Color.blue)
+                    .foregroundColor(.white)
+                    .cornerRadius(10)
+                }
+                .padding()
+                .background(Color.white)
+                .cornerRadius(10)
+                .shadow(radius: 10)
+                .transition(.scale)
+            }
+        }
+        .frame(maxWidth: 360)
+    }
+}
diff --git a/video/video-94-ceo/ceo.html b/video/video-94-ceo/ceo.html
new file mode 100644
index 0000000..036a22d
--- /dev/null
+++ b/video/video-94-ceo/ceo.html
@@ -0,0 +1,85 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Calendar</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .event {
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 p-6">
+    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
+        <h1 class="text-2xl font-bold mb-4">Calendar</h1>
+        <div class="grid grid-cols-7 gap-4 text-center">
+            <div class="font-bold">Sun</div>
+            <div class="font-bold">Mon</div>
+            <div class="font-bold">Tue</div>
+            <div class="font-bold">Wed</div>
+            <div class="font-bold">Thu</div>
+            <div class="font-bold">Fri</div>
+            <div class="font-bold">Sat</div>
+            <div class="bg-gray-200 rounded-lg p-4">1 <div class="event bg-blue-500 text-white rounded mt-2 p-1" data-title="Event 1" data-description="Meeting with investors" data-image="https://picsum.photos/200/300?business">Event 1</div></div>
+            <div class="bg-gray-200 rounded-lg p-4">2</div>
+            <div class="bg-gray-200 rounded-lg p-4">3</div>
+            <div class="bg-gray-200 rounded-lg p-4">4</div>
+            <div class="bg-gray-200 rounded-lg p-4">5</div>
+            <div class="bg-gray-200 rounded-lg p-4">6</div>
+            <div class="bg-gray-200 rounded-lg p-4">7 <div class="event bg-green-500 text-white rounded mt-2 p-1" data-title="Event 2" data-description="Product launch" data-image="https://picsum.photos/200/300?tech">Event 2</div></div>
+            <div class="bg-gray-200 rounded-lg p-4">8</div>
+            <div class="bg-gray-200 rounded-lg p-4">9</div>
+            <div class="bg-gray-200 rounded-lg p-4">10</div>
+            <div class="bg-gray-200 rounded-lg p-4">11</div>
+            <div class="bg-gray-200 rounded-lg p-4">12</div>
+            <div class="bg-gray-200 rounded-lg p-4">13</div>
+            <div class="bg-gray-200 rounded-lg p-4">14</div>
+            <div class="bg-gray-200 rounded-lg p-4">15</div>
+            <div class="bg-gray-200 rounded-lg p-4">16</div>
+            <div class="bg-gray-200 rounded-lg p-4">17</div>
+            <div class="bg-gray-200 rounded-lg p-4">18</div>
+            <div class="bg-gray-200 rounded-lg p-4">19</div>
+            <div class="bg-gray-200 rounded-lg p-4">20</div>
+            <div class="bg-gray-200 rounded-lg p-4">21</div>
+            <div class="bg-gray-200 rounded-lg p-4">22</div>
+            <div class="bg-gray-200 rounded-lg p-4">23</div>
+            <div class="bg-gray-200 rounded-lg p-4">24</div>
+            <div class="bg-gray-200 rounded-lg p-4">25</div>
+            <div class="bg-gray-200 rounded-lg p-4">26</div>
+            <div class="bg-gray-200 rounded-lg p-4">27</div>
+            <div class="bg-gray-200 rounded-lg p-4">28</div>
+            <div class="bg-gray-200 rounded-lg p-4">29</div>
+            <div class="bg-gray-200 rounded-lg p-4">30</div>
+            <div class="bg-gray-200 rounded-lg p-4">31</div>
+        </div>
+    </div>
+
+    <!-- Modal -->
+    <div id="eventModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg p-6 max-w-lg w-full">
+            <h2 id="eventTitle" class="text-xl font-bold mb-4"></h2>
+            <p id="eventDescription" class="mb-4"></p>
+            <img id="eventImage" class="w-full rounded-lg mb-4" src="" alt="Event Image">
+            <button onclick="closeModal()" class="bg-blue-500 text-white px-4 py-2 rounded">Close</button>
+        </div>
+    </div>
+
+    <script>
+        document.querySelectorAll('.event').forEach(event => {
+            event.addEventListener('click', () => {
+                document.getElementById('eventTitle').innerText = event.getAttribute('data-title');
+                document.getElementById('eventDescription').innerText = event.getAttribute('data-description');
+                document.getElementById('eventImage').src = event.getAttribute('data-image');
+                document.getElementById('eventModal').classList.remove('hidden');
+            });
+        });
+
+        function closeModal() {
+            document.getElementById('eventModal').classList.add('hidden');
+        }
+    </script>
+</body>
+</html>