Skip to content

Instantly share code, notes, and snippets.

@rayantony

rayantony/quicknotes.md

Created November 22, 2014 11:15
Show Gist options
  • Save rayantony/2b55b14a8111deb260f8 to your computer and use it in GitHub Desktop.
Save rayantony/2b55b14a8111deb260f8 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Notes on QuickNotes Simple Project
Raw
quicknotes.md

Quick Notes by adPush

###Quick Notes :. browser on page instant notes by adPush

####QuickNotes Allow Instant in-browser, in-page insertion of typed text for note taking or coding one the fly. use it for anything!

Launch via the bookmarklet or just make a new one by copying the text exactly with no extra or special character for line feed, carriage return, or any weird microsoft shit, and paste into url field of bookmark. it should be browser and device independent excption is the fonts which are customizable.

###License and Attribution

fiddle: http://jsfiddle.net/rayrc/twvafrzm
coded: by ray anthony
website: http://rayanthony.io  
license: "BSD/BS Berkeley Leftist License" 
license: "write-on" 
license: "copy-Righteous"
2014 implied copyright and related protections reserved mostly just dont remove this sig comment block
QuickNotes v0.1

###Fiddles at jsFiddle fiddle 1 fiddle 2 fiddle 3

###Fire Note

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700;800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem;line-height:2.2rem; } body {background: #111;color: #2f2f2f;padding:0; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:60%;width:auto;text-align:center; #2f2f2f;padding:0;line-height:3.2rem;vertical-align: 50%;font-size:2.8rem; }a,a.link,hover {color:orange;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h3 class="font-effect-vintage">A Quick One...</h3><p class="font-effect-fire-animation" syle="line-height:1.7rem;padding:0;">____________</p><p contenteditable class="font-effect-vintage" style="line-height:2rem;color:#eee;font-size:2.2rem;font-weight:700;color:#eee;">(click here)</p></body></html>

###Quick Note ver 1 / Note: browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=IM Fell English SC:500,800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {font-family:'IM Fell English SC';font-size:2rem;line-height:1.4;max-width:50rem;margin:0 auto;padding:4rem;font-weight:500;} * { -webkit-transition: all linear 1s; } h1 {font-family:'Raleway';font-size:4rem;line-height:1.4;max-width:50rem;margin:0 auto;padding:4rem;font-weight:900;} h3 {font-family:'IM Fell English SC';font-size:4rem;line-height:1.4;max-width:50rem;margin:0 auto;padding:4rem;font-weight:900;}h4 {font-family:'IM Fell English SC';font-size:4rem;line-height:1.4;max-width:50rem;margin:0 auto;padding:4rem;font-weight:900;} p {font-family:'IM Fell English SC';font-size:3rem;line-height:1.4;max-width:50rem;margin:0 auto;padding:4rem;font-weight:800;}a,a.link {color:#f0007b;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h1 class="font-effect-anaglyph" style="text-align:center;">Quick Note</h1><br><h3 contenteditable class="font-effect-3d""></h3><br><h4 contenteditable class="font-effect-fire"></h4><p contenteditable class="font-effect-vintage"></p></body></html>

###Quick Notes 1 : browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700;800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem;line-height:2.2rem; } body {background: #111;color: #2f2f2f; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:60%;width:auto;text-align:center; #2f2f2f;padding:0;line-height:3.2rem;vertical-align: 50%;font-size:2.8rem; }a,a.link,hover {color:orange;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h3 class="font-effect-vintage">A Quick One...</h3><p class="font-effect-fire-animation" syle="line-height:2rem;">____________</p><br><p contenteditable class="font-effect-vintage" style="line-height:2rem;color:#eee;font-size:2.2rem;font-weight:700;color:#eee;">(click here)</p></body></html>

###Quick Notes ?2 : browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=IM Fell English SC:500,800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: 'IM Fell English SC'; } * { -webkit-transition: all linear 1s; } h1 {font-family:'Raleway';font-size:5rem;text-align:center;font-weight:900;;display:inline-block;} h3 {font-family:'IM Fell English SC';font-size:4rem;text-align:center;font-weight:900;}h4 {font-family:'IM Fell English SC';font-size:3rem;font-weight:800;text-align:center;display:inline-block;} p {font-family:'IM Fell English SC';font-size:3rem;font-weight:800;text-align:left;display:inline-block;}a,a.link {color:#f0007b;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h4 class="font-effect-anaglyph" style="text-align:center;">Quick Note</h4><p contenteditable class="font-effect-vintage"></p></body></html>

###Quick Notes ver 3 : browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700;800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem; } body {background: #111;color: #2f2f2f; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:50%;width:auto;color: #2f2f2f;padding:0;line-height:10px;vertical-align: 50%;font-size:3rem;text-align: center; }a,a.link {color:#f0007b;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h3 class="font-effect-3d">A Quick One...</h3><p class="font-effect-fire-animation">________________</p><br><p contenteditable class="font-effect-vintage" style="color:#eee;font-size:2.5rem;font-weight:700bold;color:#eee;">(click here)</p></body></html>

###Quick Notes ?4 : browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700,700bold,800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem; } body {background: #111;color: #2f2f2f; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:50%;width:auto;color: #2f2f2f;padding:0;line-height:10px;vertical-align: 50%;font-size:3rem;text-align: center; }p {border-style:none;border:0px;}br {line-height:0.5rem;}a,a.link {color:#f0007b;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body><h3 class="font-effect-3d"><i>Quick</i>Note&trade;</h3><p class="font-effect-fire-animation">________________</p><br><p contenteditable class="font-effect-vintage" style="color:#eee;font-size:2rem;line-height:2.2rem;font-weight:700;color:#eee;"></p></body></html>

###Quick Notes 5 : browser on page instant notes by adPush

###Fire Note : browser on page instant notes by adPush

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700;800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem;line-height:2.2rem; } body {background: #111;color: #2f2f2f;padding:0; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:60%;width:auto;text-align:center; #2f2f2f;padding:0;line-height:3.2rem;vertical-align: 50%;font-size:2.8rem; }a,a.link,hover {color:orange;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h3 class="font-effect-vintage">A Quick One...</h3><p class="font-effect-fire-animation" syle="line-height:1.7rem;padding:0;">____________</p><p contenteditable class="font-effect-vintage" style="line-height:2rem;color:#eee;font-size:2.2rem;font-weight:700;color:#eee;">(click here)</p></body></html>

###bookmark link

<p>or use this bookmarklet  <a href="javascript:void('http://www.jsfiddle.net/'==window.location?alert('Drag this to your bookmarks bar!'):window.location='http://www.jsfiddle.net/?'+window.location)"><strong>tool</strong></a></p>

###bookmark link

<p>or use this bookmarklet  <a href="javascript:void('http://www.jsfiddle.net/'==window.location?alert('Drag this to your bookmarks bar!'):window.location='http://www.jsfiddle.net/?'+window.location)"><strong>tool</strong></a></p>

###test layering:

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Lobster:700,500,800,900,800bold,900bold|IM Fell English SC:500,700;800,900bold|Raleway:800,900,800bold,900bold&effect=3d|vintage|anaglyph|fire|ice|fire-animation|ice' rel='stylesheet' type='text/css'><style type="text/css"> html {background:#111;color: #eee;font-family:'IM Fell English SC';font-size:2rem;line-height:2.2rem; } body {background: #111;color: #2f2f2f;padding:0; } h3, p {background: #111;color: #2f2f2f;font-family:'Lobster';font-weight: 900bold;min-width: 350px;min-width:60%;width:auto;text-align:center; #2f2f2f;padding:0;line-height:2.2rem;vertical-align: 50%;font-size:2.8rem; }a,a.link,hover {color:orange;} </style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#eee"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable><h3 class="font-effect-ice">Quick Note<p class="font-effect-fire-animation" syle="line-height:1.0rem;padding:0;">____________</p></h3><p contenteditable class="font-effect-ice" style="line-height:2rem;color:#eee;font-size:2.2rem;font-weight:700;color:#eee;">(click here)</p></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment