code:
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-container {
    width: 80%;
    margin: 0 auto;

    display: flex;
    justify-content: space-around;
}

.main-container>div {
    flex: 1;
    margin: 2rem;
}

#input-code {
    width: 100%;
}

.result-row {
    display: flex;
}

.result-box {
    flex: 1;
    margin-left: 0.5rem;
}

repo_name: spnati/serve

license: mit


code:
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-header {
    text-align: center;
}

.creators-table {
    width: 60%;
}

.character-row.empty {
    opacity: 0.5;
}

.character-row.empty .character-creators {
    font-style: italic;
}

.creator .discriminator::before {
    content: "#";
}

.creator:not(:first-child)::before {
    content: ", ";
}


code:
/* Recent Activity Cards */

.recent-line {
    margin-bottom: 1rem;
}

.line-id::before {
    content: "Submission ";
}

.line-metadata .list-group-item, .recent-line .card-footer {
    padding: .5625rem 0.9375rem;
}

.line-metadata .list-group-item::before {
    font-weight: bold;
}

.line-situation::before {
    content: "Situation: ";
}

.line-stages::before {
    content: "Stages: ";
}

.line-expression {
    font-style: italic;
    /* margin-right: auto; */
}

.line-expression::before {
    content: "Expression: ";
    font-style: normal;
}

.line-targets::before {
    content: "Targets: ";
}

.line-dialogue::before {
    content: "\"";
}

.line-dialogue::after {
    content: "\"";
}

.line-dialogue {
    font-style: italic;
}

.recent-line .card-footer {
    display: flex;
}

.line-time {
    margin-left: auto;
}

.line-time::before {
    content: "Written ";
}

.line-author {
    font-weight: bold;
}

.line-options {
    display: flex;
}

.line-status::before {
    content: "Status: ";
    font-weight: normal;
    margin-right: 0.125rem;
}

.line-status {
    font-weight: bold;
    margin-right: auto;
}

.line-accept {
    margin-right: .375rem;
	margin-bottom: .375rem;
}

.line-reject {
    margin-bottom: .375rem;
}

.line-edit {
    margin-right: .375rem;
}

.line-status {
    display: flex;
    flex-direction: row;
    align-items: center;
}


code:
.mode-area {
    margin: 2% 17%;

    display: grid;
    justify-content: center;
}

.main-container {
    margin: 2% 5%;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.alert-notification {
    margin: 0.5% 5%;
    display: flex;
}

.alert-notification .alert-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alert-notification .close-button {
    margin-left: auto;
    font-size: 150%;
    padding: 0 .375em;
}

.image-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-img {
	width: 200px;
}

/* Main writing UI */

.main-col {
    margin: 0 2vw;
    flex: 1;
}

.main-col > .compartment {
    margin: 1vh 0;
}

.character-area {
    display: flex;
    align-items: center;
}

.character-label {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

.wide-textarea {
    width: 100%;
}

.btn-group-toggle label.btn::after {
    content: "Disabled";
}

.btn-group-toggle label.btn.active::after {
    content: "Enabled";
}

.btn-group-toggle .stage-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-toggle .stage-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-toggle .stage-all-input {
    background-color: #007bff;
    border-color: #007bff;
}

/* incredibly stupid - vis, fix this */

.btn-group-simple .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-simple .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-simple label.btn::after {
    content: "Simple";
}

.btn-group-simple > .btn,
.btn-group-simple > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-simple > .btn input[type="radio"],
.btn-group-simple > .btn input[type="checkbox"],
.btn-group-simple > .btn-group > .btn input[type="radio"],
.btn-group-simple > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-advanced .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-advanced .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-advanced label.btn::after {
    content: "Advanced";
}

.btn-group-advanced > .btn,
.btn-group-advanced > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-advanced > .btn input[type="radio"],
.btn-group-advanced > .btn input[type="checkbox"],
.btn-group-advanced > .btn-group > .btn input[type="radio"],
.btn-group-advanced > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-expert .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-expert .mode-input-fadedgreen {
    background-color: #1e7e34;
    border-color: #1e7e34;
	opacity: 0.65;
}

.btn-group-expert label.btn::after {
    content: "Expert";
}

.btn-group-expert > .btn,
.btn-group-expert > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-expert > .btn input[type="radio"],
.btn-group-expert > .btn input[type="checkbox"],
.btn-group-expert > .btn-group > .btn input[type="radio"],
.btn-group-expert > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-stage-simple .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-stage-simple label.btn::after {
    content: "Simple";
}

.btn-group-stage-simple > .btn,
.btn-group-stage-simple > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-stage-simple > .btn input[type="radio"],
.btn-group-stage-simple > .btn input[type="checkbox"],
.btn-group-stage-simple > .btn-group > .btn input[type="radio"],
.btn-group-stage-simple > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-group-stage-precise .mode-input {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-group-stage-precise label.btn::after {
    content: "Precise";
}

.btn-group-stage-precise > .btn,
.btn-group-stage-precise > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-stage-precise > .btn input[type="radio"],
.btn-group-stage-precise > .btn input[type="checkbox"],
.btn-group-stage-precise > .btn-group > .btn input[type="radio"],
.btn-group-stage-precise > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* end stupid */

.stages-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}

.full-stages-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: right;
}

.mode-container {
    display: flex;
    flex-direction: row;
    text-align: center;
}

.targeting-options {
    display: flex;
    flex-direction: row;
}

.options-container {
    display: flex;
    flex-direction: column;
}

.dialogue-option {
    display: flex;
    margin: 0.25rem 0;
    justify-content: center;
}

.option-label {
    font-size: large;
    flex: 1;
}

.desc-label {
    font-size: small;
	font-style: italic;
}

.rnd-label {
    font-size: large;
    flex: 1;
}

.option-input {
    flex: 2;
}

.row-compartment {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.session-container {
    margin-left: auto;
}

.login-label {
    margin-right: 1.5rem;
}

.login-value {
    font-weight: bold;
}

.logout-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Submission listing area */

.submission-listing {
    margin: 2% 3%;
    margin-top: 0.5%;
}

.listing-area {
    display: grid;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

/* Adjust the number of columns per grid row, depending on screen width.
 * These breakpoints are based on the Bootstrap breakpoints, but tweaked
 * slightly (mostly just to make ranges for "medium" and "large" screens
 * a bit larger).
 */

/* Small and extra small widths */
@media (max-width: 768px) {
    .listing-area {
        grid-template-columns: 1fr;
    }
}

/* Medium width */
@media (min-width: 768px) and (max-width: 1050px) {
    .listing-area {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large width */
@media (min-width: 1050px) and (max-width: 1450px) {
    .listing-area {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large width */
@media (min-width: 1450px) {
    .listing-area {
        grid-template-columns: repeat(4, 1fr);
    }
}

.load-next-container {
    text-align: center;
}

.submission-listing .options-area {
    display: flex;
    justify-content: center;
}

.closed-notification {
	text-align: center;
}


code:
.main-container {
    margin: 2% 3%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-col {
    margin: 0 2vw;
    width: 30vw;
}

.main-col > .compartment {
    margin: 1vh 0;
}

.code-area textarea {
    width: 100%;
}

.btn-group-toggle label.btn::after {
    content: "Disabled";
}

.btn-group-toggle label.btn.active::after {
    content: "Enabled";
}

.options-container {
    display: flex;
    flex-direction: column;
}

.import-option {
    margin: 0.25rem 0;
}

.option-label {
    font-size: large;
    width: 12.5rem;
}

.option-input {
    width: 10rem;
}


code:
.main-container {
    width: 80%;
    margin: 0 auto;

    display: flex;
    justify-content: space-around;
}

.main-container>div {
    flex: 1;
    margin: 2rem;
}

#result-image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}


code:
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-header {
    text-align: center;
}

.csv-download-row {
    margin-bottom: 1rem;
}

.linecounts-table {
    width: 60%;
}


code:
.main-container {
    width: 90%;
    margin: 0 auto;

    display: flex;
    justify-content: space-around;
}

.main-container>div {
    flex: 1;
    margin: 2rem;
}

#control-info {
    display: none;
}

.lineset-container, #control-info {
    margin-top: 1rem;
}

.lineset-title {
    margin-bottom: 0;
}

.line-container {
    margin-top: 1rem;
}

.line-container:first-child {
    margin-top: 0;
}

.situation-container {
    padding: .5rem 1rem;
}

.situation-stages::before {
    content: "Stages: ";
    font-weight: bold;
}

.situation-triggers::before {
    content: "Situations: ";
    font-weight: bold;
}

.situation-targets::before {
    content: "Targets: ";
    font-weight: bold;
}

.situation-triggers {
    margin-left: 1rem;
}

.situation-targets {
    margin-left: 1rem;
}

.diff-container {
    display: grid;
    grid-template-columns: max-content auto;
}

.diff-label {
    font-weight: bold;
    margin-right: 0.25rem;
}

.diff-inserted {
    background-color: lightgreen;
}

.diff-deleted {
    background-color: lightcoral;
}

.mr-deck {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
}

@media (max-width: 768px) {
    .mr-deck {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .mr-deck {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .mr-deck {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .mr-deck {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mr-view-btn {
    margin: auto 1.25rem 1.25rem;
}

.btn-spinner {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 1rem;
}

.mr-labels::before {
    content: "Labels: ";
    font-weight: bold;
}

.mr-target::before {
    content: "Target Branch: ";
    font-weight: bold;
}

.mr-character::before {
    content: "Character: ";
    font-weight: bold;
}


code:
<!DOCTYPE html>

    <meta charset="utf-8">
    <title>Kisekae Character Disassembler</title>
    <link rel="shortcut icon" href="utilities-logo.png" type="image/x-icon">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/disassembly.css">

            SPNATI Utilities

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"
            aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">

        </button>

                    Kisekae Importer

                    Kisekae Disassembler(current)

                    Image Cropper

                    Code Splitter

                    Linecounts

                    Creator Index

                    Merge Request Viewer

                    Dialogue Crowdsourcing

        <form id='import-form' class='main-col'>

Kisekae Code:

                <textarea id="code" name="code" rows="16"></textarea>

        </form>

                <button class="btn btn-primary" id="import-button" type="submit" name="button">

                    Import
                </button>

                    Import Complete

                <button class="btn btn-primary" id="attachment-button">

                    Upload Image Attachment...
                </button>
                <input id="attachment-input" type="file" accept="image/png,image/jpeg" hidden />

Slider Options (-1 to use value in code)

                    Blush (0-100):
                    <input class="option-input" type="number" id="blush" name="blush" value="-1" min="-1" max="100">

                    Anger (0-100):
                    <input class="option-input" type="number" id="anger" name="anger" value="-1" min="-1" max="100">

                    Juice (0-200):
                    <input class="option-input" type="number" id="juice" name="juice" value="-1" min="-1" max="200">

                    Auto-Crop:

                        <input type="checkbox" id="do_crop" name="do_crop" checked>

                    Remove Breast Motion:

                        <input type="checkbox" id="remove_motion" name="remove_motion" checked>


code:
<!DOCTYPE html>

    <meta charset="utf-8">
    <title>Kisekae Image Auto-Crop</title>
    <link rel="shortcut icon" href="utilities-logo.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
        integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/image-crop.css">

            SPNATI Utilities

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"
            aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">

        </button>

                    Kisekae Importer

                    Kisekae Disassembler

                    Image Cropper(current)

                    Code Splitter

                    Linecounts

                    Creator Index

                    Merge Request Viewer

                    Dialogue Crowdsourcing

Kisekae Image Cropper:

If you already have images of your character taken from within Kisekae, we can crop it to
                the appropriate dimensions for use in SPNATI.

To mimic the scale and quality of other imported images, make sure to use these settings in
                    Kisekae when exporting screenshots:

Zoom: 7

Image Quality: 05/05

Export screenshots as PNG and without background

Exact camera positioning shouldn't matter; we'll automatically detect where your character is in the
                    image and crop appropriately.

                <button id="img-button">Upload Image...</button>
                (or drag and drop anywhere to upload!)
                <input type="file" name="img-in" id="img-input" accept="image/png" style="opacity:0">

Cropped Image:


code:
<!DOCTYPE html>

    <meta charset="utf-8">
    <title>Kisekae Importer</title>
    <link rel="shortcut icon" href="utilities-logo.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
        integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

            SPNATI Utilities

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"
            aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">

        </button>

                    Kisekae Importer(current)

                    Kisekae Disassembler

                    Image Cropper

                    Code Splitter

                    Linecounts

                    Creator Index

                    Merge Request Viewer

                    Dialogue Crowdsourcing

            <form id='import-form' class='col-sm'>

Kisekae Code:

                    <textarea id="code" name="code" rows="16" cols="80"></textarea>

                    <button id="import-button" type="submit" name="button">Import</button>
                    <button id="attachment-button">Upload Image Attachment...</button>
                    <input id="attachment-input" type="file" accept="image/png,image/jpeg" />

Slider Options (-1 to use value in code):

                        Blush (0-100):
                        <input type="number" id="blush" name="blush" value="-1" , min="-1" , max="100">

                        Anger (0-100):
                        <input type="number" id="anger" name="anger" value="-1" , min="-1" , max="100">

                        Juice (0-200):
                        <input type="number" id="juice" name="juice" value="-1" , min="-1" , max="200">

                        Auto-Crop:

                            <input type="checkbox" id="do_crop" name="do_crop" checked>

                        Remove Breast Motion:

                            <input type="checkbox" id="remove_motion" name="remove_motion" checked>

Hide/Show Alpha Values (0-1):

                            <input type="number" id="hs-mouth" name="hs-mouth" value="1" , min="0" , max="1" step=".01">
                            Mouth

                            <input type="number" id="hs-nose" name="hs-nose" value="1" , min="0" , max="1" step=".01">
                            Nose

                            <input type="number" id="hs-face" name="hs-face" value="1" , min="0" , max="1" step=".01">
                            Face

                            <input type="number" id="hs-hair" name="hs-hair" value="1" , min="0" , max="1" step=".01">
                            Hair

                            <input type="number" id="hs-ear0" name="hs-ear0" value="1" , min="0" , max="1" step=".01">
                            Left Ear

                            <input type="number" id="hs-ear1" name="hs-ear1" value="1" , min="0" , max="1" step=".01">
                            Right Ear

                            <input type="number" id="hs-eye0" name="hs-eye0" value="1" , min="0" , max="1" step=".01">
                            Left Eye

                            <input type="number" id="hs-eye1" name="hs-eye1" value="1" , min="0" , max="1" step=".01">
                            Right Eye

                            <input type="number" id="hs-head" name="hs-head" value="1" , min="0" , max="1" step=".01">
                            Head

                            <input type="number" id="hs-mune-necktie" name="hs-mune-necktie" value="1" , min="0" ,
                                max="1" step=".01">
                            Necktie

                            <input type="number" id="hs-mune" name="hs-mune" value="1" , min="0" , max="1" step=".01">
                            Upper Body

                            <input type="number" id="hs-dou" name="hs-dou" value="1" , min="0" , max="1" step=".01">
                            Lower Body

                            <input type="number" id="hs-seihuku-mune" name="hs-seihuku-mune" value="1" , min="0" ,
                                max="1" step=".01">
                            Jacket (Upper)

                            <input type="number" id="hs-seihuku-dou" name="hs-seihuku-dou" value="1" , min="0" , max="1"
                                step=".01">
                            Jacket (Lower)

                            <input type="number" id="hs-vest-mune" name="hs-vest-mune" value="1" , min="0" , max="1"
                                step=".01">
                            Vest (Upper)

                            <input type="number" id="hs-vest-dou" name="hs-vest-dou" value="1" , min="0" , max="1"
                                step=".01">
                            Vest (Lower)

                            <input type="number" id="hs-ysyatu-mune" name="hs-ysyatu-mune" value="1" , min="0" , max="1"
                                step=".01">
                            Shirt (Upper)

                            <input type="number" id="hs-ysyatu-dou" name="hs-ysyatu-dou" value="1" , min="0" , max="1"
                                step=".01">
                            Shirt (Lower)

                            <input type="number" id="hs-ashi0-thigh" name="hs-ashi0-thigh" value="1" , min="0" , max="1"
                                step=".01">
                            Left Thigh

                            <input type="number" id="hs-ashi1-thigh" name="hs-ashi1-thigh" value="1" , min="0" , max="1"
                                step=".01">
                            Right Thigh

                            <input type="number" id="hs-ashi0-leg" name="hs-ashi0-leg" value="1" , min="0" , max="1"
                                step=".01">
                            Left Lower Leg

                            <input type="number" id="hs-ashi1-leg" name="hs-ashi1-leg" value="1" , min="0" , max="1"
                                step=".01">
                            Right Lower Leg

                            <input type="number" id="hs-ashi0-foot" name="hs-ashi0-foot" value="1" , min="0" , max="1"
                                step=".01">
                            Left Foot

                            <input type="number" id="hs-ashi1-foot" name="hs-ashi1-foot" value="1" , min="0" , max="1"
                                step=".01">
                            Right Foot

                            <input type="number" id="hs-handm0_0" name="hs-handm0_0" value="1" , min="0" , max="1"
                                step=".01">
                            Left Arm (Upper)

                            <input type="number" id="hs-handm0_1" name="hs-handm0_1" value="1" , min="0" , max="1"
                                step=".01">
                            Right Arm (Upper)

                            <input type="number" id="hs-handm1_0-lower-arm" name="hs-handm1_0-lower-arm" value="1" ,
                                min="0" , max="1" step=".01">
                            Left Arm (Lower)

                            <input type="number" id="hs-handm1_1-lower-arm" name="hs-handm1_1-lower-arm" value="1" ,
                                min="0" , max="1" step=".01">
                            Right Arm (Lower)

                            <input type="number" id="hs-handm1_0-hand" name="hs-handm1_0-hand" value="1" , min="0" ,
                                max="1" step=".01">
                            Left Hand

                            <input type="number" id="hs-handm1_1-hand" name="hs-handm1_1-hand" value="1" , min="0" ,
                                max="1" step=".01">
                            Right Hand

                            <input type="number" id="hs-peni" name="hs-peni" value="1" , min="0" , max="1" step=".01">
                            Penis

                            <input type="number" id="hs-vibrator" name="hs-vibrator" value="1" , min="0" , max="1"
                                step=".01">
                            Vibrator

            </form>

Imported Image:

(click to download)