data attachments

girobusan · Jun 28, 2022 · 6fb4506 · 6fb4506
1 parent 5aea95e
commit 6fb4506
Show file tree

Hide file tree

Showing 9 changed files with 573 additions and 30 deletions.
diff --git a/dist/index2.html b/dist/index2.html
@@ -0,0 +1,64 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Imp Fiddle</title>
+  <meta name="description" content="">
+  <meta name="og:image" content="">
+  <meta name="og:title" content="Imp Fiddle">
+  <meta name="og:description" content="">
+  <meta name="twitter:image" content="">
+  <meta name="twitter:card" content="summary_large_image">
+  <script>window.datasets=undefined</script>
+  <!--add external css, libraries, fonts, metadata ...-->
+  <script>
+  window.settings = {
+  "title": "Imp Fiddle",
+  "description": "",
+  "image": "",
+  "filename": "index.html",
+  "headHTML": "&lt;!--add external css, libraries, fonts, metadata ...--&gt;",
+  "author": "",
+  "keywords": "",
+  "autoRun": "",
+  "editor": "",
+  "webViewed": "editor"
+}
+  </script>
+  <script>
+  window.addEventListener("hashchange" , ()=>history.go(0));
+  window.addEventListener(
+  "DOMContentLoaded" , 
+  function(){
+      const p = window.location.protocol;
+      if(window.location.hash==="#view"){
+        return;
+      }
+      if(p.startsWith("http") && 
+        window.settings.webViewed==="result" &&
+        window.location.hash !== "#edit"
+        ){
+        return;
+      }
+
+      if(p=='file:' || window.location.hash=="#edit"){
+          console.log("Loading editor")
+          const s = document.createElement("script");
+          s.src =  "fiddler.js"
+          document.head.appendChild(s);
+      }
+
+})
+  </script>
+  <script id="customJS">//Your Java Script goes here</script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style id="customCSS">
+/*Place for your CSS code*/
+</style>
+</head>
+<body>
+<!--Your html here-->
+ <script id="htmlSource" type="text/html">&lt;!--Your html here--&gt;</script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -132,6 +132,11 @@
   color: gray;
   text-align: center;
 }
+
+.indented{
+  width: calc(100% + 16px);
+  margin-left: -8px;
+} 
 </style>
 </head>
 <body>
@@ -141,9 +146,9 @@
 
 <div id="container">
 <h1>👿🎻<br>Imp Fiddle</h1>
-<p><big>Imp Fiddle is a JSFiddle-like, but <i>local</i> tool. This page is an Imp Fiddle itself. You may open it in <a href="#edit">edit mode</a> to see Imp Fiddle in action. Scroll down to see more...</big></p>
+<p><big>Imp Fiddle is a JSFiddle-like, but <i>local</i> tool. This page is an Imp Fiddle itself. You may open it in <a href="#edit">edit mode</a> to see Imp Fiddle in action. Scroll down to see more.</big></p>
 
-<p><img src="fiddler.png"></p>
+<p class="indented"><img src="fiddler.png"></p>
 
 <h2>Features</h2>
 <ul>
@@ -167,9 +172,9 @@ <h2>Features</h2>
 
 &lt;div id="container"&gt;
 &lt;h1&gt;👿🎻&lt;br&gt;Imp Fiddle&lt;/h1&gt;
-&lt;p&gt;&lt;big&gt;Imp Fiddle is a JSFiddle-like, but &lt;i&gt;local&lt;/i&gt; tool. This page is an Imp Fiddle itself. You may open it in &lt;a href="#edit"&gt;edit mode&lt;/a&gt; to see Imp Fiddle in action. Scroll down to see more...&lt;/big&gt;&lt;/p&gt;
+&lt;p&gt;&lt;big&gt;Imp Fiddle is a JSFiddle-like, but &lt;i&gt;local&lt;/i&gt; tool. This page is an Imp Fiddle itself. You may open it in &lt;a href="#edit"&gt;edit mode&lt;/a&gt; to see Imp Fiddle in action. Scroll down to see more.&lt;/big&gt;&lt;/p&gt;
 
-&lt;p&gt;&lt;img src="fiddler.png"&gt;&lt;/p&gt;
+&lt;p class="indented"&gt;&lt;img src="fiddler.png"&gt;&lt;/p&gt;
 
 &lt;h2&gt;Features&lt;/h2&gt;
 &lt;ul&gt;