616 lines
18 KiB
Vue
616 lines
18 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>
|
||
<details>
|
||
<summary>
|
||
<h2>Quick info</h2>
|
||
</summary>
|
||
<data-table :dataset="getSebinData.generic"></data-table>
|
||
</details>
|
||
</section>
|
||
|
||
<section>
|
||
<details>
|
||
<summary>
|
||
<h2>Colors</h2>
|
||
</summary>
|
||
<data-table :dataset="getSebinData.colors"></data-table>
|
||
</details>
|
||
</section>
|
||
|
||
<section v-if="nsfw">
|
||
<details>
|
||
<summary>
|
||
<h2>Penis</h2>
|
||
</summary>
|
||
<data-table :dataset="getSebinData.penis"></data-table>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<details>
|
||
<summary>
|
||
<h2>Anatomy</h2>
|
||
</summary>
|
||
<rich-figure
|
||
imgSrc="/img/fullbody-ref.jpg"
|
||
caption="Sebin Full Body reference"
|
||
copyright="FA:SirBoburto"
|
||
></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"
|
||
copyright="FA:SirBoburto"
|
||
></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"
|
||
copyright="@LeoboArt"
|
||
></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"
|
||
copyright="@Zodim87"
|
||
></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>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<details>
|
||
<summary>
|
||
<h2>Muscle Reference</h2>
|
||
</summary>
|
||
<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"
|
||
copyright="@NidtheDragon"
|
||
></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>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<details>
|
||
<summary>
|
||
<h2>Personality</h2>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
</section>
|
||
|
||
<section>
|
||
<details>
|
||
<summary>
|
||
<h2>Clothing Styles</h2>
|
||
</summary>
|
||
<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>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="prose">
|
||
<details>
|
||
<summary>
|
||
<h2>Abilities</h2>
|
||
</summary>
|
||
<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>
|
||
|
||
<rich-figure
|
||
imgSrc="/img/sebin-overdrive_ref-hires.jpg"
|
||
caption="Sebin in Overdrive"
|
||
copyright="@CVictorrosso"
|
||
></rich-figure>
|
||
|
||
<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. The corners of his eyes
|
||
flicker with long green flames. His arms and legs become part carbon
|
||
black and are crossed by several glowing veins which pulsate like
|
||
flowing lava. 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>Kindled Fist:</strong> Besides throwing fireballs Sebin can
|
||
also greatly increase the speed of the projectiles by a strong punch
|
||
or kick.
|
||
</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>Searing Discus:</strong> Overdrive allows Sebin to form rings
|
||
of fire by igniting flames from his fingertips and swirling them in a
|
||
circle motion. He can use them for both close quarters or ranged
|
||
combat.
|
||
</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>
|
||
</details>
|
||
</section>
|
||
|
||
<footer>
|
||
© 2020 Sebin Nyshkim
|
||
</footer>
|
||
</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]
|
||
};
|
||
</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 {
|
||
font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
|
||
"android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
|
||
"segoe ui symbol";
|
||
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: 50%;
|
||
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;
|
||
}
|
||
}
|
||
|
||
summary h2 {
|
||
display: inline;
|
||
border-bottom: none;
|
||
}
|
||
|
||
footer {
|
||
margin: 2em 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.float {
|
||
max-width: 15em;
|
||
|
||
&.left {
|
||
float: left;
|
||
margin: 0 1em 1em 0;
|
||
}
|
||
|
||
&.right {
|
||
float: right;
|
||
margin: 0 0 1em 1em;
|
||
}
|
||
}
|
||
</style>
|