Kemonogen komplett überarbeitet
This commit is contained in:
303
kemonogen/index.html
Normal file
303
kemonogen/index.html
Normal file
@ -0,0 +1,303 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Kemono Friends Logo Generator</title>
|
||||
<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: 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>
|
||||
Reference in New Issue
Block a user