From ccea1282814e66338beb7661080d726f418544d7 Mon Sep 17 00:00:00 2001
From: Alexander Mahr <info@alexmahr.de>
Date: Thu, 22 Jun 2023 05:37:22 +0200
Subject: [PATCH] init repo with KISS word processor leeching HTML5

---
 word.html | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 word.html
diff --git a/word.html b/word.html
new file mode 100644
index 0000000..a8a4c02
--- /dev/null
+++ b/word.html
@@ -0,0 +1,146 @@
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+    <div id='header'>
+        <div id='titellabel'>document name:
+            <title contenteditable="true">document</title>
+        </div> 
+    </div> 
+    
+    <style>
+    *{
+        font-family:sans;
+        box-sizing:border-box;
+    }
+    html{
+        padding-top:50px;
+    }
+    head{
+        display: block;
+    }
+    #header{
+        top:0;
+        z-index:1;
+        position: fixed;
+        height: 50px;
+        width:100%;
+        background-color:rgba(255,255,240,0.9);
+        padding:15px;
+        display: block;
+    } 
+    #titellabel {
+        background-color:#ffa;
+        border: 1px solid black;
+        padding:6px;
+    }
+    title{
+        position: relative;
+        display: inline;
+        background-color:#fff;
+        border: 1px solid black;
+        padding:4px;
+    }
+    @media print {
+        head, #header,title  {
+            display: none;
+        } 
+        html{
+            padding-top:0;
+        }
+    }
+
+    @page { margin: 0 }
+    body { margin: 0 }
+
+    .sheet {
+        margin: 0;
+        overflow: hidden;
+        position: relative;
+        box-sizing: border-box;
+        page-break-after: always;
+        height: 297mm;
+        width: 210mm;
+        background-color:#fff;
+        position:relative;
+        border:0;
+    /* padiding should be done in the iframe itself, allowing itself better printing */
+    /*    padding:2cm;*/
+        display:block;
+    }
+
+    /** For screen preview **/
+    @media screen {
+      body { background: #e0e0e0 }
+      .sheet {
+        background: white;
+        box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
+        margin: 5mm auto;
+      }
+      .textArea {
+        box-shadow: 0 0 2px 1px grey;
+      }
+    }
+    div {
+    display:inline
+    }
+    @media print {
+        body { width : 210mm; }
+    }
+    @page { size: 210mm 297mm; }
+
+</style>
+    </head>
+    <body>
+        <iframe class='sheet' src='data:text/html;charset=utf-8, 
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <style> 
+                    * { box-sizing:border-box; font-family:sans; } 
+                    html { height:100%; margin:0; padding:0;background-color:white; } 
+                    body { overflow:hidden; padding:2cm; min-height:100%; background-color:white; margin:0px;} 
+                    @media print {
+                        body { width : 210mm; }
+                    }
+                    @page { margin: 0 }
+                    body { margin: 0 }
+                    @page { size: 210mm 297mm; }
+                    .sheet {
+                        margin: 0;
+                        overflow: hidden;
+                        box-sizing: border-box;
+                        page-break-after: always;
+                        height: 297mm;
+                        width: 210mm;
+                        display:block;
+                    }
+                    </style> 
+                </head>
+                <body class="sheet" contenteditable="true">sheet</body>
+            </html>
+        '></iframe>
+        <iframe class='sheet' src='data:text/html;charset=utf-8, 
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <style> 
+                    * { box-sizing:border-box; font-family:sans; } 
+                    html { height:100%; margin:0; padding:0;background-color:white; } 
+                    body { overflow:hidden; padding:2cm; min-height:100%; background-color:white; margin:0px;} 
+                    </style> 
+                </head>
+                <body contenteditable="true"></body>
+            </html>
+        '></iframe>
+    <script>
+	window.addEventListener("load",function(){
+
+	}, false);
+	window.addEventListener("beforeunload",function(event){
+		event.returnValue = "You have unsaved changes.";
+	 return false;
+	}, false);
+
+    </script>
+    
+
+</body></html>
