H1K0-dev/huffpress
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rearranged files and beautified code

Browse Source
This commit is contained in:
Masahiko AMANO 2021-05-03 00:45:54 +03:00
parent a228f94dd0
commit 31d5b1c0f2
8 changed files with 341 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -2,15 +2,15 @@
## What's up? ## What's up?
Hey! This is a simple web-service called ![HuffPress](https://img.shields.io/badge/Huff-Press-orange.svg). 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"). Hey! This is a simple web-service called ![HuffPress](https://img.shields.io/badge/Huff-Press-orange.svg). 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? ## What do I need?
- Any web browser - Any web browser
- ![PHP 7+](https://img.shields.io/badge/PHP-7+-blueviolet.svg) - ![PHP 7+](https://img.shields.io/badge/PHP-7+-blueviolet.svg)
- ![Python 3+](https://img.shields.io/badge/Python-3+-blue.svg) - ![Python 3.7+](https://img.shields.io/badge/Python-3+-blue.svg)
- `click` library - `click` library
## So, how do I use it? ## So, how do I use it?
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!"). 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!').

5
huffman.py
View File

@ -3,6 +3,7 @@ from time import time
from datetime import datetime as dt from datetime import datetime as dt
import click import click
class Log: class Log:
def __init__(self, path, name): def __init__(self, path, name):
self.path = path self.path = path
@ -20,6 +21,7 @@ class Log:
' | ' ' | '
f'{msg}\n') f'{msg}\n')
log = Log(join(dirname(__file__), 'hfm.log'), 'hfm-py') log = Log(join(dirname(__file__), 'hfm.log'), 'hfm-py')
@ -51,7 +53,6 @@ def huffman(data):
return codes return codes
def tbl(table): def tbl(table):
table = ';'.join([f'{k};{table[k]}' for k in table]).split(';') table = ';'.join([f'{k};{table[k]}' for k in table]).split(';')
byts = [] byts = []
@ -68,7 +69,6 @@ def tbl(table):
return byts return byts
def detbl(byts): def detbl(byts):
dec = [] dec = []
table = {} table = {}
@ -88,7 +88,6 @@ def detbl(byts):
return table return table
def compress_file(filename): def compress_file(filename):
log.log(f"Loading '{filename}'...") log.log(f"Loading '{filename}'...")
with open(filename, 'rb') as file: # get data with open(filename, 'rb') as file: # get data

0
bg.webp → images/bg.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

0
processing.gif → images/processing.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 972 KiB

After

Width:  |  Height:  |  Size: 972 KiB

37
index.html
View File

@ -1,12 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HuffPress</title> <title>HuffPress</title>
<link rel="shortcut icon" href="favicon.ico"> <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
<link rel="stylesheet" href="style.css"> 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> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head> </head>
<body> <body>
@ -15,7 +20,12 @@
</header> </header>
<main> <main>
<h2>Compress your files with the Huffman compression!</h2> <h2>Compress your files with the Huffman compression!</h2>
<form id="form" class="was-validated" method="post" enctype="multipart/form-data"> <form
id="form"
class="was-validated"
method="post"
enctype="multipart/form-data"
>
<div class="form-group"> <div class="form-group">
<label for="mode">Select mode</label> <label for="mode">Select mode</label>
<select id="mode" class="form-control" id="mode"> <select id="mode" class="form-control" id="mode">
@ -26,18 +36,25 @@
<div class="form-group"> <div class="form-group">
<div class="custom-file"> <div class="custom-file">
<label class="custom-file-label" for="file">Choose file...</label> <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="invalid-feedback">Let's choose your file!</div>
<div class="valid-feedback">Ready to start!</div> <div class="valid-feedback">Ready to start!</div>
</div> </div>
</div> </div>
<div class="form-group"> <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> </div>
</form> </form>
</main> </main>
<div class="wrap"> <div class="wrap">
<div class="process"><img src="processing.gif" alt="Processing..."></div> <div class="process">
<img src="./images/processing.gif" alt="Processing..." />
</div>
<div class="complete"> <div class="complete">
<h3>Completed!</h3> <h3>Completed!</h3>
<p class="status"></p> <p class="status"></p>
@ -54,6 +71,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="./script.js"></script>
</body> </body>
</html> </html>

116
script.js
View File

@ -1,47 +1,55 @@
function winsize() { function winsize() {
if (!toggled && $(window).width()/$(window).height()>(90/31) || if (
toggled && $(window).width()/($(window).height()-219)>(18/7)){ (!toggled && $(window).width() / $(window).height() > 90 / 31) ||
$('body').css('justify-content','flex-start'); (toggled && $(window).width() / ($(window).height() - 219) > 18 / 7)
) {
$('body').css('justify-content', 'flex-start')
} else { } else {
$('body').css('justify-content','center'); $('body').css('justify-content', 'center')
}
} }
};
window.onload = function () { window.onload = function () {
setTimeout(()=>{$('main').slideDown(500)},100); setTimeout(() => {
winsize(); $('main').slideDown(500)
}; }, 100)
$(window).on('resize',function(){ winsize()
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);
} }
}); $(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) { $('form').on('submit', function submit(e) {
e.preventDefault(); e.preventDefault()
$('.wrap').css('display','flex'); $('.wrap').css('display', 'flex')
$('.process').css('display','block'); $('.process').css('display', 'block')
var form=new FormData(); var form = new FormData()
form.append('mode',$('#mode').val()); form.append('mode', $('#mode').val())
$.each($('#file')[0].files, function (i, file) { $.each($('#file')[0].files, function (i, file) {
form.append('file', file); form.append('file', file)
}); })
$.ajax({ $.ajax({
url: 'huffpress.php', url: 'huffpress.php',
type: 'POST', type: 'POST',
@ -50,27 +58,31 @@ $('form').on('submit',function submit(e){
dataType: 'json', dataType: 'json',
data: form, data: form,
success: function (resp) { success: function (resp) {
console.log(resp); console.log(resp)
if (resp.status) { if (resp.status) {
$('.process').css('display','none'); $('.process').css('display', 'none')
$('.complete').css('display','block'); $('.complete').css('display', 'block')
if ($('#mode').val() == 'compress') { if ($('#mode').val() == 'compress') {
$('.complete .status').html(`Original size:&nbsp;&nbsp;&nbsp;${resp.origSize} B<br>Compressed size: ${resp.compSize} B<br>Time:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${resp.time} s`); $('.complete .status').html(
`Original size:&nbsp;&nbsp;&nbsp;${resp.origSize} B<br>Compressed size: ${resp.compSize} B<br>Time:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${resp.time} s`
)
} else { } else {
$('.complete .status').html(`Compressed size: ${resp.compSize} B<br>Original size:&nbsp;&nbsp;&nbsp;${resp.origSize} B<br>Time:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${resp.time} s`); $('.complete .status').html(
`Compressed size: ${resp.compSize} B<br>Original size:&nbsp;&nbsp;&nbsp;${resp.origSize} B<br>Time:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${resp.time} s`
)
} }
$('#dlink').attr('href',resp.dlink); $('#dlink').attr('href', resp.dlink)
} else { } else {
$('.process').css('display','none'); $('.process').css('display', 'none')
$('.error').css('display','block'); $('.error').css('display', 'block')
} }
} },
}); })
}); })
$('.closebtn').click(function () { $('.closebtn').click(function () {
$('.wrap').css('display','none'); $('.wrap').css('display', 'none')
$('.process').css('display','none'); $('.process').css('display', 'none')
$('.error').css('display','none'); $('.error').css('display', 'none')
$('.complete').css('display','none'); $('.complete').css('display', 'none')
}); })

21
style.css
View File

@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Epilogue&family=Secular+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Epilogue&family=Secular+One&display=swap');
html,body{ html,
body {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
@ -15,7 +16,7 @@ body{
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-image: url(bg.webp); background-image: url(./images/bg.webp);
background-size: cover; background-size: cover;
} }
header { header {
@ -37,10 +38,10 @@ main{
display: none; display: none;
margin-bottom: 2vw; margin-bottom: 2vw;
background-color: #fff8; background-color: #fff8;
box-shadow: 0 0 .5vw black; box-shadow: 0 0 0.5vw black;
border-radius: 1.5vw; border-radius: 1.5vw;
min-height: 9vw; min-height: 9vw;
transition: .3s; transition: 0.3s;
overflow: hidden; overflow: hidden;
} }
main:hover { main:hover {
@ -55,11 +56,11 @@ h2{
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: hsla(270,80%,80%,.6); background-color: hsla(270, 80%, 80%, 0.6);
border-bottom: 0; border-bottom: 0;
font-family: Secular One; font-family: Secular One;
font-size: 3vw; font-size: 3vw;
text-shadow: 2.5px 2px .5px white; text-shadow: 2.5px 2px 0.5px white;
cursor: pointer; cursor: pointer;
} }
form { form {
@ -83,7 +84,9 @@ form{
align-items: center; align-items: center;
z-index: 10; z-index: 10;
} }
.process,.complete,.error{ .process,
.complete,
.error {
display: none; display: none;
padding: 2vw 5vw; padding: 2vw 5vw;
background-color: white; background-color: white;
@ -97,13 +100,13 @@ form{
} }
h3 { h3 {
margin: 0; margin: 0;
margin-top: .5vw; margin-top: 0.5vw;
font-family: Secular One; font-family: Secular One;
font-size: 3vw; font-size: 3vw;
} }
.status { .status {
margin: 0; margin: 0;
margin-top: .5vw; margin-top: 0.5vw;
font-family: monospace; font-family: monospace;
font-size: 1.5vw; font-size: 1.5vw;
} }