Finally the front end...
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<meta charset='utf-8'>
<title>Fake Compiler C++</title>
<link rel='stylesheet' href='./style.css'>
</head>
<body >
<div id='root'>
<div id="loader" class="center">
<div class="loader"></div>
</div>
<div class="forms center">
<h1>
Fake Compiler C++
</h1>
<div class="area area_download hide">
<div class="folder_icon transparent">
<svg class="transparent" stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 4l-2-2h-7v13h16v-11h-7zM8 13.5l-3.5-3.5h2.5v-4h2v4h2.5l-3.5 3.5z"></path></svg></div>
<label class="form-label transparent" for="customFile"><span class="transparent">Download</span></label>
</div>
<div class="area txt_area">
<div class="folder_icon folder_icon_txt transparent">
<svg class="transparent" stroke="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 4l-2-2h-7v13h16v-11h-7zM8 7.5l3.5 3.5h-2.5v4h-2v-4h-2.5l3.5-3.5z"></path></svg>
</div>
<div class="folder_icon confirm_icon_txt transparent hide">
<svg class="transparent" stroke="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>
</div>
<label class="form-label transparent txt_browse" for="customFile">Drag & Drop or <span class="transparent">Browse</span></label>
<label class="form-label transparent txt_remove hide" for="customFile">Click to <span class="transparent">Remove</span></label>
<form class="form transparent" id="txt" method="post" enctype="multipart/form-data" action="/uploads">
<input type="hidden" name="msgtype" value="2"/>
<input onchange="txt_change();" type="file" name="uploadFile" accept=".txt" class="form-control hide input_file_txt"/>
<label class="form-label suports transparent" for="customFile">Suports: <span class="span transparent">TXT</span></label>
<button type="submit" value="Upload" class="btn btn-dark hide">Browse File</button>
</form>
</div>
<div class="area exe_area">
<div class="folder_icon folder_icon_exe transparent">
<svg class="transparent" stroke="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 4l-2-2h-7v13h16v-11h-7zM8 7.5l3.5 3.5h-2.5v4h-2v-4h-2.5l3.5-3.5z"></path></svg>
</div>
<div class="folder_icon confirm_icon_exe transparent hide">
<svg class="transparent" stroke="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>
</div>
<label class="form-label transparent exe_browse" for="customFile">Drag & Drop or <span class="transparent">Browse</span></label>
<label class="form-label transparent exe_remove hide" for="customFile">Click to <span class="transparent">Remove</span></label>
<form class="form transparent" id="exe" method="post" enctype="multipart/form-data" action="/uploads">
<input type="hidden" name="msgtype" value="2"/>
<input onchange="exe_change();" type="file" name="uploadFile" accept=".exe" class="form-control hide input_file_exe"/>
<label class="form-label suports transparent" for="customFile">Suports: <span class="span transparent">EXE</span></label>
<button type="submit" value="Upload" class="btn btn-dark hide btn_exe">Browse File</button>
</form>
</div>
<div class="btn_compile noSelect hide">Send</div>
</div>
</div>
<script src='./main.js'></script>
</body>
</html>
style.css
*{
padding: 0px;
margin: 0px;
outline: none;
box-sizing: border-box;
font-family: Arial;
background: #191818;
color: black;
}
h1{
color: #b9b9bd;
margin-top: 50px;
margin-bottom: 50px;
}
#loader{
min-width: 100%;
min-height: 90vh;
position: absolute;
background: #191818;
}
.loader{
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.center-buttons{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.transparent{
background-color: rgba(255,255,255,0);
pointer-events: none;
}
.noSelect{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.hide{
display: none;
}
.btn{
margin-left: 6px;
}
.forms{
margin-top: 50px;
}
.form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.area{
border: 2px dashed #000000;
font-size: 24px;
background: #2d2d2d;
width: 320px;
height: 197px;
padding-top: 36px;
}
.txt_area{
}
.exe_area{
margin-top: 50px;
}
.area_hover{
border: 2px dashed #272629;
background: #3F51B5;
cursor: grabbing;
}
.area_active{
border: 2px dashed #272629;
background: #4CAF50;
cursor: grabbing;
}
.area_download{
padding-top: 46px;
border: 2px solid #000000;
cursor: pointer;
border-radius: 4px
}
.area_download:hover{
background: #4CAF50;
}
.area_download:active{
background: #3F51B5;
}
.folder_icon{
font-size: 50px;
}
span{
font-weight: bold;
font-size: 24px;
}
.suports{
font-size: 18px;
}
.span{
font-size: 16px;
}
.btn_compile{
background: #FFC107;
width: 160px;
height: 52px;
line-height: 52px;
margin-top: 50px;
align-items: center;
font-weight: bold;
font-size: 20px;
border-radius: 4px;
border: 1px solid #000000;
cursor: pointer;
}
.btn_compile:hover{
background: #3F51B5;
}
.btn_compile:active{
background: #4CAF50;
}
main.js
const log = val => console.log( val )
const get = val => document.querySelector( val )
var txt_area = get('.txt_area')
var exe_area = get('.exe_area')
var txt_active = false
var exe_active = false
// audio
var AUDIO = {}
var audio = new Audio('ok.ogg')
AUDIO.play = () => {
audio.play()
}
// loader
var LOADER = {}
LOADER.hide = () => {
get("#loader").classList.add("hide")
}
LOADER.show = () => {
get("#loader").classList.remove("hide")
}
// active and remove
var txt_active_fn = () => {
txt_area.classList.remove("area_hover")
txt_area.classList.add("area_active")
// Confirm
get(".folder_icon_txt").classList.add("hide")
get(".confirm_icon_txt").classList.remove("hide")
get(".txt_browse").classList.add("hide")
get(".txt_remove").classList.remove("hide")
txt_active = true
update_compile_button()
AUDIO.play()
post_txt()
}
var exe_active_fn = () => {
exe_area.classList.remove("area_hover")
exe_area.classList.add("area_active")
// Confirm
get(".folder_icon_exe").classList.add("hide")
get(".confirm_icon_exe").classList.remove("hide")
get(".exe_browse").classList.add("hide")
get(".exe_remove").classList.remove("hide")
exe_active = true
update_compile_button()
AUDIO.play()
}
var txt_remove = () => {
get('.input_file_txt').value = ""
txt_area.classList.remove("area_active")
get(".folder_icon_txt").classList.remove("hide")
get(".confirm_icon_txt").classList.add("hide")
get(".txt_browse").classList.remove("hide")
get(".txt_remove").classList.add("hide")
txt_active = false
update_compile_button()
}
var exe_remove = () => {
get('.input_file_exe').value = ""
exe_area.classList.remove("area_active")
get(".folder_icon_exe").classList.remove("hide")
get(".confirm_icon_exe").classList.add("hide")
get(".exe_browse").classList.remove("hide")
get(".exe_remove").classList.add("hide")
exe_active = false
update_compile_button()
}
// txt_area
txt_area.onclick = function(){
if( !txt_area.classList.contains("area_active") ){
get('.input_file_txt').click()
}else{
txt_remove()
}
}
txt_area.ondragenter = function(){
console.log("start")
if( !txt_area.classList.contains("area_active") ){
txt_area.classList.add("area_hover")
}
}
txt_area.ondragleave = function(){
console.log("end")
if( !txt_area.classList.contains("area_active") ){
txt_area.classList.remove("area_hover")
}
}
txt_area.ondragover = function (e) {
e.preventDefault()
}
txt_area.ondrop = function(e){
e.preventDefault();
console.log("drop")
txt_area.classList.remove("area_hover")
txt_area.classList.add("area_active")
get('.input_file_txt').files = e.dataTransfer.files
const dT = new DataTransfer()
dT.items.add(e.dataTransfer.files[0])
get('.input_file_txt').files = dT.files
// Correct type
var type = get(".input_file_txt").files[0].type
var correct_type = "text/plain"
if(type != correct_type){
txt_remove()
alert("Correct type is TXT")
return 0
}
// Max size
var size = get('.input_file_txt').files[0].size
var max_size = 3525120
if(size > max_size){
txt_remove()
alert("Max size is 3525120 kb")
return 0
}
txt_active_fn()
}
// exe_area
exe_area.onclick = function(){
if( !exe_area.classList.contains("area_active") ){
get('.input_file_exe').click()
}else{
exe_remove()
}
}
exe_area.ondragenter = function(){
console.log("start")
if( !exe_area.classList.contains("area_active") ){
exe_area.classList.add("area_hover")
}
}
exe_area.ondragleave = function(){
console.log("end")
if( !exe_area.classList.contains("area_active") ){
exe_area.classList.remove("area_hover")
}
}
exe_area.ondragover = function (e) {
e.preventDefault()
}
exe_area.ondrop = function(e){
e.preventDefault();
console.log("drop")
exe_area.classList.remove("area_hover")
exe_area.classList.add("area_active")
get('.input_file_exe').files = e.dataTransfer.files
const dT = new DataTransfer()
dT.items.add(e.dataTransfer.files[0])
get('.input_file_exe').files = dT.files
// Correct type
var type = get(".input_file_exe").files[0].type
var correct_type = "application/x-msdownload"
if(type != correct_type){
get('.input_file_exe').files.clear()
exe_area.classList.remove("area_active")
alert("Correct type is EXE")
return 0
}
// Max size
var size = get('.input_file_exe').files[0].size
var max_size = 3525120
if(size > max_size){
get('.input_file_exe').files.clear()
exe_area.classList.remove("area_active")
alert("Max size is 3525120 kb")
return 0
}
exe_active_fn()
}
// compile
var btn_compile = get(".btn_compile")
var update_compile_button = () => {
if(txt_active && exe_active){
btn_compile.classList.remove("hide")
}else{
btn_compile.classList.add("hide")
}
}
btn_compile.onclick = () => {
LOADER.show()
post_exe()
}
// post
const txt = get("#txt");
const exe = get("#exe");
var post_txt = async() => {
const formData = new FormData(txt);
try {
const response = await fetch('/uploads', {
method: 'POST',
body: formData
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
var txt_change = () => {
log("txt_change")
if( get(".input_file_txt").files[0].type == "text/plain" ){
txt_active_fn()
}else{
txt_remove()
}
}
var link = ""
var post_exe = async() => {
const formData = new FormData(exe);
try {
const response = await fetch('/uploads', {
method: 'POST',
body: formData
});
const data = await response.json();
link = data.download_link
console.log(data);
txt_remove()
exe_remove()
LOADER.hide()
get(".txt_area").classList.add("hide")
get(".exe_area").classList.add("hide")
get(".area_download").classList.remove("hide")
} catch (error) {
console.error(error);
}
}
var exe_change = () => {
log("exe_change")
if( get(".input_file_exe").files[0].type == "application/x-msdownload" ){
exe_active_fn()
}else{
exe_remove()
}
}
function saveFile(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
const a = document.createElement('a');
document.body.appendChild(a);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
setTimeout(() => {
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 0)
}
}
get(".area_download").onclick = async() => {
log("download")
try {
var result = await fetch(link).then(async res => ({
filename: res.headers.get('content-disposition').split('filename=')[1].split(';')[0].slice(1, -1),
blob: await res.blob()
}))
saveFile(result.blob, result.filename)
location.reload()
} catch (error) {
console.error(error);
}
}
Demo
Top comments (0)