Skip to content

Commit

Permalink
updated projects + doodles pages
Browse files Browse the repository at this point in the history
  • Loading branch information
atctwo committed Feb 1, 2024
1 parent 75aa735 commit a72c388
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 5 deletions.
2 changes: 1 addition & 1 deletion _data/projects.yml
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
image: /assets/images/projects/doodles.png
image_alt: A screenshot of the 'teapot' doodle - a grid of 3D teapots rendered using normal mapping
link: /doodles
updated: 2019
updated: 2024

- name: Website Version 1
description: An archive of the first version of this website
Expand Down
157 changes: 157 additions & 0 deletions doodles/textbox.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<title>Text Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
</head>

<style>
* {
box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
margin: 0;
}

#container {
width: 100%;
height: 100%;
margin: 0;
padding: 10;
border: none;
display: flex;
flex-direction: column;

/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

#about {
float: right;
margin-right: 25px;
}

.swal2-title, .swal2-html-container {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>

<body>
<div id="container">
<div id="toolbar">

<span class="ql-formats">
<select class="ql-size"></select>
<select class="ql-header"></select>
<select class="ql-font"></select>
</span>

<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>

<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>

<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>

<span class="ql-formats">
<select class="ql-align"></select>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>

<span class="ql-formats">
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
<button class="ql-direction" value="rtl"></button>
</span>

<span class="ql-formats">
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>

<span class="ql-formats">
<button class="ql-clean"></button>
</span>

<span class="ql-formats" id="about">
<button onclick="show_about();">About</button>
</span>

</div>
<div id="text"></div>
</div>
</body>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

function show_about() {
console.log("Text Box");
Swal.fire({
title: "About",
html: `
Welcome to Text Box! This is just a really simple scratch pad so you can type stuff into a browser page.
It uses a couple of libraries:<br><br>
<a href="https://quilljs.com/">Quill</a> rich text editor component<br>
<a href="https://katex.org/">KaTeX</a> math typesetting library<br>
<a href="https://sweetalert2.github.io/">sweetalert2</a> for this popup dialog
`
})
}

var toolbarOptions = [
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'font': [] }],

['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['blockquote', 'code-block'],

[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction

["image", "video", "formula"], // embeds

['clean'], // remove formatting button

[{"about": (v) => {console.log(v)}}],
[{container: "#toolbar"}]
];

var quill = new Quill('#text', {
bounds: "#container",
theme: 'snow',
modules: {
toolbar: "#toolbar"
}
});
</script>

</html>
8 changes: 4 additions & 4 deletions pages/doodles.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ title: Doodles

Welcome to an assortment of really random useless stuff

- <a href='javascript:open("https://www.adafruit.com/product/" + Math.floor(Math.random() * 5756), "_self");'>Random Adafruit Product</a>
- <a href='javascript:open("https://www.adafruit.com/product/" + Math.floor(Math.random() * 5882), "_self");'>Random Adafruit Product</a>
- [Make entire webpage editable](javascript:var c=document.body.children;for(var i=0;i<c.length-1;i++){c.item(i).contentEditable=true})
- recreation of something I found in the comments of a YouTube video, but I could never find again
- this is designed to be used as a bookmarklet (you should be able to use it on any website)
- [teapot](/doodles/teapot/index.html)
- [EIIRP](/doodles/eiirp.html)
- [cmd.txt](/doodles/cmd.txt)
- [Byakuya Togami](/doodles/togami)
- [>30 Minute Morse Code](/doodles/30-minute-morse//index.html)
- [LG TV Web Remote](/doodles/lg_remote.html)
- [Prompt Generator](/doodles/words)
- [Text Box](/doodles/textbox)
- [Big Time](/doodles/big_time)

<body>
<span id="notice"></span>
Expand All @@ -26,4 +26,4 @@ Welcome to an assortment of really random useless stuff

<script>
document.getElementById("notice").innerHTML = ("atctwo.net is not endorsed by " + chance.company() );
</script>
</script>

0 comments on commit a72c388

Please sign in to comment.