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