Rearranged files and beautified code
This commit is contained in:
parent
a228f94dd0
commit
31d5b1c0f2
@ -2,15 +2,15 @@
|
||||
|
||||
## What's up?
|
||||
|
||||
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").
|
||||
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` library
|
||||
|
||||
## 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!').
|
||||
|
||||
@ -3,6 +3,7 @@ from time import time
|
||||
from datetime import datetime as dt
|
||||
import click
|
||||
|
||||
|
||||
class Log:
|
||||
def __init__(self, path, name):
|
||||
self.path = path
|
||||
@ -20,6 +21,7 @@ class Log:
|
||||
' | '
|
||||
f'{msg}\n')
|
||||
|
||||
|
||||
log = Log(join(dirname(__file__), 'hfm.log'), 'hfm-py')
|
||||
|
||||
|
||||
@ -51,7 +53,6 @@ def huffman(data):
|
||||
return codes
|
||||
|
||||
|
||||
|
||||
def tbl(table):
|
||||
table = ';'.join([f'{k};{table[k]}' for k in table]).split(';')
|
||||
byts = []
|
||||
@ -68,7 +69,6 @@ def tbl(table):
|
||||
return byts
|
||||
|
||||
|
||||
|
||||
def detbl(byts):
|
||||
dec = []
|
||||
table = {}
|
||||
@ -88,7 +88,6 @@ def detbl(byts):
|
||||
return table
|
||||
|
||||
|
||||
|
||||
def compress_file(filename):
|
||||
log.log(f"Loading '{filename}'...")
|
||||
with open(filename, 'rb') as file: # get data
|
||||
|
||||
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 972 KiB After Width: | Height: | Size: 972 KiB |
37
index.html
37
index.html
@ -1,12 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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="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">
|
||||
<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>
|
||||
@ -15,7 +20,12 @@
|
||||
</header>
|
||||
<main>
|
||||
<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">
|
||||
<label for="mode">Select mode</label>
|
||||
<select id="mode" class="form-control" id="mode">
|
||||
@ -26,18 +36,25 @@
|
||||
<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="processing.gif" alt="Processing..."></div>
|
||||
<div class="process">
|
||||
<img src="./images/processing.gif" alt="Processing..." />
|
||||
</div>
|
||||
<div class="complete">
|
||||
<h3>Completed!</h3>
|
||||
<p class="status"></p>
|
||||
@ -54,6 +71,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
116
script.js
116
script.js
@ -1,47 +1,55 @@
|
||||
function winsize() {
|
||||
if (!toggled && $(window).width()/$(window).height()>(90/31) ||
|
||||
toggled && $(window).width()/($(window).height()-219)>(18/7)){
|
||||
$('body').css('justify-content','flex-start');
|
||||
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');
|
||||
$('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);
|
||||
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());
|
||||
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);
|
||||
});
|
||||
form.append('file', file)
|
||||
})
|
||||
$.ajax({
|
||||
url: 'huffpress.php',
|
||||
type: 'POST',
|
||||
@ -50,27 +58,31 @@ $('form').on('submit',function submit(e){
|
||||
dataType: 'json',
|
||||
data: form,
|
||||
success: function (resp) {
|
||||
console.log(resp);
|
||||
console.log(resp)
|
||||
if (resp.status) {
|
||||
$('.process').css('display','none');
|
||||
$('.complete').css('display','block');
|
||||
$('.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`);
|
||||
$('.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`);
|
||||
$('.complete .status').html(
|
||||
`Compressed size: ${resp.compSize} B<br>Original size: ${resp.origSize} B<br>Time: ${resp.time} s`
|
||||
)
|
||||
}
|
||||
$('#dlink').attr('href',resp.dlink);
|
||||
$('#dlink').attr('href', resp.dlink)
|
||||
} else {
|
||||
$('.process').css('display','none');
|
||||
$('.error').css('display','block');
|
||||
$('.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');
|
||||
});
|
||||
$('.wrap').css('display', 'none')
|
||||
$('.process').css('display', 'none')
|
||||
$('.error').css('display', 'none')
|
||||
$('.complete').css('display', 'none')
|
||||
})
|
||||
|
||||
21
style.css
21
style.css
@ -1,5 +1,6 @@
|
||||
@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;
|
||||
@ -15,7 +16,7 @@ body{
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url(bg.webp);
|
||||
background-image: url(./images/bg.webp);
|
||||
background-size: cover;
|
||||
}
|
||||
header {
|
||||
@ -37,10 +38,10 @@ main{
|
||||
display: none;
|
||||
margin-bottom: 2vw;
|
||||
background-color: #fff8;
|
||||
box-shadow: 0 0 .5vw black;
|
||||
box-shadow: 0 0 0.5vw black;
|
||||
border-radius: 1.5vw;
|
||||
min-height: 9vw;
|
||||
transition: .3s;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
main:hover {
|
||||
@ -55,11 +56,11 @@ h2{
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: hsla(270,80%,80%,.6);
|
||||
background-color: hsla(270, 80%, 80%, 0.6);
|
||||
border-bottom: 0;
|
||||
font-family: Secular One;
|
||||
font-size: 3vw;
|
||||
text-shadow: 2.5px 2px .5px white;
|
||||
text-shadow: 2.5px 2px 0.5px white;
|
||||
cursor: pointer;
|
||||
}
|
||||
form {
|
||||
@ -83,7 +84,9 @@ form{
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.process,.complete,.error{
|
||||
.process,
|
||||
.complete,
|
||||
.error {
|
||||
display: none;
|
||||
padding: 2vw 5vw;
|
||||
background-color: white;
|
||||
@ -97,13 +100,13 @@ form{
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-top: .5vw;
|
||||
margin-top: 0.5vw;
|
||||
font-family: Secular One;
|
||||
font-size: 3vw;
|
||||
}
|
||||
.status {
|
||||
margin: 0;
|
||||
margin-top: .5vw;
|
||||
margin-top: 0.5vw;
|
||||
font-family: monospace;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user