data uri site generator
Hier kannst du deinen html Code in eine data String verwandeln. Diesen String kann man wie eine url aufrufen und anzeigen lassen
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-lt-installed="true">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web page data URI generator</title>
<meta name="description" content="Self-contained web page data URI generator.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
padding: 1rem 2rem 0;
overflow-x: hidden;
background:rgb(25,25,25);
display:flex;
flex-direction:column;
}
a {
text-decoration: none
}
h1,h2,h3,h4,h5,h6 {
font-weight: 700
}
h1 {
font-size: 2rem;
color:white;
}
p,label{
color:white;
}
form {
margin-bottom: 0
}
.site-content {
min-height:200px;
font-family: monospace;
font-size: .8rem
}
.output {
height: 100px;
font-size: .75rem
}
.preview {
border: 3px solid white;
border-radius: 10px;
min-height:200px;
width: 100%;
background: #efefef
}
button{
background:hsl(195deg, 85%, 41%);
color:white;
font-size:20px;
width:90%;
padding:10px;
margin:10px;
}
textarea{
width:90%;
padding:10px;
margin:0 auto;
}
#imp{
display:none;
}
</style>
</head>
<body>
<h1>Data URI site generator</h1>
<p> Create a web page contained inside a link that can be sent to others.
No hosting needed. </p>
<!--
<a href="https://github.com/mattiasw/self-contained" class="github">GitHub repo</a>
--><main>
<div id="imp" class="grid import-container import-container--collapsed">
<button name="show-import" class="outline">Import from previous data URI</button>
<label> Import from previous data URI: <input type="text" name="import"> </label>
<div> <button name="import-button">Import</button>
</div></div>
<div class="grid"> <form> <label> HTML:
<textarea name="site-content" class="site-content" autocorrect="off" spellcheck="false">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My self-contained web page</title>
<meta name="description" content="Self-contained web page data URI generator.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.5.6/css/pico.min.css" integrity="sha384-3edOW8hbyoE5dcN5KLGzXBJ7ObwLWlQTONfez9ieFk2/YbX+mo7NbktAT69X+xZK" crossorigin="anonymous">
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<main class="container">
<h1>Hello World!</h1>
<button id="button">Clicked <span id="num-clicks">0</span> time(s)</button>
</main>
<script>
(function () {
let numClicks = 0;
document.addEventListener('click', function () {
numClicks++;
document.querySelector('#num-clicks').textContent = numClicks;
});
}());
</script>
</body>
</html>
</textarea> </label>
<div class="grid">
<label>
<input type="checkbox" name="minify">
Minify (keep unchecked if you want to save the data URI to continue later) </label>
</div>
<div class="grid"> <button type="submit" class="generate-button">Generate</button>
<button type="button" class="copy-button">Copy data URI</button>
</div> <label> Data URI: <textarea name="data-uri" class="output" readonly=""></textarea>
<small>Size: <span class="size">1.8 KiB</span></small> </label> </form>
<div> Preview: <iframe class="preview" src=""></iframe>
</div> </div> </main>
<script type="module">
function e(e, t, n, o) {
Object.defineProperty(e, t, {
get: n,
set: o,
enumerable: !0,
configurable: !0
})
}
var t = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : "undefined" != typeof window ? window : "undefined" != typeof global ? global : {}
, n = {}
, o = {}
, r = t.parcelRequire9460;
async function i(e) {
e?.preventDefault();
const t = function(e) {
const t = /<\/body>[\n\r\s]*<\/html>[\n\r\s]*$/;
if (t.test(e)) {
const n = ["background: rgba(20, 90, 180, .35);", "bottom: 0;", "display: block;", "font-size: .8rem;", "left: 0;", "opacity: .5;", "padding: 4px 8px;", "position: fixed;"].join("");
return e.replace(t, `<a href="https://mattiasw.github.io/self-contained/" target="_blank" style="${n}">Created with Web page data URI generator.</a></body>\n</html>`)
}
return e
}(document.querySelector('[name="site-content"]').value)
, n = document.querySelector('[name="minify"]').checked ? await async function(e) {
return (await r("fvTYR")).minify(e, {
minifyCSS: !0,
minifyJS: !0,
removeAttributeQuotes: !0,
removeComments: !0,
removeEmptyAttributes: !0,
removeRedundantAttributes: !0,
removeScriptTypeAttributes: !0,
removeStyleLinkTypeAttributes: !0
})
}(t) : t
, o = "data:text/html;charset=utf-8;base64," + btoa(n)
, i = encodeURI(o)
, a = document.querySelector('[name="data-uri"]');
a.value = i,
e && (a.focus(),
c()),
document.querySelector(".copy-button").disabled = !1;
document.querySelector(".preview").src = i,
function(e) {
const t = document.querySelector(".size");
t.textContent = e < 1024 ? `${e} byte${1 === e ? "" : "s"}` : e < 1048576 ? `${(e / 1024).toFixed(1)} KiB` : `${(e / 1024 / 1024).toFixed(1)} MiB`
}(a.value.length)
}
function c() {
const e = document.querySelector('[name="data-uri"]');
e.select(),
setTimeout((function() {
e.scrollTop = 0
}
), 10)
}
null == r && ((r = function(e) {
if (e in n)
return n[e].exports;
if (e in o) {
var t = o[e];
delete o[e];
var r = {
id: e,
exports: {}
};
return n[e] = r,
t.call(r.exports, r, r.exports),
r.exports
}
var i = new Error("Cannot find module '" + e + "'");
throw i.code = "MODULE_NOT_FOUND",
i
}
).register = function(e, t) {
o[e] = t
}
,
t.parcelRequire9460 = r),
r.register("27Lyk", (function(t, n) {
var o, r;
e(t.exports, "register", (()=>o), (e=>o = e)),
e(t.exports, "resolve", (()=>r), (e=>r = e));
var i = {};
o = function(e) {
for (var t = Object.keys(e), n = 0; n < t.length; n++)
i[t[n]] = e[t[n]]
}
,
r = function(e) {
var t = i[e];
if (null == t)
throw new Error("Could not resolve bundle with id " + e);
return t
}
}
)),
r.register("fvTYR", (function(e, t) {
e.exports = import("./" + r("27Lyk").resolve("nS2MJ")).then((()=>r("aXOpR")))
}
)),
r("27Lyk").register(JSON.parse('{"5SCbD":"index.95974002.js","nS2MJ":"htmlminifier.0e97a533.js"}')),
document.querySelector('[name="show-import"]').addEventListener("click", (function() {
document.querySelector(".import-container--collapsed").classList.remove("import-container--collapsed")
}
)),
document.querySelector('[name="import-button"]').addEventListener("click", (function() {
const e = document.querySelector('[name="import"]')
, t = e.value.replace(/^data:text\/html;[^,]*base64,/, "");
document.querySelector('[name="site-content"]').value = (n = atob(t),
n.replace(/<a href="https:\/\/mattiasw\.github\.io\/self-contained\/"[^>]+>[^<]+<\/a><\/body>/, "</body>")),
i(),
e.value = "";
var n
}
)),
document.querySelector("form").addEventListener("submit", i),
document.querySelector(".copy-button").addEventListener("click", (function(e) {
e.preventDefault(),
c(),
document.execCommand("copy"),
this.focus()
}
)),
i();
</script>
</body>
</html>