<!-- <button class="btn btn-primary" onclick="scrollToContent()">Scroll Down</button>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet" />
<!-- bootstrap css
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/c681f845d0.js" crossorigin="anonymous"></script>
<!-- custom css -->
<!-- <link rel="stylesheet" href="css/locomotive-scroll.css" /> -->
<link rel="stylesheet" href="https://whpk.org/_assets/css/style.css" />
<link rel="stylesheet" href="https://whpk.org/_assets/css/footer.css" />
<link rel="stylesheet" href="https://whpk.org/_assets/css/Navbar.css" />
<link rel="stylesheet" href="https://whpk.org/_assets/css/Responsive.css" />
<link rel="icon" type="image/x-icon" href="https://whpk.org/_assets/resources/images/favicon.ico">
<title>
WHPK - Home </title>
<style>
.container-custom-music {
position: fixed;
top: 1.8vw;
right: 2.5vw;
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000000000
}
@media only screen and (max-width: 1000px) {
.container-custom-music {
top: auto;
bottom: 1.2vw;
right: 3.5vw;
}
}
@media only screen and (max-width: 600px) {
.container-custom-music {
top: auto;
bottom: 2vw;
right: 3.5vw;
}
}
</style>
</head>
<body data-scroll-container>
<div class="overlay">
<h1>
WHPK <br />
<!-- <span> Developed by scope focus</span> -->
</h1>
</div>
<header class="d-lg-block d-none" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="navbar" class="">
<div class="menu2Btn">
<button class="btn2">Close</button>
</div>
<div class="menuItem">
<a href="https://whpk.org/schedule">schedule</a>
<a href="https://whpk.org/events">events</a>
<a href="https://whpk.org/about">about</a>
<a href="https://whpk.org/contact">contact</a>
<a href="https://whpk.org/donate">donate</a>
<a href="https://whpk.org/blog">blog</a>
<a href="https://whpk.org/magazine">magazine</a>
</div>
</div>
</div>
<div class="col-md-12 navbarSingleItem">
<div class="menuImg">
<a href="http://whpk.org">
<img src="https://whpk.org/_assets/resources/images/menuIcon.png" class="img-fluid"
alt="menuIcon" /></a>
</div>
<div class="menuSingleItem">
<!-- menu Button -->
<div class="menuButton">
<div class="menuText">
<button id="menuToggle">menu</button>
</div>
</div>
<!-- menu Button end -->
<div class="menuPlaying">
<h3>Now Playing :</h3>
<div class="marqueText">
<marquee class="target changeText" id="textChange">
The Saturday Night Show </marquee>
</div>
</div>
<div class="listen">
</div>
</div>
</div>
</div>
</div>
</header>
<!-- nav end here -->
<!-- ==================Mobile Header Start here=============== -->
<section class="mobileTopHeader d-lg-none d-block" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="menuPlaying mobilePlaying">
<h3>Now Playing :</h3>
<div class="marqueText mobileMarque">
<div class="marqueText">
<marquee class="target changeText" id="textChange3" onmouseover="stop()"
onmouseout="start()">
The Saturday Night Show </marquee>
</div>
</div>
<div class="playIngIcon mobileInfo">
<span>
<iconify-icon icon="ant-design:info-circle-outlined"></iconify-icon>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================Mobile Header End here============== -->
<!--================= mobile Menu start here=============== -->
<section class="mobileMenu d-block" data-scroll-section>
<div class="col-md-12">
<div id="Mobile_navbar" class="">
<div class="MobilemenuItem">
<a href="https://whpk.org/schedule">Schedule</a>
<a href="https://whpk.org/events">Events</a>
<a href="https://whpk.org/about">About</a>
<a href="https://whpk.org/contact">Contact</a>
<a href="https://whpk.org/donate">Donate</a>
<a href="https://whpk.org/blog">Blog</a>
<a href="https://whpk.org/magazine">Magazine</a>
<div class="closeMobileMenu">
<button id="closeMobileButton">
<span><iconify-icon icon="bi:arrow-down"></iconify-icon></span>
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="mobileMenuItem">
<div class="menuButton">
<button id="mobileBUtton">Menu</button>
</div>
<div class="menuLogo">
<a href="http://whpk.org">
<img src="https://whpk.org/_assets/resources/images/menuIcon.png" class="img-fluid"
alt="logo" /></a>
</div>
<div class="mobileMenuListen">
<h3>
<a style="visibility:hidden" href="https://whpk-stream.uchicago.edu/stream"
target="_blank">Listen</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container-custom-music">
<button style="border:none;background:transparent" onclick="change();playPause()" type="button" value="Play"
id="button1">
<i id="music-icon" class='fas fa-play' style='font-size:21px;color:#222222;border:none'></i>
<span style="">Listen</span>
</button>
<input style="background-color:transparent;width:60px;" type="hidden" onchange="setVolume()" id='volume1' min=0
max=1 step=0.01 value='1'>
</div>
splash
<style>
.splash {
background-image: url('https://whpk.org/_assets/resources/images/homepage/thestation.png');
background-size: cover;
background-position: center;
}
.splashtext a {
color: white;
}
.bigtitle {
color: white;
}
@media screen and (max-width: 768px) {
.bigtitle {
/* Styles for smaller screens */
font-size: 100px;
/* Adjust as needed */
text-align: center;
}
}
</style>
<div class="splash">
<h1 class="bigtitle splashtitle m-4">WHPK</h1>
<div class="container-fluid sptextbg">
<div class="row mt-5 mx-5 text-center">
<p class="px-3 splashtext">88.5 FM Chicago. The Pride of the South Side.</p>
<p class="px-3 splashtext mb-5"><a href="#" style="color: white !important; text-decoration: underline"
onclick="scrollToContent(); return false;">Who's on?</a></p>
</div>
</div>
</div>
<div id="content">
</div>
<style>
.pb {
background-color: black;
}
.pnow {
background-size: contain;
}
</style>
<div class="pnow">
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-12 col-lg-7 border border-white py-4 bg-white mt-5">
<h1>Playing Now:
The Saturday Night Show </h1>
<p>DJ:
DJ E2H2 </p>
<div class="row my-2">
<div class="col-2">
<button style="border:none;background:transparent" onclick="change();playPause()" type="button"
value="Play" id="button2">
<i id="music-icon2" class='fas fa-play'
style='font-size:21px;color:#222222;border:none'></i>
<span style="">Listen</span>
</button>
</div>
<div class="col-10">
<div class="progress my-1">
<div class="progress-bar pb" role="progressbar" style="width: 91.666666666667%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<img style="max-width: 100%;" class="mx-auto my-2 d-block"
src="https://whpk.org/show_info/show_images/" class="img-fluid" alt="">
<p>
</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-7">
<p>Curious what else we play? Check out our <a href="https://whpk.org/schedule">schedule</a></p>
</div>
</div>
</div>
</div>
<!-- schedule start here -->
<section class="schedule" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="scheduleSingleItem">
<div class="scheduleIcon">
<img src="https://whpk.org/_assets/resources/images/down.png" class="img-fluid" alt="arrow" />
</div>
<div class="scheduleText">
<h3>Coming Up Today</h3>
</div>
<div class="scheduleIcon">
<img src="https://whpk.org/_assets/resources/images/down.png" class="img-fluid" alt="arrow" />
</div>
</div>
</div>
</div>
</div>
</section>
<!-- schedule end here -->
<!-- accrodion start here -->
<section class="accrodion" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="accro_singleItem d-md-block d-none">
<!-- accrodion text -->
<div class="accrodionTitle">
<div class="title-ac">
<h3>Archive</h3>
</div>
</div>
<div class="accro-date">
<h3>
<span><span class="iconify" data-icon="akar-icons:arrow-left"></span></span>
<span id="current_month"></span>
<span id="current_day"></span>
<span><span class="iconify" data-icon="akar-icons:arrow-right"></span></span>
</h3>
</div>
</div>
<!-- accrodion text end here -->
<!-- mobile accro start here -->
<div class="mobileAccro d-md-none">
<div class="title-ac">
<h3>Archive</h3>
</div>
<div class="accro-date">
<h3>
<span><span class="iconify" data-icon="akar-icons:arrow-left"></span></span>
<span id="current_month2"></span>
<span id="current_day2"></span>
<span><span class="iconify" data-icon="akar-icons:arrow-right"></span></span>
</h3>
</div>
<div class="accrodModal">
<button id="dropShowBtn">Genres</button>
<div class="mobileAccroDropItem">
<div class="mobileMenuTitle">
<div class="closeItem">
<h3 style="margin-bottom: 15px">Genre Index</h3>
<div class="closeBtn">
<button>
<iconify-icon icon="ei:close"></iconify-icon>
</button>
</div>
</div>
<div class="generItem">
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/eye.png" class="img-fluid" alt="Public Affairs" /></span>Public Affairs
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/polygon.png" class="img-fluid" alt="Rock" /></span>Rock
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/electronic.png" class="img-fluid" alt="Electronic" /></span>Electronic
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="Jazz" /></span>Jazz
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="Rap" /></span>Rap
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/clasical.png" class="img-fluid" alt="Classical" /></span>Classic
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/Folk.png" class="img-fluid" alt="Folk" /></span>Folk
</h3>
</div>
<!-- single item end here -->
<!-- single item start here -->
<div class="publicGener">
<h3>
<span><img src="https://whpk.org/_assets/resources/images/international.png" class="img-fluid" alt="" /></span>International
</h3>
</div>
<!-- single item end here -->
</div>
</div>
</div>
</div>
</div>
<!-- mobile accro end here -->
</div>
</div>
</div>
</section>
<section class="collapsed-Header d-md-block d-none" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapsed-single-item">
<div class="collapsedHeader">
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/eye.png" class="img-fluid" alt="eye" /></span>Public Affairs
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/polygon.png" class="img-fluid" alt="Polygon" /></span>Rock
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/electronic.png" class="img-fluid" alt="Polygon" /></span>Electronic
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="Jazz" /></span>Jazz
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="Rap" /></span>Rap
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/clasical.png" class="img-fluid" alt="Classical" /></span>Classical
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/Folk.png" class="img-fluid" alt="Folk" /></span>Folk
</h4>
</div>
<!-- single item end -->
<!-- single item -->
<div class="public">
<h4>
<span><img src="https://whpk.org/_assets/resources/images/international.png" class="img-fluid" alt="International" /></span>International
</h4>
</div>
<!-- single item end -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- accrodion end here -->
<section class="collapsed2" data-scroll-section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 collapsedCOl">
<div id="main">
<div class="accordion" id="faq">
<!-- sinlge item start here -->
<div class="card card01">
<div class="card-header cardHeader01" id="faqhead1">
<a style="background-color:#deebff" href="#"
class="btn btn-header-link btn-header-link01 collapsed2" data-toggle="collapse"
data-target="#faq01" aria-expanded="true" aria-controls="faq1">
<div class="collapsed2_title_date">
<div class="collapsed2_first">
<div class="collapsed2_date">
<h4 style="background-color:#deebff">
6PM-7PM </h4>
</div>
<div class="collapsed2_date">
<h4 class="collapased2Title">
The Saturday Night Show </h4>
</div>
</div>
<div class="collapsed2Last">
<div class="collapsed2_sign">
<img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" />
</div>
<div class="collapsed_arrow">
<span class="iconify" data-icon="charm:arrow-up-right"></span>
</div>
</div>
</div>
</a>
</div>
<div id="faq01" class="collapse" aria-labelledby="faqhead1"
style="background-color:#deebff" data-parent="#faq">
<div class="card-body">
<div class="singleItemCard">
<div class="cardDesc">
<p>
<a href="https://whpk.org/show_info/?showid=171" style="text-decoration-line: underline">Learn
More </a>
</p>
</div>
<div class="cardName">
<p>
Array </p>
</div>
<div class="iconName">
<p>
Jazz </p>
</div>
</div>
</div>
</div>
</div>
<!-- sinlge item end here -->
<div class="card card02">
<div class="card-header cardHeader02" id="faqhead2">
<a style="background-color:#BED3F3" href="#"
class="btn btn-header-link btn-header-link02 collapsed2" data-toggle="collapse"
data-target="#faq02" aria-expanded="true" aria-controls="faq2">
<div class="collapsed2_title_date">
<div class="collapsed2_first">
<div class="collapsed2_date">
<h4 style="background-color:#BED3F3">
8PM-9PM </h4>
</div>
<div class="collapsed2_date">
<h4 class="collapased2Title">
Industry Shakedown // Independent Radio </h4>
</div>
</div>
<div class="collapsed2Last">
<div class="collapsed2_sign">
<img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="union" />
</div>
<div class="collapsed_arrow">
<span class="iconify" data-icon="charm:arrow-up-right"></span>
</div>
</div>
</div>
</a>
</div>
<div id="faq02" class="collapse" aria-labelledby="faqhead2"
style="background-color:#BED3F3" data-parent="#faq">
<div class="card-body">
<div class="singleItemCard">
<div class="cardDesc">
<p>
<a href="https://whpk.org/show_info/?showid=49" style="text-decoration-line: underline">Learn
More </a>
</p>
</div>
<div class="cardName">
<p>
Array </p>
</div>
<div class="iconName">
<p>
Rap </p>
</div>
</div>
</div>
</div>
</div>
<!-- sinlge item end here -->
<div class="card card03">
<div class="card-header cardHeader03" id="faqhead3">
<a style="background-color:#BED3F3" href="#"
class="btn btn-header-link btn-header-link03 collapsed2" data-toggle="collapse"
data-target="#faq03" aria-expanded="true" aria-controls="faq3">
<div class="collapsed2_title_date">
<div class="collapsed2_first">
<div class="collapsed2_date">
<h4 style="background-color:#BED3F3">
9PM-10PM </h4>
</div>
<div class="collapsed2_date">
<h4 class="collapased2Title">
Industry Shakedown // Independent Radio </h4>
</div>
</div>
<div class="collapsed2Last">
<div class="collapsed2_sign">
<img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="union" />
</div>
<div class="collapsed_arrow">
<span class="iconify" data-icon="charm:arrow-up-right"></span>
</div>
</div>
</div>
</a>
</div>
<div id="faq03" class="collapse" aria-labelledby="faqhead3"
style="background-color:#BED3F3" data-parent="#faq">
<div class="card-body">
<div class="singleItemCard">
<div class="cardDesc">
<p>
<a href="https://whpk.org/show_info/?showid=50" style="text-decoration-line: underline">Learn
More </a>
</p>
</div>
<div class="cardName">
<p>
Array </p>
</div>
<div class="iconName">
<p>
Rap </p>
</div>
</div>
</div>
</div>
</div>
<!-- sinlge item end here -->
<div class="card card04">
<div class="card-header cardHeader04" id="faqhead4">
<a style="background-color:#BED3F3" href="#"
class="btn btn-header-link btn-header-link04 collapsed2" data-toggle="collapse"
data-target="#faq04" aria-expanded="true" aria-controls="faq4">
<div class="collapsed2_title_date">
<div class="collapsed2_first">
<div class="collapsed2_date">
<h4 style="background-color:#BED3F3">
10PM-11PM </h4>
</div>
<div class="collapsed2_date">
<h4 class="collapased2Title">
Industry Shakedown // Independent Radio </h4>
</div>
</div>
<div class="collapsed2Last">
<div class="collapsed2_sign">
<img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="union" />
</div>
<div class="collapsed_arrow">
<span class="iconify" data-icon="charm:arrow-up-right"></span>
</div>
</div>
</div>
</a>
</div>
<div id="faq04" class="collapse" aria-labelledby="faqhead4"
style="background-color:#BED3F3" data-parent="#faq">
<div class="card-body">
<div class="singleItemCard">
<div class="cardDesc">
<p>
<a href="https://whpk.org/show_info/?showid=51" style="text-decoration-line: underline">Learn
More </a>
</p>
</div>
<div class="cardName">
<p>
Array </p>
</div>
<div class="iconName">
<p>
Rap </p>
</div>
</div>
</div>
</div>
</div>
<!-- sinlge item end here -->
</div>
</div>
</div>
</div>
</div>
</section>
<footer data-scroll-section>
<div class="border"></div>
<div class="container-fluid">
<div class="row">
<!-- footer link -->
<div class="col-md-6">
<div class="footerLeftItem">
<div class="footerLink">
<a href="https://twitter.com/whpk_chicago" title="WHPK on Twitter" target="_blank">Twitter</a><a
href="#"></a>
<a href="https://www.facebook.com/whpk885" title="WHPK on Facebook" target="_blank">Facebook</a><a
href="#"></a>
<a href="https://www.instagram.com/whpk_88.5fm/" target="_blank">Instagram</a>
<a href="https://soundcloud.com/WHPK" target="_blank">Soundcloud</a>
<a href="https://youtube.com/c/WHPK885FM " target="_blank">Youtube</a>
<div class="footerDesc">
<p>©2022 WHPK</p>
</div>
</div>
<!-- footer link end here -->
<!-- footer Logo start here -->
<div class="footerLogo">
<a href="whpk.org">
<img src="https://whpk.org/_assets/resources/images/banner.png" class="img-fluid" alt="logo" /></a>
</div>
<!-- footer logo end here -->
</div>
</div>
<!-- footer address -->
<div class="col-md-6">
<div class="footerLastItem">
<div class="footerAddress">
<div class="footerHome">
<h6>
Reynolds Club, 5706 S. University Ave. <br />
Chicago, IL 60637
</h6>
</div>
<div class="footerOfficeItem">
<div class="footerOffice">
<p>
Office <br />
773-702-0229
</p>
</div>
<div class="footerStudio">
<p>
Studio <br />
773-702-8424
</p>
</div>
</div>
<div class="footerHome">
<p>
<i>Disclaimer: staff is rarely in the physical office. You can reach our station manager, Dean
Bilenker, at <b>(203) 356-5533</b>, for FCC inquiries or emergencies</i>.
Please do not contact the station manager for <a href="/contact">music submissions.</a>
</p>
</div>
</div>
<!-- footer address end here -->
<!-- creator start here -->
<div class="creator">
<div class="first">
<p>
Designed by <br />
Chirag Kawediya and <br />
Vitasiempre
</p>
</div>
<div class="middle">
<p>
<a href="https://publicfiles.fcc.gov/fm-profile/WHPK " class="privacy" target="_blank">
FCC Online Public File</a>
</p>
</div>
<div class="last">
<p><a href="https://whpk.org/privacy" class="privacy">Privacy</a></p>
</div>
<!-- creator end here -->
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- js file bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
crossorigin="anonymous"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
<script src="https://whpk.org/_assets/js/app.js"></script>
<script src="https://whpk.org/_assets/js/TweenMax.min.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>
<script src="js/locomotiveScroll.js"></script> -->
<script src="https://whpk.org/_assets/js/animation.js"></script>
<script src="js/MobileTex.js"></script>
<script>
// audioPlay();
var mediaClip = new Audio("https://whpk-stream.uchicago.edu/stream")
var volume1 = document.getElementById("volume1");
function playPause() {
if (mediaClip.paused) {
mediaClip.play();
document.getElementById("music-icon").classList.remove("fa-play");
document.getElementById("music-icon").classList.add("fa-pause");
document.getElementById("music-icon2")?.classList?.remove("fa-play");
document.getElementById("music-icon2")?.classList?.add("fa-pause");
} else {
mediaClip.pause();
document.getElementById("music-icon").classList.remove("fa-pause");
document.getElementById("music-icon").classList.add("fa-play");
document.getElementById("music-icon2")?.classList?.remove("fa-pause");
document.getElementById("music-icon2")?.classList?.add("fa-play");
}
}
function change() {
var button1 = document.getElementById("button1");
if (button1.value === "Play") button1.value = "Pause";
else button1.value = "Play";
var button2 = document.getElementById("button2");
if (button2 != null) {
if (button2.value === "Play") button2.value = "Pause";
else button2.value = "Play";
}
}
function setVolume() {
mediaClip.volume = document.getElementById("volume1").value;
}
ended()
function ended() {
mediaClip.addEventListener("ended", () => {
document.getElementById("music-icon").classList.remove("fa-pause");
document.getElementById("music-icon").classList.add("fa-play");
});
}
function click() {
alert("clicked");
}
// ======= Popup =======
document.querySelector('#closePopup').addEventListener('click', () => {
console.log('clicked');
document.querySelector('.popup').style.display = 'none';
document.querySelector('.popup-bg').style.display = 'none';
});
// Set the date we're counting down to
var countDownDate = new Date("Mar 31, 2024 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
