thepra/HTMLgenerator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

union

Browse Source
This commit is contained in:
thepra
2017-08-24 20:23:46 +02:00
parent 280715968b
commit 3400160ef6
4 changed files with 728 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
HTMLUserInput/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 KiB

553
HTMLUserInput/index.html Normal file
View 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>&#x203E\_(ツ)_/&#x203E</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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

175
HTMLUserInput/style.css Normal file
View 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}