@extends('frontend.master')
@section('content')
	<style>
		#min-height{
			background: transparent;
		}	
		body{
			background-repeat: no-repeat;
			background-position: top;
		}
		.current-server-custom{
			width: 50%;
			float: left;
		}
		.current-server-custom .current-server-left-custom img,
		.current-server-custom .current-server-right-custom img{
		    width: 50px;
		    border: 1px solid #fff;
		    border-radius: 50%;
		}
		.current-server-custom-left .current-server-left-custom {
		    width: 60%;
		    float: left;
		    text-align: right;
		}
		.current-server-custom-left .current-server-right-custom {
		    width: 40%;
		    float: left;
		}
		.current-server-custom-right .current-server-left-custom {
		    width: 40%;
		    float: left;
		}
		.current-server-custom-right .current-server-right-custom {
		    width: 60%;
		    float: left;
		    text-align: left;
		}
		.start-button{
			margin: 0 0 60px 0;
		}
	</style>
	<div class="ajax_waiting"></div>
	<div class="container d-none" id="min-height-1">
		<div class="row home">
			<div class="col-12">
				<div class="row introduce">
					<div class="col-12 col-lg-6 description text-center">
						<h1 class="title">Check internet speed test with MySpeed</h1>
						<div class="title-content">
							{{ __('messages.Just_click') }}  <span class="go">"{{ __('messages.go') }}"</span> {{ __('messages.button_and_check_speed_of_your_internet_in_few_seconds') }}.
						</div>
						<div class="start-button clearfix">
							<div class="engine-wrapper">
							  <div id="engine"></div>
							</div>
							<a role="button" tabindex="3" class="go-test-speed">
							  <span class="start-ring"></span>
							  <span class="start-background"></span>
							  <span class="start-border"></span>
							  <span class="start-text">GO</span>
							</a>
						</div>
						<div class="current-server-custom current-server-custom-left clearfix">
							<div class="current-server-left-custom">
								<div class="network-user" id="network-user"></div>
								<div class="ip-user" id="ip-user"></div>
							</div>
							<div class="current-server-right-custom">
								<img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_home_profile.svg') }}" class="ic_home_profile" alt="ic_home_profile">
								
							</div>
						</div>
						<div class="current-server-custom current-server-custom-right clearfix" data-toggle="modal" data-target="#modalChangeServer">
							<div class="current-server-left-custom">
								<img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_home_server.svg') }}" class="ic_home_server" alt="ic_home_server">
							</div>
							<div class="current-server-right-custom">
								<div class="name"><span class='inner_name'></span>&nbsp;</div>
								<div class="city"><a href="javascript:void(0)" data-toggle="modal" data-target="#modalChangeServer">Change Server</a></div>
							</div>
						</div>
						<div class="clearfix"></div>
						
						<div class="clearfix" style="margin-top: 30px;">
							<div class="float-left social-network" data-toggle="modal" data-target="#socialModal" title="{{ __('messages.share') }}">
								<button class="btn-customize">	
									<i class="fas fa-share-alt" ></i> {{ __('messages.share') }}
								</button>
							</div>
							<div class="float-right setting_and_result_box">
								<a href="/result">
									<button class="btn-customize  mr-2">	
										<i class="far fa-check-circle"></i>
										{{ __('messages.Result') }}
									</button>
								</a>
								<button class="btn-customize  btn-setting" data-toggle="modal" data-target="#exampleModalCenter">
									<i class="fas fa-cog"></i>
									{{ __('messages.Settings') }}
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="waiting col-4 offset-4 d-none">
				<img class="lazy w-100" src="/" data-src="{{ asset('frontend/images/loading-combo.gif') }}" alt="loading combo">
			</div>
			<div class="col-12 text-center ping-upload-download clearfix d-none ">
				<div class="row">
					<div class="col-lg-8 offset-lg-2 text-center clock_mobile">
						<div class='clock_container d-none'>
							<div class='clock_image'>	
								@include('frontend.layouts.home-clock-svg')
							</div>
							<div class='clock_spin_circle'>
								<img class="lazy" width='100%' src="/" data-src='/frontend/images/kim2.png' alt="kim"/>
							</div>
						</div>
						<div class="again-gauge d-none">
							<div class="start-button clearfix">
								<div class="engine-wrapper">
								<div id="engine"></div>
								</div>
								<a role="button" tabindex="3" class="go-test-speed">
									<span class="start-ring"></span>
									<span class="start-background"></span>
									<span class="start-border"></span>
									<span class="start-text">GO</span>
								</a>
							</div>
							<div class="current-server clearfix" data-toggle="modal" data-target="#modalChangeServer">
						<!-- 		<div class="current-server-left">
									<img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_global.svg') }}" class="ic_global" alt="ic_global">
								</div>
								<div class="current-server-right">
									<div class="name"><span class='inner_name'></span>&nbsp;</div>
									<div class="city"></div>
								</div> -->
							</div>	
						</div>
						<div id="result" class="d-none">0</div>
						<div class="realtime unit-gauge d-none"></div>
						<div class="running-server d-none">
							<div class="current-server clearfix">
					<!-- 			<div class="current-server-left">
									<img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_global.svg') }}" class="ic_global" alt="ic_global">
								</div>
								<div class="current-server-right">
									<div class="name"><span class='inner_name'></span></div>
									<div class="city"></div>
								</div> -->
							</div>	
						</div>
					</div>
					<div class="col-4 d-none d-lg-block">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_ping.svg') }}" alt="ic_ping"> <span>{{ __('messages.Ping') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Delays_in_transfer') }}</div>
							<span class="number ping">&nbsp;</span>
							<span class="unit-ms">ms</span>
						</div>
					</div>
					<div class="col-4 d-none d-lg-block">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_download.svg') }}" alt="ic_download"> <span>{{ __('messages.Download') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Speed_of_download') }}</div>
							<span class="number download">&nbsp;</span>
							<span class="unit-gauge"></span>
						</div>
					</div>
					<div class="col-4 d-none d-lg-block">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_upload.svg') }}" alt="ic_upload"> <span>{{ __('messages.Upload') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Speed_of_upload') }}</div>
							<span class="number upload">&nbsp;</span>
							<span class="unit-gauge"></span>
						</div>
					</div>
					<div class='d-lg-none container_upload_download item'>
						<div class='row'>
							<div class='col-4'>
								<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_ping.svg') }}" alt="ic_ping"> <span>{{ __('messages.Ping') }}</span></h3>
							</div>
							<div class='col-4'>
								<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_download.svg') }}" alt="ic_download"> <span>{{ __('messages.Download') }}</span></h3>
							</div>
							<div class='col-4'>
								<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_upload.svg') }}" alt="ic_upload"> <span>{{ __('messages.Upload') }}</span></h3>
							</div>
						</div>
						<div class='row'>
							<div class='col-4'>
								<div class="txt-speed">{{ __('messages.Delays_in_transfer') }}</div>
							</div>
							<div class='col-4'>
								<div class="txt-speed">{{ __('messages.Speed_of_download') }}</div>
							</div>
							<div class='col-4'>
								<div class="txt-speed">{{ __('messages.Speed_of_upload') }}</div>
							</div>
						</div>
						<div class='row'>
							<div class='col-4'>
								<span class="number ping">&nbsp;</span>
								<span class="unit-ms">ms</span>
							</div>
							<div class='col-4'>
								<span class="number download">&nbsp;</span>
								<span class="unit-gauge"></span>
							</div>
							<div class='col-4'>
								<span class="number upload">&nbsp;</span>
								<span class="unit-gauge"></span>
							</div>
						</div>
					</div>
					
					<div class='clearfix'></div>
					<div class='col-12'>
						<div class="host_tested_box">
							{{ __('messages.lastest_result_test_with') }}: <span class='host_tested_name'></span>
						</div>
					</div>
					<div class="col-lg-6 col-sm-12">
						<div class="float-left social-network" data-toggle="modal" data-target="#socialModal" title="{{ __('messages.share') }}">
							<!-- <span class="float-left text-share">{{ __('messages.share') }} </span>
							<a><i class="fas fa-share-alt" ></i></a> -->
							<a class="btn btn-customize"><i class="fas fa-share-alt" ></i> {{ __('messages.share') }} </a>
						</div>
					</div>
					<div class="col-lg-6 col-sm-12">
						<div class="setting_and_result_box">
							<a href="/result">
								<button class="btn-customize  mr-2">
									<i class="far fa-check-circle"></i>
									{{ __('messages.Result') }}
								</button>
							</a>
							<button class="btn-customize" data-toggle="modal" data-target="#exampleModalCenter">
								<i class="fas fa-cog"></i>
								{{ __('messages.Settings') }}
							</button>
						</div>
					</div>
				</div>
			</div>
			@include('frontend.layouts.home-share')
			@include('frontend.layouts.home-setting')
			@include('frontend.layouts.home-change-server')
			<div class="col-12 developers color-text-while pt-lg-5">
				<div class="row">
	                <div class="col-12 text-center pt-4">
						<h2 class="col-12 text-center pt-4">What makes MySpeed an ideal speed test tool?</h2>
						<p><span class="dong-ngang"></span></p>
						<div class="text-center">MYSPEED’S KEY FEATURES</div>
					</div>
	                <div class="col-lg-4 text-center mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_convenience.svg" alt="ic_convenience" style="width:70px;height:70px">
	                    <div style="height:20px"></div>
	                    <h3>100% Free</h3>
	                   <p class="make-color">Run internet speed test free on both Mobile and Desktop.</p>
	                </div>
	                <div class="col-lg-4 text-center  mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_availability.svg" alt="ic_availability"  style="width:70px;height:70px">
	                    <div style="height:20px"></div>
	                    <h3>No installation</h3>
	                   <p class="make-color">Testing your internet speed without an application download.</p>
	                </div>
	                <div class="col-lg-4 text-center mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_ specification.svg" alt="ic_specification"  width="88px" height="70px">
	                    <div style="height:20px"></div>
	                    <h3>Specification</h3>
	                   <p class="make-color">Measuring internet connection performance metrics like ping, download speed, and upload speed.</p>
	                </div>
	                <div class="col-lg-4 text-center mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_measurement.svg" alt="ic_measurement"  style="width:70px;height:70px">
	                    <div style="height:20px"></div>
	                    <h3>Superfast</h3>
	                   <p class="make-color">Perform the test and get results within a few seconds.</p>
	                </div>
	                <div class="col-lg-4 text-center mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_language.svg" alt="ic_language"  style="width:70px;height:70px">
	                    <div style="height:20px"></div>
	                    <h3>Multiple language</h3>
	                   <p class="make-color">Using MySpeed in the language that you prefer.</p>
	                </div>
	                <div class="col-lg-4 text-center mt-5">
	                    <img class="lazy" src="/" data-src="{{ url ('/') }}/frontend/images/ic_visualization.svg" alt="ic_visualization"  width="87px" height="70px">
	                    <div style="height:20px"></div>
	                    <h3>Availability</h3>
	                   <p class="make-color">Checking internet connection speed anytime, anywhere with any devices connected to the internet.</p>
	                </div>
					
				</div>
			</div>
			<div class="col-12 color-text-while">
				<div class="row">
	                <div class="col-12 text-center pt-4">
						<h2 class="col-12 text-center pt-4">MySpeed - check speed of internet connection</h2>
						<p><span class="dong-ngang"></span></p>
					</div>
					<div class="col-12 offset-lg-1 col-lg-10">
						<p class="text-center"><i>Good internet speed test. why not use it?</i></p>
						MySpeed offers a quick internet speed test that allows you to check speed of the internet anytime, anywhere. Every day, millions of people all over the world use the test at any time they have trouble with bandwidth performance.<br>
						With just one click and wait for some seconds, you will get results of upload speed, download speed, and ping speed. From that, a whole picture of your network connection will be presented clearly.<br>
						In addition, MySpeed provides users some useful information, effective ways to improve the connection performance as well as some tricks to solve internet problems in its blogs.
					</div>
				</div>
			</div>
			<div class="col-12 box-news color-text-while">
				<div class="row">
	                <div class="col-12 text-center pt-4">
						<h2 class="col-12 text-center pt-4">MySpeed News</h2>
						<p><span class="dong-ngang"></span></p>
					</div>
					@foreach ($news as $value)
						<div class="col-12 col-lg-4 my-3">
							<a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" >
								<img class="lazy" src="/" data-src="{{ asset('filemanager/data-images/' . $value->image) }}" alt="{{ $value->title }}" class="text-center img-thumbnail">
							</a>
							<div class="cat-title my-3">
								<a href="{{ route('client.show-cat-article', ['slug' => $value->cat_slug, 'id' => $value->cat_id ]) }}" title="{{ $value->cat_title }}" >
									{{ $value->cat_title }}
								</a>
							</div>
							<h3>
								<a href="{{ route('client.show-article', ['slug' => $value->slug, 'id' => $value->id ]) }}" title="{{ $value->title }}" >
									{{ $value->title }}
								</a>
							</h3>
						</div>
					@endforeach
					<div class="col-12 text-center">
						<a class="btn-customize" href="https://gospeedcheck.com/cat-article/blog-13">See more</a>
					</div>
				</div>
			</div>
			@if (count($tags) > 0)
				<div class="col-12 box-tags pt-4">
					Tags
					@foreach ($tags as $value)
						<a href="{{ route('client.show-tag-article', ['slug' => $value->slug]) }}" rel="tag">• {{$value->name}}</a>
					@endforeach
				</div>
			@endif
		</div>
	</div>
	<script>
		var clock_default_color = '#313c5e';
		var clock_selected_color = '#00e1ff';
		var clock_rect_div_arrs = [];		
		var current_server_selected = false;
		
		var setting_obj = {
			'unit-time-layout': '12h',
			'unit-date-layout': 'mm/dd/yyyy',
			'unit-distance-layout': 'kilometers',
			'unit-speed-layout': 'Mbps',
			'unit-server-layout': 0,
		};
		var list_server =