Skip to content

Instantly share code, notes, and snippets.

@YPetremann

YPetremann/FancyCard.js

Last active July 22, 2020 18:20
Show Gist options
  • Save YPetremann/3d63a1b2dc944fadc7bad0d605ec1023 to your computer and use it in GitHub Desktop.
Save YPetremann/3d63a1b2dc944fadc7bad0d605ec1023 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FancyCard.js
function hashCode(s){
return s
.split('')
.reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)
}
function hashColor(text){
return "#"+Math.abs(hashCode(text)).toString(16).slice(0,6)
}
function light(text){return text
.replace(/0/g,"8").replace(/1/g,"9").replace(/2/g,"A").replace(/3/g,"B")
.replace(/4/g,"C").replace(/5/g,"D").replace(/6/g,"E").replace(/7/g,"F")
}
function medium(text){return text
.replace(/C/g,"4").replace(/D/g,"5").replace(/E/g,"6").replace(/F/g,"7")
.replace(/0/g,"8").replace(/1/g,"9").replace(/2/g,"A").replace(/3/g,"B")
}
function dark(text){return text
.replace(/0/gi,"8").replace(/1/gi,"9").replace(/2/gi,"A")
.replace(/B/gi,"3").replace(/C/gi,"4").replace(/D/gi,"5").replace(/E/gi,"6").replace(/F/gi,"7")
}
function breadcrumb(){
let card = document.querySelector("#qa");
let breadcrumb = document.querySelector(".breadcrumb");
breadcrumb.innerHTML = breadcrumb.innerHTML
.split("::")
.join(" :: ")
card.style=`--deckcolor:${dark(hashColor(breadcrumb.innerHTML))};`
background()
}
function background(){
try{
let page = document.querySelector(".card");
let breadcrumb = document.querySelector(".breadcrumb");
var pattern = GeoPattern.generate(breadcrumb.innerHTML);
page.style=`--image: ${pattern.toDataUrl()}`;
} catch(e) {
if(e instanceof ReferenceError) window.requestAnimationFrame(background)
}
}
function tags(){
let tags = document.querySelector(".tags");
if(tags.classList.contains("tagged")) return
tags.innerHTML = tags.innerHTML
.split(" ")
.filter(e => e!=="")
.map(text => `<li style="--tagcolor:${medium(hashColor(text))}">${text}</li>`)
.join("")
tags.classList.add("tagged")
}
window.requestAnimationFrame(breadcrumb);
window.requestAnimationFrame(tags);
Raw
Recto.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://gist.githubusercontent.com/YPetremann/3d63a1b2dc944fadc7bad0d605ec1023/raw/FancyCard.js"></script>
<nav class="breadcrumb">{{Deck}}</nav>
<nav class="tags">{{Tags}}</nav>
<!-- Start edit your template here -->
<header>{{Recto}}</header>
<!-- Optionnaly add footer for Recto -->
<!--
<footer>{{type:Verso}}</footer>
-->
Raw
Style.css
:root{
box-sizing: border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > nav {
margin:0;
}
body > .container {
flex-grow:1;
width:auto;
padding:0;
margin:0;
display:flex;
flex-direction: column;
}
.pt-1, #ansarea-pad {display:none;}
.card {min-height:100vh;}
#quiz {
flex-grow:1;
display:grid !important;
grid-template:
"left right" auto
"qbox qbox" 1fr
"foot foot" auto / 1fr 1fr;
}
#leftStudyMenu {
grid-area: left;
padding:10px;
}
#rightStudyMenu {
grid-area: right;
justify-self:end;
align-self:center;
overflow: hidden;
padding:10px;
}
#qa_box.card {
min-height: auto;
grid-area: qbox;
}
#ansarea{
grid-area: foot;
position:static;
min-height: auto;
}
#ansbut {
margin:0;
}
.card {
background: var(--image) calc(50%) calc(50%), var(--image) calc(50% + 1px) calc(50% + 1px);
display:flex;
justify-content:center;
flex-grow:1;align-items:center;
/* min-height:100vh; */
margin:0;
padding:20px;
text-align: center;
font-family:sans-serif;
font-size: 16px;
box-sizing:border-box;
}
#qa {
--deckcolor:#09C;
--backcolor:#fffaf0;
display:flex;
flex-direction:column;
margin: 0;
background:var(--deckcolor);
min-height:380px;
width:100%;
max-width:640px;
border-radius: 7px;
box-shadow:5px 5px 20px #0007;
}
#qa:before, #qa:after {
content:"";
flex-grow:1;
background-color: var(--backcolor);
}
#qa>*{
padding:10px;
}
#qa>.breadcrumb{
font-weight: 900;
order:-1;
border-radius: 7px 7px 0 0;
background:#0001;
margin:0;
}
#qa>header{
order:-1;
border-radius: 7px;
background:#FFF1;
}
#qa>footer{
color:black;
background-color: var(--backcolor);
flex-grow:100;
}
#qa>.tags{
order:2;
border-radius: 0 0 7px 7px;
background:#0001;
margin:0;
}
#qa>.tags li{
--tagcolor:red;
display:inline-block;
padding:0 5px;
margin:0 5px;
margin-left:10px;
position:relative;
background: var(--tagcolor);
font-weight:900;
}
#qa>.tags li:before{
position:absolute;
right:100%;
top:0;
bottom:0;
content:"";
border:7px transparent solid;
border-right-color:var(--tagcolor);
}
#qa>.tags li:after{
position:absolute;
left:-4px;
top:50%;
margin-top:-2px;
height:4px;
width:4px;
content:"";
background:var(--deckcolor);
}
hr { border:none; border-bottom:2px dotted #777; margin:5px;}
input{ border:none;border-bottom:#777 solid 2px; background: #7777; color:inherit; padding:5px;}
.typeMissed{background:#CCC7;}
ins, .typeGood{background:#0F07;}
del, .typeBad{background:#F007;}
mark { padding: 0px 5px; }
var { font-family: monospace; font-weight: 900; }
pre, code, kbd { text-align: left; background-color: #7777; border: 1px solid #777; padding: 0px 5px; }
kbd { border-radius:2px; border-bottom-width:5px; }
pre {margin:1px;}
pre.prettyprint, code.prettyprint { background-color: #333 }
pre .nocode, code .nocode { background-color: none; color: #000 }
pre .str, code .str { color: #ffa0a0 } /* string - pink */
pre .kwd, code .kwd { color: #f0e68c; font-weight: bold }
pre .com, code .com { color: #87ceeb } /* comment - skyblue */
pre .typ, code .typ { color: #98fb98 } /* type - lightgreen */
pre .lit, code .lit { color: #cd5c5c } /* literal - darkred */
pre .pun, code .pun { color: #fff } /* punctuation */
pre .pln, code .pln { color: #fff } /* plaintext */
pre .tag, code .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn, code .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv, code .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec, code .dec { color: #98fb98 } /* decimal - lightgreen */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE }
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal; }
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #444;}
Raw
Verso.html
{{FrontSide}}
<footer>{{Verso}}</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment