config.html

 <!DOCTYPE html>

<html lang="fr">
	<head>
  <title>Simple Modify Headers</title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap.min.css"> 
	<link rel="stylesheet" type="text/css" href="config.css">
	<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 1001px)" href="config_medium_screen.css" />
	<link rel="stylesheet" media="screen and (max-width: 1000px)" href="config_small_screen.css" />
  </head>

<body>


<div class="container">

	<!-- MAIN SCREEN  --> 
	<div id="main_screen">		
		<center>

			<table class="standard_table">
				<tr>
					<td align="left" ><h2 class="title"> SIMPLE MODIFY HEADERS  </h2>  </td>
					<td align="right"> <img id="start_img" src="img/start.png" align="right" valign="top"> </img> </td>
				</tr>
			</table>
			<br/>
		
			<br/>
			<table class="standard_table">
				<tr>
					<td align="left" > <b> Url Patterns* : </b> <input id="targetPage"  class="form_control input_url" type="text" value=""> </td>
					<td align="right"> 
						<a href="#" id="export_button" class="btn btn-primary btn-sm" >
          						<span class="glyphicon glyphicon-export"></span> Export
        					</a> 
						<a href="#" id="import_button" class="btn btn-primary btn-sm" >
          						<span class="glyphicon glyphicon-import"></span> Import
        					</a>
						<a href="#" id="parameters_button" class="btn btn-primary btn-sm"> 
          						<span class="glyphicon glyphicon-cog"></span> Parameters
        					</a>  
					</td>
				</tr>
			</table>
			<br/> <br/>

  			<table id="table_config" class="table table-condensed " > 
				<thead>
					<tr id="config_table_head">
						<th> When URL contains </th>
						<th> Action </th>		
						<th> Header Field Name </th>
						<th> Header Field Value </th>
						<th> Comment </th>
						<th> Apply on </th>
						<th> Status </th>
						<th> </th>
						<th> </th>
						<th> </th>
					</tr>
				</thead>
				<tbody id="config_tab">
				</tbody>
  			</table>
			<table class="standard_table"> <tr><td align="center">
				<a href="#" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
        				<span class="glyphicon glyphicon-plus"></span> New line
        			</a> 
				<a href="#" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
          				<span class="glyphicon glyphicon-save"></span> Save
        			</a> 
			</td></tr></table>
		
		<br/>


		<table class="standard_table">
				<tr>
					<td align="left" >
						<i style="font-size:10pt"> * Informations on url pattern can be found <a href="https://developer.chrome.com/extensions/match_patterns" target="_blank"> here.</a> <br> An empty string on the field will select all urls. It's possible to select mutliple url patterns using semicolon(;) separator </i>
 					</td>
					<td align="right">
						<a href="https://github.com/didierfred/SimpleModifyHeaders/tree/v1.6.1" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
					</td>
				</tr>
		</table>

		</center>

	</div>

	<!-- PARAMETERS SCREEN -->
	<div id="parameters_screen" hidden>
		<h2 class="title"> SIMPLE MODIFY HEADERS  </h2> 
	
		<b> Parameters : </b>
		<br/>
		<br/>
		<input type="checkbox" id="debug_mode"> Debug mode </input>
		<br/>
		<input type="checkbox" id="show_comments"> Show comments </input>
		<br/>
		<input type="checkbox" id="use_url_contains"> Filter URL per rules  </input>
		<br/>
		<br/>
		<a href="#" id="exit_parameters_screen_button" class="btn btn-primary btn-sm" style="width:100px">
        		<span class="glyphicon glyphicon-step-backward"></span> Back
        	</a> 

	</div>


	<iframe id="download" width="0" height="0" frameBorder="0"> 
	</iframe>
	<br/>
	<script type="text/javascript" src="config.js"> </script>
</div>
</body>

</html>