<?php 
$talk = 1;
require_once("header.php"); ?>

<div class="container content_box">
	<div class="row">

		<a href="https://www.vtc.edu.hk/ero/talk/register.html" class="desktop_only" target="_blank"><img src="<?= $banner; ?>"></a>
		<a href="https://www.vtc.edu.hk/ero/talk/register.html" class="mobile_only mobile_banner" target="_blank"><img src="<?= $mobile_banner; ?>"></a>

		<div class="resizer">
			<div class="col-sm-12">
				<br>
			
				<ul class="list-inline talk_opts">
					<li <?php if ($talk == 1) echo 'class="hover"'; ?>><a href="/ero/talk/talk1.html"><img class="first" src="/ero/talk/images/talk_opt2.png"><img class="last" src="/ero/talk/images/talk_opt2_active.png"></a></li>
					<li <?php if ($talk == 1) echo 'class="active"'; ?>><a href="/ero/talk/talk2.html"><img class="first" src="/ero/talk/images/talk_opt1.png"><img class="last" src="/ero/talk/images/talk_opt1_active.png"></a></li>
				</ul>

				<table class="weather_bar">
					<tr>
						<td class="text-center" style="position: relative; background:#<?= $box_color; ?>; width:70px; height:70px; border-radius: 50%;">
							<div style="background: #<?= $box_color2; ?>; position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1;"></div>
							<img style="height:35px;" src="/ero/talk/images/talk1_title.png">
						</td>
						<td style="background:#<?= $box_color2; ?>; color:#424243; font-size:18px; font-weight:bold; padding-left:20px; border-radius: 0px 50px 50px 0px;" class="heading">網上同步直播</td>
					</tr>
				</table>

				<!--
				<a href="https://www.youtube.com/watch?v=NNTQ0k06_1M" target="_blank"><img src="/ero/talk/images/parents_programme_website_1920x1080-01.jpg" style="width: 100%;"></a>
				-->
				
				<div class="player-container">
					<iframe src="https://www.youtube.com/embed/NNTQ0k06_1M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>

				<ul class="list-inline zoom_list">
					<li id="small"><img src="/ero/talk/images/zoom1<?= $box_img; ?>.png"></li>
					<li id="medium"><img src="/ero/talk/images/zoom2<?= $box_img; ?>.png"></li>
					<li id="large" class="active"><img src="/ero/talk/images/zoom3<?= $box_img; ?>.png"></li>
				</ul>
			</div>
		</div>

		<div class="clearfix"></div>

		<div class="resizer">
			<div class="col-md-5">
				<table style="width:100%; margin-bottom:20px; margin-top:5px;">
					<tr>
						<td class="text-center" style="position: relative; background:#<?= $box_color3; ?>; width:70px; height:70px; border-radius: 50%;">
							<div style="background: #<?= $box_color2; ?>; position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1;"></div>
							<img style="height:40px;" src="/ero/talk/images/page_icon1.png">
						</td>
						<td style="background:#<?= $box_color2; ?>; color:#424243; font-size:20px; font-weight:bold; padding-left:15px; border-radius: 0px 50px 50px 0px;"><h3 style="margin:0; font-weight:bold;"><?= $time; ?></h3></td>
					</tr>
				</table>
			</div>

			<div class="col-md-7">
				<a href="<?= $map; ?>" target="_blank">
					<table style="width:100%; margin-bottom:20px; margin-top:5px;">
						<tr>
							<td class="text-center" style="position: relative; background:#<?= $box_color; ?>; width:70px; height:70px; border-radius: 50%;">
								<div style="background: #<?= $box_color2; ?>; position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1;"></div>
								<img style="height:40px;" src="/ero/talk/images/page_icon2.png">
							</td>
							<td class="talk_address" style="padding-left:15px; background:#<?= $box_color2; ?>; color:#424243; border-radius: 0px 50px 50px 0px;">
								<h3 class="text-left" style="display:inline-block; margin:0; line-height: 25px;">
									<strong style="max-width: 80%; display: inline-block;"><?= $address; ?></strong>
									<img src="/ero/talk/images/page_icon3<?= $box_img; ?>.png" class="search" style="background: inherit;">
								</h3>
							</td>
						</tr>
					</table>
				</a>
			</div>
		</div>

		<div class="clearfix"></div>

		<div class="resizer">
			<div class="col-sm-12">
			
				<table style="width:100%; margin-bottom:40px; margin-top:30px;">
					<tr>
						<td class="text-center" style="width:70px; height:70px; vertical-align: top;"><img style="height:70px;" src="/ero/talk/images/page_tab2_blue.png"></td>
						<td class="talk_address normal">
							<div class="col-sm-12" style="padding-top:20px; padding-bottom:20px; padding-left:40px;">
								<img class="zoom mobile_only" src="/ero/talk/images/zoom<?= $box_img; ?>.png" data-toggle="collapse" data-target="#demo1">
								<p class="title">講座內容</p>
								<p class="desktop_only"><?= $desc; ?></p>
								<p class="mobile_only">
									<?= $mobile_desc_1; ?>
									<div id="demo1" class="collapse">
										<?= $mobile_desc_2; ?>
									</div>
								</p>
							</div>
						</td>
					</tr>
				</table>
			
				<table style="width:100%; margin-bottom:20px; margin-top:5px;">
					<tr>
						<td class="text-center" style="width:70px; height:70px; vertical-align: top;"><img style="height:70px;" src="/ero/talk/images/page_tab3<?= $box_img; ?>.png"></td>
						<td class="talk_address normal">
							<?= $people; ?>
						</td>
					</tr>
				</table>
	
				<!--		
				<table style="width:100%; margin-bottom:20px; margin-top:5px;">
					<tr>
						<td class="text-center" style="width:70px; height:70px; vertical-align: top;"><img style="height:70px;" src="/ero/talk/images/page_tab2<?= $box_img; ?>2.png"></td>
						<td class="talk_address normal">
							<div class="tips"></div>
							<div class="col-sm-12" style="padding-top:20px; padding-bottom:20px;">
								<img class="zoom" src="/ero/talk/images/<?= isset($_GET['ref']) ? "zoom_close" : "zoom"; ?><?= $box_img; ?>.png" data-toggle="collapse" data-target="#demo">
								<p class="title">專家教路</p>
								<p>
									<?= $content1; ?>
									<div id="demo" class="collapse <?php if (isset($_GET['ref'])) echo "in"; ?>">
										<br>
										<?= $content2; ?>
									</div>
								</p>
							</div>
						</td>
					</tr>
				</table>
				-->
				
			</div>
		</div>	

		<div class="text-center desktop_only">
			<a class="join" href="https://www.vtc.edu.hk/ero/talk/register.html" target="_blank"><img src="/ero/talk/images/join_btn.png" style="width:250px; margin-top:30px; margin-bottom:30px;" ></a>
		</div>
	
		<div class="col-sm-12 text-center">
			<a class="mobile_only" href="tel:28361888" style="margin-top:30px;"><img style="width:180px; margin-bottom:5px;" src="/ero/talk/images/footer_phone.png?v3"></a>
			
			<div class="clearfix"></div>
			
			<p class="terms">
VTC將因應情況適時更新講座/活動之形式及有關安排，參加者請留意VTC的最新通知。<br>
This website carries information of the Parents Programme 2022 which will be conducted in Cantonese. For enquiries, please reach us at 2836-1888.</p>

			<div class="clearfix"></div>
			
			<a class="mobile_only" href="http://www.vtc.edu.hk/html/tc/" target="_blank"><img style="height:50px; bottom: 12px; position: relative; display:inline-block;" src="/ero/talk/images/mobile_footer_org.png"></a>
			<a class="mobile_only" href="http://pcmc.hkfyg.org.hk/" target="_blank"><img style="height:45px; display:inline-block;" src="/ero/talk/images/mobile_footer_org_2.png"></a>
		</div>
	</div>
</div>

<?php require_once("footer.php"); ?>