bro1908/seismicwaves-explorer
0
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>Preview Mode | SeismicWaves Explorer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="components/navbar.js"></script>11 <script src="components/footer.js"></script>12 <style>13 .preview-container {14 height: calc(100vh - 64px);15 display: grid;16 grid-template-columns: 1fr;17 grid-template-rows: auto 1fr;18 }19 .iframe-container {20 width: 100%;21 height: 100%;22 border: none;23 }24 .preview-controls {25 background: #f3f4f6;26 padding: 1rem;27 border-bottom: 1px solid #e5e7eb;28 }29 </style>30</head>31<body class="bg-gray-50">32 <custom-navbar></custom-navbar>33 34 <div class="preview-container">35 <div class="preview-controls flex items-center justify-between">36 <h2 class="text-lg font-semibold">Preview Mode</h2>37 <div class="flex space-x-2">38 <a href="index.html" class="px-4 py-2 bg-primary text-white rounded hover:bg-blue-700 transition flex items-center">39 <i data-feather="x" class="mr-2 w-4 h-4"></i> Exit Preview40 </a>41 <button id="refresh-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition flex items-center">42 <i data-feather="refresh-cw" class="mr-2 w-4 h-4"></i> Refresh43 </button>44 </div>45 </div>46 <div class="iframe-container">47 <iframe id="preview-frame" src="index.html" frameborder="0" width="100%" height="100%"></iframe>48 </div>49 </div>50 51 <custom-footer></custom-footer>52 53 <script>54 feather.replace();55 56 document.getElementById('refresh-btn').addEventListener('click', () => {57 const frame = document.getElementById('preview-frame');58 frame.src = frame.src;59 });60 61 // Listen for messages from the iframe62 window.addEventListener('message', (event) => {63 if (event.data === 'requestRefresh') {64 document.getElementById('preview-frame').src = document.getElementById('preview-frame').src;65 }66 });67 </script>68</body>69</html>