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

	<title>M3U IPTV</title>
	<meta name="viewport" content="width=1920, 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/tv.css"/>
	<link rel="stylesheet" type="text/css" href="css/android-tv.css"/>

	<script>var sAppVersion = '2.1.4', sDeviceFamily = 'Android', bIsAndroidTv = true;</script>
	<script src="js/lang.js"></script>
	<script src="js/lang-android-tv.js"></script>
</head>
<body id="body" class="tv-device">
	<div id="history_manager" class="fullscreen">
		<div id="history_manager_content" class="fullscreen-popup"></div>
	</div>
	<div id="settings" class="fullscreen"><div class="fullscreen-multi-column">
		<div id="settings_form" class="fullscreen-popup">
			<div id="version">v2.1.4</div>
			<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);" class="focusable" data-index="0">
						<option value="en" selected="selected">English</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>
					<div class="input">
						<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>
				</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://smarttvbox.usite.pro/kaztv.m3u" placeholder="Linki əlavə edin" 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 class="HR"></div>
				<div class="submit-row">
					<button onclick="toggleAdvancedSettings(2);" id="settings_advanced_button" name="advanced_settings" class="i18n button button-next focusable" data-langid="advancedSettingsButton" data-index="7" data-up="5">advanced settings</button>
				</div>
			</div>
			<div id="advanced_settings">
				<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 HIDDEN" 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" style="margin-bottom: 0;" data-langid="downloadEpgButton" data-index="7">download epg now</button>
					</div>
					<div class="submit-row">
						<div id="epg_downloaded"></div>
						<div id="epg_downloaded_programms"></div>
					</div>
				</div>
				<div class="HR"></div>
				<div class="submit-row">
					<button onclick="toggleAdvancedSettings(1);" id="settings_general_button" name="general_settings" class="i18n button button-back focusable" data-langid="generalSettingsButton" data-index="7" data-right="8">General settings</button><!--
					--><!--button onclick="toggleAdvancedSettings(3);" id="settings_general_button" name="general_settings" class="i18n button button-next focusable" data-langid="premiumSettingsButton" data-index="8" data-left="7">Premium Access</button-->
				</div>
			</div>
			<div id="premium_settings">
				<p>The M3U IPTV <b>Premium Access</b> allows you to access optional features like:</p>
				<ul>
					<li>manage all playlist-URLs and settings in web-page for all your devices</li>
					<li>unlimited playlist URLs</li>
					<li>customize logo and design</li>
					<li>early access to latest version, features and many more</li>
				</ul>
				<div class="FLOATLEFT" style="width: 360px; padding: 16px 20px 0 0;">
					<p>Register your premium access here:<br>
					Update.technology</p>
					<div style="display: inline-block; background: #fff; padding: 20px; margin-bottom: 24px">
						<img style="display: block;" src="images/PP-donate.png" width="128" height="128" alt="Premium access">
					</div>
				</div>
				<div class="FLOATLEFT" style="width: 800px;">
					<div class="form-row">
						<label class="switch">
							<input id="enable_sync_setting" type="checkbox" onchange="setPremiumSyncSetting(this.checked);" class="switch_input focusable" data-index="0">
							<span class="slider round"></span>
						</label>
						<span class="switch-label">Autosync on each start</span>
					</div>
					<div class="form-row">
						<input id="premium_username" type="mail" name="m3uUrl" value="" placeholder="Username / Mail" class="focusable" data-index="1">
					</div>
					<div class="form-row">
						<input id="premium_password" type="password" name="m3uUrl" value="" placeholder="Password" class="focusable" data-index="2">
					</div>
					<div class="submit-row" style="padding-left: 0;">
						<button onclick="premiumLogin();" name="premium_login" class="i18n button focusable" data-langid="premiumLoginButton" data-index="3">VIP Login</button>
						<div class="premium-buttons" style="padding-left: 0;">
							<button onclick="premiumSync();" name="premium_sync" class="i18n button focusable" data-langid="premiumSyncButton" data-index="4" data-down="6" data-right="5">Sync settings</button><!--
							--><button onclick="loadLatestVersion();" name="latest_version" class="i18n button focusable" data-langid="latestVersionButton" data-index="5" data-left="4">Try latest version</button>
						</div>
					</div>
					<div class="submit-row" style="padding-left: 0;">
						<button onclick="toggleAdvancedSettings(2);" name="advanced_settings" class="i18n button button-back focusable" data-langid="advancedSettingsButton" data-index="6" data-up="4">advanced settings</button>
					</div>
				</div>
				<div class="CLEAR"></div>
			</div>
			<div id="settings_footer">
				<p class="i18n" data-langid="supportContact">For more information, visit update.technology</p>
			</div>
		</div>
		<div id="donation_box" class="fullscreen-popup">
			<p class="i18n" data-langid="donate">Proqram qısa müddətli pulsuzdur<br>&raquo; <b>https://taplink.cc/SMART_TVBOX</b> &laquo; əlaqə üçün QR-kod və whatsapp.</p>
			<p class="i18n" data-langid="Oxut"> </p>
			<div style="display: inline-block; background: #fff; padding: 20px; margin-bottom: 24px">
				<img style="display: block;" src="images/PP-donate.png" width="128" height="128" alt="PayPal donation">
			</div>
			<p class="i18n" data-langid="donateKK">With Stripe (credit card)</p>
			<div style="display: inline-block; background: #fff; padding: 20px;">
				<img style="display: block;" src="images/donate.png" width="128" height="128" alt="creditcard donation">
			</div>
		</div>
		<div class="CLEAR"></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 id="search_field" maxlength="14" class="i18nPlaceholder" data-langid="searchPlaceholder" name="search" type="search" oninput="searchChannels(this.value);" value="" placeholder="Search" autofocus="false">
				<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="nav_search" class="i18n icon icon-search" data-langid="searchPlaceholder">Search</li>
						<li id="nav_debug" class="i18n icon icon-list">Debug window</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 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="fullscreen 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>

	<a id="play_button" href="#" class="fullscreen" onclick="playVideo(); return false;"><div class="play_button"></div></a>
	<!--video id="player" autoplay="autoplay" poster="/images/splash.png" crossorigin="anonymous" width="1920" height="1080" data-setup="{}"></video-->
	<div id="player"></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 = "http://m3u-ip.tv/android/update.php?v=" + sAppVersion;
			getEl("js_updates").appendChild(oX);
		}, 1500);
	</script>

</body>
</html>