<header><a href="https://codepen.io/road-to-100k/full/GRpvMzb" target="_blank">Try out the new Visual Theme Maker by Clicking Me!</a></header>



<form oninput="finalCode.value = JSON.stringify({
  name: themeName.value,
  author: authorName.value,
  content: {
    teal: teal.value,
    lgreen: lgreen.value,
    orange: orange.value,
    yellow: yellow.value,
    lavender: lavender.value,
    pink: pink.value,
    vlgrey: vlgrey.value,
    lgrey: lgrey.value,
    guiwhite: guiWhite.value,
    black: black.value,
    blue: blue.value,
    green: green.value,
    red: red.value,
    gold: gold.value,
    purple: purple.value,
    magenta: magenta.value,
    grey: grey.value,
    dgrey: dgrey.value,
    white: white.value,
    guiblack: guiBlackDropdown.value,
    paletteSize: 10,
    border: borderSize.value,
  }
})">
  
  

<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div> 
</div>  
  
<form>

 <!-- Future Default Values Changer


 <select style= "border:3px solid #3d6a7b;
  border-radius: 8px 8px 8px 8px;
  padding: 2px 6px 2px 6px;
  background-color: #43a4c8;
  color: #ffffff;float: left;" id="changeTheme">
   
  <option value="" hidden selected>Change Default Theme (not finished yet)</option>
  <option value="lightColors">Light Colors</option>
  <option value="darkColors">Dark Colors</option>
  <option value="natural">Natural</option>
  <option value="classic">Classic</option>
  <option value="pumpkinSkeleton">Pumpkin Skeleton</option>
  <option value="forest">Forest</option>
  <option value="midnight">Midnight</option>
  <option value="snow">Snow</option>
  <option value="coralReef">Coral Reef</option>
  <option value="badlands">Badlands</option>
  <option value="bleach">Bleach</option>
</select>  
-->  

 

  
  
<input style= "border:3px solid #3d6a7b;
  border-radius: 8px 8px 8px 8px;
  padding: 2px 6px 2px 6px;
  background-color: #43a4c8;
  color: #ffffff;float: right;"

type="button" name="importCode" id="importCode" value="Import Theme (Only works in Visual Theme Maker)" 
       onclick="window.location.href='https://codepen.io/road-to-100k/full/GRpvMzb', '_blank' " 

style="float: right" target="_blank"
}       
/> 

<br><br>  
  
  
  
  
<div class="boxGreen">  
  <h2> Road's Arras.io Theme Maker (v2.0) </h2>
</div>  
<br>
  
  

  
  
<img src="https://res.cloudinary.com/road6943/image/upload/v1539508344/Arras/Supported-Browsers.png" id="supportedThemes" name="supportedThemes"/>  
  
  <img src="https://res.cloudinary.com/road6943/image/upload/v1539508635/Arras/Unsupported-Browsers.png" id="unsupportedThemes"/>
  
<div class="boxGrey">   
   <h6> <a href="https://docs.google.com/spreadsheets/d/1Aw93tmKPomncLDERNs7UsF4SqD9EJ0yzHh5BN2EzJUM/edit?usp=sharing" target="_blank" >(ps: If this theme maker doesn't play well with your computer, then you can still try out my old theme maker!)</a>
</h6>  
</div>
  
  
  
<div class="boxBlue1">  
  <h1>Please enter the name of your theme:
  <br>  
     <input type="text" name="themeName" placeholder="Enter Theme Name Here" style="text-align:center" value="Enter Theme Name Here"/> 
    
    
    <h1>Please enter your name:
  <br>  
     <input type="text" name="authorName" placeholder="Enter Author Name Here" style="text-align:center" value="Enter Author Name Here"/>
</div>
  <br><br>
  
    <!-- Do NOT Remove the value="Enter Theme Name Here" part or else you'll screw up the Theme Code Importer -->

  
  
<div class="boxBlue2">  
  <div class="custom-select" >
   <h1> What type of theme are you making? </h1> <!-- Road - I used 1 unicode space characters before and after the theme names to create some space http://www.fileformat.info/info/unicode/char/00a0/browsertest.htm -->  
    <select id="guiBlackDropdown">
     <option name="guiBlack" id="lightTheme" value="#000000">⠀Light Theme⠀⚪</option>
     <option name="guiBlack" id="darkTheme" value="#ffffff">⠀Dark Theme⠀⚫</option>
   </select>
  </div>
</div>
  <br><br> 

    
  

<div class="boxBlue2">  
  <!-- Road - I used 2 unicode space characters after longest text to create some space http://www.fileformat.info/info/unicode/char/00a0/browsertest.htm-->
  <h1> What color should the map background and room boundaries be? </h1>
    <p>
     <img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/Map%20Background%252FRoom%20Boundaries.png?raw=true"/>
   </p>
 
 <table style="width:auto" cellpadding="10">
    <tr>
      <td>Map Background:</td>
      <td><input type="color" name="white" value="#DBDBDB" /></td> 
    </tr>
    <tr>
      <td>Room Boundaries:</td>
      <td><input type="color" name="dgrey" value="#726F6F"/></td>
    </tr>
  </table>
</div>
  <br><br>
 
  

<div class="boxBlue2">    
  <h1> What colors should the 4 Teams be? </h1>
    <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/Teams3.png?raw=true"/></p>
    <table style="width:auto" cellpadding="10">
    <tr>
      <td>Blue Team (Top Left/Left):</td>
      <td><input type="color" name="blue" value="#3CA4CB"/></td> 
    </tr>
    <tr>
      <td>Green Team (Top Right/Right):</td>
      <td><input type="color" name="green" value="#8ABC3F"/></td>
    </tr>
    <tr>
      <td>Red Team (Bottom Left):</td>
      <td><input type="color" name="red" value="#E03E41"/></td>
    </tr>
    <tr>
      <td>Magenta Team (Bottom Right):</td>
      <td><input type="color" name="magenta" value="#CC669C"></td>
    </tr>
  </table>
</div>
  <br><br>

  
  
<div class="boxBlue2">    
  <!-- Road - I used 2 unicode space characters after longest text to create some space http://www.fileformat.info/info/unicode/char/00a0/browsertest.htm-->
  <h1> What colors do you want the shapes to be? </h1>
  <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/Shapes.png?raw=true"/></p>	
   <table style="width:auto" cellpadding="10">
   <tr>
     <td>Eggs:</td>
     <td><input type="color" name="vlgrey" value="#E8EBF7"/></td>
   </tr>
   <tr>
     <td>Squares:</td>
     <td><input type="color" name="gold" value="#EFC74B"/></td>
   </tr>
   <tr>
     <td>Triangles:</td>
     <td><input type="color" name="orange" value="#E7896D"/></td>
   </tr>
   <tr>
     <td>Pentagons:</td>
     <td><input type="color" name="purple" value="#8D6ADF"></td>
   </tr>
   <tr>
     <td>Crashers:</td>
     <td><input type="color" name="pink" value="#EF99C3"></td>
   </tr>
  </table>
</div>
  <br><br>
  
  
  
<div class="boxBlue2">    
  <!-- Road - I used 2 unicode space characters after longest text to create some space http://www.fileformat.info/info/unicode/char/00a0/browsertest.htm -->
  <h1> What colors do you want the bars to be? </h1>
   <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/bars.png?raw=true"/></p>	
   <table style="width:auto" cellpadding="10">
   <tr>
     <td>Main Health Bar:</td>
     <td><input type="color" name="lgreen" value="#B9E87E"  /></td>
   </tr>
   <tr>
     <td>Shield Bar:</td>
     <td><input type="color" name="teal" value="#7ADBBC" /></td>
   </tr>
   <tr>
     <td>EXP Bar:</td>
     <td><input type="color" name="yellow" value="#FDF380"  /></td>
   </tr>
  </table>
</div>
  <br><br>

  
 
<div class="boxBlue2">    
  <h1> What color do you want barrels, rocks, and the bar backgrounds to be? </h1>
   <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/Barrels%252FRocks.png?raw=true"/></p>	
   Barrels/Rocks/Bar Backgrounds:  <input type="color" name="grey" value="#A7A7AF"/> 
</div>
  <br><br>

 
<div class="boxBlue2">    
  <h1> What color should the in-game text be? </h1> 
   <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/inGameText.png?raw=true"/></p>	
   Text Color:  <input type="color" name="guiWhite" value="#ffffff"  />
</div>
  <br><br>  
  
  
  
  
<div class="boxBlue2">    
  <h1> What color do you want dark borders, text outlines, and health bar backgrounds to be? </h1>
    <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/DarkBorders%252FTextOutlines%252FHealthBarBackground.png?raw=true"/></p>	
    Dark Borders/Text Outlines/Health Bar Backgrounds:  <input type="color" name="black" value="#484848"/>
</div>
  <br><br>


<div class="boxBlue2">  
  <h1> Please enter 2 colors that control the background of the pentagon nest: </h1>  
   <h5> Color 4 blends with the pentagon color and gives the bg color when there is a pentagon nest. </h5>
   <h5> Color 7 blends with the map background color and sometimes gives the color of the middle when there is no pentagon nest. It's basically unused unless purposely enabled in a private server. </h5>	
    <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/Color4%252FColor7.png?raw=true"/></p>	

  <table style="width:auto" cellpadding="10">
    <tr>
      <td>Color 4:</td>
      <td><input type="color" name="lavender" value="#B58EFD"  /></td> 
    </tr>
    <tr>
      <td>Color 7:</td>
      <td><input type="color" name="lgrey" value="#AA9F9E"  /></td>
    </tr>
  </table>
</div>
  <br><br>
  
  
<div class="boxBlue2">  
  <h1> Please enter a border size: </h1>  
   <h5> If you don't know what border size to pick, use 0.5 </h5>
   <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/BorderSize.png?raw=true"/></p>	
   Border Size:  <input type="number" name="borderSize" value="0.5" step="0.1" style="text-align:left"/><p> 
</div>
  <br><br>

  
  
<div class="boxGreen">  
  <h1>Final Code: 
   <br><br>
    <textarea rows='5' cols='80' name="finalCode" id='finalCode' ></textarea>
<br>

<input type="button" id="copyCode" value="⠀Copy Code⠀" onclick="copy_to_clipboard('finalCode');">

<script>
function copy_to_clipboard(id)
{
    document.getElementById('finalCode').select();
    document.execCommand('copy');
    alert("The code has been copied to your clipboard. Please follow the instrcutions below in order to use it in Arras");
}
</script>

  
    
<!-- Don't delete the line under this one! Its not blank, it has a unicode space character! -->
 
<input value='⠀Download Code⠀' type='button' id="downloadCode"
onclick='doDL(document.getElementById("finalCode").value)' />

<script type='text/javascript'>
function doDL(s){
    function dataUrl(data) {return "data:x-application/text," + escape(data);}
    window.open(dataUrl(s));
}
</script>
<!-- Don't delete the line under this one! Its not blank, it has a unicode space character-->  
 
<input type="reset" value="⠀Reset Inputs⠀" id="resetInputs">    
                    
</div>
  
<br><br>  


  
  

<div class="boxBlue2">  
  <h1> How to use your theme in Arras.io: </h1>  
   <p><img src="https://github.com/Road6943/ArrasThemeMaker/blob/master/HowToUseTheme.png?raw=true" id='how2use' name='how2use'/></p>	
 
</div> <br><br>
  
  
    <div class="boxGreen" onclick="window.open('https://codepen.io/road-to-100k/full/OJVaypw', '_blank')">
    <h3><u>Can't Think of a theme? Try Out the Random Theme Generator by clicking here!</u></h3>
  </div>  
  

<div class="boxGrey">   
   <h6> <a>(Special Thanks to CX for (once again) making my code beautiful and readable)</a>
</h6>  
</div>
  
  
<br>