59 lines
2.0 KiB
HTML
59 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Fonts{% endblock %}
|
|
{% block content %}
|
|
<div class="row flex-grow-1">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="text-center">Sample fonts</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<label for="names">Names</label>
|
|
<input class="form-control" id="names" type="text">
|
|
<button class="btn btn-primary active" onclick="testFonts()">Test fonts</button>
|
|
<h1 class="text-center" style="height: 100px;">
|
|
<div id="font1" style="font-family:BFCChristmasCards; word-spacing: 10px;">Sample</div>
|
|
</h1>
|
|
<h1 class="text-center" style="height: 100px;">
|
|
<div id="font2" style="font-family:ChristmasStyle; word-spacing: 10px;">Sample</div>
|
|
</h1>
|
|
<h1 class="text-center" style="height: 100px;">
|
|
<div id="font3" style="font-family:Cointa; word-spacing: 10px;">Sample</div>
|
|
</h1>
|
|
<h1 class="text-center" style="height: 100px;">
|
|
<div id="font4" style="font-family:Gabriola; word-spacing: 10px;">Sample</div>
|
|
</h1>
|
|
<h1 class="text-center" style="height: 100px;">
|
|
<div id="font5" style="font-family:Anastasia; word-spacing: 30px;">Sample</div>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
{% block scripts %}
|
|
<script>
|
|
var input = document.getElementById("names");
|
|
|
|
input.addEventListener("input", function(event) {
|
|
testFonts();
|
|
});
|
|
|
|
function testFonts() {
|
|
var text = document.getElementById("names").value;
|
|
var font1 = document.getElementById("font1");
|
|
var font2 = document.getElementById("font2");
|
|
var font3 = document.getElementById("font3");
|
|
var font4 = document.getElementById("font4");
|
|
var font5 = document.getElementById("font5");
|
|
|
|
font1.innerHTML = text;
|
|
font2.innerHTML = text;
|
|
font3.innerHTML = text;
|
|
font4.innerHTML = text;
|
|
font5.innerHTML = text;
|
|
}
|
|
</script>
|
|
{% endblock scripts %} |