CodePen Embed - MicrosystemsPC Product Style

<html>

<head>
	<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
	<meta charset="UTF-8" />
	<!--<link rel="stylesheet" href="https://fontawesome.com/v4/assets/font-awesome/css/font-awesome.css">-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<title>Microsystems PC - PRODUCT STYLER</title>
</head>

<body>

	<div class="login-box">
		<center>
			<img src="https://i.imgur.com/cqA908L.png" height="120px">
		</center>
		<h2 style="margin-top:-30px;">PRODUCT STYLER</h2>
		<form>
			<div class="user-box">
				<input type="text" name="" id="title" required="">
				<label>TITULO</label>
			</div>
			<div class="user-box">
				<label>DESCRIPCION</label>

				<textarea id="desc" name="desc" style="height:120px;width: 90%;border: 2px solid black;border-radius: 5px;font-size: 15px;margin-top:40px;padding:4px;" required="" value=" "></textarea>
			</div>

			<div class="user-box">
				<input type="number" id="price" name="price" required="" value="0">
				<label>PRECIO</label>
			</div>
			<a onclick="cambiar()">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				CAMBIAR
			</a>
		</form>
	</div>
	<div id="results">
		<center>
			<h3 style="border-bottom:solid 1px white;padding-bottom:5px;">RESULTADO</h3>
			<div>
				<div class="alignl" id="producte"></div>
				<div class="alignl" id="descripcio"></div>
				<div class="alignl" id="preu"></div>
			</div>
		</center>
	</div>
	<footer>
		<span><a href="https://github.com/j0rd1s3rr4n0">© 2022 Copyright Jordi Serrano</a></span>
		<span><a href="https://codepen.io/jordiserrano">
				<b>Codepen</b> <i class="fa fa-codepen" aria-hidden="true"></i>

			</a></span>
		<span><a href="https://instagram.com/jordi_serrano/">
				<b>Instagram</b> <i class="fa fa-instagram" aria-hidden="true"></i>

			</a></span>
		<span><a href="https://github.com/j0rd1s3rr4n0">
				<b>Github</b> <i class="fa fa-github" aria-hidden="true"></i>
			</a></span>
	</footer onload="cargado()">
</body>

</html>

* {
	font-family: "Ubuntu";
}
html {
	height: 100%;
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	padding-top: 50px;
	padding-bottom: 40px;
	vertical-align: middle;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	text-align: center;
}
footer > :nth-child(1) > a {
	background: -webkit-linear-gradient(
		0deg,
		rgba(255, 255, 255, 1) 56%,
		rgba(0, 255, 57, 1) 0%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.alignl {
	text-align: justify;
	margin-left: 50px;
}
footer > * > a,
footer > * {
	text-decoration: none;
	font-weight: normal;
	padding: 20px;
	vertical-align: middle;
	font-size: 135%;
}
footer > :nth-child(2) > a {
	text-decoration: none;
	color: white;
}
footer > :nth-child(3) > a {
	text-decoration: none;

	background: -webkit-linear-gradient(
		45deg,
		#f09433 0%,
		#e6683c 25%,
		#dc2743 50%,
		#cc2366 75%,
		#bc1888 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
footer > :nth-child(4) > a {
	text-decoration: none;
	color: white;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Ubuntu";
	background: linear-gradient(#141e30, #243b55);
}

.login-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	padding: 40px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
	border-radius: 10px;
}
#results {
	position: absolute;
	top: 25%;
	left: 15%;
	width: 400px;
	padding: 40px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	color: white;
}

.login-box h2 {
	margin: 0 0 30px;
	padding: 0;
	color: #fff;
	text-align: center;
}

.login-box .user-box {
	position: relative;
}

.login-box .user-box input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}
.login-box .user-box textarea {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}
.login-box .user-box label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	transition: 0.5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
	top: -20px;
	left: 0;
	color: #03e9f4;
	font-size: 12px;
}

.login-box form a {
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	color: #03e9f4;
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.5s;
	margin-top: 40px;
	letter-spacing: 4px;
}

.login-box a:hover {
	background: #03e9f4;
	color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
		0 0 100px #03e9f4;
}

.login-box a span {
	position: absolute;
	display: block;
}

.login-box a span:nth-child(1) {
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #03e9f4);
	animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
	0% {
		left: -100%;
	}
	50%,
	100% {
		left: 100%;
	}
}

.login-box a span:nth-child(2) {
	top: -100%;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, transparent, #03e9f4);
	animation: btn-anim2 1s linear infinite;
	animation-delay: 0.25s;
}

@keyframes btn-anim2 {
	0% {
		top: -100%;
	}
	50%,
	100% {
		top: 100%;
	}
}

.login-box a span:nth-child(3) {
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(270deg, transparent, #03e9f4);
	animation: btn-anim3 1s linear infinite;
	animation-delay: 0.5s;
}

@keyframes btn-anim3 {
	0% {
		right: -100%;
	}
	50%,
	100% {
		right: 100%;
	}
}

.login-box a span:nth-child(4) {
	bottom: -100%;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(360deg, transparent, #03e9f4);
	animation: btn-anim4 1s linear infinite;
	animation-delay: 0.75s;
}

@keyframes btn-anim4 {
	0% {
		bottom: -100%;
	}
	50%,
	100% {
		bottom: 100%;
	}
}

document.body.addEventListener("keydown", cambiar);

function cambiar() {
	let negrita = "𝗔.𝗕.𝗖.𝗗.𝗘.𝗙.𝗚.𝗛.𝗜.𝗝.𝗞.𝗟.𝗠.𝗡.𝗢.𝗣.𝗤.𝗥.𝗦.𝗧.𝗨.𝗩.𝗪.𝗫.𝗬.𝗭.𝗮.𝗯.𝗰.𝗱.𝗲.𝗳.𝗴.𝗵.𝗶.𝗷.𝗸.𝗹.𝗺.𝗻.𝗼.𝗽.𝗾.𝗿.𝘀.𝘁.𝘂.𝘃.𝘄.𝘅.𝘆.𝘇.𝟭.𝟮.𝟯.𝟰.𝟱.𝟲.𝟳.𝟴.𝟵.𝟬.$. .,.€.Á.À.É.È.Í.Ì.Ó.Ò.Ú.Ù.á.à.é.è.ì.í.ó.ò.ú.ù.™.®.\n.-.<br>.©-,".split(
		"."
	);
	let cursiva = "𝘈.𝘉.𝘊.𝘋.𝘌.𝘍.𝘎.𝘏.𝘐.𝘑.𝘒.𝘓.𝘔.𝘕.𝘖.𝘗.𝘘.𝘙.𝘚.𝘛.𝘜.𝘝.𝘞.𝘟.𝘠.𝘡.𝘢.𝘣.𝘤.𝘥.𝘦.𝘧.𝘨.𝘩.𝘪.𝘫.𝘬.𝘭.𝘮.𝘯.𝘰.𝘱.𝘲.𝘳.𝘴.𝘵.𝘶.𝘷.𝘸.𝘹.𝘺.𝘻.1.2.3.4.5.6.7.8.9.0.$. .,.€.Á.À.É.È.Í.Ì.Ó.Ò.Ú.Ù.á.à.é.è.ì.í.ó.ò.ú.ù.™.®.\n.-.</br>.©.,".split(
		"."
	);
	let abcdefg = "A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p.q.r.s.t.u.v.w.x.y.z.1.2.3.4.5.6.7.8.9.0.$. .,.€.Á.À.É.È.Í.Ì.Ó.Ò.Ú.Ù.á.à.é.è.ì.í.ó.ò.ú.ù.^.ç.\n.-.¨.~.,".split(
		"."
	);

	let prod = document.querySelector("#producte");
	let product = document
		.querySelector("#title")
		.value.replace(/(\r\n|\n|\r)/gm, "¨")
		.replace("(tm)", "^")
		.replace("(r)", "ç")
		.replace("(c)", "~");
	// console.log(prod);

	let negritas = "";
	for (let i = 0; i < product.length; i++) {
		for (let x = 0; x < abcdefg.length; x++) {
			if (product[i] == abcdefg[x]) {
				negritas += negrita[x];
				// console.log(abcdefg[x],product[i],negrita[i]); // ALL OK TEST
				x = abcdefg.length;
			}
		}
	}
	console.log(negritas);

	prod.innerHTML = negritas;

	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	let desc = document.querySelector("#descripcio");
	let descript = document
		.querySelector("#desc")
		.value.replace(/(\r\n|\n|\r)/gm, "¨")
		.replace("(tm)", "^")
		.replace("(r)", "ç")
		.replace("(c)", "~");
	// console.log(desc);

	let cursivas = "";
	for (let i = 0; i < descript.length; i++) {
		for (let x = 0; x < abcdefg.length; x++) {
			if (descript[i] == abcdefg[x]) {
				cursivas += cursiva[x];
				// console.log(abcdefg[x],descript[i],cursiva[i]); // ALL OK TEST
				x = abcdefg.length;
			}
		}
	}
	console.log(cursivas);

	desc.innerHTML = cursivas;

	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	let prise = document.querySelector("#preu");
	let priciu = document.querySelector("#price").value;
	// console.log(prise);

	let precios = "";
	for (let i = 0; i < priciu.length; i++) {
		for (let x = 0; x < abcdefg.length; x++) {
			if (priciu[i] == abcdefg[x]) {
				precios += negrita[x];
				// console.log(abcdefg[x],priciu[i],negrita[i]); // ALL OK TEST
				x = abcdefg.length;
			}
		}
	}
	console.log(precios);
	prise.innerHTML = precios + "€";
}

This Pen is owned by Jordi Serrano on CodePen.

See more by @jordiserrano on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.