Newer
Older
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="img/icon.ico" />
<title>Strip Poker Night at the Inventory</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/spni.css">
</head>
<body onload="initialSetup()">
<!-- Warning Screen -->
<div id="warning-screen" class="screen-container" hidden>
<div class="screen">
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
Credits
</button>
<a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
<img class="reddit-logo" src="img/reddit.png"/>
</a>
<!-- Banner -->
<div class="title-banner-container">
<div class="bordered title-banner-area">
<img class="bordered title-banner" src="img/title.png">
</div>
</div>
<!-- Content -->
<div class="main-title-container">
<div class="warning-text">
<p>This game contains material that is only suitable for adults. <b style="color:#DD3333">If you are under the age of 18, please leave now.</b></p>
<br>
<p><b style="color:#DD3333">Strip Poker Night at the Inventory</b> is a free, open source, and community run project. All characters represented within are 18+ and the property of their original owners.</p>
<p>The latest version of the game can be played at
<br><a href="https://spnati.net" target="_blank"><b>spnati.net</b></a></p>
<br><br><br><br><br><br>
<p>By clicking the button below, you are confirming that you are an adult and such material is legal in your region.</p>
<!-- Start Button -->
<div id='title-start-edge' class='bordered'>
<button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="enterTitleScreen()">
<img class='title-entrance-image' src='img/enter.png'/>
</button>
</div>
<!-- Title Screen -->
<div id="title-screen" class="screen-container" hidden>
<div class="screen">
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
Credits
</button>
<a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
<img class="reddit-logo" src="img/reddit.png"/>
</a>
<!-- Banner -->
<div class="title-banner-container">
<div class="bordered title-banner-area">
<img class="bordered title-banner" src="img/title.png">
</div>
</div>
<!-- Title Candy -->
<img id="left-title-candy" class="title-candy" src=""/>
<img id="right-title-candy" class="title-candy" src=""/>
<!-- Content -->
<div class="main-title-container">
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!-- Player Name -->
<div id="title-name-block">
<div class="title-label">Who are you?</div>
<input type="text" class='bordered' id='player-name-field'/>
</div>
<!-- Player Gender -->
<div id='title-gender-block'>
<input type='image' value='' id='male-gender-button' class='bordered title-content-button' src='img/male.png' onclick='changePlayerGender("male")'>
<input type='image' value='' id='female-gender-button' class='bordered title-content-button' src='img/female.png' onclick='changePlayerGender("female")' style="opacity:0.4;">
</div>
<!-- Player Male Size -->
<div id='male-size-container' class='title-size-block'>
<input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button' src='img/male_small.png' onclick='changePlayerSize("small")' style='opacity:0.4;'>
<input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button' src='img/male_medium.png' onclick='changePlayerSize("medium")'>
<input type='image' value='' id="large-junk-button" class='bordered title-large-button title-content-button' src='img/male_large.png' onclick='changePlayerSize("large")' style='opacity:0.4;'>
</div>
<!-- Player Female Size -->
<div id='female-size-container' class='title-size-block' hidden>
<input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button' src='img/female_small.png' onclick='changePlayerSize("small")' style='opacity:0.4;'>
<input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button' src='img/female_medium.png' onclick='changePlayerSize("medium")'>
<input type='image' value='' id="large-boobs-button" class='bordered title-large-button title-content-button' src='img/female_large.png' onclick='changePlayerSize("large")' style='opacity:0.4;'>
</div>
<!-- Player Wardrobe -->
<div id='title-wardrobe-block'>
<div class='title-label'>What are you wearing?</div>
<div id='title-warning-label'>Select 0 to 8 articles. Wear whatever you want.</div>
<!-- Male Clothing -->
<div id='male-clothing-container' class='title-clothing-container'>
<input type='image' value='' id="male-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/male/hat.png' onclick='selectClothing(0)'>
Joseph Kantel
committed
<input type='image' value='' id="male-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/male/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="male-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/male/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="male-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/male/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="male-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/male/tshirt.png' onclick='selectClothing(4)'>
<input type='image' value='' id="male-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/male/undershirt.png' onclick='selectClothing(5)'>
<input type='image' value='' id="male-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/male/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="male-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/male/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="male-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/male/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="male-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/male/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="male-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/male/kilt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="male-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/male/boxers.png' onclick='selectClothing(11)'>
<input type='image' value='' id="male-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/male/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="male-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/male/tie.png' onclick='selectClothing(13)'>
<input type='image' value='' id="male-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/male/gloves.png' onclick='selectClothing(14)'>
<input type='image' value='' id="male-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/male/socks.png' onclick='selectClothing(15)'>
<input type='image' value='' id="male-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/male/shoes.png' onclick='selectClothing(16)'>
<input type='image' value='' id="male-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/male/boots.png' onclick='selectClothing(17)'>
</div>
<!-- Female Clothing -->
<div id='female-clothing-container' class='title-clothing-container' hidden>
<input type='image' value='' id="female-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/female/hat.png' onclick='selectClothing(0)'>
Joseph Kantel
committed
<input type='image' value='' id="female-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/female/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="female-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/female/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="female-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/female/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="female-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/female/tanktop.png' onclick='selectClothing(4)'>
<input type='image' value='' id="female-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/female/bra.png' onclick='selectClothing(5)'>
<input type='image' value='' id="female-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/female/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="female-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/female/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="female-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/female/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="female-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/female/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="female-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/female/skirt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="female-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/female/panties.png' onclick='selectClothing(11)'>
<input type='image' value='' id="female-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/female/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="female-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/female/bracelet.png' onclick='selectClothing(13)'>
<input type='image' value='' id="female-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/female/gloves.png' onclick='selectClothing(14)'>
<input type='image' value='' id="female-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/female/stockings.png' onclick='selectClothing(15)'>
<input type='image' value='' id="female-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/female/socks.png' onclick='selectClothing(16)'>
<input type='image' value='' id="female-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/female/shoes.png' onclick='selectClothing(17)'>
</div>
</div>
<!-- Start Button -->
<div id='title-start-edge' class='bordered'>
<button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="validateTitleScreen()">
<img class='title-entrance-image' src='img/enter.png'/>
</button>
metodLD
committed
</div>
<div id='title-gallery-edge' class='bordered'>
<button id='title-gallery-button' class='bordered smooth-button smooth-button-red' onclick="loadGalleryScreen()">
<img class='title-gallery-image' src='img/gallery.svg'/>
</button>
</div>
</div>
</div>
<!-- Main Select Screen -->
<div id="main-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Dialogues -->
<div class="dialogue-bubble-row">
<div id="select-bubble-1" class="bordered left dialogue-bubble-area">
<div class="dialogue-bubble dialogue-centre arrow-down">
<span id="select-dialogue-1" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-2" class="bordered halfLeft dialogue-bubble-area">
<div class="dialogue-bubble dialogue-centre arrow-down">
<span id="select-dialogue-2" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-3" class="bordered center dialogue-bubble-area">
<div class="dialogue-bubble dialogue-centre arrow-down">
<span id="select-dialogue-3" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-4" class="bordered farHalfLeft dialogue-bubble-area">
<div class="dialogue-bubble dialogue-centre arrow-down">
<span id="select-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
FarawayVision
committed
<div class="farLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-1" class="opponent-image" hidden>
<div id="opponent-suggestions-1" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 1)">Name</div>
</div>
<div id="opponent-suggestion-1-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 2)">Name</div>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 3)">Name</div>
</div>
<div id="opponent-suggestion-1-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</div>
</div>
</div>
</div>
FarawayVision
committed
<div class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-2" class="opponent-image" hidden>
<div id="opponent-suggestions-2" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 1)">Name</div>
</div>
<div id="opponent-suggestion-2-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 2)">Name</div>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 3)">Name</div>
</div>
<div id="opponent-suggestion-2-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</div>
</div>
</div>
</div>
FarawayVision
committed
<div class="almostRight selection-image-area">
ReformCopyright
committed
<img id="select-image-3" class="opponent-image" hidden>
<div id="opponent-suggestions-3" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 1)">Name</div>
</div>
<div id="opponent-suggestion-3-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 2)">Name</div>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 3)">Name</div>
</div>
<div id="opponent-suggestion-3-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</div>
</div>
</div>
</div>
FarawayVision
committed
<div class="farRight selection-image-area">
ReformCopyright
committed
<img id="select-image-4" class="opponent-image" hidden>
<div id="opponent-suggestions-4" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 1)">Name</div>
</div>
<div id="opponent-suggestion-4-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 2)">Name</div>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 3)">Name</div>
</div>
<div id="opponent-suggestion-4-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
FarawayVision
committed
<div class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</div>
</div>
</div>
</div>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<!-- Opponent Selections -->
<div class="bordered left opponent-area">
<div id="select-name-label-1" class="bordered opponent-name-label">Opponent 1</div>
<button id="select-slot-button-1" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(1)">Select Opponent</button>
</div>
<div class="bordered halfLeft opponent-area">
<div id="select-name-label-2" class="bordered opponent-name-label">Opponent 2</div>
<button id="select-slot-button-2" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(2)">Select Opponent</button>
</div>
<div class="bordered center opponent-area">
<div id="select-name-label-3" class="bordered opponent-name-label">Opponent 3</div>
<button id="select-slot-button-3" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(3)">Select Opponent</button>
</div>
<div class="bordered farHalfLeft opponent-area">
<div id="select-name-label-4" class="bordered opponent-name-label">Opponent 4</div>
<button id="select-slot-button-4" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(4)">Select Opponent</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Select Buttons -->
ReformCopyright
committed
<button id='select-main-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backSelectScreen()">
ReformCopyright
committed
<button id='select-group-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(1)">
ReformCopyright
committed
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(0)">
</button>
<button id='select-random-group-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
</button>
<!-- Advance Button Casing -->
<div id='select-advance-top' class='bordered'> </div>
<div id='select-advance-bottom' class='bordered'> </div>
<!-- Advance Button -->
<button id='main-select-button' class='bordered smooth-button smooth-button-red' onclick="advanceSelectScreen()" disabled="true">
Start
</button>
<!-- More Select Buttons -->
<button id='select-random-female-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
Random Females
</button>
<button id='select-random-male-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseMale(player) {return player.gender.toLowerCase() === 'male';})">
Random Males
</button>
<button id='select-random-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
ReformCopyright
committed
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
</button>
</div>
</div>
</div>
</div>
<!-- Individual Select Screen -->
<div id="individual-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Info -->
<div class="dialogue-bubble-row">
<div id="individual-stats-page-1-1" class="bordered left dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-sex-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="individual-source-label-1" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-stats-page-1-2" class="bordered left dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="individual-writer-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-artist-label-1" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="individual-counts-1">
<span id="individual-line-count-label-1"></span> unique lines <br />
<span id="individual-pose-count-label-1"></span> poses
</div>
</div>
<div id="individual-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-1">
</div>
</div>
<div id="individual-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-sex-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="individual-source-label-2" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-stats-page-2-2" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="individual-writer-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-artist-label-2" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="individual-counts-2">
<span id="individual-line-count-label-2"></span> unique lines <br />
<span id="individual-pose-count-label-2"></span> poses
</div>
</div>
<div id="individual-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-2">
</div>
</div>
<div id="individual-stats-page-3-1" class="bordered center dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-sex-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="individual-source-label-3" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-stats-page-3-2" class="bordered center dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="individual-writer-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-artist-label-3" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="individual-counts-3">
<span id="individual-line-count-label-3"></span> unique lines <br />
<span id="individual-pose-count-label-3"></span> poses
</div>
</div>
<div id="individual-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-3">
</div>
</div>
<div id="individual-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-sex-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="individual-source-label-4" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-stats-page-4-2" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="individual-writer-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-artist-label-4" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="individual-counts-4">
<span id="individual-line-count-label-4"></span> unique lines <br />
<span id="individual-pose-count-label-4"></span> poses
</div>
</div>
<div id="individual-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-4">
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div class="farLeft selection-image-area">
ReformCopyright
committed
<img id="individual-image-1" class="opponent-image" hidden>
<img id="individual-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="individual-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
<div class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="individual-image-2" class="opponent-image" hidden>
<img id="individual-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="individual-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
<div class="almostRight selection-image-area">
ReformCopyright
committed
<img id="individual-image-3" class="opponent-image" hidden>
<img id="individual-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="individual-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
<div class="farRight selection-image-area">
ReformCopyright
committed
<img id="individual-image-4" class="opponent-image" hidden>
<img id="individual-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="individual-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSingleSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<!-- Dock Area -->
<div id="individual-select-table">
<!-- Opponent Selections -->
<div class="bordered left small-opponent-area">
ReformCopyright
committed
<button id="individual-button-1" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(1)">Select Opponent</button>
</div>
<div class="bordered halfLeft small-opponent-area">
ReformCopyright
committed
<button id="individual-button-2" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(2)">Select Opponent</button>
</div>
<div class="bordered halfRight small-opponent-area">
ReformCopyright
committed
<button id="individual-button-3" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(3)">Select Opponent</button>
</div>
<div class="bordered right small-opponent-area">
ReformCopyright
committed
<button id="individual-button-4" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(4)">Select Opponent</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Buttons -->
ReformCopyright
committed
<button id='individual-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
ReformCopyright
committed
<button id='individual-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openSearchModal()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ReformCopyright
committed
Filter
</button>
<!-- Advance Button Casing -->
<div class='bordered long-select-advance-top'> </div>
<div class='bordered long-select-advance-bottom'> </div>
<!-- Page Selection -->
<div class="select-page-display">
<div class="bordered page-label">Page</div>
<input id="individual-page-indicator" type="text" class="bordered page-indicator" value="" />
<div id="individual-max-page-indicator" class="bordered of-label">of 1</div>
</div>
<div class="select-page-selection">
<button class="bordered smooth-button first-page-button" onclick="changeIndividualPage(true, -1)">
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button left-page-button" onclick="changeIndividualPage(false, -1)">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
ReformCopyright
committed
<button class="bordered smooth-button go-page-button" onclick="changeIndividualPage(true, 0)">
<div style="margin-top:2px"><b>Go</b></div>
</button>
<button class="bordered smooth-button right-page-button" onclick="changeIndividualPage(false, 1)">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button last-page-button" onclick="changeIndividualPage(true, 1)" style="border-right: 2px solid">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
</button>
</div>
<!-- More Buttons -->
ReformCopyright
committed
<button id='individual-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(1)">
Basic Info
</button>
<button id='individual-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(2)">
ReformCopyright
committed
<button id='individual-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(3)">
More Info
</button>
</div>
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
</div>
</div>
<!-- Group Select Screen -->
<div id="group-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Info -->
<div class="dialogue-bubble-row">
<div id="group-stats-page-1-1" class="bordered left dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-1" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-1-2" class="bordered left dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-1" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-1">
<span id="group-line-count-label-1"></span> unique lines <br />
<span id="group-pose-count-label-1"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
<div id="group-description-label-1">
</div>
</div>
<div id="group-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-2" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-2-2" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-2" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-2">
<span id="group-line-count-label-2"></span> unique lines <br />
<span id="group-pose-count-label-2"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div id="group-description-label-2">
</div>
</div>
<div id="group-stats-page-3-1" class="bordered center dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-3" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-3-2" class="bordered center dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-3" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-3">
<span id="group-line-count-label-3"></span> unique lines <br />
<span id="group-pose-count-label-3"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
<div id="group-description-label-3">
</div>
</div>
<div id="group-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-4" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-4-2" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-4" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-4">
<span id="group-line-count-label-4"></span> unique lines <br />
<span id="group-pose-count-label-4"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div id="group-description-label-4">
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div class="farLeft selection-image-area">
ReformCopyright
committed
<img id="group-image-1" class="opponent-image" hidden>
<img id="group-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
<div class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="group-image-2" class="opponent-image" hidden>
<img id="group-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
<div class="almostRight selection-image-area">
ReformCopyright
committed
<img id="group-image-3" class="opponent-image" hidden>
<img id="group-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
<div class="farRight selection-image-area">
ReformCopyright
committed
<img id="group-image-4" class="opponent-image" hidden>
<img id="group-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
<!-- Hide Button -->
<button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<!-- Dock Area -->
<div id="group-select-table">
<!-- Opponent Selections -->
<div id="group-select-area" class="bordered opponent-area">
<div id="group-name-label" class="bordered opponent-name-label">Opponent 1</div>
<button id="group-button" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectGroup()">Select Group</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Buttons -->
ReformCopyright
committed
<button id='group-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
ReformCopyright
committed
<button id='group-switch-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="switchSelectGroupScreen()">
Preset Tables
</button>
<button id='group-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openGroupSearchModal()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ReformCopyright
committed
Filter
</button>
<!-- Advance Button Casing -->
<div class='bordered long-select-advance-top'> </div>
<div class='bordered long-select-advance-bottom'> </div>
<!-- Page Selection -->
<div class="select-page-display">
<div class="bordered page-label">Page</div>
<input id="group-page-indicator" type="text" class="bordered page-indicator" value="" />
<div id="group-max-page-indicator" class="bordered of-label">of 1</div>
</div>
<div class="select-page-selection">
<button class="bordered smooth-button first-page-button" onclick="changeGroupPage(true, -1)">
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button left-page-button" onclick="changeGroupPage(false, -1)">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button go-page-button" onclick="changeGroupPage(true, 0)">
<div style="margin-top:2px"><b>Go</b></div>
</button>
<button class="bordered smooth-button right-page-button" onclick="changeGroupPage(false, 1)">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button last-page-button" onclick="changeGroupPage(true, 1)" style="border-right: 2px solid">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
</button>
</div>
<!-- More Buttons -->
ReformCopyright
committed
<button id='group-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(1)">
Basic Info
</button>
<button id='group-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(2)">
ReformCopyright
committed
<button id='group-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(3)">
More Info
</button>
</div>
metodLD
committed
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!-- Gallery Screen -->
<div id="gallery-screen" class="screen-container" hidden>
<div class="screen">
<div id="gallery-gender-block">
<input type="image" id="gallery-gender-all" class="gallery-gender-button bordered" src='img/all.png' onclick="galleryGender('all')"/>
<input type="image" id="gallery-gender-any" class="gallery-gender-button bordered" src='img/any.png' style="opacity:0.4;" onclick="galleryGender('any')" />
<input type="image" id="gallery-gender-male" class="gallery-gender-button bordered" src='img/male.png' style="opacity:0.4;" onclick="galleryGender('male')" />
<input type="image" id="gallery-gender-female" class="gallery-gender-button bordered" src="img/female.png" style="opacity:0.4;" onclick="galleryGender('female')" />
</div>
<div id="gallery-endings-block">
<div class="gallery-ending" onclick="selectEnding(0)"></div>
<div class="gallery-ending" onclick="selectEnding(1)"></div>
<div class="gallery-ending" onclick="selectEnding(2)"></div>
<div class="gallery-ending" onclick="selectEnding(3)"></div>
<div class="gallery-ending" onclick="selectEnding(4)"></div>
<div class="gallery-ending" onclick="selectEnding(5)"></div>
<div class="gallery-ending" onclick="selectEnding(6)"></div>
<div class="gallery-ending" onclick="selectEnding(7)"></div>
<div class="gallery-ending" onclick="selectEnding(8)"></div>
<div class="gallery-ending" onclick="selectEnding(9)"></div>
<div class="gallery-ending" onclick="selectEnding(10)"></div>
<div class="gallery-ending" onclick="selectEnding(11)"></div>
<div class="gallery-ending" onclick="selectEnding(12)"></div>
<div class="gallery-ending" onclick="selectEnding(13)"></div>
<div class="gallery-ending" onclick="selectEnding(14)"></div>
<div class="gallery-ending" onclick="selectEnding(15)"></div>
<div class="gallery-ending" onclick="selectEnding(16)"></div>
<div class="gallery-ending" onclick="selectEnding(17)"></div>
<div class="gallery-ending" onclick="selectEnding(18)"></div>
<div class="gallery-ending" onclick="selectEnding(19)"></div>
</div>
<div id="gallery-controls-block">
<button id="gallery-main-back-button" class="bordered main-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<button id="gallery-prev-page-button" class="bordered main-select-button smooth-button smooth-button-blue" onclick="galleryPrevPage()" disabled="true">prev</button>
<button id="gallery-next-page-button" class="bordered main-select-button smooth-button smooth-button-blue" onclick="galleryNextPage()">next</button>
<button id="gallery-start-ending-button" class="bordered main-select-button smooth-button smooth-button-green" onclick="doEpilogueFromGallery()" disabled="true" >Start</button>
</div>
<div id="gallery-selected-ending-block">
<div id="selected-ending-previev"></div>
<label id="selected-ending-title"></label>
<label>Character: <span id="selected-ending-character"></span></label>
<label>For: <span id="selected-ending-gender"></label>
</div>