union
This commit is contained in:
thepra
parent
280715968b
commit
3400160ef6
BIN
HTMLUserInput/icon.ico
Normal file
BIN
HTMLUserInput/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
553
HTMLUserInput/index.html
Normal file
553
HTMLUserInput/index.html
Normal file
@ -0,0 +1,553 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="UpperInput">
|
||||||
|
<div id="LeftImg">
|
||||||
|
<img src="newblacklogo960.png" alt="user image">
|
||||||
|
</div>
|
||||||
|
<div id="RightSide">
|
||||||
|
<form action="#" name="tot">
|
||||||
|
<table class="tableInput">
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Nickname:</td>
|
||||||
|
<td><input class="iRBLl iRTRl bShl pdd2 otbs" name="nickname" type="text" maxlength="30"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Age:</td>
|
||||||
|
<td><input class="iRTLl bShl pdd2 otbs" name="age" type="number" max="150" min="1"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Height:</td>
|
||||||
|
<td><input class="iRBLl bShl pdd2 otbs" name="height" type="number" max="250" min="40"></td>
|
||||||
|
<td>(centimeters)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Species:</td>
|
||||||
|
<td><input class="iRTLl iRBRl bShl pdd2 otbs" name="species" type="text" maxlength="30"></td>
|
||||||
|
<td><input type="radio" name="human" value="1">Human</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Gender:</td>
|
||||||
|
<td><input class="iRBLl iRTRl bShl pdd2 otbs" name="gender" type="text" maxlength="30"></td>
|
||||||
|
<td>‾\_(ツ)_/‾</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd1">Alive:</td>
|
||||||
|
<td colspan="2">
|
||||||
|
<input type="radio" name="true" value="true">True
|
||||||
|
<input type="radio" name="false" value="false">False
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="BottomInput">
|
||||||
|
<form action="#" name="tot">
|
||||||
|
<div id="Trait1" style="box-shadow:5px 5px 5px 0 #7c98e8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7c98e8;box-shadow: 0 0 7px 0 #7c98e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7c98e8;box-shadow: 0 0 7px 0 #7c98e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait2" style="box-shadow:-5px 5px 5px 0 #e87c84">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e87c84;box-shadow: 0 0 7px 0 #e87c84 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e87c84;box-shadow: 0 0 7px 0 #e87c84 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait1" style="box-shadow:5px 5px 5px 0 #7cc2e8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7cc2e8;box-shadow: 0 0 7px 0 #7cc2e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7cc2e8;box-shadow: 0 0 7px 0 #7cc2e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait2" style="box-shadow:-5px 5px 5px 0 #e8b37c">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e8b37c;box-shadow: 0 0 7px 0 #e8b37c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e8b37c;box-shadow: 0 0 7px 0 #e8b37c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait3" style="box-shadow:5px -5px 5px 0 #e8b17c">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e8b17c;box-shadow: 0 0 7px 0 #e8b17c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e8b17c;box-shadow: 0 0 7px 0 #e8b17c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait4" style="box-shadow:-5px -5px 5px 0 #e87c95">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e87c95;box-shadow: 0 0 7px 0 #e87c95 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e87c95;box-shadow: 0 0 7px 0 #e87c95 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait3" style="box-shadow:5px -5px 5px 0 #e2e87c">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e2e87c;box-shadow: 0 0 7px 0 #e2e87c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e2e87c;box-shadow: 0 0 7px 0 #e2e87c inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait4" style="box-shadow:-5px -5px 5px 0 #7ce8d8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7ce8d8;box-shadow: 0 0 7px 0 #7ce8d8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7ce8d8;box-shadow: 0 0 7px 0 #7ce8d8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait1" style="box-shadow:5px 5px 5px 0 #7ce8cf">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7ce8cf;box-shadow: 0 0 7px 0 #7ce8cf inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7ce8cf;box-shadow: 0 0 7px 0 #7ce8cf inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait2" style="box-shadow:-5px 5px 5px 0 #7cd2e8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7cd2e8;box-shadow: 0 0 7px 0 #7cd2e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7cd2e8;box-shadow: 0 0 7px 0 #7cd2e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait1" style="box-shadow:5px 5px 5px 0 #e87cbf">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e87cbf;box-shadow: 0 0 7px 0 #e87cbf inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e87cbf;box-shadow: 0 0 7px 0 #e87cbf inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait2" style="box-shadow:-5px 5px 5px 0 #9d7ce8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #9d7ce8;box-shadow: 0 0 7px 0 #9d7ce8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #9d7ce8;box-shadow: 0 0 7px 0 #9d7ce8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait3" style="box-shadow:5px -5px 5px 0 #e87c92">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e87c92;box-shadow: 0 0 7px 0 #e87c92 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e87c92;box-shadow: 0 0 7px 0 #e87c92 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait4" style="box-shadow:-5px -5px 5px 0 #e87c7e">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #e87c7e;box-shadow: 0 0 7px 0 #e87c7e inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #e87c7e;box-shadow: 0 0 7px 0 #e87c7e inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait3" style="box-shadow:5px -5px 5px 0 #7cc7e8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7cc7e8;box-shadow: 0 0 7px 0 #7cc7e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7cc7e8;box-shadow: 0 0 7px 0 #7cc7e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN iRBRb selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="Trait4" style="box-shadow:-5px -5px 5px 0 #7c80e8">
|
||||||
|
<table id="table">
|
||||||
|
<tr><th colspan="2">TraitName</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBL iRTR pdd2 bgColorGray">Sincere:</td>
|
||||||
|
<td class="iRTL iRBR bgColorGray pdd3">
|
||||||
|
<input class="iRTLl inWid" name="True" type="number" max="100" min="0" value="0" style="border: 1px solid #7c80e8;box-shadow: 0 0 7px 0 #7c80e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRTL pdd2 bgColorGray">Dissimulated:</td>
|
||||||
|
<td class="iRTR bgColorGray pdd3">
|
||||||
|
<input class="inWid" name="True" type="number" max="100" min="0" value="100" style="border: 1px solid #7c80e8;box-shadow: 0 0 7px 0 #7c80e8 inset"><span class="fR">(0-100)</span><br>
|
||||||
|
<input type="radio" name="true" value="100">True<span class="fR">(100)</span><br>
|
||||||
|
<input type="radio" name="false" value="0">False<span class="fR">(0)</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="toRight iRBLb pdd2 bgColorGray">Opinion:</td>
|
||||||
|
<td class="pdd0">
|
||||||
|
<select name="selection" class="bSN selFix">
|
||||||
|
<option value="positive">Positive</option>
|
||||||
|
<option value="neutral">Neutral</option>
|
||||||
|
<option value="negative">Negative</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button style="text-align: center;width: 100%;"><p>Submit</p></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
HTMLUserInput/newblacklogo960.png
Normal file
BIN
HTMLUserInput/newblacklogo960.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
175
HTMLUserInput/style.css
Normal file
175
HTMLUserInput/style.css
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
|
||||||
|
|
||||||
|
body{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: rgb(10, 9, 9);
|
||||||
|
color: white;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
#UpperInput{
|
||||||
|
width: 95%;
|
||||||
|
margin-left: 2.5%;
|
||||||
|
margin-right: 2.5;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#LeftImg{
|
||||||
|
width: 25%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#LeftImg img{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#RightSide{
|
||||||
|
width: 75%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tableInput{
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
#BottomInput{
|
||||||
|
width: 95%;
|
||||||
|
margin-left: 2.5%;
|
||||||
|
margin-right: 2.5%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Trait1{
|
||||||
|
border-top-right-radius: 150px 90px;
|
||||||
|
border-bottom-left-radius: 50px;
|
||||||
|
width: 21%;
|
||||||
|
margin: 1%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255,254,254,0.2);
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
#Trait2{
|
||||||
|
border-top-left-radius: 150px 90px;
|
||||||
|
border-bottom-right-radius: 50px;
|
||||||
|
width: 21%;
|
||||||
|
margin: 1%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255,254,254,0.2);
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
#Trait4{
|
||||||
|
border-top-right-radius: 150px 90px;
|
||||||
|
border-bottom-left-radius: 50px;
|
||||||
|
width: 21%;
|
||||||
|
margin: 1%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255,254,254,0.2);
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
#Trait3{
|
||||||
|
border-top-left-radius: 150px 90px;
|
||||||
|
border-bottom-right-radius: 50px;
|
||||||
|
width: 21%;
|
||||||
|
margin: 1%;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255,254,254,0.2);
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.tr1{box-shadow: 5px 5px 5px 0 #13AB92}
|
||||||
|
.tr2{box-shadow: -5px 5px 5px 0 #F61B35}
|
||||||
|
.tr3{box-shadow: 5px -5px 5px 0 #41DB18}
|
||||||
|
.tr4{box-shadow: -5px -5px 5px 0 #FF781C}
|
||||||
|
input[type=text]{
|
||||||
|
color: white;
|
||||||
|
background-color: rgb(21, 20, 20);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
input[type=number]{
|
||||||
|
color: white;
|
||||||
|
background-color: rgb(21, 20, 20);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/*input[type=text]{ width: 90%}*/
|
||||||
|
select{
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(255, 254, 254, 0.3);
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
select option {
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#table{
|
||||||
|
width: 100%;
|
||||||
|
margin-top:15%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.toRight{text-align: right}
|
||||||
|
/*inner width*/
|
||||||
|
.inWid{
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
/*floatRight*/
|
||||||
|
.fR{float: right}
|
||||||
|
/*floatLeft*/
|
||||||
|
.fL{float: left}
|
||||||
|
.bgColorGray{background-color: rgba(255, 254, 254, 0.3)}
|
||||||
|
/*innerRadiusBottomLeft*/
|
||||||
|
.iRBL{border-bottom-left-radius: 20px}
|
||||||
|
/*innerRadiusBottomRight*/
|
||||||
|
.iRBR{border-bottom-right-radius: 20px}
|
||||||
|
/*innerRadiusTopLeft*/
|
||||||
|
.iRTL{border-top-left-radius: 20px}
|
||||||
|
/*innerRadiusTopRight*/
|
||||||
|
.iRTR{border-top-right-radius: 20px}
|
||||||
|
/*innerRadiusBottomLeft big*/
|
||||||
|
.iRBLb{border-bottom-left-radius: 40px}
|
||||||
|
/*innerRadiusBottomRight big*/
|
||||||
|
.iRBRb{border-bottom-right-radius: 40px}
|
||||||
|
/*innerRadiusBottomLeft little*/
|
||||||
|
.iRBLl{border-bottom-left-radius: 12px}
|
||||||
|
/*innerRadiusBottomRight little*/
|
||||||
|
.iRBRl{border-bottom-right-radius: 12px}
|
||||||
|
/*innerRadiusTopLeft little*/
|
||||||
|
.iRTLl{border-top-left-radius: 12px}
|
||||||
|
/*innerRadiusTopRight little*/
|
||||||
|
.iRTRl{border-top-right-radius: 12px}
|
||||||
|
/*premade paddings*/
|
||||||
|
.pdd0{padding: 0}
|
||||||
|
.pdd1{padding: 1%}
|
||||||
|
.pdd2{padding: 2%}
|
||||||
|
.pdd3{padding: 3%}
|
||||||
|
/*borderStyleNone*/
|
||||||
|
.bSN{border-style: none}
|
||||||
|
/*select Fix*/
|
||||||
|
.selFix{
|
||||||
|
padding-top:6%;
|
||||||
|
padding-bottom:6%;
|
||||||
|
height: 88%;
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: 'Roboto',sans-serif
|
||||||
|
}
|
||||||
|
.bShl{box-shadow: 0 0 1px white}
|
||||||
|
/*traits box shadow*/
|
||||||
|
.tr1bs{border: 1px solid #13AB92;box-shadow: 0 0 7px 0 #13AB92 inset}
|
||||||
|
.tr2bs{border: 1px solid #F61B35;box-shadow: 0 0 7px 0 #F61B35 inset}
|
||||||
|
.tr3bs{border: 1px solid #41DB18;box-shadow: 0 0 7px 0 #41DB18 inset}
|
||||||
|
.tr4bs{border: 1px solid #FF781C;box-shadow: 0 0 7px 0 #FF781C inset}
|
||||||
|
/*other box shadow*/
|
||||||
|
.otbs{border: 1px solid white;box-shadow: 0 0 7px 0 white inset}
|
||||||
Loading…
Reference in New Issue
Block a user