375 lines
12 KiB
HTML
375 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Adrian Hinz">
|
|
|
|
<title>FireStorm Converter</title>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/one-page-wonder.css" rel="stylesheet">
|
|
<!-- Slider CSS -->
|
|
<link href="css/slider.css" rel="stylesheet">
|
|
<style>
|
|
#RC .slider-selection {
|
|
background: red;
|
|
}
|
|
#RC .slider-handle {
|
|
background: red;
|
|
}
|
|
#GC .slider-selection {
|
|
background: green;
|
|
}
|
|
#GC .slider-handle {
|
|
background: green;
|
|
}
|
|
#BC .slider-selection {
|
|
background: blue;
|
|
}
|
|
#BC .slider-handle {
|
|
background: blue;
|
|
}
|
|
</style>
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Page Content -->
|
|
<div style="padding-left:15px; padding-right:15px;">
|
|
<div class="well">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>Converter</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="well" style="background-color:#fff; border-left: 5px solid #777;">
|
|
<h4 class="text-primary">Zamiana daty</h4>
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="time_input">Timestamp lub data w formacie 'YYYY-MM-DD H:M:S'</label>
|
|
<input type="text" class="form-control" id="time_input" placeholder="YYYY-MM-DD H:M:S">
|
|
</div>
|
|
<button class="btn btn-info" onClick="return convert_time();">Przelicz</button>
|
|
</form>
|
|
<code id="time_conv" class="bg-warning" style="font-size:16px;"></code>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="well" style="background-color:#fff; border-left: 5px solid #777;">
|
|
<h4 class="text-primary">Color Picker</h4>
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="time_input">Kod koloru: </label>
|
|
<input type="text" class="form-control" id="color_input" placeholder="#FF0000">
|
|
</div>
|
|
<button class="btn btn-info" onClick="return show_color();">Pokaż</button>
|
|
</form>
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div id="color_display" style="background-color:#f00; border:1px dotted #000; height:50px;"> </div>
|
|
<br/>
|
|
<code style="font-size:16px;">rgb(<span class="color_r">255</span>, <span class="color_g">0</span>, <span class="color_b">0</span>)</code>
|
|
|
|
</div>
|
|
<div class="col-md-1">
|
|
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
R (<span class="color_r">255</span>)
|
|
</div>
|
|
<div class="col-md-8">
|
|
<input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="255" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="round" >
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
G (<span class="color_g">0</span>)
|
|
</div>
|
|
<div class="col-md-8">
|
|
<input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="0" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" >
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
B (<span class="color_b">0</span>)
|
|
</div>
|
|
<div class="col-md-8">
|
|
<input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="0" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="round" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="well" style="background-color:#fff; border-left: 5px solid #777;">
|
|
<h4 class="text-primary">Konwerter liczb</h4>
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="time_input">Dane wejściowe: </label>
|
|
<input type="text" class="form-control" id="numbers_input" placeholder="">
|
|
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-md-12">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="inlineRadioOptions" id="radio_hex" value="hex"> HEX
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="inlineRadioOptions" id="radio_dec" value="dec" checked="checked"> DEC
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="inlineRadioOptions" id="radio_oct" value="oct"> OCT
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="inlineRadioOptions" id="radio_bin" value="bin"> BIN
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-info" onClick="return convert_numbers();">Przelicz</button>
|
|
|
|
</form>
|
|
<code id="numbers_output" style="font-size:16px;"></code>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="well" style="background-color:#fff; border-left: 5px solid #777;">
|
|
<h4 class="text-primary">Konwerter Base64</h4>
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<label for="base64RadioOptions" class="col-md-2">Dane wejściowe: </label>
|
|
<div class="col-md-10">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="base64RadioOptions" id="radio_hex" value="text" checked="checked"> Text
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="base64RadioOptions" id="radio_dec" value="base64"> Base64
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-md-10">
|
|
<textarea class="form-control" rows="3" id="base64_text"></textarea>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button class="btn btn-info" onClick="return convert_base64();">Przelicz</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<label>Dane wyjściowe:</label>
|
|
<pre id="base64_output"></pre>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="featurette-divider">
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<p>Copyright © <span class="fire_cl shadow_small">Fire</span><span class="storm_cl shadow_small">Storm</span> <span id="year">2016</span></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script type="text/javascript">
|
|
var nd = new Date().getFullYear();
|
|
document.getElementById("year").innerHTML = nd;
|
|
</script>
|
|
|
|
</div>
|
|
<!-- /.container -->
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery.js"></script>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<script src="js/bootstrap-slider.js"></script>
|
|
<script type="text/javascript">
|
|
// start date
|
|
document.getElementById('time_input').value = Date.parse(new Date()) / 1000;
|
|
function isNormalInteger(str) {
|
|
var n = ~~Number(str);
|
|
return String(n) === str && n >= 0;
|
|
}
|
|
// Date & Time conversion
|
|
function leading_zero(num) {
|
|
return +num < 10 ? "0" + num : num
|
|
}
|
|
|
|
function date_format(date) {
|
|
var day = date.getDate();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1;
|
|
var hours = date.getHours();
|
|
var min = date.getMinutes();
|
|
var sec = date.getSeconds();
|
|
return year+'-'+leading_zero(month)+'-'+leading_zero(day)+' '+leading_zero(hours)+':'+leading_zero(min)+':'+leading_zero(sec);
|
|
|
|
}
|
|
|
|
function convert_time() {
|
|
var inpt = document.getElementById('time_input').value;
|
|
if (isNormalInteger(inpt)) {
|
|
var d = new Date(parseInt(inpt) * 1000);
|
|
document.getElementById('time_conv').innerHTML = date_format(d) + " (" + inpt + ")";
|
|
} else {
|
|
var d = new Date(inpt);
|
|
if (isNaN(d.getTime())) {
|
|
document.getElementById('time_conv').innerHTML = d;
|
|
} else {
|
|
var d1 = Date.parse(inpt) / 1000;
|
|
document.getElementById('time_conv').innerHTML = date_format(d) + " (" + d1 + ")";
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
// hex converter
|
|
//dec2hex
|
|
function dec2hex(d) { return (+d).toString(16).toUpperCase(); }
|
|
//dec2hex with_leading_zero
|
|
function d2h_l(d) {
|
|
var s = (+d).toString(16).toUpperCase();
|
|
if(s.length < 2) {
|
|
s = '0' + s;
|
|
}
|
|
return s;
|
|
}
|
|
//hex2dec
|
|
function hex2dec(h) {return parseInt(h,16);}
|
|
//dec2bin
|
|
function dec2bin(dec){return (+dec >>> 0).toString(2);}
|
|
//bin2dec
|
|
function bin2dec(bin) {return parseInt(bin, 2);}
|
|
//dec2oct
|
|
function dec2oct(oct){return (+oct).toString(8);}
|
|
//oct2dec
|
|
function oct2dec(oct) {return parseInt(oct, 8);}
|
|
|
|
// konwersja liczb
|
|
function convert_numbers() {
|
|
var number_format = $('input[name=inlineRadioOptions]:checked').val();
|
|
var number = document.getElementById('numbers_input').value;
|
|
var hex_num = 0;
|
|
var dec_num = 0;
|
|
var oct_num = 0;
|
|
var bin_num = 0;
|
|
switch (number_format) {
|
|
case "hex":
|
|
hex_num = number;
|
|
dec_num = hex2dec(number);
|
|
oct_num = dec2oct(hex2dec(number));
|
|
bin_num = dec2bin(hex2dec(number));
|
|
break;
|
|
case "dec":
|
|
hex_num = dec2hex(number);
|
|
dec_num = parseInt(number);
|
|
oct_num = dec2oct(number);
|
|
bin_num = dec2bin(number);
|
|
break;
|
|
case "oct":
|
|
hex_num = dec2hex(oct2dec(number));
|
|
dec_num = oct2dec(number);
|
|
oct_num = number;
|
|
bin_num = dec2bin(oct2dec(number));
|
|
break;
|
|
case "bin":
|
|
hex_num = dec2hex(bin2dec(number));
|
|
dec_num = bin2dec(number);
|
|
oct_num = dec2oct(bin2dec(number));
|
|
bin_num = number;
|
|
break;
|
|
}
|
|
$('#numbers_output').html("<p><b>HEX:</b> " + hex_num + "</p><p><b>DEC:</b> " + dec_num + "</p><p><b>OCT:</b> " + oct_num + "</p><p><b>BIN:</b> " + bin_num + "</p>");
|
|
return false;
|
|
}
|
|
|
|
|
|
// color picker
|
|
function show_color() {
|
|
var inpt = document.getElementById('color_input').value;
|
|
if (inpt) {
|
|
var color = '';
|
|
if (inpt.substring(0,1) != '#') {
|
|
color += '#'
|
|
}
|
|
color += inpt;
|
|
document.getElementById('color_display').style.backgroundColor = color;
|
|
}
|
|
var c = $('#color_display').css('background-color');
|
|
var rgb = c.match(/\d+/g);
|
|
r.setValue(rgb[0]);
|
|
g.setValue(rgb[1]);
|
|
b.setValue(rgb[2]);
|
|
$('.color_r').html(r.getValue());
|
|
$('.color_g').html(g.getValue());
|
|
$('.color_b').html(b.getValue());
|
|
return false;
|
|
}
|
|
|
|
var RGBChange = function() {
|
|
$('#color_input').val('#' + d2h_l(r.getValue()) + d2h_l(g.getValue()) + d2h_l(b.getValue()));
|
|
$('.color_r').html(r.getValue());
|
|
$('.color_g').html(g.getValue());
|
|
$('.color_b').html(b.getValue());
|
|
$('#color_display').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
|
|
};
|
|
|
|
var r = $('#R').slider()
|
|
.on('slide', RGBChange)
|
|
.data('slider');
|
|
var g = $('#G').slider()
|
|
.on('slide', RGBChange)
|
|
.data('slider');
|
|
var b = $('#B').slider()
|
|
.on('slide', RGBChange)
|
|
.data('slider');
|
|
|
|
|
|
function convert_base64() {
|
|
if ($('input[name=base64RadioOptions]:checked').val() == "text") {
|
|
$('#base64_output').html(window.btoa($('#base64_text').val()));
|
|
} else {
|
|
$('#base64_output').html(window.atob($('#base64_text').val()));
|
|
}
|
|
|
|
return false;
|
|
}
|
|
// Run all converters at startup
|
|
convert_time();
|
|
show_color();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|