Skip to content

Commit 132482d

Browse files
disksingdisksing
committed
autocommit
1 parent e75259e commit 132482d

File tree

1 file changed

+170
-0
lines changed

1 file changed

+170
-0
lines changed

‎docs/94.html

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!DOCTYPE HTML>
2+
<html lang="zh-CN" style="height: 100%">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
7+
<title>我喜欢你 | 骚话生成器生成器</title>
8+
</head>
9+
<body style="height: 100%">
10+
<div class="container" id="app" style="min-height: 100%;">
11+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
12+
<a class="navbar-brand" href="#">我喜欢你</a>
13+
<div class="ml-auto">
14+
<a href="https://github.com/disksing/sao-gen-gen/issues/new?labels=generator&template=generator.md" target="_blank">
15+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
16+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
17+
</svg>
18+
创建新的生成器
19+
</a>
20+
</div>
21+
</nav>
22+
<div class="row mx-0 mt-3" style="padding: 20px; padding-bottom: 100px;">
23+
<form class="col-12">
24+
<div class="form-group row" v-for="v in variables">
25+
<label class="col-sm-3 col-form-label">{{ v.description }}</label>
26+
<div class="col-sm-9">
27+
<input type="text" class="form-control" :placeholder="v.default" :key="v.id" v-model="v.value" />
28+
</div>
29+
</div>
30+
</form>
31+
<div class="col-12"><hr/></div>
32+
<div class="row col-12 mx-0 mt-3">
33+
<div class="ml-auto">
34+
<button type="button" class="btn btn-outline-primary mx-0 mr-0" v-on:click="updateTpl">重新生成</button>
35+
<button type="button" class="btn btn-outline-primary mx-0 mr-0" v-on:click="copy">复制至剪贴板</button>
36+
<button type="button" class="btn btn-outline-primary mx-0 mr-0" @click.preventDefault="printThis">保存图片</button>
37+
<button type="button" class="btn btn-outline-primary mx-0 mr-0" @click.preventDefault="shareTweet">分享至 Twitter</button>
38+
</div>
39+
</div>
40+
41+
<div class="row col-12 mx-0 mt-3" ref="meme">
42+
<blockquote class="blockquote">
43+
<p v-html="content"></p>
44+
</blockquote>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<footer style="margin-top: -100px; width: 100%; line-height: 50px; background-color: #f5f5f5; text-align: center;">
50+
<div class="container">
51+
<a class="text-muted" href="https://github.com/disksing/sao-gen-gen">骚话生成器生成器@GitHub</a>
52+
<br/>
53+
<span class="text-muted">QQ交流群：481269635</span>
54+
</div>
55+
</footer>
56+
57+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
58+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
59+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
60+
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
61+
62+
<script>
63+
var config = {"variables":[{"id":"subject","description":"主题","default":"桃核"},{"id":"event","description":"描述","default":"不能整个吞下去"}],"templates":{"main":["{p1}{p2}"],"p1":["{subject}{event}是怎么回事呢？","{subject}相信大家都很熟悉，但是{event}是怎么回事呢？"],"p2":["那么{subject}为什么会{event}，相信大家都很好奇。大家可能会感到很惊讶，{subject}怎么会{event}呢？但事实就是这样，小编也感到非常惊讶。那么这就是关于{subject}{event}的事情了，大家有没有觉得很神奇呢？\r\n看了今天的内容，大家有什么想法呢？欢迎在评论区告诉小编一起讨论哦。\r\n"]}};
64+
65+
var app = new Vue({
66+
el: "#app",
67+
data: {
68+
variables: config.variables,
69+
contentTpl: ""
70+
},
71+
created: function() {
72+
this.updateTpl();
73+
},
74+
methods: {
75+
async printThis() {
76+
console.log("printing..");
77+
const el = this.$refs.meme;
78+
79+
const options = {
80+
type: "dataURL",
81+
scrollY: -window.scrollY
82+
};
83+
const printCanvas = await html2canvas(el, options);
84+
85+
const link = document.createElement("a");
86+
link.setAttribute("download", "meme.png");
87+
link.setAttribute(
88+
"href",
89+
printCanvas
90+
.toDataURL("image/png")
91+
.replace("image/png", "image/octet-stream")
92+
);
93+
link.click();
94+
95+
console.log("done");
96+
},
97+
shareTweet: function() {
98+
const content = this.getContent("plain") + '\n' + '来自骚话生成器';
99+
const url = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(content) + "&url=" + encodeURIComponent(window.location.href);
100+
window.open(url, '_blank', 'width=615,height=505');
101+
},
102+
updateTpl: function() {
103+
var templates = config.templates;
104+
for (k in templates) {
105+
var contents = templates[k];
106+
for (var i = contents.length-1; i > 0; i--) {
107+
var j = Math.floor(Math.random() * i);
108+
var tmp = contents[i];
109+
contents[i] = contents[j];
110+
contents[j] = tmp;
111+
}
112+
}
113+
114+
var index = {};
115+
function expand(key, depth) {
116+
if (depth >= 16) {
117+
return "";
118+
}
119+
120+
if (index[key] == null || index[key] >= templates[key].length) {
121+
index[key] = 0;
122+
}
123+
var t = templates[key][index[key]];
124+
index[key]++;
125+
126+
out: while (true) {
127+
for (k in templates) {
128+
if (t.search('{'+k+'}') != -1) {
129+
t = t.replace('{'+k+'}', expand(k, depth+1));
130+
continue out;
131+
}
132+
}
133+
break;
134+
};
135+
return t;
136+
}
137+
this.contentTpl = expand('main', 0);
138+
},
139+
getContent: function(ty) {
140+
var t = this.contentTpl;
141+
for (i in this.variables) {
142+
var v = this.variables[i];
143+
var s = v.default;
144+
if (v.value != null && v.value.length > 0) {
145+
s = v.value;
146+
}
147+
if (ty == "html") {
148+
s = '<strong>'+s+'</strong>'
149+
}
150+
t = t.replaceAll('{'+v.id+'}', s);
151+
}
152+
if (ty == "html") {
153+
t = t.replaceAll('\n', '<br/>');
154+
}
155+
return t;
156+
},
157+
copy: function() {
158+
navigator.clipboard.writeText(this.getContent("plain")).then(function() {
159+
}, function() {
160+
});
161+
}
162+
},
163+
computed: {
164+
content: function() { return this.getContent("html"); }
165+
}
166+
});
167+
168+
</script>
169+
</body>
170+
</html>

0 commit comments

Comments
 (0)