Compare commits
No commits in common. "d1462470b17712ad2da1cbe075f1209e20980559" and "a228f94dd0d6daa10b5b31d1ff8cde443a254ceb" have entirely different histories.
d1462470b1
...
a228f94dd0
14
README.md
14
README.md
@ -2,21 +2,15 @@
|
||||
|
||||
## What's up?
|
||||
|
||||
Hey! This is a simple web-service called __HuffPress__. What it does? Well, actually it _huffpresses_ files... I mean, compresses files using the [Huffman compression](https://en.wikipedia.org/wiki/Huffman_coding 'Read about it on Wikipedia').
|
||||
|
||||
Also it uses a bit modified [SHICHIRO coding](https://github.com/H1K0/SHICHIRO 'View on GitHub') for compressing and embedding Huffman table.
|
||||
Hey! This is a simple web-service called . What it does? Well, actually it *huffpresses* files... I mean, compresses files using the [Huffman compression](https://en.wikipedia.org/wiki/Huffman_coding "Read about it on Wikipedia").
|
||||
|
||||
## What do I need?
|
||||
|
||||
- Any web browser
|
||||
- 
|
||||
- 
|
||||
- `click` python library
|
||||
- 
|
||||
- `click` library
|
||||
|
||||
## So, how do I use it?
|
||||
|
||||
I think the usage is too easy to explain it, but anyway here's [a video guide](https://yadi.sk/i/aiy78bDaoKqoJQ 'Watch!').
|
||||
|
||||
---
|
||||
|
||||
<p align=center><i>© Masahiko AMANO a.k.a. H1K0, 2020-2021</i></p>
|
||||
I think it's too easy to explain the usage of this service, but anyway here's [a video guide](https://yadi.sk/i/aiy78bDaoKqoJQ "Watch!").
|
||||
|
||||
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
7
css/bootstrap.min.css
vendored
7
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
248
huffman.py
248
huffman.py
@ -1,204 +1,190 @@
|
||||
from os.path import dirname, basename, join, abspath as path
|
||||
from os.path import dirname,basename,join,abspath as path
|
||||
from time import time
|
||||
from datetime import datetime as dt
|
||||
import click
|
||||
from urllib.parse import quote as url
|
||||
|
||||
|
||||
class Log:
|
||||
def __init__(self, path, name):
|
||||
self.path = path
|
||||
self.name = name
|
||||
def __init__(self,path,name):
|
||||
self.path=path
|
||||
self.name=name
|
||||
|
||||
def log(self, msg, name=None):
|
||||
def log(self,msg,name=None):
|
||||
if name is None:
|
||||
name = self.name
|
||||
now = dt.today()
|
||||
with open(self.path, 'a', encoding='utf-8') as file:
|
||||
file.write(f'{now.year}-{str(now.month).rjust(2, "0")}-{str(now.day).rjust(2, "0")} '
|
||||
f'{str(now.hour).rjust(2, "0")}:{str(now.minute).rjust(2, "0")}:{str(now.second).rjust(2, "0")},{str(now.microsecond)[:3]}'
|
||||
name=self.name
|
||||
now=dt.today()
|
||||
with open(self.path,'a',encoding='utf-8') as file:
|
||||
file.write(f'{now.year}-{str(now.month).rjust(2,"0")}-{str(now.day).rjust(2,"0")} '
|
||||
f'{str(now.hour).rjust(2,"0")}:{str(now.minute).rjust(2,"0")}:{str(now.second).rjust(2,"0")},{str(now.microsecond)[:3]}'
|
||||
' | '
|
||||
f'{name}'
|
||||
' | '
|
||||
f'{msg}\n')
|
||||
|
||||
|
||||
log = Log(join(dirname(__file__), 'hfm.log'), 'hfm-py')
|
||||
output = ''
|
||||
log=Log(join(dirname(__file__),'hfm.log'),'hfm-py')
|
||||
|
||||
|
||||
def huffman(data):
|
||||
units = {} # getting element-wise info
|
||||
units={} #getting element-wise info
|
||||
for c in data:
|
||||
if c in units:
|
||||
units[c] += 1
|
||||
units[c]+=1
|
||||
else:
|
||||
units[c] = 1
|
||||
codes = dict.fromkeys(units.keys(), '')
|
||||
units = sorted([([u], units[u]) for u in units], key=lambda u: u[1])
|
||||
units[c]=1
|
||||
units,codes=sorted([([u],units[u]) for u in units],key=lambda u:u[1]),dict.fromkeys(units.keys(),'')
|
||||
|
||||
while units: # creating Haffman table
|
||||
if len(units) > 2:
|
||||
b = int(units[0][1] + units[1][1] > units[1][1] + units[2][1])
|
||||
while units: #creating Haffman table
|
||||
if len(units)>2:
|
||||
b=int(units[0][1]+units[1][1]>units[1][1]+units[2][1])
|
||||
else:
|
||||
b = 0
|
||||
b=0
|
||||
for c in units[b][0]:
|
||||
codes[c] = '0' + codes[c]
|
||||
for c in units[1 + b][0]:
|
||||
codes[c] = '1' + codes[c]
|
||||
units[2 * b] = units[b][0] + units[1 + b][0], units[b][1] + units[1 + b][1]
|
||||
if len(units) > 2:
|
||||
codes[c]='0'+codes[c]
|
||||
for c in units[1+b][0]:
|
||||
codes[c]='1'+codes[c]
|
||||
units[2*b]=units[b][0]+units[1+b][0],units[b][1]+units[1+b][1]
|
||||
if len(units)>2:
|
||||
del units[1]
|
||||
units.sort(key=lambda u: u[1])
|
||||
units.sort(key=lambda u:u[1])
|
||||
else:
|
||||
del units
|
||||
break
|
||||
return codes
|
||||
|
||||
|
||||
def shichiro_encode(table):
|
||||
table = ';'.join([f'{k};{table[k]}' for k in table]).split(';')
|
||||
bits = ''
|
||||
|
||||
def tbl(table):
|
||||
table=';'.join([f'{k};{table[k]}' for k in table]).split(';')
|
||||
byts=[]
|
||||
for i in range(len(table)):
|
||||
if i % 2:
|
||||
code = table[i]
|
||||
bits += bin(len(code))[2:].rjust(8,'0')
|
||||
bits += code
|
||||
if i%2:
|
||||
num=table[i]
|
||||
else:
|
||||
bits += bin(int(table[i]))[2:].rjust(8, '0')
|
||||
continue
|
||||
return bits
|
||||
num=bin(int(table[i]))[2:]
|
||||
while len(num)>7:
|
||||
byts.append(int('1'+num[:7],2))
|
||||
num=num[7:]
|
||||
byts.append(int(num,2))
|
||||
byts.append(8-len(num))
|
||||
return byts
|
||||
|
||||
|
||||
def shichiro_decode(byts):
|
||||
bits=''.join(byts)
|
||||
dec = []
|
||||
table = {}
|
||||
stack = ''
|
||||
i = 0
|
||||
c = 0
|
||||
while i < len(bits) and len(bits) - i >= 8:
|
||||
if c % 2 == 0:
|
||||
dec.append(bits[i:i+8])
|
||||
i += 8
|
||||
c += 1
|
||||
continue
|
||||
bitlen = int(bits[i:i+8], 2)
|
||||
i += 8
|
||||
dec.append(bits[i:i+bitlen])
|
||||
i += bitlen
|
||||
c += 1
|
||||
for i in range(0, len(dec), 2):
|
||||
table[dec[i + 1]] = int(dec[i], 2)
|
||||
|
||||
def detbl(byts):
|
||||
dec=[]
|
||||
table={}
|
||||
stack=''
|
||||
i=0
|
||||
while i<len(byts):
|
||||
if byts[i][0]=='1':
|
||||
stack+=byts[i][1:]
|
||||
else:
|
||||
stack+=byts[i][int(byts[i+1],2):]
|
||||
dec.append(stack[:])
|
||||
stack=''
|
||||
i+=1
|
||||
i+=1
|
||||
for i in range(0,len(dec),2):
|
||||
table[dec[i+1]]=int(dec[i],2)
|
||||
return table
|
||||
|
||||
|
||||
|
||||
def compress_file(filename):
|
||||
global log, output
|
||||
log.log(f"Loading '{filename}'...")
|
||||
with open(filename, 'rb') as file: # get data
|
||||
data = list(map(int, file.read()))
|
||||
with open(filename,'rb') as file: #get data
|
||||
data=list(map(int,file.read()))
|
||||
log.log(f'Original size: {len(data)} bytes.')
|
||||
log.log('Creating Huffman table...')
|
||||
hf = huffman(data)
|
||||
table = shichiro_encode(hf)
|
||||
hf=huffman(data)
|
||||
table=tbl(hf)
|
||||
log.log('Embedding Huffman table...')
|
||||
tablen = bin(len(table))[2:] # embed the table
|
||||
bits = ''
|
||||
bitlen = bin(len(tablen))[2:]
|
||||
while len(bitlen) > 7:
|
||||
bits += '1' + bitlen[:7]
|
||||
bitlen = bitlen[7:]
|
||||
bits += bitlen.rjust(8, '0') + bin(len(bitlen))[2:].rjust(8, '0') + tablen + table
|
||||
log.log(f'Huffman table size: {len(bits)} bits.')
|
||||
out=[]
|
||||
ln=bin(len(table))[2:] #embed the table
|
||||
while len(ln)>7:
|
||||
out.append(int('1'+ln[:7],2))
|
||||
ln=ln[7:]
|
||||
out+=[int(ln,2),8-len(ln)]+table
|
||||
log.log(f'Huffman table size: {len(out)} bytes.')
|
||||
log.log('Compressing...')
|
||||
for i in range(len(data)): # encode to Haffman
|
||||
bits += hf[data[i]]
|
||||
out = []
|
||||
for i in range(0, len(bits), 8):
|
||||
out.append(int(bits[i:i+8].ljust(8, '0'), 2))
|
||||
out.append(len(bits) % 8)
|
||||
stack=''
|
||||
for i in range(len(data)): #encode to Haffman
|
||||
stack+=hf[data[i]]
|
||||
while len(stack)>=8:
|
||||
out.append(int(stack[:8],2))
|
||||
stack=stack[8:]
|
||||
out+=[int(stack.ljust(8,'0'),2),len(stack)]
|
||||
log.log(f'Compressed size: {len(out)} bytes.')
|
||||
log.log(f"Saving to '{filename}.hfm'...")
|
||||
with open(f'{filename}.hfm', 'wb') as file: # save Haffman code
|
||||
with open(f'{filename}.hfm','wb') as file: #save Haffman code
|
||||
file.write(bytes(out))
|
||||
log.log('SUCCESSFULLY COMPRESSED')
|
||||
output += f'"origSize":{len(data)},'
|
||||
output += f'"compSize":{len(out)},'
|
||||
print(f'"origSize":{len(data)},')
|
||||
print(f'"compSize":{len(out)},')
|
||||
|
||||
|
||||
def decompress_file(filename):
|
||||
global log, output
|
||||
log.log(f"Loading '{filename}'...")
|
||||
with open(filename, 'rb') as file: # get data
|
||||
data = [bin(byte)[2:].rjust(8, '0') for byte in file.read()]
|
||||
os = len(data)
|
||||
data[-2] = data[-2][:int(data[-1], 2)]
|
||||
with open(filename,'rb') as file: #get data
|
||||
data=[bin(byte)[2:].rjust(8,'0')for byte in file.read()]
|
||||
os=len(data)
|
||||
data[-2]=data[-2][:int(data[-1],2)]
|
||||
del data[-1]
|
||||
log.log('Extracting Huffman table...')
|
||||
bitlen = '' # extract the table
|
||||
i = 0
|
||||
ln='' #extract the table
|
||||
i=0
|
||||
while 1:
|
||||
if data[i][0] == '1':
|
||||
bitlen += data[i][1:]
|
||||
if data[i][0]=='1':
|
||||
ln+=data[i][1:]
|
||||
else:
|
||||
bitlen += data[i][int(data[i + 1], 2):]
|
||||
ln+=data[i][int(data[i+1],2):]
|
||||
break
|
||||
i += 1
|
||||
del data[:i + 2]
|
||||
data = ''.join(data)
|
||||
bitlen = int(bitlen, 2)
|
||||
tablen = int(data[:bitlen], 2)
|
||||
table = shichiro_decode(data[bitlen:tablen+bitlen])
|
||||
data = data[bitlen+tablen:]
|
||||
stack = ''
|
||||
out = []
|
||||
i+=1
|
||||
del data[:i+2]
|
||||
table=detbl(data[:int(ln,2)])
|
||||
del data[:int(ln,2)]
|
||||
data=''.join(data)
|
||||
stack=''
|
||||
out=[]
|
||||
log.log('Decompressing...')
|
||||
for c in data: # decode Haffman
|
||||
stack += c
|
||||
for c in data: #decode Haffman
|
||||
stack+=c
|
||||
if stack in table:
|
||||
out.append(int(table[stack]))
|
||||
stack = ''
|
||||
if filename[-4:] == '.hfm':
|
||||
filename = filename[:-4]
|
||||
stack=''
|
||||
filename=filename[:-4]
|
||||
log.log(f"Saving to '{filename}'...")
|
||||
with open(f'{filename}', 'wb') as file: # save decoded data
|
||||
with open(f'{filename}','wb') as file: #save decoded data
|
||||
file.write(bytes(out))
|
||||
log.log(f'SUCCESSFULLY DECOMPRESSED')
|
||||
output += f'"compSize":{os},'
|
||||
output += f'"origSize":{len(out)},'
|
||||
print(f'"compSize":{os},')
|
||||
print(f'"origSize":{len(out)},')
|
||||
|
||||
|
||||
@click.command(options_metavar='[-c / -d]')
|
||||
@click.argument('files', nargs=-1, metavar='<file [file [...]]>')
|
||||
@click.option('-c/-d', 'comp', default=True, help='Compress/decompress mode selectors.')
|
||||
def CLI(files, comp):
|
||||
global log, output
|
||||
log.log(f'hfm {"-c" * comp}{"-d" * (not comp)} "' + "\" \"".join(files) + '"')
|
||||
@click.argument('files',nargs=-1,metavar='<file [file [...]]>')
|
||||
@click.option('-c/-d','comp',default=True,help='Compress/decompress mode selectors.')
|
||||
def CLI(files,comp):
|
||||
log.log(f'hfm {"-c"*comp}{"-d"*(not comp)} {" ".join(files)}')
|
||||
for file in files:
|
||||
output += '{'
|
||||
stime = time()
|
||||
print('{')
|
||||
stime=time()
|
||||
if comp:
|
||||
try:
|
||||
compress_file(path(file))
|
||||
wtime = time() - stime
|
||||
output += '"status":true,'
|
||||
output += f'"time":{round(wtime, 3)},'
|
||||
output += f'"dlink":"./files/{url(basename(file)) + ".hfm"}"'
|
||||
except Exception as e:
|
||||
output += f'"status":false'
|
||||
wtime=time()-stime
|
||||
print('"status":true,')
|
||||
print(f'"time":{round(wtime,3)},')
|
||||
print(f'"dlink":"./files/{basename(file)+".hfm"}"')
|
||||
else:
|
||||
try:
|
||||
decompress_file(path(file))
|
||||
wtime = time() - stime
|
||||
output += '"status":true,'
|
||||
output += f'"time":{round(wtime, 3)},'
|
||||
output += f'"dlink":"./files/{url(basename(file)[:-4])}"'
|
||||
wtime=time()-stime
|
||||
print('"status":true,')
|
||||
print(f'"time":{round(wtime,3)},')
|
||||
print(f'"dlink":"./files/{basename(file)[:-4]}"')
|
||||
except Exception as e:
|
||||
output += f'"status":false'
|
||||
output += '}'
|
||||
print(output)
|
||||
print(f'"status":false')
|
||||
print('}')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
if __name__=='__main__':
|
||||
CLI()
|
||||
@ -1,17 +1,12 @@
|
||||
<?php
|
||||
$mode = $_POST['mode'];
|
||||
$file = $_FILES['file'];
|
||||
if (!is_dir('./files')) {
|
||||
mkdir('./files');
|
||||
$mode=$_POST['mode'];
|
||||
$file=$_FILES['file'];
|
||||
if (!is_dir(dirname(__file__).'/files')){
|
||||
mkdir(dirname(__file__).'/files');
|
||||
}
|
||||
if (!file_exists('./files/counter.txt')){
|
||||
file_put_contents('./files/counter.txt', '0');
|
||||
}
|
||||
$id = (int)file_get_contents('./files/counter.txt');
|
||||
file_put_contents('./files/counter.txt', (string)($id+1));
|
||||
$path = "./files/{$id}__".basename($file['name']);
|
||||
move_uploaded_file($file['tmp_name'], $path);
|
||||
$result = json_decode((string)shell_exec(dirname(__file__)."/huffman.py -".($mode == 'compress' ? 'c' : 'd')." \"{$path}\""));
|
||||
$path=dirname(__file__).'/files/'.basename($file['name']);
|
||||
move_uploaded_file($file['tmp_name'],$path);
|
||||
$result=json_decode((string)shell_exec('python '.dirname(__file__).'/huffman.py -'.($mode=='compress'?'c':'d').' "'.$path.'"'));
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($result);
|
||||
?>
|
||||
File diff suppressed because one or more lines are too long
33
index.html
33
index.html
@ -1,16 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HuffPress</title>
|
||||
<link rel="shortcut icon" href="./favicon.ico" />
|
||||
<link rel="stylesheet" href="./css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
<script src="./js/jquery-3.6.0.min.js"></script>
|
||||
<script src="./js/console.image.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>HuffPress</h1>
|
||||
</header>
|
||||
@ -27,20 +26,18 @@
|
||||
<div class="form-group">
|
||||
<div class="custom-file">
|
||||
<label class="custom-file-label" for="file">Choose file...</label>
|
||||
<input id="file" type="file" class="custom-file-input" required />
|
||||
<input id="file" type="file" class="custom-file-input" required>
|
||||
<div class="invalid-feedback">Let's choose your file!</div>
|
||||
<div class="valid-feedback">Ready to start!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="submit" type="submit" class="btn btn-primary" value="HuffPress!" />
|
||||
<input id="submit" type="submit" class="btn btn-primary" value="HuffPress!">
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
<div class="wrap">
|
||||
<div class="process">
|
||||
<img src="./images/processing.gif" alt="Processing..." />
|
||||
</div>
|
||||
<div class="process"><img src="processing.gif" alt="Processing..."></div>
|
||||
<div class="complete">
|
||||
<h3>Completed!</h3>
|
||||
<p class="status"></p>
|
||||
@ -51,12 +48,12 @@
|
||||
</div>
|
||||
<div class="error">
|
||||
<h3>Error!</h3>
|
||||
<p class="status">Something went wrong!</p>
|
||||
<p class="status">Unable to decompress this file!</p>
|
||||
<div class="btncont">
|
||||
<button class="btn closebtn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/script.js"></script>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
js/console.image.min.js
vendored
4
js/console.image.min.js
vendored
File diff suppressed because one or more lines are too long
2
js/jquery-3.6.0.min.js
vendored
2
js/jquery-3.6.0.min.js
vendored
File diff suppressed because one or more lines are too long
106
js/script.js
106
js/script.js
@ -1,106 +0,0 @@
|
||||
function winsize() {
|
||||
if (
|
||||
(!toggled && $(window).width() / $(window).height() > 90/31) ||
|
||||
(toggled && $(window).width() / ($(window).height()-219) > 18/7)
|
||||
) {
|
||||
$('body').css('justify-content', 'flex-start');
|
||||
} else {
|
||||
$('body').css('justify-content', 'center');
|
||||
}
|
||||
};
|
||||
$(window).on('load', function () {
|
||||
setTimeout(() => {
|
||||
$('main').slideDown(500);
|
||||
}, 100);
|
||||
winsize();
|
||||
});
|
||||
$(window).on('resize', function () {
|
||||
winsize();
|
||||
});
|
||||
|
||||
var toggled = false;
|
||||
$('h2').click(function () {
|
||||
var time = 300;
|
||||
if (toggled) {
|
||||
$('form').slideUp(time);
|
||||
$('main').css('min-height', '9vw');
|
||||
setTimeout(() => {
|
||||
$('h2').css('border-bottom', '0');
|
||||
}, time);
|
||||
toggled = false;
|
||||
winsize();
|
||||
} else {
|
||||
$('main').css('min-height', 'calc(9vw + 260px)');
|
||||
$('form').slideDown(time);
|
||||
$('form').css('display', 'flex');
|
||||
$('h2').css('border-bottom', '1px solid black');
|
||||
toggled = true;
|
||||
setTimeout(() => {
|
||||
winsize();
|
||||
}, time);
|
||||
};
|
||||
});
|
||||
|
||||
$('form').on('submit', function submit(e) {
|
||||
e.preventDefault();
|
||||
$('.wrap').css('display', 'flex');
|
||||
$('.process').css('display', 'block');
|
||||
var form = new FormData();
|
||||
form.append('mode', $('#mode').val());
|
||||
$.each($('#file')[0].files, function (i, file) {
|
||||
form.append('file', file);
|
||||
});
|
||||
$.ajax({
|
||||
url: 'huffpress.php',
|
||||
type: 'POST',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
dataType: 'json',
|
||||
data: form,
|
||||
success: function (resp) {
|
||||
if (resp === null) {
|
||||
$('.process').css('display', 'none');
|
||||
$('.error').css('display', 'block');
|
||||
} else if (resp.status) {
|
||||
$('.process').css('display', 'none');
|
||||
$('.complete').css('display', 'block');
|
||||
if ($('#mode').val() == 'compress') {
|
||||
$('.complete .status').html(
|
||||
`Original size: ${resp.origSize} B<br>Compressed size: ${resp.compSize} B<br>Time: ${resp.time} s`
|
||||
);
|
||||
} else {
|
||||
$('.complete .status').html(
|
||||
`Compressed size: ${resp.compSize} B<br>Original size: ${resp.origSize} B<br>Time: ${resp.time} s`
|
||||
);
|
||||
}
|
||||
$('#dlink').attr('href', resp.dlink);
|
||||
} else {
|
||||
$('.process').css('display', 'none');
|
||||
$('.error').css('display', 'block');
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$('.closebtn').click(function () {
|
||||
$('.wrap').css('display', 'none');
|
||||
$('.process').css('display', 'none');
|
||||
$('.error').css('display', 'none');
|
||||
$('.complete').css('display', 'none');
|
||||
});
|
||||
|
||||
$(window).on('load', function() {
|
||||
let msg = 'И что это мы тут забыли?\nА ну кыш отседова!\nНашлись тут кулхацкеры понимаешь!';
|
||||
let style = [
|
||||
'padding: 1rem;',
|
||||
'font-family: monospace;',
|
||||
'font-size: 18pt;',
|
||||
].join('');
|
||||
console.log('%c%s', style, msg);
|
||||
$.ajax({
|
||||
url: './images/angry_huffman',
|
||||
success: function(data) {
|
||||
console.image(data);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 972 KiB After Width: | Height: | Size: 972 KiB |
76
script.js
Normal file
76
script.js
Normal file
@ -0,0 +1,76 @@
|
||||
function winsize(){
|
||||
if (!toggled && $(window).width()/$(window).height()>(90/31) ||
|
||||
toggled && $(window).width()/($(window).height()-219)>(18/7)){
|
||||
$('body').css('justify-content','flex-start');
|
||||
} else {
|
||||
$('body').css('justify-content','center');
|
||||
}
|
||||
};
|
||||
window.onload=function(){
|
||||
setTimeout(()=>{$('main').slideDown(500)},100);
|
||||
winsize();
|
||||
};
|
||||
$(window).on('resize',function(){
|
||||
winsize();
|
||||
});
|
||||
|
||||
var toggled=false;
|
||||
$('h2').click(function(){
|
||||
var time=300;
|
||||
if (toggled) {
|
||||
$('form').slideUp(time);
|
||||
$('main').css('min-height','9vw');
|
||||
setTimeout(()=>{$('h2').css('border-bottom','0')},time);
|
||||
toggled=false;
|
||||
winsize();
|
||||
} else {
|
||||
$('main').css('min-height','calc(9vw + 260px)');
|
||||
$('form').slideDown(time);
|
||||
$('form').css('display','flex');
|
||||
$('h2').css('border-bottom','1px solid black');
|
||||
toggled=true;
|
||||
setTimeout(()=>{winsize()},time);
|
||||
}
|
||||
});
|
||||
|
||||
$('form').on('submit',function submit(e){
|
||||
e.preventDefault();
|
||||
$('.wrap').css('display','flex');
|
||||
$('.process').css('display','block');
|
||||
var form=new FormData();
|
||||
form.append('mode',$('#mode').val());
|
||||
$.each($('#file')[0].files, function(i, file) {
|
||||
form.append('file', file);
|
||||
});
|
||||
$.ajax({
|
||||
url: 'huffpress.php',
|
||||
type: 'POST',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
dataType: 'json',
|
||||
data: form,
|
||||
success: function(resp){
|
||||
console.log(resp);
|
||||
if (resp.status){
|
||||
$('.process').css('display','none');
|
||||
$('.complete').css('display','block');
|
||||
if ($('#mode').val()=='compress'){
|
||||
$('.complete .status').html(`Original size: ${resp.origSize} B<br>Compressed size: ${resp.compSize} B<br>Time: ${resp.time} s`);
|
||||
} else {
|
||||
$('.complete .status').html(`Compressed size: ${resp.compSize} B<br>Original size: ${resp.origSize} B<br>Time: ${resp.time} s`);
|
||||
}
|
||||
$('#dlink').attr('href',resp.dlink);
|
||||
} else {
|
||||
$('.process').css('display','none');
|
||||
$('.error').css('display','block');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.closebtn').click(function(){
|
||||
$('.wrap').css('display','none');
|
||||
$('.process').css('display','none');
|
||||
$('.error').css('display','none');
|
||||
$('.complete').css('display','none');
|
||||
});
|
||||
@ -1,12 +1,11 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Epilogue&family=Secular+One&display=swap');
|
||||
html,
|
||||
body {
|
||||
html,body{
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
body{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -16,16 +15,16 @@ body {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url(../images/bg.webp);
|
||||
background-image: url(bg.webp);
|
||||
background-size: cover;
|
||||
}
|
||||
header {
|
||||
header{
|
||||
margin: 0;
|
||||
margin-top: 2vw;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
h1{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
@ -34,21 +33,21 @@ h1 {
|
||||
text-shadow: 0 0 1vw black;
|
||||
cursor: default;
|
||||
}
|
||||
main {
|
||||
main{
|
||||
display: none;
|
||||
margin-bottom: 2vw;
|
||||
background-color: #fff8;
|
||||
box-shadow: 0 0 0.5vw black;
|
||||
box-shadow: 0 0 .5vw black;
|
||||
border-radius: 1.5vw;
|
||||
min-height: 9vw;
|
||||
transition: 0.3s;
|
||||
transition: .3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
main:hover {
|
||||
main:hover{
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 1vw black;
|
||||
}
|
||||
h2 {
|
||||
h2{
|
||||
margin: 0;
|
||||
padding: 0 2vw;
|
||||
height: 9vw;
|
||||
@ -56,14 +55,14 @@ h2 {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: hsla(270, 80%, 80%, 0.6);
|
||||
background-color: hsla(270,80%,80%,.6);
|
||||
border-bottom: 0;
|
||||
font-family: Secular One;
|
||||
font-size: 3vw;
|
||||
text-shadow: 2.5px 2px 0.5px white;
|
||||
text-shadow: 2.5px 2px .5px white;
|
||||
cursor: pointer;
|
||||
}
|
||||
form {
|
||||
form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -72,7 +71,7 @@ form {
|
||||
padding: 2vw 2vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wrap {
|
||||
.wrap{
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -84,9 +83,7 @@ form {
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.process,
|
||||
.complete,
|
||||
.error {
|
||||
.process,.complete,.error{
|
||||
display: none;
|
||||
padding: 2vw 5vw;
|
||||
background-color: white;
|
||||
@ -95,28 +92,28 @@ form {
|
||||
font-size: 5vw;
|
||||
cursor: default;
|
||||
}
|
||||
.process img {
|
||||
.process img{
|
||||
width: 15vw;
|
||||
}
|
||||
h3 {
|
||||
h3{
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
margin-top: .5vw;
|
||||
font-family: Secular One;
|
||||
font-size: 3vw;
|
||||
}
|
||||
.status {
|
||||
.status{
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
margin-top: .5vw;
|
||||
font-family: monospace;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
.btncont {
|
||||
.btncont{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.btncont * {
|
||||
.btncont *{
|
||||
font-size: 2vw;
|
||||
}
|
||||
#dlink {
|
||||
#dlink{
|
||||
margin-right: 1vw;
|
||||
}
|
||||
Reference in New Issue
Block a user