Skip to content

Instantly share code, notes, and snippets.

@jabed-web-dev

jabed-web-dev/preview.html

Created November 9, 2022 07:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jabed-web-dev/edd80edb0630d147c951de4cf8e1646f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jabed-web-dev/edd80edb0630d147c951de4cf8e1646f to your computer and use it in GitHub Desktop.
Download ZIP
resize iframe and change color scheme
Raw
preview.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
/*! tailwindcss v3.2.2 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }body,html{height:100%}.container,body,html{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.top-1{top:.25rem}.top-0\.5{top:.125rem}.right-0\.5{right:.125rem}.top-0{top:0}.left-0{left:0}.z-\[999\]{z-index:999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-screen{height:100vh}.h-full{height:100%}.h-1\/3{height:33.333333%}.h-\[3px\]{height:3px}.h-6{height:1.5rem}.max-h-full{max-height:100%}.min-h-\[280px\]{min-height:280px}.w-screen{width:100vw}.w-full{width:100%}.w-\[3px\]{width:3px}.w-1\/3{width:33.333333%}.w-6{width:1.5rem}.min-w-\[280px\]{min-width:280px}.max-w-full{max-width:100%}.cursor-e-resize{cursor:e-resize}.cursor-n-resize{cursor:n-resize}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-\[1fr\2c 14px\]{grid-template-columns:1fr 14px}.grid-rows-\[1fr\2c 14px\]{grid-template-rows:1fr 14px}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-lg{border-radius:.5rem}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gray-700\/60{background-color:#37415199}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.fill-sky-400\/20{fill:#38bdf833}.fill-slate-400\/70{fill:#94a3b8b3}.fill-sky-300\/20{fill:#7dd3fc33}.stroke-slate-500{stroke:#64748b}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0{padding-top:0;padding-bottom:0}.text-sm{font-size:.875rem;line-height:1.25rem}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.active\:ring-1:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:ring-slate-500:active{--tw-ring-opacity:1;--tw-ring-color:rgb(100 116 139/var(--tw-ring-opacity))}.active\:ring-slate-400:active{--tw-ring-opacity:1;--tw-ring-color:rgb(148 163 184/var(--tw-ring-opacity))}.group:hover .group-hover\:bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.group:hover .group-hover\:fill-slate-400{fill:#94a3b8}.group:hover .group-hover\:stroke-slate-600{stroke:#475569}
</style>
</head>
<body class="absolute">
<div class="bg-black flex justify-center overflow-hidden relative w-screen h-screen">
<div class="bg-gray-700/60 text-gray-200 py-0.5 px-3 text-sm rounded-full shadow absolute top-1 mx-auto hidden"
id="resize-show"></div>
<div id="container"
class="w-full min-w-[280px] max-w-full h-full min-h-[280px] max-h-full resize overflow-auto grid grid-cols-[1fr,14px] grid-rows-[1fr,14px]">
<iframe id="frame" name="frame" class="bg-white col-span-1 w-full h-full"
src="http://localhost:3000/index.html" frameborder="0"></iframe>
<div id="lineRight" class="bg-gray-800 col-span-1 flex justify-center items-center group cursor-e-resize">
<div class="bg-gray-600 w-[3px] h-1/3 rounded-sm group-hover:bg-gray-400"></div>
</div>
<div id="lineBottom" class="bg-gray-800 col-span-2 flex justify-center items-center group cursor-n-resize">
<div class="bg-gray-600 h-[3px] w-1/3 rounded-sm hover:bg-gray-400"></div>
</div>
</div>
</div>
<script>
const container = document.getElementById('container')
, frame = document.getElementById('frame')
, lineRight = document.getElementById('lineRight')
, lineBottom = document.getElementById('lineBottom')
, resizeShow = document.getElementById('resize-show')
window.addEventListener('load', () => {
let load = true
let resize = new ResizeObserver(resizeHandler)
resize.observe(container)
function resizeHandler(entries) {
entries.forEach(element => {
if (element.target === container) {
if (!load) setSize()
}
})
load = false
}
})
function setSize() {
resizeShow.innerText = `${mediaScreen()} : ${parseInt(getComputedStyle(frame).width)} × ${parseInt(getComputedStyle(frame).height)}`
resizeShow.style.display = 'block'
setTimeout(() => {
resizeShow.style.display = 'none'
}, 5000)
}
window.addEventListener('resize', setSize)
function mediaScreen() {
// {xs: 1-639, sm: 640-767, md: 768-1023, lg: 1024-1279, xl: 1280-1535, 2xl: 1536-max}
let screens = { 639: 'XS', 767: 'SM', 1023: 'MD', 1279: 'LG', 1535: 'XL', 1536: 'XXL' }
for (size in screens) {
if (size >= parseInt(getComputedStyle(frame).width)) {
return screens[size]
} else if (1536 <= parseInt(getComputedStyle(frame).width)) {
return screens[1536]
}
}
}
function containerResizeX(event) {
event.preventDefault()
container.style.width = `${event.x - (window.innerWidth - event.x) + 7}px`
}
function containerResizeY(event) {
event.preventDefault()
container.style.height = `${event.y + 7}px`
}
function resizeHandler(element, handler) {
element.addEventListener('mousedown', function () {
window.addEventListener('mousemove', handler)
this.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', handler)
})
window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', handler)
})
})
}
resizeHandler(container, event => event.preventDefault())
resizeHandler(lineRight, containerResizeX)
resizeHandler(lineBottom, containerResizeY)
</script>
<script>
window.addEventListener('load', () => {
const frame = document.getElementById('frame')
const dark = `<svg viewBox="0 0 24 24" fill="none" class="w-6 h-6 bg-slate-700 group rounded-lg active:ring-1 active:ring-slate-500"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z" class="fill-sky-400/20"></path><path d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z" class="fill-slate-400/70 group-hover:fill-slate-400"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z" class="fill-slate-400/70 group-hover:fill-slate-400"></path></svg>`;
const light = `<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 bg-slate-300 group rounded-lg active:ring-1 active:ring-slate-400"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="fill-sky-300/20 stroke-slate-500 group-hover:stroke-slate-600"></path><path d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836" class="stroke-slate-500 group-hover:stroke-slate-600"></path></svg>`;
const button = document.createElement('button')
button.setAttribute('class', 'absolute top-0.5 right-0.5 outline-none select-none cursor-pointer z-[999]')
if (localStorage['color-scheme'] === 'dark' || (!('color-scheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
button.innerHTML = dark
postMessage('dark')
} else {
button.innerHTML = light
postMessage('light')
}
button.addEventListener('click', (event) => {
event.preventDefault()
if (localStorage['color-scheme'] === 'dark' || (!('color-scheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
button.innerHTML = light
postMessage('light')
localStorage.setItem('color-scheme', 'light')
} else {
button.innerHTML = dark
postMessage('dark')
localStorage.setItem('color-scheme', 'dark')
}
})
// Whenever the user explicitly chooses to respect the OS preference
// localStorage.removeItem('color-scheme')
function postMessage(message) {
window.frames.frame.postMessage(message, "*");
}
document.body.prepend(button)
})
</script>
</body>
</html>
<!-- <script>
window.addEventListener('load', () => {
window.addEventListener('message', event => {
if (event.data === 'dark') {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
});
})
</script> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment