Create attractive VASL scenarios, with loads of useful information embedded to assist with game play. https://vasl-templates.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
vasl-templates/vasl_templates/webapp/templates/index.html

257 lines
12 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> {{APP_NAME}} </title>
<link rel="shortcut icon" href="{{url_for('static', filename='images/favicon.ico')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='jquery-ui/jquery-ui.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='growl/jquery.growl.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='popmenu/jquery.popmenu.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/main.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/sortable.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/tabs-scenario.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/tabs-ob.css')}}" />
</head>
<body>
<!-- ----------------------------------------------------------------- -->
<div id="menu" style="display:none;">
<input type="button" value="actions">
<input id="load-scenario" type="file" accept=".json" style="display:none;">
<input id="load-template-pack" type="file" accept=".zip,.j2" style="display:none;">
</div>
<textarea id="_template_pack_persistence_" style="display:none;"></textarea>
<!-- ----------------------------------------------------------------- -->
<div id="tabs">
<ul>
<li> <a href="#tabs-scenario">Scenario</a>
<li> <a href="#tabs-ob1">Player 1 OB</a>
<li> <a href="#tabs-ob2">Player 2 OB</a>
<li> <a href="#tabs-other">Other</a>
</ul>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-scenario">
<fieldset class="tl"> <legend>S<u>c</u>enario</legend>
<div id="panel-scenario">
<div class="label" data-labelfor="SCENARIO_NAME">Name:</div> <input name="SCENARIO_NAME" type="text" class="param">
<div class="label" data-labelfor="SCENARIO_LOCATION">Location:</div> <input name="SCENARIO_LOCATION" type="text" class="param">
<div class="label" data-labelfor="SCENARIO_DATE">Date:</div>
<div class="last_row">
<input name="SCENARIO_DATE" type="text" size="10" class="param">
<div class="r">
<label for="SCENARIO_WIDTH">Width:</label>
<input type="text" class="param" name="SCENARIO_WIDTH" size="5">
<button class="generate" data-id="scenario">Snippet</button>
</div>
</div>
</div>
<div id="panel-players">
<div></div> <div></div> <div class="label" data-labelfor="ELR">ELR</div> <div class="label" data-labelfor="SAN">SAN</div>
<div class="label" data-labelfor="PLAYER_1"><u>P</u>layer 1:</div> <select name="PLAYER_1" class="param"></select>
<select name="PLAYER_1_ELR" class="param"></select>
<select name="PLAYER_1_SAN" class="param"></select>
<div class="label" data-labelfor="PLAYER_2">Player 2:</div> <select name="PLAYER_2" class="param"></select>
<select name="PLAYER_2_ELR" class="param"></select>
<select name="PLAYER_2_SAN" class="param"></select>
<div class="footer"> <button class="generate" data-id="players">Snippet</button> </div>
</div>
</fieldset>
<fieldset class="tr"> <legend>Victor<u>y</u> Conditions</legend>
<div id="panel-vc">
<textarea name="VICTORY_CONDITIONS" type="text" class="param"></textarea>
<div class="footer">
<label for="VICTORY_CONDITIONS_WIDTH">Width:</label>
<input type="text" class="param" name="VICTORY_CONDITIONS_WIDTH" size="5">
<button class="generate" data-id="victory_conditions">Snippet</button>
</div>
</div>
</fieldset>
<fieldset class="bl"> <legend>Notes</legend>
<div id="panel-scenario_notes">
<div class="content">
<div id="scenario_notes-hint" class="sortable-hint"> <p>Click on the "+" below to add a new scenario note. <p>To re-order the scenario notes, use the mouse to drag them around. <p>Ctrl-click on a scenario note to delete it, or drag it into the trashcan below. </div>
<ul id="scenario_notes-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="scenario_notes-add" class="sortable-add"></button>
<img id="scenario_notes-trash" class="sortable-trash">
</div>
<button class="edit-template" data-id="scenario_note"></button>
</div>
</div>
</fieldset>
<fieldset class="br"> <legend>SSR's</legend>
<div id="panel-ssr">
<div class="content">
<div id="ssr-hint" class="sortable-hint"> <p>Click on the "+" below to add a new SSR, double-click on an SSR to edit it. <p>To re-order the SSR's, use the mouse to drag them around. <p>Ctrl-click on an SSR to delete it, or drag it into the trashcan below. </div>
<ul id="ssr-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ssr-add" class="sortable-add"></button>
<img id="ssr-trash" class="sortable-trash">
</div>
<label for="SSR_WIDTH">Width:</label>
<input type="text" class="param" name="SSR_WIDTH" size="5">
<button class="generate" data-id="ssr">Snippet</button>
</div>
</div>
</fieldset>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-ob1">
<fieldset class="tl"> <legend>OB setup</legend>
<div id="panel-ob_setups1" class="panel-ob_setups">
<div class="content">
<div id="ob_setups-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new setup note. <p>To re-order the setup notes, use the mouse to drag them around. <p>Ctrl-click on a setup note to delete it, or drag it into the trashcan below. </div>
<ul id="ob_setups-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ob_setups-add_1" class="sortable-add"></button>
<img id="ob_setups-trash_1" class="sortable-trash">
</div>
<button class="edit-template" data-id="ob_setup"></button>
</div>
</div>
</fieldset>
<fieldset class="bl"> <legend>Notes</legend>
<div id="panel-ob_notes1" class="panel-ob_notes">
<div class="content">
<div id="ob_notes-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new setup note. <p>To re-order the setup notes, use the mouse to drag them around. <p>Ctrl-click on a setup note to delete it, or drag it into the trashcan below. </div>
<ul id="ob_notes-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ob_notes-add_1" class="sortable-add"></button>
<img id="ob_notes-trash_1" class="sortable-trash">
</div>
<button class="edit-template" data-id="ob_note"></button>
<button class="generate" data-id="mol">MOL</button>
<button class="generate" data-id="mol-p">MOL-P</button>
<button class="generate" data-id="pf">PF</button>
<button class="generate" data-id="psk">PSK</button>
<button class="generate" data-id="atmm">ATMM</button>
<button class="generate" data-id="baz">BAZ</button>
<button class="generate" data-id="piat">PIAT</button>
</div>
</div>
</fieldset>
<fieldset class="tr"> <legend>Vehicles</legend>
<div id="panel-vehicles_1" class="panel-vehicles">
<div class="content">
<div id="vehicles-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new Vehicle. <p>To re-order the Vehicles, use the mouse to drag them around. <p>Ctrl-click on an Vehicle to delete it, or drag it into the trashcan below. </div>
<ul id="vehicles-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="vehicles-add_1" class="sortable-add"></button>
<img id="vehicles-trash_1" class="sortable-trash">
</div>
<label for="VEHICLES_WIDTH_1">Width:</label>
<input type="text" class="param" name="VEHICLES_WIDTH_1" size="5">
<button class="generate" data-id="vehicles_1">Snippet</button>
</div>
</div>
</fieldset>
<fieldset class="br"> <legend>Ordnance</legend>
<div id="panel-ordnance_1" class="panel-ordnance">
<div class="content">
<div id="ordnance-hint_1" class="sortable-hint"> <p>Click on the "+" below to add a new Gun. <p>To re-order the Gun's, use the mouse to drag them around. <p>Ctrl-click on an Gun to delete it, or drag it into the trashcan below. </div>
<ul id="ordnance-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ordnance-add_1" class="sortable-add"></button>
<img id="ordnance-trash_1" class="sortable-trash">
</div>
<label for="ORDNANCE_WIDTH_1">Width:</label>
<input type="text" class="param" name="ORDNANCE_WIDTH_1" size="5">
<button class="generate" data-id="ordnance_1">Snippet</button>
</div>
</div>
</fieldset>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-ob2"> <!-- nb: this will be created dynamically from the OB1 tab -->
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-other">
<div id="panel-other">
<fieldset>
</fieldset>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------- -->
<div id="edit-template" style="display:none;">
<textarea></textarea>
</div>
<div id="edit-simple_note" style="display:none;">
<textarea></textarea>
</div>
<div id="select-vo" style="display:none;">
<div class="header"> <b>Filter by:</b> <input type="text" size="20"> </div>
<select size=2></select> </div>
</div>
<div id="ask" style="display:none;"></div>
<!-- ----------------------------------------------------------------- -->
</body>
<script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script>
<script src="{{url_for('static',filename='jquery-ui/jquery-ui.min.js')}}"></script>
<script src="{{url_for('static',filename='jinja/jinja.js')}}"></script>
<script src="{{url_for('static',filename='growl/jquery.growl.js')}}"></script>
<script src="{{url_for('static',filename='popmenu/jquery.popmenu-1.0.0.min.js')}}"></script>
<script src="{{url_for('static',filename='hotkey/jquery.hotkey.js')}}"></script>
<script src="{{url_for('static',filename='download/download.min.js')}}"></script>
<script src="{{url_for('static',filename='jszip/jszip.min.js')}}"></script>
<script>
gImagesBaseUrl = "{{url_for('static',filename='images')}}" ;
gGetTemplatePackUrl = "{{url_for('get_template_pack')}}" ;
gGetDefaultScenarioUrl = "{{url_for('get_default_scenario')}}" ;
gVehicleListingsUrl = "{{url_for('get_vehicle_listings')}}" ;
gOrdnanceListingsUrl = "{{url_for('get_ordnance_listings')}}" ;
</script>
<script src="{{url_for('static',filename='main.js')}}"></script>
<script src="{{url_for('static',filename='snippets.js')}}"></script>
<script src="{{url_for('static',filename='simple_notes.js')}}"></script>
<script src="{{url_for('static',filename='vo.js')}}"></script>
<script src="{{url_for('static',filename='sortable.js')}}"></script>
<script src="{{url_for('static',filename='utils.js')}}"></script>
</html>