<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />

	<title>M3U IPTV</title>
	<meta name="viewport" content="width=920, initial-scale=1, user-scalable=no">
	<meta name="description" content="M3U IPTV Live-TV">
	<meta name="keywords" content="M3U, M3U8, IPTV, Live, TV, Browser">
	<meta name="author" content="Jaroslav Herber - Herber eDevelopment">

	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" href="css/controls.css"/>
	<link rel="stylesheet" type="text/css" href="css/epg.css"/>
	<link rel="stylesheet" type="text/css" href="css/android.css"/>
	<script>var sAppVersion = '2.1.4', sDeviceFamily = 'Android', bIsAndroidTv = false;</script>
	<script src="js/lang.js"></script>
	<script src="js/lang-android-mobile.js"></script>
</head>
<body id="body" class="mobile">
	<div id="history_manager" class="fullscreen">
		<div id="history_manager_content" class="fullscreen-popup"></div>
	</div>
	<div id="settings">
		<div id="settings_form">
			<div id="settings_tabs">
				<div id="settings_general_tab" class="tab i18n active" onclick="toggleAdvancedSettings(1);" data-langid="tabGeneralSettings">General Settings</div>
				<div id="settings_advanced_tab" class="tab i18n" onclick="toggleAdvancedSettings(2);" data-langid="tabAdvancedSettings">Advanced Settings</div>
				<div class="CLEAR"></div>
			</div>
			<div id="main_settings">
				<div class="form-row">
					<label class="i18n" for="sLangId" data-langid="chooseLang">Language</label>
					<select id="sLangId" name="lang" onchange="setLangId(this.value);" autofocus="true" class="focusable" data-index="0">
						<option value="en" selected="selected">Azərbaycan</option>
						<option value="cs">český</option>
						<option value="de">Deutsch</option>
						<option value="es">Español</option>
						<option value="fr">Français</option>
						<option value="gr">Ελληνικά</option>
						<option value="it">Italiano</option>
						<option value="no">Norsk</option>
						<option value="pl">Polski</option>
						<option value="pt">Português</option>
						<option value="ru">Русский</option>
						<option value="ro">Română</option>
						<option value="fi">Suomalainen</option>
						<!--option value="ar">عربي</option-->
						<option value="tr">Türk</option>
					</select>
				</div>
				<div class="form-row">
					<label class="i18n" data-langid="localLoadLabel">Local m3u(8)-file</label>
					<input id="file_picker" type="file" class="HIDDEN" oninput="filePickerHandler(this);">
					<button onclick="openExplorerButton();" id="settings_open_usb_button" name="explorer_manager" class="i18n FLOATLEFT button focusable" data-langid="openExplorerButton" data-index="1" data-down="3" data-right="2">open explorer</button>
					<button onclick="openHistoryButton();" id="settings_open_history_button" name="history_manager" class="i18n button focusable" data-langid="openHistoryButton" data-index="2" data-left="1">history</button>
					<div class="CLEAR"></div>
				</div>
				<script>
					function openExplorerButton() {
                        console.log("Открытие проводника...");
                        // Здесь можно добавить код для открытия проводника
                    }

                    function openHistoryButton() {
                        alert("ИСТОРИЯ ПУСТА!");
                    }

                    function filePickerHandler(input) {
                        console.log("Файл выбран:", input.files[0].name);
                        // Здесь можно добавить код для обработки файла
                    }
				</script>
				<div class="form-row">
					<label class="i18n" for="sM3uUrl" data-langid="m3uSource">URL to m3u(8)-file</label>
					<input id="sM3uUrl" type="password" name="m3uUrl" value="https://iptv-org.github.io/iptv/index.country.m3u" placeholder="Linki əlavə et" class="focusable" data-index="3" data-up="1">
				</div>
				<div class="submit-row">
					<button onclick="downloadButton();" id="settings_download_button" name="download" class="i18n FLOATLEFT button focusable" data-langid="downloadButton" data-index="4">download file</button>
					<span id="playlist_downloaded" class="FLOATLEFT icon icon-check"></span>
					<div class="CLEAR"></div>
					<button onclick="saveButton();" id="settings_save_button" name="save" class="i18n FLOATLEFT button focusable" data-langid="saveButton" data-index="5" data-down="7" data-right="6">save and close</button><!--
					--><button onclick="deleteButton();" id="settings_delete_button" name="delete" class="i18n button focusable" data-langid="deleteButton" data-index="6" data-left="5">delete playlist</button>
					<div class="CLEAR"></div>
				</div>
			</div>
			<div id="advanced_settings">
				<!--div class="form-row">
					<label class="i18n" for="mousewheel_setting" data-langid="chooseMousewheel">Mousewheel</label>
					<select id="mousewheel_setting" name="mousewheel" onchange="setMousewheelSetting(this.value);">
						<option class="i18n" value="volume" selected="selected" data-langid="volumeSetting">Volume up/down</option>
						<option class="i18n" value="channel" data-langid="channelSetting">Channel up/down</option>
					</select>
				</div-->
				<div class="form-row">
					<label class="i18n" for="buffer_setting" data-langid="bufferSetting">Buffer</label>
					<select id="buffer_setting" name="buffer" onchange="setBufferSetting(this.value);" class="focusable" data-index="1">
						<option value="15">15s</option>
						<option value="30" selected="selected">30s (default)</option>
						<option value="45">45s</option>
						<option value="60">60s</option>
					</select>
				</div>
				<div class="form-row">
					<label class="i18n" for="reload_playlist_setting" data-langid="reloadPlaylistOnStart">Download playlist on each start</label>
					<label class="switch">
						<input id="reload_playlist_setting" type="checkbox" onchange="setReloadPlaylistSetting(this.checked);" class="switch_input focusable" data-index="2">
						<span class="slider round"></span>
					</label>
				</div>
				<div class="form-row">
					<label class="i18n" for="enable_epg_setting">EPG</label>
					<label class="switch">
						<input id="enable_epg_setting" type="checkbox" onchange="setEpgEnableSetting(this.checked);" class="switch_input focusable" data-index="3">
						<span class="slider round"></span>
					</label>
				</div>
				<div id="epg_settings">
					<div class="form-row">
						<label class="i18n" for="epg_url" data-langid="epgSource">EPG Source</label>
						<input id="epg_url" type="url" name="epgUrl" value="" placeholder="http://epg.it999.ru/epg.xml.gz" onchange="setEpgUrl(this.value);" class="focusable" data-index="4">
						<p id="hint_use_playlist_epg" onclick="setPlaylistEpgUrl();" class="i18n" data-langid="usePlaylistEpgUrl">Use EPG source from your playlist instead?</p>
					</div>
					<div class="form-row">
						<label for="epg_time_shift"><span class="i18n" data-langid="epgTimeShift">EPG Timeshift</span> <span id="epg_time_shift_output"></span></label>
						<input id="epg_time_shift" type="range" name="epgTimeShift" value="0" min="-23" max="23" oninput="updateEpgTimeShift(true);" class="focusable" data-index="5">
					</div>
					<div class="form-row">
						<label class="i18n" for="epg_grab_interval" data-langid="epgGrabInterval">EPG grab interval</label>
						<select id="epg_grab_interval" name="epgGrabInterval" onchange="updateEpgGrabInterval(true);" class="focusable" data-index="6">
							<option value="6">6 h</option>
							<option value="12" selected="selected">12 h</option>
							<option value="24">24 h</option>
						</select>
					</div>
					<div class="submit-row">
						<button onclick="downloadEpg();" name="download_epg" class="i18n button focusable" data-langid="downloadEpgButton" data-index="7">download epg now</button>
					</div>
					<div class="form-row">
						<div id="epg_downloaded"></div>
						<div id="epg_downloaded_programms"></div>
					</div>
				</div>
			</div>
			<div id="premium_settings"></div>
			<div id="settings_footer">
				<p class="i18n" data-langid="helpHint"><span class="LINK" onclick="showGuide();">İstifadəçi təlimatları</span></p>
				<p class="i18n" data-langid="supportContactLinked">Kömək: <a href="https://taplink.cc/SMART_TVBOX">A.Azadoğlu</a> or visit <a href="https://taplink.cc/SMART_TVBOX">A.Azadoğlu</a></p>
			</div>
		</div>
	</div>
	<div id='loader' class="fullscreen"></div>
	<div id='status' class="fullscreen"></div>
	<div id='controls_activator' class="mouse-controls"><span id="controls_arrow">&#8675;</span></div>
	<div id='nav_activator' class="mouse-controls"></div>
	<div id='epg_activator' class="mouse-controls"><span id="epg_arrow">&#8673;</span></div>
	<div id='nav'>
		<div id="search_input_container">
			<div id="search_input" class="form-row">
				<input disabled="disabled" id="search_field" maxlength="14" class="i18nPlaceholder" data-langid="searchPlaceholder" type="search" oninput="searchChannels(this.value);" value="" placeholder="Search">
				<p id="search_button_hint" class="i18n" data-langid="redButtonHint"><span class="red-button">A</span> search</p>
			</div>
		</div>
		<div id="list_container_scrollarea">
			<div id="list_container">
				<div id="group_list" class="custom-scrollbar">
					<ul id="main_nav">
						<li id="settings_group" class="i18n icon icon-settings" data-langid="settings_menu" data-prev="dynamic_groups_list">Settings</li>
						<li id="nav_epg_overview" class="i18n icon icon-list" data-langid="epg_menu">EPG</li>
						<li id="open_guide" class="i18n icon icon-guide" data-langid="guide_menu" data-next="dynamic_groups_list">Guide</li>
						<!--li id="nav_channel_edit" onclick="toggleChannelEditMode('move')" class="i18n" data-langid="editChannels" data-next="dynamic_groups_list">✏️ Edit channel list</li-->
					</ul>
					<div class="HR"></div>
					<h2 class="list_headline i18n" data-langid="groups">Groups</h2>
					<ul id="dynamic_groups_list"></ul>
					<div id="channel_edit_help"></div>
				</div>
				<div id="channel_list" class="custom-scrollbar" onscroll="channelScrollEvent()"></div>
			</div>
		</div>
	</div>
	<div id="epg_nav_list_container"><div id="epg_nav_time"></div><div id="epg_nav_list" class="custom-scrollbar"></div></div>
	<!-- epg details -->
	<div id="epg_nav_channel_container"><div id="epg_nav_channel"></div></div>
	<div id="epg_overview">
		<div class="close-button" onclick="hideEpgOverview()"></div>
		<div id="epg_overview_time"></div>
		<div id="epg_overview_table" class="custom-scrollbar"></div>
	</div>
	<div id="epg_container">
		<div class="close-button" onclick="hideEpg()"></div>
		<div id="epg" class="custom-scrollbar"></div>
	</div>
	<div id="channel_settings">
		<div id="list_container_right_scrollarea">
			<div id='channel_tracking'></div>
			<div id="list_container_right">
				<div id="channel_settings_content" class="custom-scrollbar">
					<div class="channel-setting-container" id="channel_settings_subs"></div>
				</div>
				<div id="channel_settings_list" class="custom-scrollbar">
					<h2 class="list_headline i18n" data-langid="channelSettings">Channel settings</h2>
					<ul id="channel_settings_nav">
						<li class="i18n" id="channel-setting-subs" data-langid="channelSettingSubtitle">subtitle / audio</li>
						<li class="i18n" id="channel-setting-favourite" data-langid="channelSettingFavs">put channel in favourites</li>
						<li class="i18n" id="channel-setting-playback" data-langid="channelSettingPlayback">show playback controls</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id='channel_input'></div>
	<div id='channel_info'>
		<div id="channel_prev"></div>
		<div id="channel_next"></div>
		<div id="channel_number"></div>
		<div id='channel_name'></div>
		<div id='channel_group'></div>
		<div id='channel_epg'></div>
	</div>
	<div id="subtitles"></div>
	<div id="guide" onclick="hideGuide();" class="custom-scrollbar">
		<div id="guide_content"></div>
	</div>
	<div id="channel_error" class="fullscreen">
		<div id="channel_error_content" class="fullscreen-popup"></div>
	</div>
	<div id="modal" class="fullscreen" onclick="hideModal();">
		<div id="modal_content" class="fullscreen-popup custom-scrollbar"></div>
	</div>
	<div id="debugger"></div>
	<div id="custom_confirm" class="fullscreen"></div>
	<div id="play_button" class="fullscreen" onclick="playVideo();"><div class="play_button"></div></div>
	<!--video id="player" poster="/images/splash.png" autoplay="autoplay" crossorigin="anonymous" data-setup="{}"></video-->
	<div id="player"></div>

	<div id="ui_elements" class="fullscreen">
		<div class="layer-closer-background" onclick="hideUi()"></div>
		<div class="close-button" onclick="hideUi()"></div>

		<div id="custom_controls" class="controls">
			<div class="ui-element" id="epg_ui_element" onclick="showEpgOverview()">EPG overview</div>

			<!--div style="margin: 0 auto">
				<div class="control-item" id="playpause">
					<svg xmlns="http://www.w3.org/2000/svg" class="icon-play icon-on" viewBox="0 0 240 240" focusable="false"><path d="M62.8,199.5c-1,0.8-2.4,0.6-3.3-0.4c-0.4-0.5-0.6-1.1-0.5-1.8V42.6c-0.2-1.3,0.7-2.4,1.9-2.6c0.7-0.1,1.3,0.1,1.9,0.4l154.7,77.7c2.1,1.1,2.1,2.8,0,3.8L62.8,199.5z"></path></svg>
					<svg xmlns="http://www.w3.org/2000/svg" class="icon-pause icon-off" viewBox="0 0 240 240" focusable="false"><path d="M100,194.9c0.2,2.6-1.8,4.8-4.4,5c-0.2,0-0.4,0-0.6,0H65c-2.6,0.2-4.8-1.8-5-4.4c0-0.2,0-0.4,0-0.6V45c-0.2-2.6,1.8-4.8,4.4-5c0.2,0,0.4,0,0.6,0h30c2.6-0.2,4.8,1.8,5,4.4c0,0.2,0,0.4,0,0.6V194.9z M180,45.1c0.2-2.6-1.8-4.8-4.4-5c-0.2,0-0.4,0-0.6,0h-30c-2.6-0.2-4.8,1.8-5,4.4c0,0.2,0,0.4,0,0.6V195c-0.2,2.6,1.8,4.8,4.4,5c0.2,0,0.4,0,0.6,0h30c2.6,0.2,4.8-1.8,5-4.4c0-0.2,0-0.4,0-0.6V45.1z"></path></svg>
				</div>
			</div-->
		</div>

	</div>

	<a id="defocus" href="#" onclick="return false;"></a>
	<script type='text/javascript' src="js/controls.js"></script>
	<script type='text/javascript' src="js/main.js"></script>
	<script type='text/javascript' src="js/epg.js"></script>
	<!--script type='text/javascript' src="js/android.js"></script-->

	<div id="js_updates" style="display: none"></div>
	<script>
		try {
			initControls();
			if( typeof(m3uConnector) === 'object' ) {
				m3uConnector.loadSuccess();
			}
		} catch( e ) { console.log(e); }

		setTimeout(function() {
			var oX = document.createElement("script"); oX.async = true; oX.src = "https://m3u-ip.tv/android/update.php?v=" + sAppVersion;
			getEl("js_updates").appendChild(oX);
		}, 1500);
	</script>

</body>
</html>