-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
170 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
<!DOCTYPE HTML> | ||
<html lang="zh-CN" style="height: 100%"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"> | ||
<title>无畏契约 | 骚话生成器生成器</title> | ||
</head> | ||
<body style="height: 100%"> | ||
<div class="container" id="app" style="min-height: 100%;"> | ||
<nav class="navbar navbar-expand-lg navbar-light bg-light"> | ||
<a class="navbar-brand" href="#">无畏契约</a> | ||
<div class="ml-auto"> | ||
<a href="https://github.com/disksing/sao-gen-gen/issues/new?labels=generator&template=generator.md" target="_blank"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 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"/> | ||
</svg> | ||
创建新的生成器 | ||
</a> | ||
</div> | ||
</nav> | ||
<div class="row mx-0 mt-3" style="padding: 20px; padding-bottom: 100px;"> | ||
<form class="col-12"> | ||
<div class="form-group row" v-for="v in variables"> | ||
<label class="col-sm-3 col-form-label">{{ v.description }}</label> | ||
<div class="col-sm-9"> | ||
<input type="text" class="form-control" :placeholder="v.default" :key="v.id" v-model="v.value" /> | ||
</div> | ||
</div> | ||
</form> | ||
<div class="col-12"><hr/></div> | ||
<div class="row col-12 mx-0 mt-3"> | ||
<div class="ml-auto"> | ||
<button type="button" class="btn btn-outline-primary mx-0 mr-0" v-on:click="updateTpl">重新生成</button> | ||
<button type="button" class="btn btn-outline-primary mx-0 mr-0" v-on:click="copy">复制至剪贴板</button> | ||
<button type="button" class="btn btn-outline-primary mx-0 mr-0" @click.preventDefault="printThis">保存图片</button> | ||
<button type="button" class="btn btn-outline-primary mx-0 mr-0" @click.preventDefault="shareTweet">分享至 Twitter</button> | ||
</div> | ||
</div> | ||
|
||
<div class="row col-12 mx-0 mt-3" ref="meme"> | ||
<blockquote class="blockquote"> | ||
<p v-html="content"></p> | ||
</blockquote> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<footer style="margin-top: -100px; width: 100%; line-height: 50px; background-color: #f5f5f5; text-align: center;"> | ||
<div class="container"> | ||
<a class="text-muted" href="https://github.com/disksing/sao-gen-gen">骚话生成器生成器@GitHub</a> | ||
<br/> | ||
<span class="text-muted">QQ交流群:481269635</span> | ||
</div> | ||
</footer> | ||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script> | ||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> | ||
|
||
<script> | ||
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"]}}; | ||
|
||
var app = new Vue({ | ||
el: "#app", | ||
data: { | ||
variables: config.variables, | ||
contentTpl: "" | ||
}, | ||
created: function() { | ||
this.updateTpl(); | ||
}, | ||
methods: { | ||
async printThis() { | ||
console.log("printing.."); | ||
const el = this.$refs.meme; | ||
|
||
const options = { | ||
type: "dataURL", | ||
scrollY: -window.scrollY | ||
}; | ||
const printCanvas = await html2canvas(el, options); | ||
|
||
const link = document.createElement("a"); | ||
link.setAttribute("download", "meme.png"); | ||
link.setAttribute( | ||
"href", | ||
printCanvas | ||
.toDataURL("image/png") | ||
.replace("image/png", "image/octet-stream") | ||
); | ||
link.click(); | ||
|
||
console.log("done"); | ||
}, | ||
shareTweet: function() { | ||
const content = this.getContent("plain") + '\n' + '来自骚话生成器'; | ||
const url = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(content) + "&url=" + encodeURIComponent(window.location.href); | ||
window.open(url, '_blank', 'width=615,height=505'); | ||
}, | ||
updateTpl: function() { | ||
var templates = config.templates; | ||
for (k in templates) { | ||
var contents = templates[k]; | ||
for (var i = contents.length-1; i > 0; i--) { | ||
var j = Math.floor(Math.random() * i); | ||
var tmp = contents[i]; | ||
contents[i] = contents[j]; | ||
contents[j] = tmp; | ||
} | ||
} | ||
|
||
var index = {}; | ||
function expand(key, depth) { | ||
if (depth >= 16) { | ||
return ""; | ||
} | ||
|
||
if (index[key] == null || index[key] >= templates[key].length) { | ||
index[key] = 0; | ||
} | ||
var t = templates[key][index[key]]; | ||
index[key]++; | ||
|
||
out: while (true) { | ||
for (k in templates) { | ||
if (t.search('{'+k+'}') != -1) { | ||
t = t.replace('{'+k+'}', expand(k, depth+1)); | ||
continue out; | ||
} | ||
} | ||
break; | ||
}; | ||
return t; | ||
} | ||
this.contentTpl = expand('main', 0); | ||
}, | ||
getContent: function(ty) { | ||
var t = this.contentTpl; | ||
for (i in this.variables) { | ||
var v = this.variables[i]; | ||
var s = v.default; | ||
if (v.value != null && v.value.length > 0) { | ||
s = v.value; | ||
} | ||
if (ty == "html") { | ||
s = '<strong>'+s+'</strong>' | ||
} | ||
t = t.replaceAll('{'+v.id+'}', s); | ||
} | ||
if (ty == "html") { | ||
t = t.replaceAll('\n', '<br/>'); | ||
} | ||
return t; | ||
}, | ||
copy: function() { | ||
navigator.clipboard.writeText(this.getContent("plain")).then(function() { | ||
}, function() { | ||
}); | ||
} | ||
}, | ||
computed: { | ||
content: function() { return this.getContent("html"); } | ||
} | ||
}); | ||
|
||
</script> | ||
</body> | ||
</html> |