editor.html

<div class="container">
  <div class="row">
    <div class="col-sm">

<form>
<fieldset>

<!-- Form Name -->
<legend>Map Descriptor Editor</legend>

<div class="row">
  <div class="col">
    <div class="form-label">Name</div>
    <input class="form-control" required id="name_en" type="text" placeholder="EN*">
    <input class="form-control" optional style="padding: 0px 8px" id="name_de" type="text" placeholder="DE">
    <input class="form-control" optional style="padding: 0px 8px" id="name_fr" type="text" placeholder="FR">
    <input class="form-control" optional style="padding: 0px 8px" id="name_it" type="text" placeholder="IT">
    <input class="form-control" optional style="padding: 0px 8px" id="name_es" type="text" placeholder="ES">
    <input class="form-control" optional style="padding: 0px 8px" id="name_jp" type="text" placeholder="JP">
  </div>
  <div class="col">
    <div class="form-label">Description</div>
    <input class="form-control" required id="desc_en" type="text" placeholder="EN*">
    <input class="form-control" optional style="padding: 0px 8px" id="desc_de" type="text" placeholder="DE">
    <input class="form-control" optional style="padding: 0px 8px" id="desc_fr" type="text" placeholder="FR">
    <input class="form-control" optional style="padding: 0px 8px" id="desc_it" type="text" placeholder="IT">
    <input class="form-control" optional style="padding: 0px 8px" id="desc_es" type="text" placeholder="ES">
    <input class="form-control" optional style="padding: 0px 8px" id="desc_jp" type="text" placeholder="JP">
  </div>
</div> 
<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name_en">Name</label>
  <div class="col-md-4">
    <div class="input-group">
      <span class="input-group-addon">EN</span>
      <input id="name_en" name="name_en" class="form-control" placeholder="" type="text">
    </div>
    <div class="input-group">
      <span class="input-group-addon">DE</span>
      <input id="name_de" name="name_de" class="form-control" placeholder="" type="text">
    </div>
  </div>
</div>

<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-4 control-label" for="desc_en">Description</label>
  <div class="col-md-8">
    <div class="input-group">
      <span class="input-group-addon">EN</span>
      <input id="desc_en" name="desc_en" class="form-control" placeholder="" type="text">
    </div>
    
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="ruleSet">Rules</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="ruleSet-0">
      <input type="radio" name="ruleSet" id="ruleSet-0" value="0" checked="checked">
      Standard
    </label>
	</div>
  <div class="radio">
    <label for="ruleSet-1">
      <input type="radio" name="ruleSet" id="ruleSet-1" value="1">
      Easy
    </label>
	</div>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="theme">Theme</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="theme-0">
      <input type="radio" name="theme" id="theme-0" value="0" checked="checked">
      Mario
    </label>
	</div>
  <div class="radio">
    <label for="theme-1">
      <input type="radio" name="theme" id="theme-1" value="1">
      Dragon Quest
    </label>
	</div>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="initialCash">Initial Cash</label>  
  <div class="col-md-2">
  <input id="initialCash" name="initialCash" type="text" placeholder="2500" class="form-control input-md" required="">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="targetAmount">Target Amount</label>  
  <div class="col-md-2">
  <input id="targetAmount" name="targetAmount" type="text" placeholder="25000" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="baseSalary">Base Salary</label>  
  <div class="col-md-1">
  <input id="baseSalary" name="baseSalary" type="text" placeholder="300" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="salaryIncrement">Salary Increment</label>  
  <div class="col-md-1">
  <input id="salaryIncrement" name="salaryIncrement" type="text" placeholder="200" class="form-control input-md">
    
  </div>
</div>

<!-- Multiple Radios (inline) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="maxDiceRoll">Max Dice Roll</label>
  <div class="col-md-4"> 
    <label class="radio-inline" for="maxDiceRoll-0">
      <input type="radio" name="maxDiceRoll" id="maxDiceRoll-0" value="5" checked="checked">
      5
    </label> 
    <label class="radio-inline" for="maxDiceRoll-1">
      <input type="radio" name="maxDiceRoll" id="maxDiceRoll-1" value="6">
      6
    </label> 
    <label class="radio-inline" for="maxDiceRoll-2">
      <input type="radio" name="maxDiceRoll" id="maxDiceRoll-2" value="7">
      7
    </label> 
    <label class="radio-inline" for="maxDiceRoll-3">
      <input type="radio" name="maxDiceRoll" id="maxDiceRoll-3" value="8">
      8
    </label> 
    <label class="radio-inline" for="maxDiceRoll-4">
      <input type="radio" name="maxDiceRoll" id="maxDiceRoll-4" value="9">
      9
    </label>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="background">Background</label>
  <div class="col-md-2">
    <input list="backgrounds" id="background" class="form-control">
    <datalist id="backgrounds" name="background">
      <option value="1"></option>
      <option value="2"></option>
    </datalist>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="bgmId">Background Music</label>
  <div class="col-md-2">
    <select id="bgmId" name="bgmId" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="mapIcon">MapIcon</label>
  <div class="col-md-2">
    <select id="mapIcon" name="mapIcon" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

<!-- File Button --> 
<div class="form-group">
  <label class="col-md-4 control-label" for="frbFile1">FRB Filename 1</label>
  <div class="col-md-4">
    <input id="frbFile1" name="frbFile1" class="input-file" type="file">
  </div>
</div>

<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-4 control-label" for="switchRotationOriginPoint">SwitchRotationOriginPoint</label>
  <div class="col-md-1">
    <div class="input-group">
      <span class="input-group-addon">1</span>
      <input id="switchRotationOriginPoint" name="switchRotationOriginPoint" class="form-control" placeholder="" type="text">
    </div>
    
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="loopingMode">Looping Mode</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="loopingMode-0">
      <input type="radio" name="loopingMode" id="loopingMode-0" value="" checked="checked">
      Vertical
    </label>
	</div>
  <div class="radio">
    <label for="loopingMode-1">
      <input type="radio" name="loopingMode" id="loopingMode-1" value="">
      Both
    </label>
	</div>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="loopingRadius">Radius</label>  
  <div class="col-md-1">
  <input id="loopingRadius" name="loopingRadius" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="loopingHorizontalPadding">Horizontal Padding</label>  
  <div class="col-md-1">
  <input id="loopingHorizontalPadding" name="loopingHorizontalPadding" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="verticalSquareCount">Vertical Square Count</label>  
  <div class="col-md-1">
  <input id="verticalSquareCount" name="verticalSquareCount" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="tourInitialCash">Tour Initial Cash</label>  
  <div class="col-md-2">
  <input id="tourInitialCash" name="tourInitialCash" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="tourOpponent1">Tour Opponent 1</label>
  <div class="col-md-2">
    <select id="tourOpponent1" name="tourOpponent1" class="form-control">
    </select>
  </div>
</div>

<!-- Multiple Radios (inline) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="tourClearRank">Tour Clear Rank</label>
  <div class="col-md-4"> 
    <label class="radio-inline" for="tourClearRank-0">
      <input type="radio" name="tourClearRank" id="tourClearRank-0" value="1" checked="checked">
      1
    </label> 
    <label class="radio-inline" for="tourClearRank-1">
      <input type="radio" name="tourClearRank" id="tourClearRank-1" value="2">
      2
    </label> 
    <label class="radio-inline" for="tourClearRank-2">
      <input type="radio" name="tourClearRank" id="tourClearRank-2" value="3">
      3
    </label> 
    <label class="radio-inline" for="tourClearRank-3">
      <input type="radio" name="tourClearRank" id="tourClearRank-3" value="4">
      4
    </label>
  </div>
</div>

<!-- Multiple Radios (inline) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="tourBankruptcyLimit">Tour Bankruptcy Limit</label>
  <div class="col-md-4"> 
    <label class="radio-inline" for="tourBankruptcyLimit-0">
      <input type="radio" name="tourBankruptcyLimit" id="tourBankruptcyLimit-0" value="1" checked="checked">
      1
    </label> 
    <label class="radio-inline" for="tourBankruptcyLimit-1">
      <input type="radio" name="tourBankruptcyLimit" id="tourBankruptcyLimit-1" value="2">
      2
    </label> 
    <label class="radio-inline" for="tourBankruptcyLimit-2">
      <input type="radio" name="tourBankruptcyLimit" id="tourBankruptcyLimit-2" value="3">
      3
    </label>
  </div>
</div>

<!-- Select Multiple -->
<div class="form-group">
  <label class="col-md-4 control-label" for="ventureCards">Venture Cards</label>
  <div class="col-md-6">
    <select id="ventureCards" name="ventureCards" class="form-control" multiple="multiple">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

</fieldset>
</form>

    </div>
    <div class="col-sm">
      <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">Map Descriptor</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="150"></textarea>
      </div>
    </div>
  </div>
</div>