templates/mobile_list.html

<html>
<head>
	<title>Nearby Pokémon</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/mobile.min.css').lstrip('/') }}" type="text/css" />
	<!-- Custom CSS code-->
		{% if show.custom_css %}
	<link rel="stylesheet" type="text/css" href="static/css/custom.css">
		{% endif %}
</head>
<body class="mobilePage">
	<h1>Nearby Pokémon</h1>

	<ol>
{% for pokemon in pokemon_list[:20] %}
{% set img = 'icons/' ~ pokemon.id ~ '.png' -%}
		<li style="list-style-type: none; background-image: url('{{ url_for('static', filename=img).lstrip('/') }}');"
				href='https://maps.google.com/?q={{pokemon.latitude}},{{pokemon.longitude}}&amp;ll={{pokemon.latitude}},{{pokemon.longitude}}'>
				<p>
						<span class="name">{{pokemon.name}}</span><span class="dir"> - {{pokemon.distance}}m ({{pokemon.card_dir}})</span>
						<br>
						<span class="remain" disappear="{{pokemon.disappear_sec}}">{{pokemon.time_to_disappear}}</span>
				</p>
		</li>
{% endfor %}
	</ol>

	<div id="nav">
		<button>Refresh</button>
		<div>
			<label><input type="checkbox" id="use-loc">Use device location</label>
		</div>
	</div>

	<!-- Load JS libs before custom scripts. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>var pageLoaded = new Date().getTime();</script>
    <!-- Load custom JS before mobile.js so it can change Store defaults. -->
      {% if show.custom_js %}
    <script src="{{ url_for('static', filename='dist/js/custom.min.js').lstrip('/') }}"></script>
      {% endif %}
	<script src="{{ url_for('static', filename='dist/js/mobile.min.js').lstrip('/') }}"></script>
</body>
</html>