File64

Developer
Leo
Size
3,515 Kb
Views
6,072
  1. File64 Previews
  2. File64 HTML Codes
  3. File64 CSS Codes
  4. File64 JS Codes

How do I make an file64?

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

File64 Previews
IQ Test

File64 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>File64</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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="container"><h1>File64</h1><br><sup>The <a href="https://codepen.io/theLMGN/pen/MEopaZ">Open-Source</a> file to Base64 Converter</sup><br> <input type="file" id="fileuploader" /><br> <a href="javascript:document.getElementById('Vpreview').pause()">stop the media please thanks</a>
</div> <img id="Ipreview" class="preview"></img> <video id="Vpreview" class="preview" controls></video> <textarea id="data" readonly></textarea> <script src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'></script> <script src="js/index.js"></script>
</body>
</html>

File64 - Script Codes CSS Codes

#loader { height: 25vh; display: block;
}
#container { text-align: center; background: rgba(0,0,0,0.5); display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); position: fixed; color: #fff; opacity: 0.8; z-index: 2;
}
body{ font-family: "Varela Round";
}
h1{ font-family: "Product Sans";
}
input,textarea { font-family: "Roboto"; text-align: center; resize: none;
}
body { margin: 0; overflow:hidden;
}
textarea { width: 100%; height: 100vh; padding: 0; background: rgba(0,0,0,0); z-index: 1; position: fixed;
}
.preview { z-index: 0; width: 100%; height: 100%; position: fixed; filter: blur(2vw);
}
a { text-decoration: none; color: #bbb;
}
#container h1 { display: inline-block;
}
/* The Modal (background) */
.uploadpreview { position: absolute; float: right; top: 0;
}
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 5; /* 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-duration: 0.4s; 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}
}

File64 - Script Codes JS Codes

WebFont.load({ google: { families: ["Varela Round","Roboto","Product Sans"] } });
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><br><br>You liked my loading duck? It's loaded. <img id='loader' src='http://i.imgur.com/0kvtMLE.gif'></img>");
document.getElementById("Ipreview").src = fr.result document.getElementById("Vpreview").src = fr.result document.getElementById("Vpreview").play() target.value = fr.result }; src.addEventListener("change",function() { showModal("We're loading that data.", "As I said the data is loading. This may take a while depending on how fast your computer is and the size of the file.<br><br>So here's a duck to keep you occupied <img id='loader' src='http://i.imgur.com/0kvtMLE.gif'></img>") // fill fr with image data fr.readAsDataURL(src.files[0]); console.log(src.files[0]) });
}
showImage(document.getElementById("fileuploader"),document.getElementById("data"))
File64 - Script Codes
File64 - Script Codes
Home Page Home
Developer Leo
Username theLMGN
Uploaded January 19, 2023
Rating 3
Size 3,515 Kb
Views 6,072
Do you need developer help for File64?

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
Websocket Box Test
Skycade Reset Counter
A Pen by Leo
CodePen allows autoplaying videos on your profile page.
DJ5K
Fidget Spinner
Play shop joke
Game Start Page
Not You Generator
Pause Based Volume Slider
Create amazing Facebook ads 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!