diff options
author | 2022-11-18 17:09:38 +0530 | |
---|---|---|
committer | 2022-11-18 17:09:38 +0530 | |
commit | 55817a35387928d76d1b269bf1ed9b823f0c9838 (patch) | |
tree | 958c1d6a984e5e6c26a1051f352f0f20a8054b97 | |
download | writing-pad-55817a35387928d76d1b269bf1ed9b823f0c9838.tar.gz writing-pad-55817a35387928d76d1b269bf1ed9b823f0c9838.tar.bz2 writing-pad-55817a35387928d76d1b269bf1ed9b823f0c9838.zip |
-rw-r--r-- | index.html | 12 | ||||
-rw-r--r-- | script.js | 19 | ||||
-rw-r--r-- | style.css | 88 |
3 files changed, 119 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..a34e7aa --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ +<head> + <link href="style.css" rel="stylesheet"> +</head> +<body> + <center> + <h1>W R I T I N G P A D</h1> + <textarea border id="text"></textarea><br><br> + <button class="hov" onclick="copytext()">COPY TEXT</button> <button class="hov" id="save" value="download">DOWNLOAD TEXT FILE</button> + <p>© <a class="hov" href="https://xgenos.me" target="_blank">GENOS</a> <script>document.write(new Date().getFullYear());</script></p> + </center> + <script src="script.js"> +</body> diff --git a/script.js b/script.js new file mode 100644 index 0000000..dc32149 --- /dev/null +++ b/script.js @@ -0,0 +1,19 @@ +function copytext() { + var Text = document.getElementById("text"); + Text.select(); + navigator.clipboard.writeText(Text.value); +} + +function download(filename, textInput) { + var element = document.createElement('a'); + element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput)); + element.setAttribute('download', filename); + document.body.appendChild(element); + element.click(); +} + +document.getElementById("save").addEventListener("click", function() { + var text = document.getElementById("text").value; + var filename = "output.txt"; + download(filename, text); +}, false); diff --git a/style.css b/style.css new file mode 100644 index 0000000..dfc84b6 --- /dev/null +++ b/style.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); + +body { + font-family: 'VT323', monospace; + font-size: 20px; + overflow: hidden; + margin: 0; + padding: 0; + position: fixed; + width: 100vw; + height: 100vh; + box-sizing: border-box; + background-color: #111; + color: #11c28a; +} + +#text { + user-select: auto; + resize: none; + margin: 20px; + font-family: 'VT323', monospace; + color: #11c28a; + text-shadow: 0 0 5px #11c28a; + line-height: 1.2; + font-size: 1.5rem; + caret-color: white; + padding: 20px; + width: 80vw; + height: 60vh; + background: #111; + border: inset 4px; + border-color: #11c28a; +} + +a { + font-family: 'VT323', monospace; + color: #11c28a; + text-decoration: none; +} + +button { + height: 30px; + font-family: 'VT323', monospace; + background-color: #111; + color: #11c28a; + border: 2px solid rgb(17, 194, 138); +} + +.hov { + cursor: pointer; +} + +.hov:hover, +::selection { + background-color: #11c28a; + color: #111; + font-family: 'VT323', monospace; +} + + +::-webkit-scrollbar { + width: 8px; + background: rgba(100, 100, 100, 0.1); +} + +::-webkit-scrollbar:horizontal { + height: 8px; +} + +::-webkit-scrollbar-button { + display: none; +} + +::-webkit-scrollbar-piece { + background: rgba(100, 100, 100, 0.1); +} + +::-webkit-scrollbar-piece:start { + background: rgba(100, 100, 100, 0.1); +} + +::-webkit-scrollbar-thumb { + background: #11c28a; +} + +::-webkit-scrollbar-corner { + background: rgba(100, 100, 100, 0.3); +} |