309 lines
9.7 KiB
HTML
309 lines
9.7 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>Kemono Friends Logo Generator</title>
|
|
<meta property="og:title" content="Kemono Friends Logo Generator">
|
|
<meta property="og:description" content="Erstelle dein eigenes Logo im Stil von Kemono Friends">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://tools.ponywave.de/kemonogen">
|
|
<meta property="og:image" content="https://tools.ponywave.de/kemonogen/card.png">
|
|
<style>
|
|
@font-face {
|
|
font-family: "japarifont";
|
|
src: url("fonts/japarifont.woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DejimaMincho";
|
|
src: url("fonts/dejima-mincho-r227.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PlayBold";
|
|
src: url("fonts/Play-Bold.ttf");
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 20px;
|
|
padding-bottom: 70px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("background.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.savanna {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 35px;
|
|
color: #ffe663;
|
|
text-shadow: 0 0 10px black;
|
|
font-family: japarifont;
|
|
margin: 20px;
|
|
word-wrap: normal;
|
|
word-break: keep-all;
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
text-shadow: 0 0 5px black;
|
|
font-family: PlayBold;
|
|
text-align: center;
|
|
padding: 12px 0;
|
|
margin: 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
box-sizing: border-box;
|
|
z-index: 10;
|
|
}
|
|
|
|
footer a {
|
|
color: #ffad65;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #ffe663;
|
|
}
|
|
|
|
footer .resources {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
footer .author {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.inputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.inputs span {
|
|
color: #ffad65;
|
|
text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black;
|
|
font-weight: bold;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.inputs input[type=text] {
|
|
max-width: 40em;
|
|
width: 100%;
|
|
padding: 0.4em;
|
|
margin: 0.1em;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
border: none;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.inputs button {
|
|
font-family: sans-serif;
|
|
padding: 8px;
|
|
margin-right: 8px;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border: solid 1px white;
|
|
transition-property: all;
|
|
transition-duration: 0.3s;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.inputs button:hover {
|
|
background-color: rgba(100, 100, 100, 0.7);
|
|
}
|
|
|
|
.inputs button:active {
|
|
transform: scale(0.90);
|
|
}
|
|
|
|
.inputs p {
|
|
color: white;
|
|
text-shadow: 0 0 0.5em rgba(0, 0, 0, 1.0), 0 0 0.5em rgba(0, 0, 0, 1.0), 0 0 0.5em rgba(0, 0, 0, 1.0);
|
|
margin: 4px;
|
|
font-weight: bold;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.top {
|
|
margin: 0.5em;
|
|
font-size: 30px;
|
|
font-family: "Yu Mincho", DejimaMincho;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: relative;
|
|
line-height: 1.0em;
|
|
height: 1em;
|
|
padding: 0.1em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.top .char {
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 0.1em;
|
|
}
|
|
|
|
.top .char .upper {
|
|
position: absolute;
|
|
color: black;
|
|
}
|
|
|
|
.top .char .lower {
|
|
position: absolute;
|
|
-webkit-text-stroke-color: white;
|
|
-webkit-text-stroke-width: 0.35em;
|
|
color: white;
|
|
}
|
|
|
|
.bottom {
|
|
margin: 0.5em;
|
|
font-family: PlayBold;
|
|
font-weight: bold;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
letter-spacing: 1.0em;
|
|
line-height: 1.0em;
|
|
display: relative;
|
|
}
|
|
|
|
.bottom .upper {
|
|
position: relative;
|
|
top: -1.0em;
|
|
color: #977a2d;
|
|
}
|
|
|
|
.bottom .lower {
|
|
-webkit-text-stroke-color: white;
|
|
-webkit-text-stroke-width: 0.35em;
|
|
}
|
|
|
|
.middle {
|
|
font-size: 120px;
|
|
margin: 10px;
|
|
position: relative;
|
|
font-family: japarifont;
|
|
letter-spacing: 0.1em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.middle .char {
|
|
width: 1em;
|
|
height: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
.middle .char .primary {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: limegreen;
|
|
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
|
|
}
|
|
|
|
.middle .char .secondary {
|
|
position: absolute;
|
|
color: green;
|
|
text-shadow: 0 0 0.06em rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.middle .char .lower {
|
|
position: absolute;
|
|
-webkit-text-stroke-color: white;
|
|
-webkit-text-stroke-width: 0.35em;
|
|
}
|
|
|
|
img#result {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: 10px;
|
|
}
|
|
|
|
img#result:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.noselect {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|
|
<link rel="icon" href="card.png">
|
|
<script src="index.js"></script>
|
|
<script src="canvas-toBlob.js"></script>
|
|
<script src="FileSaver.js"></script>
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="kemonogen"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container savanna">
|
|
<div class="preview noselect">
|
|
<img id="result" />
|
|
<div class="bottom">
|
|
<div class="lower"></div>
|
|
<div class="upper"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inputs">
|
|
<h1>Kemono Friends Logo Generator</h1>
|
|
<span>↓ Gib hier deinen Text ein!</span>
|
|
<input id="top" type="text" placeholder="Oberer Text" />
|
|
<input id="middle" type="text" placeholder="Mittlerer Text" />
|
|
<input id="bottom" type="text" placeholder="Unterer Text" />
|
|
<p>Wenn du fertig bist, klicke auf <button id="download" download="kemono-friends-logo.png">Logo herunterladen!</button> um dein Bild zu speichern!</p>
|
|
<p>Auf dem Smartphone kannst du das Logo auch durch langes Drücken teilen oder einen Screenshot machen.</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="credits">
|
|
<p class="resources">Fonts: <a target="_blank" href="http://getsuren.com/killgoU.html">KillgoU</a>, <a target="_blank" href="https://code.google.com/archive/p/dejima-fonts/">Dejima Mincho</a>, <a target="_blank" href="https://fonts.google.com/specimen/Play">Play</a></p>
|
|
<p class="author">Entwickelt von <a href="https://twitter.com/cubbit2">@cubbit2</a> | Übersetzt und angepasst von Akamaru</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|