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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>