demo

9 months ago · 9f52dc4241
2 changed files with 98 additions and 4 deletions
--- a/14
+++ b/14
@ -15,17 +15,23 @@
                                    __ 
                             \       /\
                              \_____/
+
                          
 cssVarFilledCookies.js will bake cookies with a filling of css
 variables, exposing them to the user. The changes made are stored in the
 local storage, allowing one to make persistant interface customizations.
-The styling happens within cssVarCookies.css, it wraps the generated tr,
-td and textareas inside a display:none unless hovered position fixed
-table.
+The styling happens within cssVarFilledCookies.css, it wraps the
+generated tr, td and textareas inside a display:none unless hovered
+position fixed table.
+
+                                  demo 
+
+           martinlemaire.fr/cssVarFilledCookies.js/demo.html

                                 usage

-1. Copy cssVarCookies.js and cssVarCookies.css in your project folder. 
+1. Copy cssVarFilledCookies.js and cssVarFilledCookies.css in your
+project folder. 

 2. Inside the html page you would like to modify, import the js and
 css files like so:
--- a/demo.html
+++ b/demo.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="cssVarFilledCookies.css">
+        <link rel="stylesheet" href="style.css">
+        <script defer src="cssVarFilledCookies.js"></script>
+    </head>
+    <body>
+        <p class="demo">
+        <span>css</span><span>Var</span><span>Filled</span><span>Cookies</span><span></span><span>js</span>
+        </p>
+        <footer>
+            <p>
+            Cookies, or the act of storing data client-side is an
+            interesting concept. Unfortunately, it has been used and
+            abused by sending the locally stored data to a server.  Most
+            of the time, the cookies are filled with a user token, while
+            the actual data is stored server-side. This centralized
+            misuse of the cookies is rotting the internet, either
+            serving the purpose of tracking a shopping card state, or
+            identifying someone across websites for targeted
+            advertisements.
+            <span>Let's make nicer cookies !</span> what variables are
+            you going to expose on your webpage ?
+            </p>
+<p>First public written occurrence of the term &#8220;cookies&#8221; to
+describe data stored client side from a browser dates to an article from
+the financial times of 1996, the article is called <em>This bug in your PC is a smart cookie</em> and is archived here : 
+<ul>
+    <li>
+    <a href="https://archive.org/stream/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_djvu.txt">Financial Times · 1996&#47;02&#47;12 · txt</a>
+    </li>
+    <li>
+    <a href="https://ia600607.us.archive.org/24/items/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_text.pdf">Financial Times · 1996&#47;02&#47;12 · pdf</a></p>
+    </li>
+
+</ul>
+        </footer>
+
+    </body>
+</html>
+<style>
+:root {
+    --colorA : violet;
+    --colorB : darkgreen;
+    --colorC : purple;
+    --font-size: 24px;
+    --point-size: 6px;
+    --angle : 8deg;
+    --background: whitesmoke;
+    --background-text: lightyellow;
+    --underline-style : wavy;
+    --duration: 60s;
+    --width-footer:min(800px, 100%);
+}
+span{font-size:calc(var(--font-size) * 2);display:inline-block}
+span:nth-of-type(3n){color:var(--colorA);}
+span:nth-of-type(3n - 1){color:var(--colorB);}
+span:nth-of-type(3n - 2){color:var(--colorC);}
+body {background:var(--background)}
+
+@keyframes rotation {
+    from {transform:rotate(0deg)}
+    to {transform:rotate(360deg)}
+}
+@keyframes blink {
+    from {background:transparent}
+    to {background:fuchsia}
+}
+span:nth-of-type(2){text-decoration:underline var(--underline-style)}
+span:nth-of-type(4){transform:rotate(var(--angle))}
+span:nth-of-type(5){background:var(--colorB);
+width:var(--point-size);
+height:var(--point-size);
+border-radius:100%;margin-bottom:auto
+}
+.demo { width:fit-content; animation: rotation var(--duration) infinite linear; background:var(--background-text)}
+body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center}
+#cvfc{border-color:var(--colorA) !important;
+animation:blink .5s alternate linear;
+animation-iteration-count:4;
+}
+
+footer {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
+footer p, footer span, ul{font-size:var(--font-size)}
+</style>