some changes

README.md

@@ -1,6 +1,6 @@
 ---
 title: NoteGenie
-emoji: 👁
+emoji: 📔
 colorFrom: red
 colorTo: pink
 sdk: docker

static/css/style.css

@@ -759,3 +759,48 @@ h1, h2, h3, h4, h5, h6 {
         height: 32px;
     }
 }
+
+/* Developer Info Modal Styles */
+.creator-section {
+    padding: var(--spacing-md);
+    background-color: var(--google-background);
+    border-radius: var(--border-radius);
+}
+
+.section-title {
+    margin-bottom: var(--spacing-md);
+    color: var(--google-blue);
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+    font-size: 18px;
+}
+
+.developer-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.developer-detail {
+    font-size: 15px;
+    line-height: 1.5;
+}
+
+.developer-detail a {
+    color: var(--google-blue);
+    text-decoration: none;
+}
+
+.developer-detail a:hover {
+    text-decoration: underline;
+}
+
+.contact-cta {
+    margin-top: var(--spacing-lg);
+}
+
+.call-to-action {
+    font-family: 'Google Sans', 'Roboto', sans-serif;
+    font-weight: 500;
+    color: var(--google-text-primary);
+    font-size: 16px;
+}

templates/index.html

@@ -27,6 +27,10 @@
                     <h1 class="product-name">NoteGenie</h1>
                 </div>
                 <div class="header-actions">
+                    <button class="google-button outlined" data-bs-toggle="modal" data-bs-target="#infoModal">
+                        <span class="material-icons">info</span>
+                        <span>Info</span>
+                    </button>
                     <button class="google-button outlined" data-bs-toggle="modal" data-bs-target="#apiKeyModal">
                         <span class="material-icons">vpn_key</span>
                         <span>API Key</span>
@@ -174,6 +178,46 @@
         </div>
     </div>
 
+    <!-- Info Modal -->
+    <div class="modal fade" id="infoModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content google-modal">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        <span class="material-icons">info</span>
+                        About NoteGenie
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="info-card mb-4">
+                        <span class="material-icons info-icon">auto_awesome</span>
+                        <div class="info-content">
+                            <p>NoteGenie is an AI-powered tool that generates Jupyter notebooks from text prompts using Google's Gemini AI.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="creator-section">
+                        <h5 class="section-title">Developer Information</h5>
+                        <div class="developer-info">
+                            <div class="developer-detail"><strong>Name:</strong> Ziad Mostafa</div>
+                            <div class="developer-detail"><strong>Email:</strong> <a href="mailto:ziad.zero1245@gmail.com">ziad.zero1245@gmail.com</a></div>
+                            <div class="developer-detail"><strong>GitHub:</strong> <a href="https://github.com/ziadmostafa1" target="_blank">github.com/ziadmostafa1</a></div>
+                            <div class="developer-detail"><strong>Website:</strong> <a href="https://ziadai.me" target="_blank">ziadai.me</a></div>
+                        </div>
+                    </div>
+                    
+                    <div class="contact-cta mt-4 text-center">
+                        <p class="call-to-action">Feel free to reach out for collaborations, projects, or job opportunities!</p>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="google-button primary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Floating scroll button -->
     <button class="scroll-button" id="scrollToBottomBtn">
         <span class="material-icons">keyboard_arrow_down</span>