Skip to content

Commit 6f5eef3

Browse files
mattsceptermattscepter
authored
Create page10.html
1 parent 23084e0 commit 6f5eef3

File tree

1 file changed

+397
-0
lines changed

1 file changed

+397
-0
lines changed

‎page10.html‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
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>Dynamic Iframe Website</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17+
min-height: 100vh;
18+
color: #333;
19+
}
20+
21+
.container {
22+
max-width: 1200px;
23+
margin: 0 auto;
24+
padding: 20px;
25+
}
26+
27+
header {
28+
text-align: center;
29+
margin-bottom: 40px;
30+
padding: 30px;
31+
background: rgba(255, 255, 255, 0.1);
32+
backdrop-filter: blur(10px);
33+
border-radius: 20px;
34+
border: 1px solid rgba(255, 255, 255, 0.2);
35+
}
36+
37+
h1 {
38+
color: white;
39+
font-size: 3rem;
40+
margin-bottom: 10px;
41+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
42+
}
43+
44+
.subtitle {
45+
color: rgba(255, 255, 255, 0.8);
46+
font-size: 1.2rem;
47+
}
48+
49+
.controls {
50+
display: grid;
51+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
52+
gap: 20px;
53+
margin-bottom: 30px;
54+
}
55+
56+
.control-group {
57+
background: rgba(255, 255, 255, 0.95);
58+
padding: 25px;
59+
border-radius: 15px;
60+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
61+
transition: transform 0.3s ease, box-shadow 0.3s ease;
62+
}
63+
64+
.control-group:hover {
65+
transform: translateY(-5px);
66+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
67+
}
68+
69+
.control-group h3 {
70+
margin-bottom: 15px;
71+
color: #4a5568;
72+
font-size: 1.3rem;
73+
}
74+
75+
.btn-grid {
76+
display: grid;
77+
grid-template-columns: 1fr 1fr;
78+
gap: 10px;
79+
}
80+
81+
button {
82+
padding: 12px 20px;
83+
border: none;
84+
border-radius: 8px;
85+
cursor: pointer;
86+
font-weight: 600;
87+
transition: all 0.3s ease;
88+
font-size: 0.9rem;
89+
}
90+
91+
.btn-primary {
92+
background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
93+
color: white;
94+
}
95+
96+
.btn-primary:hover {
97+
transform: scale(1.05);
98+
box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
99+
}
100+
101+
.btn-secondary {
102+
background: linear-gradient(45deg, #fa709a 0%, #fee140 100%);
103+
color: white;
104+
}
105+
106+
.btn-secondary:hover {
107+
transform: scale(1.05);
108+
box-shadow: 0 5px 15px rgba(250, 112, 154, 0.4);
109+
}
110+
111+
.btn-tertiary {
112+
background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
113+
color: #333;
114+
}
115+
116+
.btn-tertiary:hover {
117+
transform: scale(1.05);
118+
box-shadow: 0 5px 15px rgba(168, 237, 234, 0.4);
119+
}
120+
121+
.iframe-container {
122+
display: grid;
123+
grid-template-columns: 1fr 1fr;
124+
gap: 20px;
125+
margin-bottom: 30px;
126+
}
127+
128+
.iframe-wrapper {
129+
background: white;
130+
border-radius: 15px;
131+
padding: 15px;
132+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
133+
position: relative;
134+
overflow: hidden;
135+
}
136+
137+
.iframe-wrapper::before {
138+
content: '';
139+
position: absolute;
140+
top: 0;
141+
left: 0;
142+
right: 0;
143+
height: 40px;
144+
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
145+
z-index: 1;
146+
}
147+
148+
.iframe-title {
149+
position: relative;
150+
z-index: 2;
151+
color: white;
152+
font-weight: bold;
153+
text-align: center;
154+
padding: 10px;
155+
margin: -15px -15px 15px -15px;
156+
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
157+
}
158+
159+
iframe {
160+
width: 100%;
161+
height: 400px;
162+
border: none;
163+
border-radius: 10px;
164+
transition: all 0.3s ease;
165+
}
166+
167+
.iframe-wrapper:hover iframe {
168+
transform: scale(1.02);
169+
}
170+
171+
.url-input {
172+
width: 100%;
173+
padding: 12px;
174+
border: 2px solid #e2e8f0;
175+
border-radius: 8px;
176+
margin-bottom: 10px;
177+
font-size: 1rem;
178+
transition: border-color 0.3s ease;
179+
}
180+
181+
.url-input:focus {
182+
outline: none;
183+
border-color: #4facfe;
184+
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
185+
}
186+
187+
.status {
188+
margin-top: 20px;
189+
padding: 15px;
190+
background: rgba(255, 255, 255, 0.9);
191+
border-radius: 10px;
192+
border-left: 4px solid #4facfe;
193+
}
194+
195+
@media (max-width: 768px) {
196+
.iframe-container {
197+
grid-template-columns: 1fr;
198+
}
199+
200+
.btn-grid {
201+
grid-template-columns: 1fr;
202+
}
203+
204+
h1 {
205+
font-size: 2rem;
206+
}
207+
}
208+
209+
.loading {
210+
opacity: 0.7;
211+
pointer-events: none;
212+
}
213+
</style>
214+
</head>
215+
<body>
216+
<div class="container">
217+
<header>
218+
<h1>Dynamic Iframe Website</h1>
219+
<p class="subtitle">Dynamically load and control iframe content</p>
220+
</header>
221+
222+
<div class="controls">
223+
<div class="control-group">
224+
<h3>🌐 Popular Sites</h3>
225+
<div class="btn-grid">
226+
<button class="btn-primary" onclick="loadSite('iframe1', 'https://example.com')">Example.com</button>
227+
<button class="btn-primary" onclick="loadSite('iframe2', 'https://httpbin.org/html')">HTTPBin HTML</button>
228+
<button class="btn-secondary" onclick="loadSite('iframe1', 'https://jsonplaceholder.typicode.com/')">JSON Placeholder</button>
229+
<button class="btn-secondary" onclick="loadSite('iframe2', 'https://reqres.in/')">ReqRes API</button>
230+
</div>
231+
</div>
232+
233+
<div class="control-group">
234+
<h3>🔧 Tools & Demos</h3>
235+
<div class="btn-grid">
236+
<button class="btn-tertiary" onclick="loadSite('iframe1', 'https://codepen.io/trending')">CodePen</button>
237+
<button class="btn-tertiary" onclick="loadSite('iframe2', 'https://developer.mozilla.org/en-US/')">MDN Docs</button>
238+
<button class="btn-primary" onclick="loadSite('iframe1', 'https://www.w3schools.com/')">W3Schools</button>
239+
<button class="btn-secondary" onclick="loadSite('iframe2', 'https://caniuse.com/')">Can I Use</button>
240+
</div>
241+
</div>
242+
243+
<div class="control-group">
244+
<h3>🎯 Custom URL</h3>
245+
<input type="url" id="customUrl" class="url-input" placeholder="Enter any URL (https://...)">
246+
<div class="btn-grid">
247+
<button class="btn-primary" onclick="loadCustomUrl('iframe1')">Load in Frame 1</button>
248+
<button class="btn-secondary" onclick="loadCustomUrl('iframe2')">Load in Frame 2</button>
249+
</div>
250+
</div>
251+
252+
<div class="control-group">
253+
<h3>⚡ Actions</h3>
254+
<div class="btn-grid">
255+
<button class="btn-tertiary" onclick="refreshIframes()">Refresh Both</button>
256+
<button class="btn-tertiary" onclick="clearIframes()">Clear Both</button>
257+
<button class="btn-primary" onclick="resizeIframes()">Toggle Size</button>
258+
<button class="btn-secondary" onclick="swapIframes()">Swap Content</button>
259+
</div>
260+
</div>
261+
</div>
262+
263+
<div class="iframe-container">
264+
<div class="iframe-wrapper">
265+
<div class="iframe-title">Frame 1</div>
266+
<iframe id="iframe1" src="about:blank"></iframe>
267+
</div>
268+
<div class="iframe-wrapper">
269+
<div class="iframe-title">Frame 2</div>
270+
<iframe id="iframe2" src="about:blank"></iframe>
271+
</div>
272+
</div>
273+
274+
<div class="status" id="status">
275+
Ready to load content. Click any button above to get started!
276+
</div>
277+
</div>
278+
279+
<script>
280+
let isResized = false;
281+
282+
function loadSite(iframeId, url) {
283+
const iframe = document.getElementById(iframeId);
284+
const wrapper = iframe.closest('.iframe-wrapper');
285+
286+
wrapper.classList.add('loading');
287+
updateStatus(`Loading ${url} in ${iframeId}...`);
288+
289+
iframe.src = url;
290+
291+
iframe.onload = function() {
292+
wrapper.classList.remove('loading');
293+
updateStatus(`✅ Successfully loaded ${url} in ${iframeId}`);
294+
};
295+
296+
iframe.onerror = function() {
297+
wrapper.classList.remove('loading');
298+
updateStatus(`❌ Failed to load ${url} in ${iframeId}`);
299+
};
300+
}
301+
302+
function loadCustomUrl(iframeId) {
303+
const url = document.getElementById('customUrl').value.trim();
304+
305+
if (!url) {
306+
updateStatus('❌ Please enter a URL');
307+
return;
308+
}
309+
310+
if (!url.startsWith('http://') && !url.startsWith('https://')) {
311+
updateStatus('❌ URL must start with http:// or https://');
312+
return;
313+
}
314+
315+
loadSite(iframeId, url);
316+
}
317+
318+
function refreshIframes() {
319+
const iframe1 = document.getElementById('iframe1');
320+
const iframe2 = document.getElementById('iframe2');
321+
322+
if (iframe1.src && iframe1.src !== 'about:blank') {
323+
iframe1.src = iframe1.src;
324+
}
325+
if (iframe2.src && iframe2.src !== 'about:blank') {
326+
iframe2.src = iframe2.src;
327+
}
328+
329+
updateStatus('🔄 Refreshed both iframes');
330+
}
331+
332+
function clearIframes() {
333+
document.getElementById('iframe1').src = 'about:blank';
334+
document.getElementById('iframe2').src = 'about:blank';
335+
updateStatus('🧹 Cleared both iframes');
336+
}
337+
338+
function resizeIframes() {
339+
const iframes = document.querySelectorAll('iframe');
340+
341+
if (!isResized) {
342+
iframes.forEach(iframe => {
343+
iframe.style.height = '600px';
344+
});
345+
updateStatus('📏 Increased iframe height to 600px');
346+
isResized = true;
347+
} else {
348+
iframes.forEach(iframe => {
349+
iframe.style.height = '400px';
350+
});
351+
updateStatus('📏 Reset iframe height to 400px');
352+
isResized = false;
353+
}
354+
}
355+
356+
function swapIframes() {
357+
const iframe1 = document.getElementById('iframe1');
358+
const iframe2 = document.getElementById('iframe2');
359+
360+
const temp = iframe1.src;
361+
iframe1.src = iframe2.src;
362+
iframe2.src = temp;
363+
364+
updateStatus('🔄 Swapped iframe content');
365+
}
366+
367+
function updateStatus(message) {
368+
const status = document.getElementById('status');
369+
status.innerHTML = message;
370+
status.style.animation = 'none';
371+
status.offsetHeight; // Trigger reflow
372+
status.style.animation = 'pulse 0.5s ease-in-out';
373+
}
374+
375+
// Add some CSS animation
376+
const style = document.createElement('style');
377+
style.textContent = `
378+
@keyframes pulse {
379+
0% { transform: scale(1); }
380+
50% { transform: scale(1.02); }
381+
100% { transform: scale(1); }
382+
}
383+
`;
384+
document.head.appendChild(style);
385+
386+
// Handle Enter key in custom URL input
387+
document.getElementById('customUrl').addEventListener('keypress', function(e) {
388+
if (e.key === 'Enter') {
389+
loadCustomUrl('iframe1');
390+
}
391+
});
392+
393+
// Initialize with a welcome message
394+
updateStatus('🚀 Dynamic Iframe Website loaded! Try loading some content.');
395+
</script>
396+
</body>
397+
</html>

0 commit comments

Comments
 (0)