<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
background-color:#e7cdaf;
user-select:none;
}
#con
{
height:30vh;
width:95%;
border:dimgrey 2.5vw ridge;
border-left-color:linear-gradient(143deg ,#f89314, #7064b9);
border-right-color:linear-gradient(143deg ,#f89314, #7064b9);
}
button
{
display:inline;
background-image:linear-gradient(20deg ,#241414, #3b1414);
color:white;
outline:none;
}
#r
{
float:right;
height:7vw;
width:7vw;
outline:none;
border-radius:50%;
}
#l
{
float:left;
height:7vw;
width:7vw;
outline:none;
border-radius:50%;
}
p
{
position:relative;
display:inline;
text-align:center;
font-family:cursive;
font-size:20px;
}
#f
{
position:relative;
left:5%;
font-size:25px;
font-style:bold;
font-family:Times New Roman;
}
input[type=range]
{
width:100%;
}
#a
{
position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#i
{
appearance:none;
background:black;
outline:none;
border-radius:50%;
opacity:0.7;
transition:opacity .2s;
}
#i:hover
{
opacity:1;
}
input[type=range] { -webkit-appearance: none; margin: 18px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px blue; background:pink; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -14px; } input[type=range]:focus::-webkit-slider-runnable-track { background: pink; } input[type=range]::-moz-range-track { width: 100%; height: 8.4
}
h1
{
font-family:Raleway;
}
#cc
{
border:black 2vw double;
}
#q
{
position:relative;
height:7vw;
width:35vw;
justify-content: center;
align-items: center;
font-size:5vw;
border-radius:4.5vw;
outline:none;
}
button:hover
{
background-image:(120deg,black,white);
}
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Aguafina Script|Akronim|Aldrich|Alegreya|Alex Brush|Allerta Stencil|Allura|Almendra SC|Amethysta|Annie Use Your Telescope|Arbutus|Arizonia|Asset|Astloch|Bad Script|Barrio|Bellefair|Berkshire Swash|Bilbo|BioRhyme Expanded|Bonbon|Butcherman|Butterfly Kids|Caveat|Charmonman|Cinzel Decorative|Codystar|Crafty Girls|Dawning of a New Day|Faster One|Frijole|Geostar|Give You Glory|Hi Melody|Italianno|Jacques Francois Shadow|KhandMajor Mono Display|Meddon|Miltonian|Monofett|Monoton|Mystery Quest|Nosifer|Orbitron|Petit Formal Script|Sacramento|Shadows Into Light Two|Snowburst One|Dancing Script|Vibur|Raleway' rel='stylesheet'>
<h1 align="center">Text Designer</h1>
<div id="con"><div id="a" align="center">Demo text</div></div>
<br>
<button id="l" onclick="prev()"><</button>
<p align="center" id="f" ><b>Change Fonts</b></p>
<button id="r" onclick="next()">></button>
<h2>SETTINGS:</h2>
<div id="cc">
<p>Change font size:</p>
<br>
<input type="range" min="10" max="85" value="55" oninput="ch()" id="i">
<br>
<p>Align text:</p>
<button id="ri" onclick="m='Left';align(m);">Left</button>
<button id="ce" onclick="m='Center';align(m);">Centre</button>
<button id="le" onclick="m='Right';align(m);">Right</button>
<br>
<p>Your text here:</p>
<input id="q" type="text" oninput="tex()">
<br>
<p>Text Color:</p>
<input type="color" id="c" oninput="co()">
<p>Background Color:</p>
<input type="color" id="m" oninput="co()">
<br>
</div>
<script>
var fonts=["Aguafina Script","Akronim","Aldrich","Alegreya","Alex Brush","Allerta Stencil","Allura","Almendra SC","Amethysta","Annie Use Your Telescope","Arbutus","Arizonia","Asset","Astloch","Bad Script","Barrio","Bellefair","Berkshire Swash","Bilbo","BioRhyme Expanded","Bonbon","Butcherman","Butterfly Kids","Caveat","Charmonman","Cinzel Decorative","Codystar","Crafty Girls","Dawning of a New Day","Faster One","Frijole","Geostar","Give You Glory","Hi Melody","Italianno","Jacques Francois Shadow","KhandMajor Mono Display","Meddon","Miltonian","Monofett","Monoton","Mystery Quest","Nosifer","Orbitron","Petit Formal Script","Sacramento","Shadows Into Light Two","Snowburst One"];
var m='';
var c=0;
window.onload=function()
{
document.getElementById("a").style.fontSize = "35px";
}
function ch()
{
var s=document.getElementById("i").value;
document.getElementById("a").style.fontSize=s+"px";
}
function align(m)
{
document.getElementById("a").style.textAlign=m;
}
function tex()
{
document.getElementById("a").innerHTML=document.getElementById("q").value;
}
function prev()
{
if(c==0)
c=fonts.length-1;
else
{
document.getElementById("a").style.fontFamily=fonts[c];
document.getElementById("f").innerHTML=fonts[c];
c--;
}
}
function next()
{
if(c==fonts.length)
c=0;
else
{ document.getElementById("a").style.fontFamily=fonts[c];
document.getElementById("f").innerHTML=fonts[c];
c++;
}
}
function co()
{
var co= document.getElementById("c").value;
var col= document.getElementById("m").value;
document.getElementById("a").style.color=co;
document.getElementById("con").style.backgroundColor=col;
}
</script>
</body>
</html>