558 lines
17 KiB
Vue
558 lines
17 KiB
Vue
<template>
|
||
<div id="app">
|
||
<label class="nsfw-switch" for="nsfw-switch">
|
||
<div>😇</div>
|
||
<div class="toggle-wrap">
|
||
<input v-model="nsfw" type="checkbox" name="nsfw" id="nsfw-switch" />
|
||
<div class="toggle"></div>
|
||
</div>
|
||
<div>😈</div>
|
||
</label>
|
||
<header>
|
||
<div>
|
||
<img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
|
||
</div>
|
||
<div>
|
||
<h1>{{ appName }}</h1>
|
||
<h2>{{ appSubtitle }}</h2>
|
||
</div>
|
||
</header>
|
||
|
||
<section>
|
||
<h2>Quick info</h2>
|
||
<data-table :dataset="getSebinData.generic"></data-table>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Colors</h2>
|
||
<data-table :dataset="getSebinData.colors"></data-table>
|
||
</section>
|
||
|
||
<section v-if="nsfw">
|
||
<h2>Penis</h2>
|
||
<data-table :dataset="getSebinData.penis"></data-table>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<h2>Anatomy</h2>
|
||
|
||
<rich-figure
|
||
imgSrc="/img/fullbody-ref.jpg"
|
||
caption="Sebin Full Body reference"
|
||
></rich-figure>
|
||
|
||
<p>
|
||
Sebin is a bipedal plantigrade. His body is mostly covered by red scales
|
||
with yellow chest plates running from below his chin over his torso all
|
||
the way down between his legs and underside of his tail. His physique is
|
||
athletic to muscular. His fingers and toes are equipped sharp black
|
||
claws. Brown spikes run along his spine down to the tip of his tail. His
|
||
tail is about one meter in length.
|
||
</p>
|
||
|
||
<rich-figure
|
||
imgSrc="/img/head-ref.jpg"
|
||
caption="Sebin's Expressions"
|
||
></rich-figure>
|
||
|
||
<p>
|
||
His wing span is around 3-4 meters. He has them closed when on the
|
||
ground. His wings function like a second pair of arms, at which ends are
|
||
hand-like limbs with a black talon on top and finger-like extensions, in
|
||
between which are the membranes of his wings. He can use his wings to
|
||
fly short distances. Longer distances become difficult due to fatigue of
|
||
having to carry his own weight with his wings alone.
|
||
</p>
|
||
|
||
<rich-figure
|
||
imgSrc="/img/sebin-hairstyle-short.jpg"
|
||
caption="Sebin with short hair"
|
||
></rich-figure>
|
||
|
||
<p>
|
||
He has round pupils instead of the slit ones typical for reptilians. He
|
||
has short yellow spikes above his eyes that resemble eyebrows, as well
|
||
as spikes along the jawline of his cheeks. He has black horns growing
|
||
out of his head which are mostly straight but slightly curve downwards.
|
||
His hair is blue and he wears it in varying styles. He has long pointy
|
||
ears which he can move to determine the origin of sounds around him. He
|
||
also uses them to express emotion. His teeth are very sharp. In his
|
||
throat are glands that produce a mixture that allows him to breathe
|
||
fire. His tongue has a pointy tip.
|
||
</p>
|
||
|
||
<rich-figure
|
||
v-if="nsfw"
|
||
imgSrc="/img/penis-ref.jpg"
|
||
caption="Sebin's manly parts"
|
||
></rich-figure>
|
||
|
||
<p v-if="nsfw">
|
||
Despite his majorly reptilian appearance he has nipples, a feature of
|
||
the human side of his family, which also shows with his external
|
||
testicles. Rather than a slit which houses his penis he has a pouch-like
|
||
sheath, with the tip slightly peeking out of it when not aroused. His
|
||
penis is mainly humanoid in shape but is surrounded by several ridges.
|
||
He can take it out of its pouch while it's still soft (e.g. for passing
|
||
water). When aroused his charcoal black shaft pushes out from the
|
||
sheath, its base girded by the sheath like a ring.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<h2>Muscle Reference</h2>
|
||
<p>
|
||
Sebin started working out at the age of 17. Being in top shape is very
|
||
important to him. His favorite workouts are weight-lifting (dumbbells as
|
||
well as barbells), lat pulldown, leg press, straight arm pulldown and
|
||
cable pull. He works out three times a week with one day in between
|
||
workout days for rest, switching body regions each workout day.
|
||
</p>
|
||
|
||
<rich-figure
|
||
imgSrc="/img/upper-body-ref.png"
|
||
caption="Sebin's upper body closeup"
|
||
></rich-figure>
|
||
|
||
<p>
|
||
Sebin is very focused on evenly distributed muscle mass but pays special
|
||
attention to his back, chest and arms. This is so his fire breath
|
||
doesn't get weak and he can throw fire projectiles farther. A strong
|
||
back ensures his wings continue to carry him so he can stay airbourne
|
||
for extended periods of time.
|
||
</p>
|
||
|
||
<h3>Additional References</h3>
|
||
<gallery :images="muscleRefs"></gallery>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<h2>Personality</h2>
|
||
<p>
|
||
Sebin is a warmhearted guy who cares a lot about his loved ones. He has
|
||
a keen sense for bad vibes and is always willing to do something about
|
||
it, either by listening to the problems of others or with well-meant
|
||
advice. Not being able to help a friend in need is the same for him as
|
||
abandoning them.
|
||
</p>
|
||
<p>
|
||
He is open and honest with his feelings and does not mince his words.
|
||
However, some people may find this brazen or tactless.
|
||
</p>
|
||
<p>
|
||
Sebin likes to laugh and is therefore easy to amuse, often up to a point
|
||
where he becomes utterly childish and immature. He also doesn't take
|
||
himself too seriously and can laugh at himself -- even if only after a
|
||
while. His vocabulary is rather vulgar and he rarely shies away from
|
||
cursing. But he knows when a more diplomatic choice of words is
|
||
appropriate.
|
||
</p>
|
||
<p>
|
||
However, if he feels that his points of view are right, his ambition may
|
||
well run away with him. If he gets the feeling during ongoing
|
||
discussions that the other side is not paying any attention to his point
|
||
of view, he can go from persistent to stubborn to hot-headed and even
|
||
become downright rude.
|
||
</p>
|
||
<p>
|
||
Sebin is very enthusiastic about his hobbies. If he notices even the
|
||
slightest overlap of interests, he may chew your ear off. Sometimes he
|
||
is also very impatient.
|
||
</p>
|
||
<p>
|
||
But above all Sebin is a very naughty hornball. He knows what he’s got
|
||
and enjoys the reactions when he shows it off. He is a generally
|
||
dominant lover who likes to have it rough. But he is not lacking in
|
||
tenderness. However, that doesn't mean that he doesn't let others have
|
||
their fun with him too from time to time. It always depends on his
|
||
playmates. He loves to wear bottomless jockstraps and boxer briefs to
|
||
direct the attention of the viewer exactly where he wants it. After all
|
||
he is well endowed enough to peddle it around.
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Clothing Styles</h2>
|
||
<template v-for="(style, index) in clothingStyles">
|
||
<h3 :key="style.name">{{ style.name }}</h3>
|
||
|
||
<gallery :key="style.name + index" :images="clothes[index]"></gallery>
|
||
|
||
<ul :key="index">
|
||
<li v-for="(part, index) in style.clothes" :key="index">
|
||
{{ part }}
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<h2>Abilities</h2>
|
||
<p>
|
||
Since Sebin is a fire dragon there’s a myriad of abilities he has at his
|
||
disposal to defend himself.
|
||
</p>
|
||
|
||
<h3>Overdrive Form</h3>
|
||
<p>
|
||
Sebin can enter an Overdrive Form which greatly increases his strength
|
||
and abilities but it comes at a cost.
|
||
</p>
|
||
|
||
<p>
|
||
He enters Overdrive by engulfing himself in a pillar of flames which
|
||
transforms his exterior physique. During Overdrive transformation his
|
||
hair ignites and flickers with blue flames, as do the corners of his
|
||
eyes with long green flames. His arms and legs become
|
||
<a href="https://www.furaffinity.net/view/31065788/"
|
||
>3/4 carbon black and are crossed by several glowing veins which
|
||
pulsate like flowing lava</a
|
||
>. Fire in this form burns several degrees hotter than usual because his
|
||
body becomes a living blast furnace, which is why his limbs have to be
|
||
of more fire-proof material to withstand the increased heat.
|
||
</p>
|
||
|
||
<p>
|
||
To complete the transformation he inhales the flames from the pillar
|
||
surrounding him which heats up his body from within. Even if Sebin is a
|
||
fire dragon who can sustain high degrees of heat he is essentially
|
||
overheating himself from the inside. Because of this he can't maintain
|
||
this form for more than a few hours before he does permanent damage to
|
||
his own body.
|
||
</p>
|
||
|
||
<p>
|
||
Direct body contact with Sebin during overdrive causes 3rd degree burns
|
||
as he emits an extreme temperature, although less than he keeps inside
|
||
his body. His immediate surroundings are likely to burn or melt.
|
||
</p>
|
||
|
||
<h2>Attacks</h2>
|
||
<h3>Normal Form</h3>
|
||
<p>
|
||
<strong>Fire Breath:</strong> Either a long breath of fire or short
|
||
bursts fired directly from Sebin's mouth.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
|
||
throw them at his opponents. His scales are fireproof and can withstand
|
||
the high temperatures. On impact these fireballs explode into a bigger
|
||
fire bursts with a diameter of 1-2 meters. He can also combine two
|
||
fireballs into a bigger one for bigger impact.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin can
|
||
use his fire breath to engulf his body in flames while spinning to
|
||
become a fire tornado that singes opponents.
|
||
</p>
|
||
|
||
<h3>Attacks in Overdrive Form</h3>
|
||
<p>
|
||
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath increases
|
||
as well as the frequency at which he can fire shots from his mouth.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Flame Toss:</strong> Overdrive Form eliminates the need for
|
||
Sebin to spit fire into his palms. It instead enables him to fire the
|
||
shots directly from the palm of his hands, as the firey veins crossing
|
||
his arms act as an orifice to do so. The explosion radius of the burning
|
||
projectiles that explode on impact is greatly increased.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Burning Shackles:</strong> Overdrive also allows Sebin to
|
||
transform his fire balls into rings by sticking his fingers into the
|
||
fire balls and spinning them around on his finger until they expand into
|
||
rings. He can throw these at opponents like shurikens.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Combustion Flare:</strong> A devastating firestorm by combining
|
||
the power of both hands from his fire-infused arms. The impact of the
|
||
two carbon-like palms against each other is like the clash of two
|
||
flints, used to ignite the attack. A secure foothold is needed to
|
||
prevent Sebin from being thrown back by the recoil of the attack. Using
|
||
this technique in the air is therefore highly risky.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Blazing Pandemonium:</strong> A heavy impact into the ground
|
||
from a great height with both fists, tearing deep cracks in the ground
|
||
around the impact crater. Combined with <em>Burning Twister</em>, the
|
||
flames that previously surrounded Sebin's body are forced through the
|
||
newly created furrows, transforming the scene into an inferno.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Scorching Edge:</strong> A fiery blade towering several meters
|
||
into the air that Sebin sends careening towards his enemies from his
|
||
fire-infused legs with a backflip kick, leaving a swath of destruction
|
||
in its wake. Upon impact the force of the attack is distributed
|
||
sideways.
|
||
</p>
|
||
|
||
<p>
|
||
<strong>Circling Fire Shield:</strong> A rather defensive technique. By
|
||
spinning around with stretched out arms Sebin creates fire balls, which
|
||
he usually hurls towards enemies, that circle around his body
|
||
diagonally. They act as a shield while he can still move his arms
|
||
relatively freely. Enemies would be well advised to keep their distance
|
||
to this spinning shield, as the fire balls will still explode on
|
||
contact.
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import DataTable from "./components/DataTable.vue";
|
||
import Gallery from "./components/Gallery.vue";
|
||
import RichFigure from "./components/RichFigure.vue";
|
||
|
||
import Sebin from "./mixins/Sebin.js";
|
||
import Helper from "./mixins/Helper.js";
|
||
|
||
export default {
|
||
name: "app",
|
||
components: {
|
||
DataTable,
|
||
Gallery,
|
||
RichFigure
|
||
},
|
||
data() {
|
||
return {
|
||
appName: "Sebin Nyshkim",
|
||
appSubtitle: "Character Reference Page",
|
||
muscleRefs: this.getMuscleRefPics(17),
|
||
kittens: this.getKittens(17),
|
||
clothes: this.getClothesPics(),
|
||
nsfw: false
|
||
};
|
||
},
|
||
mixins: [Sebin, Helper],
|
||
metaInfo: {
|
||
title: "Sebin Nyshkim - Reference Page",
|
||
link: [
|
||
{ rel: "favicon", href: "/img/sebin-smug-icon.png" },
|
||
{ rel: "icon", href: "/img/sebin-smug-icon.png" }
|
||
],
|
||
meta: Helper.methods.getMetaTags(),
|
||
htmlAttrs: {
|
||
lang: "en"
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
|
||
|
||
:root {
|
||
font-family: "Fira Sans Extra Condensed", sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
#app {
|
||
font-size: 1.125em;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
max-width: 40em;
|
||
margin: auto;
|
||
transition: all ease-in-out 0.25s;
|
||
|
||
@media (min-width: 50em) {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
@media (min-width: 160em) {
|
||
font-size: 1.5em;
|
||
}
|
||
}
|
||
|
||
.nsfw-switch {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
background-color: #fff;
|
||
border-radius: 0.5em;
|
||
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
|
||
padding: 0.5em;
|
||
margin: 0.5em;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
align-content: center;
|
||
|
||
> div {
|
||
flex: 0 1 33%;
|
||
align-self: center;
|
||
line-height: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.toggle-wrap {
|
||
margin: 0 0.5em;
|
||
}
|
||
|
||
.toggle {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 46px;
|
||
height: 26px;
|
||
background-color: #e6e6e6;
|
||
border-radius: 23px;
|
||
vertical-align: text-bottom;
|
||
transition: all 0.3s linear;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
width: 42px;
|
||
height: 22px;
|
||
background-color: #fff;
|
||
border-radius: 11px;
|
||
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
|
||
transition: all 0.25s linear;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: #fff;
|
||
border-radius: 11px;
|
||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
|
||
transform: translate3d(2px, 2px, 0);
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
.toggle::after {
|
||
width: 28px;
|
||
transform: translate3d(2px, 2px, 0);
|
||
}
|
||
|
||
input {
|
||
&:checked + .toggle::after {
|
||
transform: translate3d(16px, 2px, 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
|
||
&:checked + .toggle {
|
||
background-color: #4bd763;
|
||
|
||
&::before {
|
||
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
|
||
}
|
||
|
||
&::after {
|
||
transform: translate3d(22px, 2px, 0);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
@media (min-width: 35em) {
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
div {
|
||
flex: 0 1 100%;
|
||
|
||
&:first-child {
|
||
flex: 0 1 50%;
|
||
|
||
@media (min-width: 35em) {
|
||
flex: 0 1 30%;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
border-radius: 5em;
|
||
border: 0.375em solid #fff;
|
||
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
|
||
}
|
||
}
|
||
|
||
h1,
|
||
h2 {
|
||
font-family: "Exo", sans-serif;
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.125em;
|
||
font-weight: 900;
|
||
font-style: italic;
|
||
|
||
@media (min-width: 35em) {
|
||
font-size: 2.75em;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1em;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
|
||
.prose {
|
||
text-align: justify;
|
||
hyphens: auto;
|
||
}
|
||
|
||
section {
|
||
margin: 2em 0;
|
||
padding: 1em;
|
||
box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
|
||
background-color: #fff;
|
||
|
||
h2 {
|
||
border-bottom: 0.0625em #000 solid;
|
||
}
|
||
|
||
h3 {
|
||
border-bottom: 0.125em #000 dotted;
|
||
}
|
||
}
|
||
|
||
.float {
|
||
max-width: 15em;
|
||
|
||
&.left {
|
||
float: left;
|
||
margin: 0 1em 1em 0;
|
||
}
|
||
|
||
&.right {
|
||
float: right;
|
||
margin: 0 0 1em 1em;
|
||
}
|
||
}
|
||
</style>
|