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()">
FarawayVision
committed
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</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>
<p>Make sure to check out our list of <a href="#" onclick="showHelpModal()">Frequently-Asked Questions</a>!</p>
FarawayVision
committed
<br>
<p>By clicking the button below, you are confirming that you are an adult and such material is legal in your region.</p>
<div class='title-menu-buttons-container'>
<div class='bordered title-start-edge'>
<button class='bordered smooth-button smooth-button-red title-start-button' 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">
ReformCopyright
committed
<!-- Title Candy -->
<img id="left-title-candy" class="title-candy" src=""/>
<img id="right-title-candy" class="title-candy" src=""/>
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
FarawayVision
committed
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</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>
<!-- 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>
<div class="title-gender-size-container">
<!-- Player Gender -->
<input type='image' value='' id='male-gender-button' class='bordered title-content-button title-gender-button' src='img/male.png' onclick='changePlayerGender("male")'>
<input type='image' value='' id='female-gender-button' class='bordered title-content-button title-gender-button' src='img/female.png' onclick='changePlayerGender("female")'>
<!-- Player Male Size -->
<div id='male-size-container' class='title-size-block medium'>
<input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button title-size-button' src='img/male_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button title-size-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 title-size-button' src='img/male_large.png' onclick='changePlayerSize("large")'>
</div>
<!-- Player Female Size -->
<div id='female-size-container' class='title-size-block medium'>
<input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button title-size-button' src='img/female_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button title-size-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 title-size-button' src='img/female_large.png' onclick='changePlayerSize("large")'>
</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)'>
<!-- Start Button -->
<div class='title-menu-buttons-container'>
<div class='bordered title-gallery-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-gallery-button' onclick="loadGalleryScreen()">
<img class='centered-icon-image' src='img/gallery.svg'/>
</button>
</div>
<div class='bordered title-start-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-start-button' onclick="validateTitleScreen()">
<img class='centered-icon-image title-entrance-image' src='img/enter.png'/>
</button>
</div>
<div class='bordered title-tags-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-tags-button' onclick="showPlayerTagsModal()">
<span class="glyphicon glyphicon-tags centered-icon-glyphicon" aria-hidden="true"></span>
</button>
</div>
</div>
</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 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 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 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 arrow-down">
<span id="select-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div id="select-image-area-1" 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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 1)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 2)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 3)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-2" 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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 1)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 2)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 3)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-3" 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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 1)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 2)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 3)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-4" 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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 1)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 2)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 3)">Name</button>
</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">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</button>
</div>
</div>
</div>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" 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 id='select-help-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="showHelpModal()">
Help & FAQ
</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 -->
<div class="select-random-container">
<div class="select-random-col">
<button id='select-random-female-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
Random Females
</button>
<button id='select-random-group-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
Random Table
</button>
</div>
<div class="select-random-col">
<button id='select-random-male-button' class='bordered select-quadrant-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 select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
Random Fill
</button>
</div>
</div>
ReformCopyright
committed
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
</button>
</div>
</div>
</div>
</div>
<div id="individual-select-screen" class="wide-screen-container" hidden>
<div class="opponent-cards-container">
<!--
(example opponent card element)
<div class="opponent-card">
<div class="selection-card-image-clip">
<div class="selection-card-image-area">
<img class="opponent-card-image-simple" src="opponents/sayori/0-calm.png">
<img class="badge-icon" src="img/epilogue_icon.png"/>
<div class="selection-card-sidebar">
<img class="layer-icon" src="img/testing-badge.png"/>
<img class="status-icon" src="img/testing-badge.png"/>
<img class="gender-icon" src="img/female.png"/>
<div class="selection-card-footer">
<div class="selection-card-label selection-card-name">Sayori</div>
<div class="selection-card-label selection-card-source">Doki Doki Literature Club!</div>
<div class="bordered selection-options-row">
FarawayVision
committed
<button type="button" class="bordered smooth-button smooth-button-red select-back-btn" onclick="backToSelect()">Back</button>
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<div id="gender-sort-column" class="column-component">
<div class="gender-component">
<nav>
<ul class="pagination" id="search-gender">
<li class="active"><a href="#" data-value="1">All</a></li>
<li><a href="#" data-value="2">Male</a></li>
<li><a href="#" data-value="3">Female</a></li>
</ul>
</nav>
</div>
<div class="dropdown sort-component">
<button id="sort-dropdown" class="bordered btn btn-sm dropdown-toggle wide-dropdown"
type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="sort-dropdown-selection">Featured</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu sort-dropdown-options" aria-labelledby="sort-option">
<li><a href="#" data-value="roster">Featured</a></li>
<li><a href="#" data-value="date">Newest</a></li>
<li><a href="#" data-value="date-reverse">Oldest</a></li>
<li><a href="#" data-value="layers">Most Layers</a></li>
<li><a href="#" data-value="layers-reverse">Fewest Layers</a></li>
<li><a href="#" data-value="name">Name (A-Z)</a></li>
<li><a href="#" data-value="name-reverse">Name (Z-A)</a></li>
<li><a href="#" data-value="target">Targeted most by selected</a></li>
</ul>
<div id="name-creator-column" class="column-component">
<div class="option-component creator-component">
<label for="search-creator">Search Creator:</label>
<input list='creatorList' type="text" id="search-creator" class='bordered wide-textbox sort-filter-field' placeholder="Search by Creator"/>
</div>
<div class="option-component name-component">
<label for="search-name">Search Name: </label>
<input type="text" id="search-name" class='bordered wide-textbox sort-filter-field' placeholder="Name"/>
</div>
<div id="source-tag-column" class="column-component">
<div class="option-component source-component">
<label for="search-source">Search Source: </label>
<input list='sourceList' type="text" id="search-source" class='bordered wide-textbox sort-filter-field' placeholder="Search by Source"/>
<div class="option-component tag-component">
<label for="search-tag">Search Tag: </label>
<input list='tagList' type="text" id="search-tag" class='bordered wide-textbox sort-filter-field' placeholder="Search by Tag"/>
<div class="opponent-details-container">
<div class="opponent-details-image-area">
<img class="opponent-details-simple-image" />
</div>
FarawayVision
committed
<div class="opponent-details-panel bordered" hidden>
<div class="opponent-details-view opponent-details-basic show-more">
<button type="button" class="bordered smooth-button smooth-button-blue show-more-button">Show </button>
FarawayVision
committed
<select class="form-control opponent-costume-select"></select>
<div class="bordered opponent-details-field opponent-details-name">
<div class="opponent-details-value opponent-full-name"></div>
<div class="opponent-details-value opponent-source"></div>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-epilogues-field">
<div class="opponent-details-label left-cap">Epilogues</div>
<button type="button" class="smooth-button smooth-button-blue opponent-nav-button opponent-details-value opponent-epilogues" data-target="epilogues"></button>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-collectibles-field">
<div class="opponent-details-label left-cap">Collectibles</div>
<button type="button" class="smooth-button smooth-button-blue opponent-nav-button opponent-details-value opponent-collectibles" data-target="collectibles"></button>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-writers-field">
<div class="opponent-details-label left-cap">Writer(s)</div>
<div class="opponent-details-value opponent-writer"></div>
</div>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-artists-field">
<div class="opponent-details-label left-cap">Artist(s)</div>
<div class="opponent-details-value opponent-artist"></div>
</div>
<div class="extra-details-row opponent-options-row">
<div class="bordered left-cap opponent-details-field opponent-linecount-field">
<div class="opponent-details-label left-cap">Unique Lines</div>
<div class="opponent-details-value opponent-linecount"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-posecount-field">
<div class="opponent-details-label left-cap">Poses</div>
<div class="opponent-details-value opponent-posecount"></div>
<div class="bordered opponent-details-field extra-details-row opponent-details-description"></div>
<div class="opponent-details-view opponent-details-epilogues" hidden>
<div class="opponent-options-row">
<button type="button" class="bordered smooth-button smooth-button-red opponent-nav-button" data-target="main">Back</button>
<div class="opponent-epilogues-container"></div>
<div class="opponent-details-view opponent-details-collectibles" hidden>
<div class="opponent-options-row">
<button type="button" class="bordered smooth-button smooth-button-red opponent-nav-button" data-target="main">Back</button>
</div>
<div class="opponent-collectibles-container"></div>
<div class="opponent-select-button">
<button type="button" class="bordered smooth-button smooth-button-green select-button" disabled>Select Opponent</button>
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
</div>
</div>
</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/>
<select id="group-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, true)"></select>
<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/>
<select id="group-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, true)"></select>
<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/>
<select id="group-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, true)"></select>
<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/>
<select id="group-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, true)"></select>
<!-- Hide Button -->
<button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button group-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" 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
<!-- Gallery Screen -->
<div id="gallery-screen" class="screen-container" hidden>
<div id="collectible-gallery-screen" class="screen">
<div id="gallery-select-block">
<button class="bordered gallery-back-button gallery-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<button class="bordered gallery-switch-button gallery-select-button smooth-button smooth-button-blue" onclick="goToEpiloguesScreen()">Epilogues</button>
<select id="collectible-character-filter" class="gallery-character-filter" onchange="changeCharacterFilter(true)">
<option value="" disabled selected>Filter by Character...</option>
<option value="">(no filter)</option>
<option value="__general">The Inventory</option>
</select>
<div class="collectibles-pane bordered" id="collectibles-list-pane"></div>
<div class="collectibles-pane bordered" id="collectibles-text-pane">
<h3 class="collectible-content text-center" id="collectible-title"></h3>
<h3 class="collectible-content collectible-subtitle-container text-center"><small id="collectible-subtitle"></small></h3>
<div class="collectible-content text-center collectible-character-container">
From: <i id="collectible-character"></i>
<div class="collectible-content collectible-unlock-container">
<div class="text-center">To Unlock:</div>
<div class="text-center">
<span id="collectible-unlock"></span>
<span id="collectible-progress-text"></span>
</div>
<div class="progress" id="collectible-progress">
<div id="collectible-progress-bar" class="progress-bar smooth-button-red" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<hr/>
<div class="collectible-content collectible-text-container">
<h4 class="text-center">Description:</h4>
<div id="collectible-text"></div>
</div>
</div>
<div class="collectibles-pane bordered" id="collectibles-image-pane">
<img id="collectible-image">
</div>
</div>
<div id="epilogue-gallery-screen" class="screen" hidden>
<div id="gallery-select-block">
<button class="bordered gallery-back-button gallery-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<button class="bordered gallery-switch-button gallery-select-button smooth-button smooth-button-blue" onclick="goToCollectiblesScreen()">Collectibles</button>
<select id="epilogue-character-filter" class="gallery-character-filter" onchange="changeCharacterFilter(false)">
<option value="" disabled selected>Filter by Character...</option>
<option value="">(no filter)</option>
</select>
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
<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-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>
<label id="selected-ending-hint-container">To Unlock: <span id="selected-ending-hint"></label>
</div>
</div>
metodLD
committed
</div>
ReformCopyright
committed
<!-- Tab completion lists shared by individual and group filter modals -->
<datalist id='sourceList'></datalist>
<datalist id='tagList'></datalist>
<datalist id='creatorList'></datalist>
ReformCopyright
committed
<div id="search-modal" class="modal table-modal fade">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Search Options</h4>
</div>
<div class="modal-body">
<table style="width:100%">
<!-- Table Style -->
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Name Filter</h4></td>
<td>
<input type="text" id="search-name" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Sex Filter</h4></td>
<td>
<nav>
<ul class="pagination" id="search-gender">
<li class="active"><a href="#" data-value="1">All</a></li>
<li><a href="#" data-value="2">Male</a></li>
<li><a href="#" data-value="3">Female</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Source Filter</h4></td>
<td>
ReformCopyright
committed
<input list='sourceList' type="text" id="search-source" class='bordered wide-textbox'/>
<td style="width:25%"><h4 class="modal-title modal-left">Tag Filter</h4></td>
<td>
<input list='tagList' id="search-tag" class='bordered wide-textbox'/>