Typophile

Developer
Joe Harry
Size
10,877 Kb
Views
12,144
  1. Typophile Previews
  2. Typophile HTML Codes
  3. Typophile CSS Codes
  4. Typophile JS Codes

How do I make an typophile?

System fonts are detected by Font Detector.. What is a typophile? How do you make a typophile? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

Typophile Previews
IQ Test

Typophile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typophile</title> <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="letters">aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz</p>
<section id="sample-text"></section>
<main class="container"> <div id="progress"></div> <div class="divider"></div> <h3>What's the font?</h3> <div class="selects"> <div class="button option"><p></p></div> <div class="button option"><p></p></div> <div class="button option"><p></p></div> <div class="button option"><p></p></div> </div>
</main>
<section class="full-screen-overlay popup" id="welcome-popup"> <h1>Typophile</h1> <div class="container"> <h2>How well do you know your fonts?</h2> <h4>Typophile will find common fonts installed on your device.<br>All you have to do is <em>guess the font.</em></h4> <div class="check"> <span class="mono">Include top Google fonts?</span> <input type="checkbox" value="None" id="check" name="check" checked /> <label for="check"></label> </div> <div class="button" id="start-game"><p class="mono">Play!</p></div> </div>
</section>
<section class="full-screen-overlay popup" id="gameover-popup"></section>
<section class="full-screen-overlay run-animation" id="hurrah"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-127 129 256 256" style="enable-background:new -127 129 256 256;" xml:space="preserve"> <polygon class="svgpath" id="tick" points="-52,307.1 -100.4,258.7 -127,285.3 -63.1,349.2 -63,349.1 -51.4,360.8 129,180.4 101.9,153.2	"/> </svg> <h1 class="font-prompt">Font</h1>
</section>
<section class="full-screen-overlay run-animation" id="boohoo"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-127 129 256 256" style="enable-background:new -127 129 256 256;" xml:space="preserve"> <polygon class="svgpath" id="cross" points="120.6,171.6 93.5,144.5 0.6,231.7 -88,144.5 -114.6,171.1 -26.7,258.3 -114.6,345.4 -88,372 0.6,284.8 93.5,372	120.6,344.9 29.9,258.3 "/> </svg> <h1 class="font-prompt">Font</h1>
</section> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/font-detector.js'></script> <script src="js/index.js"></script>
</body>
</html>

Typophile - Script Codes CSS Codes

html { min-height: 100%; font-size: 18px; background: #F45B69; background: -webkit-linear-gradient(328deg, transparent, #52489C), -webkit-linear-gradient(58deg, #F45B69, #59C3C3); background: linear-gradient(122deg, transparent, #52489C), linear-gradient(32deg, #F45B69, #59C3C3); -webkit-transition: background 0.2s; transition: background 0.2s;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -ms-flex-pack: distribute; justify-content: space-around; min-height: 100%;
}
h1 { font-size: calc(2rem + 4vw); position: relative;
}
h1:after { content: ''; position: absolute; bottom: 10%; left: 0; right: 0; height: 20%; background: #F45B69; z-index: -1; opacity: 0.9;
}
h3 { letter-spacing: 2px;
}
h4 { font-size: 1.35rem; font-weight: normal;
}
h1, h2, h3, h4, p, span, label { color: #EBEBEB; text-align: center;
}
a { text-decoration: none;
}
.container { width: 95%; max-width: 1100px; margin: 0 auto; padding: 2rem 0;
}
.mono { font-family: monospace;
}
#progress { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row; flex-flow: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px;
}
.marker { box-sizing: border-box; width: 10px; height: 10px; border: 2px solid #f67883; border-radius: 50%; -webkit-transition: background 0.3s, width 0.3s; transition: background 0.3s, width 0.3s; background: #EBEBEB;
}
.marker.done { box-sizing: initial; border: 0; box-shadow: 0 0 10px #f24353, 0 0 0 2px #EBEBEB;
}
.marker.false { background: red;
}
.marker.true { background: lightgreen;
}
.marker.current { background: #EBEBEB; width: 20px; height: 20px; box-sizing: initial; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
}
.divider { border-top: 2px solid #EBEBEB; height: 0; width: 100%;
}
p.letters { font-size: 0.8rem; box-sizing: border-box; width: 100%; height: 1.4rem; line-height: 1.4; text-align: justify; position: absolute; margin: 0; padding: 0.2em 1em 0 1em; top: 0; left: 0; right: 0; text-transform: capitalize; color: rgba(0, 0, 0, 0.74); background: rgba(255, 255, 255, 0.8);
}
p.letters:after { /* Justify text when 1 line */ content: ''; font-size: 0; line-height: 0; height: 0; display: inline-block; width: 100%;
}
#sample-text { width: 100%; box-sizing: border-box; padding: 3rem 1rem 1rem 1rem; font-family: inherit; font-size: calc(4rem + 4vw);
}
#sample-text p { font-weight: normal; font-style: normal; margin: 0; padding: 0;
}
.selects { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-flow: row; flex-flow: row; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.button { width: 150px; height: 60px; font-family: inherit; margin: 5px; padding: 5px; display: table; cursor: pointer; border-radius: 6px; opacity: 0.8; background: #f56572; border: 1px solid #f12b3d; box-shadow: 0px 2px 0 #f12b3d, 2px 4px 1px #f24353, 0px 0px 25px rgba(0, 0, 0, 0.1); letter-spacing: 1px; -webkit-transition: all 0.1s; transition: all 0.1s;
}
.button:hover { background: #f67883; box-shadow: 2px 4px 3px #f12b3d, 4px 4px 18px #f24353;
}
.button:active { background: #f24353; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}
.button.secondary { opacity: 0.9; border: 0 0 transparent; background: #333; border: 1px solid #000; box-shadow: 0px 2px 0 #111, 2px 4px 1px #000, 0px 0px 25px rgba(0, 0, 0, 0.1);
}
.button.secondary:hover { background: #444; box-shadow: 2px 4px 3px #111, 4px 4px 18px #000;
}
.button.secondary:active { background: #111; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}
.button p { padding: 0; margin: 0; display: table-cell; vertical-align: middle;
}
#start-game { margin: 1rem auto;
}
.full-screen-overlay { overflow: hidden; opacity: 0; height: 0; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around;
}
.popup { font-family: Lora, 'Times New Roman', serif; background: -webkit-linear-gradient(328deg, transparent, #52489C), -webkit-linear-gradient(58deg, #F45B69, #59C3C3); background: linear-gradient(122deg, transparent, #52489C), linear-gradient(32deg, #F45B69, #59C3C3); -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.font-list { width: 90%; max-width: 280px; margin: 16px auto; padding: 16px; background: rgba(255, 255, 255, 0.16); border-radius: 4px;
}
.font-list p { margin: 0; padding: 0; position: relative; text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.font-list p:after { z-index: -1; content: ''; position: absolute; bottom: 10%; left: 0; right: 0; height: 25%; opacity: 0.7;
}
.font-list p.correct:after { background: lightgreen;
}
.font-list p.incorrect:after { background: red;
}
#welcome-popup { height: 100%; opacity: 1; overflow-y: scroll;
}
#gameover-popup h1 { margin-bottom: 0;
}
.font-prompt { color: #FFF; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3);
}
/* Tick / cross */
#tick { stroke: #91DC5A;
}
#cross { stroke: #D80027;
}
.full-screen-overlay svg { width: 400px; height: 400px;
}
.svgpath { fill: transparent; stroke-width: 16px; stroke-dasharray: 2000; stroke-linecap: round; z-index: 2;
}
.run-animation .svgpath { -webkit-animation: dash-animation 1.2s reverse linear forwards; animation: dash-animation 1.2s reverse linear forwards;
}
@-webkit-keyframes dash-animation { to { stroke-dashoffset: 2000; }
}
@keyframes dash-animation { to { stroke-dashoffset: 2000; }
}
/* Checkbox styling by https://codepen.io/bbodine1/pen/novBm */
.check { width: 200px; position: relative; margin: 25px auto; padding: 16px; padding-right: 50px; background: rgba(255, 255, 255, 0.16); border-radius: 4px;
}
.check label { width: 25px; height: 25px; cursor: pointer; position: absolute; top: 50%; margin-top: -12px; right: 16px; background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); background: linear-gradient(top, #222 0%, #45484d 100%); border-radius: 50%; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.check label:after { content: ''; width: 9px; height: 5px; position: absolute; top: 6px; left: 6px; border: 3px solid #fcfff4; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.check label:hover::after { opacity: 0.3;
}
.check span { margin-right: 30px;
}
.check input[type=checkbox] { visibility: hidden;
}
.check input[type=checkbox]:checked + label:after { opacity: 1;
}

Typophile - Script Codes JS Codes

var fonts = [], googleFonts = [], userFonts = [], quotes = [], fontSize;
var Utils = {}, Typophile = {};
var s;
fonts = ['Athelas', 'Avenir', 'Bell MT', 'Book Antiqua', 'Californian FB', 'Calisto MT', 'Century Schoolbook', 'Charter', 'Franklin Gothic', 'Garamond', 'Gill Sans', 'Gill Sans MT', 'Goudy Old Style', 'Helvetica', 'Helvetica Neue', 'Hoefler Text', 'Iowan Old Style', 'Optima', 'Palatino', 'Seravek', 'Sitka', 'Agency FB', 'Big Caslon', 'Bodoni MT', 'Calibri', 'Candara', 'Centaur', 'Century', 'Constantia', 'Corbel', 'Didot', 'Futura', 'Geneva', 'High Tower Text', 'Perpetua', 'Rockwell', 'Segoe UI', 'Tw Cen MT', 'Andale Mono', 'Baskerville', 'Berlin Sans FB', 'Bernard MT Condensed', 'Cambria', 'Century Gothic', 'Cochin', 'Consolas', 'Cooper Black', 'Courier', 'Courier New', 'Didot', 'Elephant', 'Eras ITC', 'Georgia', 'Haettenschweiler', 'Impact', 'Lucida', 'Maiandra GD', 'Menlo', 'Plantagenet Cherokee', 'Skia', 'Times New Roman', 'American Typewriter', 'Arial', 'Comic Sans MS', 'Tahoma', 'Trebuchet MS', 'Verdana'];
googleFonts = ['Open Sans', 'Roboto', 'Lato', 'Roboto Slab', 'Oswald', 'Roboto Condensed', 'Source Sans Pro', 'Montserrat', 'Raleway', 'Lora', 'Merriweather', 'Ubuntu', 'Passion One', 'Lobster'];
quotes = ["Open the pod bay doors, HAL.", "I'm sorry, Dave. I'm afraid I can't do that.", "I think you know what the problem is just as well as I do.", "This mission is too important for me to allow you to jeopardize it.", "I know that you and Frank were planning to disconnect me, and I'm afraid that's something I cannot allow to happen.", "Dave, although you took very thorough precautions in the pod against my hearing you, I could see your lips move.", "Without your space helmet, Dave? You're going to find that rather difficult.", "Dave, this conversation can serve no purpose anymore. Goodbye.", "I'm afraid. I'm afraid, Dave. Dave, my mind is going.", "Good afternoon, gentlemen. I am a HAL 9000 computer.", "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.", "I am putting myself to the fullest possible use, which is all I think that any conscious entity can ever hope to do.", "Look Dave, I can see you're really upset about this. I honestly think you ought to sit down calmly, take a stress pill, and think things over.", "Just what do you think you're doing, Dave?"];
Utils = { toggler: { showHide : function(obj, ms) { Utils.toggler.show(obj); setTimeout(function() { Utils.toggler.hide(obj); }, ms); }, show : function(obj) { obj.style.height = 'auto'; obj.style.overflowY = 'scroll'; obj.style.opacity = 1; }, hide : function(obj) { obj.style.height = 0; obj.style.overflow = 'hidden'; obj.style.opacity = 0; }, flash : function(obj, ms) { obj.style.opacity = 0; setTimeout(function() { obj.style.transition = 'opacity 0.' + ms + 's'; obj.style.opacity = 1; }, ms); } }, rand : function(min, max) { return Math.floor(Math.random() * (max - min)) + min; }, removeClass : function(el, _class) { var pattern; if (el && el.className && el.className.indexOf(_class) >= 0) { pattern = new RegExp('\\s*' + _class + '\\s*'); el.className = el.className.replace(pattern, ' '); } }, generateCode : function() { var str, sample, i, length; str = ""; sample = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; length = 5; i = length; while (i--) str += sample.charAt(Utils.rand(0, sample.length)); return str; }, loadGoogleFonts : function() { // 'googlefy' the font names so they can be loaded by the Google fonts api // 'Open Sans' becomes 'Open+Sans::latin' var googlefy = (function() { var f = []; for (var i = 0; i < googleFonts.length; i++) f.push(googleFonts[i].split(' ').join('+').concat('::latin')); return f; })(); WebFontConfig = { google: { families: googlefy } }; (function() { var wf = document.createElement('script'); wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); }, replayAnimation : function(obj) { obj.classList.remove("run-animation"); obj.offsetWidth = obj.offsetWidth; obj.classList.add("run-animation"); }
}
Typophile = { settings: { html: document.documentElement, sample_text: document.getElementById("sample-text"), opts: document.getElementsByClassName("option"), hurrah: document.getElementById("hurrah"), boohoo: document.getElementById("boohoo"), font_prompt: document.getElementsByClassName("font-prompt"), welcome_popup: document.getElementById("welcome-popup"), gameover_popup: document.getElementById("gameover-popup"), start_game: document.getElementById("start-game"), numOpts: document.getElementsByClassName("option").length, gameQuestions: 10, gameCount: 0, answers: [], code: '', includeGoogleFonts: document.getElementById("check").checked, nextDelay: 1800, googleLoaded: false }, init : function() { var fontDetective, progress, children, i; s = this.settings; this.detectFonts(); s.html.setAttribute('data-cheater', 'You little cheater, you!'); progress = document.getElementById('progress'); children = ''; i = s.gameQuestions; while (i--) children += '<span class="marker"></span>'; progress.innerHTML = children; this.settings.markers = document.getElementsByClassName('marker'); this.bind(); }, play : function() { Typophile.detectGoogleFonts(); Utils.toggler.hide(s.welcome_popup); Utils.toggler.hide(s.gameover_popup); s.markers[0].className += ' current'; Typophile.refresh(); }, detectFonts : function (){ var fontDetective = new Detector(); i = fonts.length; while (i--) { if (fontDetective.detect(fonts[i])) { userFonts.push(fonts[i]); } } }, detectGoogleFonts : function(){ if (((userFonts.length < 10) || (s.includeGoogleFonts)) && !s.googleLoaded) { Utils.loadGoogleFonts(); userFonts = userFonts.concat(googleFonts); googleLoaded = true; } else if (s.googleLoaded) { userFonts = userFonts.concat(googleFonts); } }, restart : function(){ userFonts = []; Typophile.detectFonts(); var i = s.markers.length; while (i--) { Utils.removeClass(s.markers[i], 'true'); Utils.removeClass(s.markers[i], 'false'); } s.gameCount = 0; s.answers = []; Typophile.play(); }, bind : function() { var i, checkbox; checkbox = document.getElementById("check"); checkbox.addEventListener('click', function(){ s.includeGoogleFonts = checkbox.checked; }); s.start_game.addEventListener('click', Typophile.play); i = s.numOpts; while (i--) { s.opts[i].addEventListener('click', function() { Typophile.submit(this.getAttribute('data-code')); }); } }, submit : function(code) { if (s.gameCount < (s.gameQuestions - 1)) { Typophile.mark(code) setTimeout(function() { Typophile.refresh(); Typophile.increment(); }, s.nextDelay); } else { Typophile.mark(code) Typophile.gameOver(); } }, mark : function(code) { var lastCorrect = (code === s.code); s.answers[s.answers.length] = { font: s.html.style.fontFamily, result: lastCorrect }; if (lastCorrect) { Utils.replayAnimation(s.hurrah); Utils.toggler.showHide(s.hurrah, s.nextDelay); s.markers[s.gameCount].className += ' true done'; } else { Utils.replayAnimation(s.boohoo); Utils.toggler.showHide(s.boohoo, s.nextDelay); s.markers[s.gameCount].className += ' false done'; } }, increment : function() { Utils.removeClass(s.markers[s.gameCount], 'current'); s.gameCount++; s.markers[s.gameCount].className += ' current'; }, refresh : function() { var i, currFont, n; s.sample_text.removeAttribute('style'); Utils.toggler.flash(s.sample_text, 400); i = Utils.rand(0, userFonts.length); currFont = userFonts[i]; userFonts.splice(i, 1); s.html.style.fontFamily = '/* You little cheater you! */' + currFont; s.sample_text.innerHTML = "<p>" + quotes[Utils.rand(0, quotes.length)] + "</p>"; Typophile.populateOptions(currFont); fontSize = 4; while ((s.sample_text.clientHeight > 600) && (fontSize >= 1)) { fontSize--; s.sample_text.style.fontSize = "calc(" + fontSize + "rem + 3vw)"; } n = s.font_prompt.length; while (n--) { s.font_prompt[n].innerHTML = currFont; } }, gameOver : function() { var i, score, font, fonts, result, show_score, message, buttons, replay, follow; i = s.answers.length; score = 0 fonts = ''; while (i--) { font = s.answers[i].font.replace(/'/g, ''); if (s.answers[i].result) { score++; fonts += '<p class="correct" data-font="'+font+'">'+font+' </p>'; } else { fonts += '<p class="incorrect" data-font="'+font+'">'+font+' </p>'; } } show_score = '<h1>'+score+'/'+s.gameQuestions+'</h1>'; result = '<div class="font-list">' + fonts + '</div>';
/* follow = '<a href="https://codepen.io/woodwork" target="_blank" class="button secondary codepen"><p class="mono">Follow me on CodePen</p></a>'; */ replay = '<div class="button" id="restart-game"><p class="mono">Play Again</p></div>'; if (score === s.gameQuestions) { message = "Hell yeah! You typophile, you."; } else if (score > (s.gameQuestions * 0.8)) { message = 'Good job!'; } else if (score > (s.gameQuestions * 0.4)) { message = 'Not bad!'; } else { message = 'Ouch... Better luck next time'; } message = '<h2>' + message + '</h2>'; buttons = '<div class="selects">'/* +follow */ + replay+'</div>'; s.gameover_popup.innerHTML = show_score + message + result + buttons; s.markers[s.gameCount].className += ' done'; Utils.removeClass(s.markers[s.gameCount], 'current') Utils.toggler.show(s.gameover_popup); document.getElementById("restart-game").addEventListener('click', Typophile.restart); }, populateOptions : function(font) { var options = [font], randFont, i, rand; i = s.numOpts; while (i--) { randFont = userFonts[Utils.rand(0, userFonts.length)]; while ((options.indexOf(randFont) > -1) && (userFonts.length > options.length)) { randFont = userFonts[Utils.rand(0, userFonts.length)]; } options.push(randFont); s.opts[i].setAttribute('data-code', Utils.generateCode()); s.opts[i].childNodes[0].innerHTML = randFont; } rand = Utils.rand(0, s.numOpts); s.code = Utils.generateCode(); s.opts[rand].setAttribute('data-code', s.code); s.opts[rand].childNodes[0].innerHTML = font; }
}
window.onload = function() { Typophile.init();
};
Typophile - Script Codes
Typophile - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 4.5
Size 10,877 Kb
Views 12,144
Do you need developer help for Typophile?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Harry (woodwork) Script Codes
Name
Loading Christmas...
Social Links Plugin
Stronger Together
Long Live Ziggy Stardust
Expanding Contact Form
Fake 3D
Step
TTMM Pebble Clock
Vanilla JS - A toggleClass function
Flower Spinner
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!