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" style="text-align:center">		
			<table class="standard_table">
				<tr>
					<td style="text-align:left"><h2 class="title"> SIMPLE MODIFY HEADERS  </h2>  </td>
					<td style="text-align:right"> <img id="start_img" src="img/start.png" alt="start/stop" style="float:right;vertical-align:top"> </img> </td>
				</tr>
			</table>
			<br/>
		
			<br/>
			<table class="standard_table">
				<tr>
					<td style="text-align:left" > <strong> Url Patterns* : </strong> <input id="targetPage"  class="form_control input_url" type="text" value=""> </td>
					<td style="text-align:right"> 
						<button type="button" id="export_button" class="btn btn-primary btn-sm">
          						<span class="glyphicon glyphicon-export"></span> Export
						</button>
						<button type="button" id="import_button" class="btn btn-primary btn-sm">
          						<span class="glyphicon glyphicon-import"></span> Import
						</button>
						<button type="button" id="parameters_button" class="btn btn-primary btn-sm">
          						<span class="glyphicon glyphicon-cog"></span> Parameters
						</button>
					</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 style="text-align:center">
				<button type="button" id="add_button" class="btn btn-primary btn-sm" style="width:100px">
        				<span class="glyphicon glyphicon-plus"></span> New line
				</button>
				<button type="button" id="save_button" class="btn btn-primary btn-sm" style="width:100px">
          				<span class="glyphicon glyphicon-save"></span> Save
				</button>
			</td></tr></table>
		
		<br/>


		<table class="standard_table">
				<tr>
					<td style="text-align:left" >
						<em style="font-size:10pt"> * Information on URL patterns 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 multiple URL patterns using semicolon (;) separator </em>
 					</td>
					<td style="text-align:right">
						<a href="https://github.com/didierfred/SimpleModifyHeaders/tree/v1.7.0" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span> About </a>
					</td>
				</tr>
		</table>

	</div>

	<!-- PARAMETERS SCREEN -->
	<div id="parameters_screen" hidden>
		<h2 class="title"> SIMPLE MODIFY HEADERS  </h2> 
	
		<strong> Parameters : </strong>
		<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" title="hidden_download_frame" width="0" height="0" style="border:none;"> 
	</iframe>
	<br/>
	<script type="text/javascript" src="config.js"> </script>
</div>
</body>

</html>