2020-09-27 14:41:42 +09:00

138 lines
5.0 KiB
HTML

<!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]-->
</head>
<body>
<div class="wrapper" style="width:100% !important;">
<header style="width:20% !important;">
{% 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() {
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'
saveInCookies: true, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
</header>
<section style="width:70% !important;">
{{ content }}
</hr>
<div class="container" onload="show()">
<div id="app">
<h1>One-line maker</h1>
<div>
<input type="button" value="Generate">
<table class="table">
<tr>
<th><input type="checkbox" v-model="checkAll"></th>
<th align="center">ID</th>
<th align="center">Names</th>
</tr>
<tr v-for="lang in langs">
<td>
<input type="checkbox" v-model="checked" :value="lang.id" number>
</td>
{% raw %}
<td> {{ lang.id }}</td>
<td> {{ lang.name }}</td>
{% endraw %}
</tr>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js">
<script>
function show(){
new Vue({
data: {
langs: [
{ "id": "1", "name": "Edward"},
{ "id": "2", "name": "Lance"},
{ "id": "3", "name": "Arellano"},
{ "id": "4", "name": "Lorilla"},
],
checked: []
},
computed: {
checkAll: {
get: function () {
return this.langs ? this.checked.length == this.langs.length : false;
},
set: function (value) {
var checked = [];
if (value) {
this.langs.forEach(function (lang) {
checked.push(lang.id);
});
}
this.checked = checked;
}
}
}
}).$mount('#app');
};
</script>
</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>