Awesome-Mirrors/WebHackersWeapons
1
0
Fork 0
mirror of https://github.com/hahwul/WebHackersWeapons.git synced 2025-02-24 00:49:59 -05:00
Code Issues Packages Projects Releases Wiki Activity
WebHackersWeapons/_layouts/default.html

334 lines
9.0 KiB
HTML
Raw Normal View History

Create default.html
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">
{% 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]-->
Update default.html
2020-09-27 15:06:01 +09:00
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
Update default.html
2020-09-27 15:35:37 +09:00
<style>
Update default.html
2020-09-27 15:40:21 +09:00
@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
}
input {
display: none;
}
Update default.html
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 {
Update default.html
2020-09-27 15:40:21 +09:00
content: '𝗫';
Update default.html
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;
Update default.html
2020-09-27 15:40:21 +09:00
background: rgb(71, 0, 0);
Update default.html
2020-09-27 15:35:37 +09:00
-webkit-transition: opacity ease 0.3s;
transition: opacity ease 0.3s;
z-index: 2;
}
label::after {
Update default.html
2020-09-27 15:40:21 +09:00
content: '𝗢';
background: rgb(97, 186, 101);
Update default.html
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;
background: #ffffff;
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%;
}
</style>
Create default.html
2020-09-27 02:43:51 +09:00
</head>
<body>
Update default.html
2020-09-27 14:39:28 +09:00
<div class="wrapper" style="width:100% !important;">
<header style="width:20% !important;">
Create default.html
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 %}
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
Update default.html
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'
Update default.html
2020-09-27 02:47:17 +09:00
saveInCookies: true, // default: true,
Update default.html
2020-09-27 02:45:08 +09:00
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
}
Create default.html
2020-09-27 02:43:51 +09:00
window.addEventListener('load', addDarkmodeWidget);
</script>
</header>
Update default.html
2020-09-27 14:39:28 +09:00
<section style="width:70% !important;">
Create default.html
2020-09-27 02:43:51 +09:00
{{ content }}
Update default.html
2020-09-27 14:28:00 +09:00
</hr>
Update default.html
2020-09-27 15:24:13 +09:00
{% raw %}
Update default.html
2020-09-27 15:18:15 +09:00
<div class="container">
Update default.html
2020-09-27 14:28:00 +09:00
<div id="app">
Update default.html
2020-09-27 15:34:15 +09:00
<checklist></checklist>
</div>
Update default.html
2020-09-27 14:28:00 +09:00
</div>
Update default.html
2020-09-27 15:24:13 +09:00
{% endraw %}
</section>
Update default.html
2020-09-27 14:43:15 +09:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
Update default.html
2020-09-27 14:28:00 +09:00
<script>
Update default.html
2020-09-27 14:45:18 +09:00
window.onload = function(){
Update default.html
2020-09-27 15:04:39 +09:00
vueData = []
Update default.html
2020-09-27 15:34:15 +09:00
vueList = []
Update default.html
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'],
install: jsonData[property]['Install']
}
vueData.push(tool)
Update default.html
2020-09-27 15:34:15 +09:00
vueList.push(property)
Update default.html
2020-09-27 15:04:39 +09:00
}
}
});
Update default.html
2020-09-27 15:34:15 +09:00
Vue.component('checklist-item', {
template: '<div>' +
'<input :checked="complete" @click="progress" type="checkbox" :name="\'checkbox\' + id" :id="\'checkbox\' + id" value="">' +
'<label :for="\'checkbox\' + id" v-html="i"></label>' +
'</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', {
template: '<div class="status"><div>{{ c }} / {{ t }}</div><div class="progress"><div class="bar" :style="{width: width + \'%\'}"></div></div></div>',
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 {
Update default.html
2020-09-27 15:35:37 +09:00
items: vueList,
Update default.html
2020-09-27 15:34:15 +09:00
complete: 0
};
},
computed: {
total() {
return this.items.length;
}
Update default.html
2020-09-27 14:36:40 +09:00
},
Update default.html
2020-09-27 15:27:17 +09:00
methods: {
Update default.html
2020-09-27 15:34:15 +09:00
updateProgress(complete) {
(complete) ? this.complete++ : this.complete--;
Update default.html
2020-09-27 14:28:00 +09:00
}
}
Update default.html
2020-09-27 15:34:15 +09:00
});
new Vue().$mount('#app');
Update default.html
2020-09-27 14:34:04 +09:00
};
Update default.html
2020-09-27 14:28:00 +09:00
</script>
Create default.html
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>
</html>
Reference in New Issue Copy Permalink