Hugging Face's logo

Spaces:
N-Bot-Int
/
FocusedAI
Running

App Files Community
ItsMeDevRoland commited on
Commit
ade3ac9
·
verified ·
1 Parent(s): d27a65f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +150 -19
index.html CHANGED
@@ -1,19 +1,150 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FocusedAI Embedded</title>
7
+ <style>
8
+ /* Reset default margins and make container full-screen */
9
+ body, html {
10
+ margin: 0;
11
+ padding: 0;
12
+ width: 100%;
13
+ height: 100%;
14
+ overflow: hidden;
15
+ }
16
+
17
+ /* Full-screen iframe container */
18
+ .iframe-container {
19
+ position: absolute;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ border: none;
25
+ }
26
+
27
+ /* Custom overlay controls (optional) */
28
+ .custom-controls {
29
+ position: fixed;
30
+ top: 10px;
31
+ right: 10px;
32
+ z-index: 1000;
33
+ background-color: rgba(0, 0, 0, 0.7);
34
+ color: white;
35
+ padding: 10px;
36
+ border-radius: 5px;
37
+ font-family: Arial, sans-serif;
38
+ }
39
+
40
+ .custom-controls button {
41
+ background-color: #4CAF50;
42
+ border: none;
43
+ color: white;
44
+ padding: 5px 10px;
45
+ text-align: center;
46
+ text-decoration: none;
47
+ display: inline-block;
48
+ font-size: 14px;
49
+ margin: 2px;
50
+ cursor: pointer;
51
+ border-radius: 3px;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body>
56
+ <!-- Optional custom controls overlay -->
57
+ <div class="custom-controls">
58
+ <button id="toggleSearchBar">Toggle Search</button>
59
+ <button id="goHome">Home</button>
60
+ </div>
61
+
62
+ <!-- Iframe to embed your website -->
63
+ <iframe id="focusedai-frame" class="iframe-container" src="https://focusedai.web.app" allowfullscreen></iframe>
64
+
65
+ <script>
66
+ document.addEventListener('DOMContentLoaded', function() {
67
+ // Get the iframe element
68
+ const iframe = document.getElementById('focusedai-frame');
69
+ let searchBarHidden = false;
70
+
71
+ // Function to hide search bar once iframe is loaded
72
+ iframe.onload = function() {
73
+ hideSearchBar();
74
+ };
75
+
76
+ // Toggle search bar visibility
77
+ document.getElementById('toggleSearchBar').addEventListener('click', function() {
78
+ if (searchBarHidden) {
79
+ showSearchBar();
80
+ searchBarHidden = false;
81
+ } else {
82
+ hideSearchBar();
83
+ searchBarHidden = true;
84
+ }
85
+ });
86
+
87
+ // Navigate to homepage
88
+ document.getElementById('goHome').addEventListener('click', function() {
89
+ iframe.src = 'https://focusedai.web.app';
90
+ });
91
+
92
+ // Function to hide search bar
93
+ function hideSearchBar() {
94
+ try {
95
+ const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
96
+ // Target the search bar element - you'll need to update the selector based on your site's structure
97
+ const searchBar = iframeDocument.querySelector('.search-bar'); // Update this selector
98
+
99
+ if (searchBar) {
100
+ searchBar.style.display = 'none';
101
+ searchBarHidden = true;
102
+ }
103
+
104
+ // hide other elements as needed
105
+ // Example: hiding header, navigation, etc.
106
+ // const header = iframeDocument.querySelector('header');
107
+ // if (header) header.style.display = 'none';
108
+ } catch (e) {
109
+ console.error('Could not access iframe content:', e);
110
+ }
111
+ }
112
+
113
+ // Function to show search bar
114
+ function showSearchBar() {
115
+ try {
116
+ const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
117
+ const searchBar = iframeDocument.querySelector('.search-bar'); // Update this selector
118
+
119
+ if (searchBar) {
120
+ searchBar.style.display = 'block';
121
+ searchBarHidden = false;
122
+ }
123
+ } catch (e) {
124
+ console.error('Could not access iframe content:', e);
125
+ }
126
+ }
127
+
128
+ // Handle messages from the iframe (optional)
129
+ window.addEventListener('message', function(event) {
130
+ // Check origin for security
131
+ if (event.origin !== 'https://focusedai.web.app') return;
132
+
133
+ // Process messages from your website
134
+ console.log('Message from iframe:', event.data);
135
+
136
+ // Example: handle navigation events or other custom messages
137
+ // if (event.data.type === 'navigate') {
138
+ // // Do something based on navigation
139
+ // }
140
+ });
141
+ });
142
+
143
+ // Function to communicate with the iframe
144
+ function sendMessageToIframe(message) {
145
+ const iframe = document.getElementById('focusedai-frame');
146
+ iframe.contentWindow.postMessage(message, 'https://focusedai.web.app');
147
+ }
148
+ </script>
149
+ </body>
150
+ </html>