2020-09-27 02:43:51 +09:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="{{ site.lang | default: "en-US" }}">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2020-10-25 02:23:26 +09:00
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
|
|
|
|
|
/>
|
2020-09-27 02:43:51 +09:00
|
|
|
|
|
|
|
|
|
{% seo %}
|
|
|
|
|
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
|
|
|
<![endif]-->
|
2020-09-27 15:06:01 +09:00
|
|
|
|
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
|
2020-09-27 15:35:37 +09:00
|
|
|
|
<style>
|
2020-09-27 15:40:21 +09:00
|
|
|
|
@charset "UTF-8";
|
|
|
|
|
*,
|
|
|
|
|
*::before,
|
|
|
|
|
*::after {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2020-09-27 15:35:37 +09:00
|
|
|
|
ul,
|
|
|
|
|
li {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li + li {
|
|
|
|
|
border-top: thin solid #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li div {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0.2rem 0;
|
|
|
|
|
-webkit-box-align: start;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + label {
|
|
|
|
|
/*text-decoration: line-through;*/
|
|
|
|
|
color: #4CAF50;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + label::before {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
-webkit-transition: 0.2s ease;
|
|
|
|
|
transition: 0.2s ease;
|
|
|
|
|
-webkit-transition-property: color, padding;
|
|
|
|
|
transition-property: color, padding;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 1rem 0.5rem 1rem 3.5rem;
|
|
|
|
|
color: #C62828;
|
|
|
|
|
position: relative;
|
|
|
|
|
-webkit-transition: color ease 0.3s;
|
|
|
|
|
transition: color ease 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label::before,
|
|
|
|
|
label::after {
|
2020-09-27 15:40:21 +09:00
|
|
|
|
content: '𝗫';
|
2020-09-27 15:35:37 +09:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 0.5rem;
|
|
|
|
|
padding: 0.4rem 0.1rem 0.2rem 0;
|
|
|
|
|
width: 2rem;
|
|
|
|
|
margin-top: -1rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
border-radius: 0.2rem;
|
2020-09-27 15:40:21 +09:00
|
|
|
|
background: rgb(71, 0, 0);
|
2020-09-27 15:35:37 +09:00
|
|
|
|
-webkit-transition: opacity ease 0.3s;
|
|
|
|
|
transition: opacity ease 0.3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label::after {
|
2020-09-27 15:40:21 +09:00
|
|
|
|
content: '𝗢';
|
|
|
|
|
background: rgb(97, 186, 101);
|
2020-09-27 15:35:37 +09:00
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.invalid label,
|
|
|
|
|
.invalid input:checked + label {
|
|
|
|
|
padding-top: 0.5rem;
|
|
|
|
|
padding-bottom: 0.5rem;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.invalid label::before,
|
|
|
|
|
.invalid label::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
position: -webkit-sticky;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
width: calc(100% + 2rem);
|
|
|
|
|
margin-left: -1rem;
|
|
|
|
|
border-bottom: 0.125rem solid #ccc;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status > div {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress {
|
|
|
|
|
background: #ddd;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 1rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress .bar {
|
|
|
|
|
-webkit-transition: width 0.2s ease;
|
|
|
|
|
transition: width 0.2s ease;
|
|
|
|
|
background: #4CAF50;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2020-09-27 15:49:26 +09:00
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
background-color: #4CAF50; /* Green */
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
2020-09-27 15:35:37 +09:00
|
|
|
|
</style>
|
2020-09-27 02:43:51 +09:00
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2020-09-27 14:39:28 +09:00
|
|
|
|
<div class="wrapper" style="width:100% !important;">
|
|
|
|
|
<header style="width:20% !important;">
|
2020-09-27 02:43:51 +09:00
|
|
|
|
{% if site.logo %}
|
|
|
|
|
<img src="{{site.logo | relative_url}}" alt="Logo" />
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<p>{{ site.description | default: site.github.project_tagline }}</p>
|
|
|
|
|
|
|
|
|
|
{% if site.github.is_project_page %}
|
|
|
|
|
<p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if site.github.is_user_page %}
|
|
|
|
|
<p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if site.show_downloads %}
|
|
|
|
|
<ul class="downloads">
|
|
|
|
|
<li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
|
|
|
|
|
<li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
|
|
|
|
|
<li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
2020-10-25 01:47:09 +09:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
|
2020-09-27 02:43:51 +09:00
|
|
|
|
<script>
|
|
|
|
|
function addDarkmodeWidget() {
|
2020-09-27 02:45:08 +09:00
|
|
|
|
const options = {
|
|
|
|
|
bottom: '64px', // default: '32px'
|
|
|
|
|
right: 'unset', // default: '32px'
|
|
|
|
|
left: '32px', // default: 'unset'
|
|
|
|
|
time: '0.5s', // default: '0.3s'
|
|
|
|
|
mixColor: '#fff', // default: '#fff'
|
|
|
|
|
backgroundColor: '#fff', // default: '#fff'
|
|
|
|
|
buttonColorDark: '#100f2c', // default: '#100f2c'
|
|
|
|
|
buttonColorLight: '#fff', // default: '#fff'
|
2020-09-27 02:47:17 +09:00
|
|
|
|
saveInCookies: true, // default: true,
|
2020-10-25 01:47:09 +09:00
|
|
|
|
label: '◐', // default: ''
|
2020-09-27 02:45:08 +09:00
|
|
|
|
autoMatchOsTheme: true // default: true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const darkmode = new Darkmode(options);
|
|
|
|
|
darkmode.showWidget();
|
|
|
|
|
}
|
2020-09-27 02:43:51 +09:00
|
|
|
|
window.addEventListener('load', addDarkmodeWidget);
|
|
|
|
|
</script>
|
|
|
|
|
</header>
|
2020-09-27 14:39:28 +09:00
|
|
|
|
<section style="width:70% !important;">
|
2020-09-27 02:43:51 +09:00
|
|
|
|
|
|
|
|
|
{{ content }}
|
|
|
|
|
|
2020-09-27 15:44:12 +09:00
|
|
|
|
<hr>
|
2020-09-27 15:24:13 +09:00
|
|
|
|
{% raw %}
|
2020-09-27 15:44:12 +09:00
|
|
|
|
<div class="container">
|
2020-09-27 14:28:00 +09:00
|
|
|
|
<div id="app">
|
2020-09-27 15:34:15 +09:00
|
|
|
|
<checklist></checklist>
|
|
|
|
|
</div>
|
2020-09-27 14:28:00 +09:00
|
|
|
|
</div>
|
2020-09-27 15:24:13 +09:00
|
|
|
|
{% endraw %}
|
|
|
|
|
</section>
|
2020-09-27 14:43:15 +09:00
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
|
2020-09-27 14:28:00 +09:00
|
|
|
|
<script>
|
2020-09-27 14:45:18 +09:00
|
|
|
|
window.onload = function(){
|
2020-09-27 15:04:39 +09:00
|
|
|
|
vueData = []
|
2020-09-27 15:34:15 +09:00
|
|
|
|
vueList = []
|
2020-09-27 15:04:39 +09:00
|
|
|
|
$.ajax({
|
|
|
|
|
async: false,
|
|
|
|
|
type: 'GET',
|
|
|
|
|
url: 'https://raw.githubusercontent.com/hahwul/WebHackersWeapons/master/data.json',
|
|
|
|
|
success: function(data){
|
|
|
|
|
jsonData = JSON.parse(data)
|
|
|
|
|
for (const property in jsonData) {
|
|
|
|
|
tool = {
|
|
|
|
|
name: property,
|
|
|
|
|
method: jsonData[property]['Method'],
|
|
|
|
|
dtype: jsonData[property]['Type'],
|
|
|
|
|
desc: jsonData[property]['Description'],
|
2020-10-25 02:08:47 +09:00
|
|
|
|
install_linux: jsonData[property]['Install']['Linux'],
|
|
|
|
|
install_macos: jsonData[property]['Install']['MacOS'],
|
|
|
|
|
install_windows: jsonData[property]['Install']['Windows'],
|
|
|
|
|
update_linux: jsonData[property]['Update']['Linux'],
|
|
|
|
|
update_macos: jsonData[property]['Update']['MacOS'],
|
|
|
|
|
update_windows: jsonData[property]['Update']['Windows']
|
2020-09-27 15:04:39 +09:00
|
|
|
|
}
|
2020-10-25 02:08:47 +09:00
|
|
|
|
if ((tool.install_linux != '') || (tool.install_macos != '') || (tool.install_windows != '')) {
|
2020-10-25 01:34:48 +09:00
|
|
|
|
vueData.push(tool)
|
2020-10-25 02:15:43 +09:00
|
|
|
|
vueList.push(tool)
|
2020-10-25 01:34:48 +09:00
|
|
|
|
}
|
2020-09-27 15:04:39 +09:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2020-09-27 15:34:15 +09:00
|
|
|
|
Vue.component('checklist-item', {
|
2020-09-28 00:16:41 +09:00
|
|
|
|
template: '<div>' +
|
2020-09-27 15:34:15 +09:00
|
|
|
|
'<input :checked="complete" @click="progress" type="checkbox" :name="\'checkbox\' + id" :id="\'checkbox\' + id" value="">' +
|
2020-10-25 02:50:16 +09:00
|
|
|
|
'<label :for="\'checkbox\' + id"><b v-html="i.name"></b> | <i v-if="i.install_macos != \'\'" class="fab fa-apple"></i> <i v-if="i.install_linux != \'\'" class="fab fa-linux"></i> <i v-if="i.install_windows != \'\'" class="fab fa-windows"></i></label>' +
|
2020-09-27 15:34:15 +09:00
|
|
|
|
'</div>',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
id: this._uid,
|
|
|
|
|
complete: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
i: String
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
progress() {
|
|
|
|
|
this.complete = !this.complete;
|
|
|
|
|
this.$emit('complete', this.complete);
|
|
|
|
|
this.updateStorage();
|
|
|
|
|
},
|
|
|
|
|
updateStorage() {
|
|
|
|
|
localStorage.setItem(this.id, JSON.stringify({
|
|
|
|
|
complete: this.complete
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
if(localStorage.getItem(this.id)) {
|
|
|
|
|
let storage = JSON.parse(localStorage.getItem(this.id));
|
|
|
|
|
if(storage.complete) {
|
|
|
|
|
this.progress();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
Vue.component('progress-bar', {
|
2020-10-25 02:08:47 +09:00
|
|
|
|
template: '<div class="status"><input type="input" id="path" style="display:block !important;" placeholder="~/tools" value=""><select name="os"><option value="">Select OS</option><option value="macos">MacOS</option><option value="linux">Linux</option><option value="windows">windows</option></select><input type="button" style="display:block !important;" value="Make" class="button"><div class="progress"><div class="bar" :style="{width: width + \'%\'}"></div></div></div>',
|
2020-09-27 15:34:15 +09:00
|
|
|
|
props: {
|
|
|
|
|
c: Number,
|
|
|
|
|
t: Number
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
width() {
|
|
|
|
|
return (this.c / this.t) * 100;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
Vue.component('checklist', {
|
|
|
|
|
template: '<div>' +
|
|
|
|
|
'<progress-bar :c="complete" :t="total"></progress-bar>' +
|
|
|
|
|
'<ul>' +
|
|
|
|
|
'<li v-for="item in items">' +
|
|
|
|
|
'<checklist-item :i="item" v-on:complete="updateProgress"></checklist-item>' +
|
|
|
|
|
'</li>' +
|
|
|
|
|
'</ul>' +
|
|
|
|
|
'</div>',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2020-09-27 15:35:37 +09:00
|
|
|
|
items: vueList,
|
2020-09-27 15:34:15 +09:00
|
|
|
|
complete: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
total() {
|
|
|
|
|
return this.items.length;
|
|
|
|
|
}
|
2020-09-27 14:36:40 +09:00
|
|
|
|
},
|
2020-09-27 15:27:17 +09:00
|
|
|
|
methods: {
|
2020-09-27 15:34:15 +09:00
|
|
|
|
updateProgress(complete) {
|
|
|
|
|
(complete) ? this.complete++ : this.complete--;
|
2020-09-27 14:28:00 +09:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-09-27 15:34:15 +09:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
new Vue().$mount('#app');
|
2020-09-27 14:34:04 +09:00
|
|
|
|
};
|
2020-09-27 14:28:00 +09:00
|
|
|
|
</script>
|
2020-09-27 02:43:51 +09:00
|
|
|
|
</div>
|
|
|
|
|
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
|
|
|
|
|
{% if site.google_analytics %}
|
|
|
|
|
<script>
|
|
|
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
|
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
|
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
|
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
|
ga('create', '{{ site.google_analytics }}', 'auto');
|
|
|
|
|
ga('send', 'pageview');
|
|
|
|
|
</script>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</body>
|
2020-10-25 23:42:54 +09:00
|
|
|
|
<div style="width:100%;height:80vh;background-color:black;position:fixed;z-index:9999 !important;">
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td width=50%>Install script</td>
|
|
|
|
|
<td width=50%>Update script</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="vertical-align:top;">
|
|
|
|
|
<pre><code id="output-install" style="white-space: pre; overflow: auto;"></code></pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td style="vertical-align:top;">
|
|
|
|
|
<pre><code id="output-update" style="white-space: pre; overflow: auto;"></code></pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2020-09-27 02:43:51 +09:00
|
|
|
|
</html>
|