Skip to content

Instantly share code, notes, and snippets.

@calvinmorett
Created July 5, 2021 00:31
Show Gist options
  • Save calvinmorett/f096b2439152f98bd3f432395baed5d8 to your computer and use it in GitHub Desktop.
Save calvinmorett/f096b2439152f98bd3f432395baed5d8 to your computer and use it in GitHub Desktop.
scanners.live
<!DOCTYPE html><!-- <!DOCTYPE html> -->
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>Scanners.live :: MKN</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Scanners.live" />
<meta name="designer" content="Calvin">
<meta name="robots" content="index,follow" />
<meta name="Classification" content="Media">
<meta name="keywords" content="scanners, scanners.live, police, fire, rescue, crime, blotter, current events, dispatcher, broadcastify, police scanners, fire department scanners, mkn, glens falls, indianapolis, san antonio, NY, IN, TX, new york, indiana, texas, california, ambient music, ambient, la, los angeles, ca" />
<meta property="og:title" content="Scanners.live" />
<!-- <meta property="og:image" content="x" /> -->
<meta property="og:site_name" content="Scanners.live" />
<meta property="og:description" content="Scanners.live - Feed for Glens Falls, NY, Indiapolis, IN, San Antonio, TX and Los Angeles, CA." />
<meta property="og:url" content="https://scanners.live" />
<meta property="og:type" content="article:2021,07,04" />
</head>
<body>
<div class="wrapper">
<h1>scanners.live</h1>
<div class="row">
<div class="col-sm">
<section>
<div class="play"></div>
<p>Glens Falls, NY</p>
<audio controls>
<source src="https://broadcastify.cdnstream1.com/3316">
</audio>
</section>
</div>
<div class="col-sm">
<section>
<div class="play"></div>
<p>Indianapolis, IN</p>
<audio controls>
<source src="https://broadcastify.cdnstream1.com/32602">
</audio>
</section>
</div>
</div>
<div class="row">
<div class="col-sm">
<section>
<div class="play"></div>
<p>San Antonio, TX</p>
<audio controls>
<source src="https://broadcastify.cdnstream1.com/13814">
</audio>
</section>
</div>
<div class="col-sm">
<section>
<div class="play"></div>
<p>Los Angeles, CA</p>
<audio controls>
<source src="https://broadcastify.cdnstream1.com/1874">
</audio>
</section>
</div>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
*, *:before, *:after{text-shadow: 0 0 0; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; font-smooth: always; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; } html, body{ padding:0; margin: 0 auto; } /* Body ========================= Center */ .body-container{ margin: 0 auto; }
/* i. styles for body and global */
* {
box-sizing: border-box;
/* should be covered by reset */
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
::-moz-selection {
background: rgba(0, 0, 0, .99);
color: #fff;
text-shadow: none;
}
::selection {
background: rgba(0, 0, 0, .99);
color: #fff;
text-shadow: none;
}
html,body{
color:#f1f3f4;
font-size:11px;
font-family:sans-serif;
line-height:1;
background:#111;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin:2em;
}
.wrapper{
margin:1em auto;
}
.wrapper section {
text-align: left;
}
.wrapper h1{
letter-spacing:1px;
font-weight:normal;
color:#f1f3f4;
padding-bottom:10px;
}
.wrapper h1 span{
color:transparent;
}
.wrapper h1:before{
content:'';
background: rgba(255,0,0,1);
width:100vw;
height:1px;
margin-left:1px;
position:absolute;
top:0;
left:0;
animation:activated 1s ease infinite;
}
section{
margin:2em 0;
border:1px solid transparent;
transition:all .3s ease;
cursor:pointer;
border:3px solid rgba(255,0,0,.5);
}
section p {
padding: 18px 15px 5px;
}
section:hover{
color:red;
}
section audio{
max-width:100%;
width: 100%;
height: 44px;
background:#f1f3f4;
transition:opacity .1s ease;
}
section:hover audio{
opacity:1;
}
.active{
color:red;
opacity:1;
}
.active:before {
content: '';
display: inline-block;
background: red;
width: 10px;
height: 10px;
position: absolute;
border-radius: 100%;
animation: activated .5s ease infinite;
top: -5px;
left: -5px;
z-index:10;
}
@keyframes activated{
0%{
opacity:1;}
50%{
opacity:0;
}
}
section{position:relative;}
.play:before,.play:after{
content:'';
display:inline-block;
vertical-align:middle;
width:2px;
height:2px;
padding:6px;
top:-7px;
left:-7px;
position:absolute;
border:1px solid rgba(255,0,0,.5);
border-radius:100%;
background:#111;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment