Not You Generator

Developer
Leo
Size
3,763 Kb
Views
8,096
  1. Not You Generator Previews
  2. Not You Generator HTML Codes
  3. Not You Generator CSS Codes
  4. Not You Generator JS Codes

How do I make an not you generator?

What is a not you generator? How do you make a not you generator? This script and codes were developed by Leo on 05 January 2023, Thursday.

Not You Generator Previews
IQ Test

Not You Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Not You Generator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Varela+Round|Product+Sans" rel="stylesheet">
<div id="modal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span id="modal-close">&times;</span> <span id="modalTitle"><span> </div> <div id="modal-body"> </div> </div>
</div>
<div id="options"> <h1 class="header">Not You Generator <sup><sup>by theLMGN</sup></sup> </h1> <h2 class="header">Options</h2> <span class="option"> <h3 class="optionHeader">Font<sup>Supports Google + Local fonts</sup></h3> <input type="text" id="fontinput" oninput="updateFont()"></input> <br> <sup>All the fonts on your computer and <a href="http://fonts.google.com">Google Fonts</a> should work if you get the capitalization and spelling correct. </span> <span class="option"> <h3 class="optionHeader">Top Left</h3> <input type="file" id="tlf"></input> </span> <span class="option"> <h3 class="optionHeader">Top Center</h3> <input type="file" id="tcf"></input> </span> <span class="option"> <h3 class="optionHeader">Top Right</h3> <input type="file" id="trf"></input> </span>
</div>
<div id="container"> <div class="tile tile-top tile-left" id="tile-topleft" id="tli"> <img class="tile-image" id="ttli" /> <p id="tile-text-topleft tile-text">THANK</p> </div> <div class="tile tile-top tile-x-center" id="tile-topcenter" id="tci"> <img class="tile-image" id="ttci" /> <p id="tile-text-topcenter tile-text">YOU</p> </div> <div class="tile tile-top tile-right" id="tile-topright" id="tri"> <img class="tile-image" id="ttri" /> <p id="tile-text-topcenter tile-text">FOR</p> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'></script> <script src="js/index.js"></script>
</body>
</html>

Not You Generator - Script Codes CSS Codes

#container { height: 100vh; width: 100vh; background-color: #ccc; padding: 0; float: right; border: 0; position: fixed; left: calc(100% - 100vh); font-family: "Varela Round";
}
/* The Modal (background) */
.uploadpreview { position: absolute; float: right; top: 0;
}
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed *//* Black w/ opacity */ background: rgba(0,0,0,0.2); -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s
}
/* Modal Content */
.modal-content { position: fixed; bottom: 0; background-color: #fefefe; width: 100%; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s
}
/* The Close Button */
.close { color: white; float: right; font-size: 28px; font-weight: bold;
}
.close:hover,
.close:focus { color: #000; text-decoration: none; cursor: pointer;
}
.modal-header { padding: 2px 16px; background-color: #0f0f0f; color: white;
}
.modal-body {padding: 2px 16px;}
/* Add Animation */
@-webkit-keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 0; opacity: 1}
}
@keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn { from {opacity: 0} to {opacity: 1}
}
@keyframes fadeIn { from {opacity: 0} to {opacity: 1}
}
#options { height: 100vh; width: calc(100% - 100vh); background-color: #000; padding: 0; float: left; border: 0; font-family: "Varela Round";
}
#modal-body { font-family: "Varela Round"; background: #000;
}
.header,#modalTitle { font-family: "Product Sans";
}
h2 { color: #ccc;
}
.tile { height: 33.3vh; width: 33.3vh; position: absolute; text-align: center; background-color: #888;
}
.tile * { text-align: center; margin: 0; position: absolute; top: 13vh; width: 33.3vh; font-size: 200%;
}
.tile-left {left: 0;}
.tile-x-center {left: 33.3vh;}
.tile-right {left: 66.6vh;}
.tile-top {top: 0;}
.tile-y-center {top: 33.3vh;}
.tile-bottom {top: 66.6vh;}
.tile-image { filter: brightness(75%); position: absolute; height: 33.3vh; width: 33.3vh; top: 0; left: 0;
}
body { padding: 0; border: 0; margin: 0; color: #fff; font-family: "Varela Round";
}
.tile-text { font-size: 3vh;
}
sup { font-size: 50%; color: #ccc; padding-left: 0.75em;
}
h1 sup { font-size: 80%; color: #fff; padding-left: 0;
}
a { color: #aaa; text-decoration: none;
}

Not You Generator - Script Codes JS Codes

var modal = document.getElementById("modal")
function showModal(title,body) { document.getElementById("modalTitle").innerHTML = title; document.getElementById("modal-body").innerHTML = body; modal.style.display = "block";
}
function formatBytes(bytes,decimals) { if(bytes == 0) return '0 Bytes'; var k = 1024, dm = decimals || 2, sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }
}
document.getElementById("modal-close").onclick = function() { modal.style.display = "none";
}
function showImage(src,target) { var fr=new FileReader(); // when image is loaded, set the src of the image where you want to display it fr.onload = function(e) { showModal("File selected","Name: <kbd>" + src.files[0].name + "</kbd><br> Type: <kbd>" + src.files[0].type + "</kbd><br>Size: <kbd>" + formatBytes(src.files[0].size) + "</kbd>");
modal.style.backgroundImage = fr.result target.src = fr.result }; src.addEventListener("change",function() { // fill fr with image data if (src.files[0].type.startsWith("image/") == true) { fr.readAsDataURL(src.files[0]); console.log(src.files[0]) } else { showModal("File not supported", "File doesn't seem to be an image. Please try a different file.") } });
}
showImage(document.getElementById("tlf"),document.getElementById("ttli"))
showImage(document.getElementById("tcf"),document.getElementById("ttci"))
showImage(document.getElementById("trf"),document.getElementById("ttri"))
function updateFont() { WebFont.load({ google: { families: [document.getElementById("fontinput").value] } }); document.getElementById("container").style.fontFamily = document.getElementById("fontinput").value
}
Not You Generator - Script Codes
Not You Generator - Script Codes
Home Page Home
Developer Leo
Username theLMGN
Uploaded January 05, 2023
Rating 3
Size 3,763 Kb
Views 8,096
Do you need developer help for Not You Generator?

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!

Leo (theLMGN) Script Codes
Name
BigPicture Spammy
Play shop joke
Maths.
CodePen allows autoplaying videos on your profile page.
Fidget Spinner
File64
A Pen by Leo
Testing BootStrap
Pause Based Volume Slider
Game Start Page
Create amazing video scripts 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!