doggos/index.html

129 lines
5.6 KiB
HTML

<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="utf8">
<title>Doggo cam!</title>
<link rel="apple-touch-icon" sizes="180x180" href="https://www.kescher.at/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.kescher.at/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="https://www.kescher.at/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://www.kescher.at/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.kescher.at/favicon-16x16.png">
<link rel="manifest" href="https://www.kescher.at/site.webmanifest">
<link rel="mask-icon" href="https://www.kescher.at/safari-pinned-tab.svg" color="#004062">
<meta name="msapplication-TileColor" content="#004062">
<meta name="msapplication-TileImage" content="https://www.kescher.at/mstile-144x144.png">
<meta name="theme-color" content="#004062">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
max-width: 1000px;
margin: 0 auto;
}
img {
display: inline-block;
width: 45%;
height: auto;
margin: 0 auto;
vertical-align: middle;
}
div.row {
display: block;
text-align: center;
margin-top: 0.2rem;
}
div.row p {
display: inline-block;
width: 45%;
margin: 0 auto;
}
.hide {
opacity: 0;
appearance: none;
}
</style>
</head>
<body><h1>Doggo (and kitty) cams!</h1>
<p>This page shows a bunch of webcams by <a href="https://utahdogpark.com">Utah Dog Park</a>, located in, Utah, United
States. Their webcams are left open intentionally and can be found on their site as well, but my server makes sure
the load on their webcams is reduced by proxying single streams to multiple viewers. Enjoy watching doggos (and
kitties in the kitty condos of Woods Cross)!
🐕 🐈</p>
<p>This project utilizes <a href="https://github.com/vvidic/mjpeg-proxy">an MJPEG proxy written in Go where
I contributed</a>.</p>
<p>To view a camera stream, click at its thumbnail.</p>
<h2>Salt Lake City</h2>
<div class="row">
<a href="sl-small-dog-patio"><img alt="Thumbnail for small dog patio in Salt Lake City"
src="sl-small-dog-patio.jpg"></a>
<a href="sl-big-dogs-west-patio"><img alt="Thumbnail for big dogs west patio in Salt Lake City"
src="sl-big-dogs-west-patio.jpg"></a>
<p>Small dog patio</p>
<p>Big dogs west patio</p>
</div>
<div class="row">
<a href="sl-big-dogs-east-patio"><img alt="Thumbnail for big dogs east patio in Salt Lake City"
src="sl-big-dogs-east-patio.jpg"></a>
<a href="sl-senior-lounge"><img alt="Thumbnail for senior lounge in Salt Lake City"
src="sl-senior-lounge.jpg"></a>
<p>Big dogs east patio</p>
<p>Senior lounge</p>
</div>
<div class="row">
<a href="sl-big-dogs-west"><img alt="Thumbnail for big dogs west in Salt Lake City"
src="sl-big-dogs-west.jpg"></a>
<a href="sl-big-dogs-east"><img alt="Thumbnail for big dogs east in Salt Lake City"
src="sl-big-dogs-east.jpg"></a>
<p>Big dogs west</p>
<p>Big dogs east</p>
</div>
<div class="row">
<a href="sl-small-dogs"><img alt="Thumbnail for small dogs in Salt Lake City"
src="sl-small-dogs.jpg"></a>
<a class="hide" href=""><!--suppress RequiredAttributes -->
<img alt="" class="hide"></a>
<p>Small dogs</p>
<p class="hide"></p>
</div>
<h2>Woods Cross</h2>
<div class="row">
<a href="wc-lazy-lounge"><img alt="Thumbnail for lazy lounge in Woods Cross"
src="wc-lazy-lounge.jpg"></a>
<a href="wc-upstairs-small-dogs"><img alt="Thumbnail for upstairs small dogs in Woods Cross"
src="wc-upstairs-small-dogs.jpg"></a>
<p>Lazy lounge</p>
<p>Upstairs small dogs</p>
</div>
<div class="row">
<a href="wc-large-dog-boarding"><img alt="Thumbnail for large dog boarding in Woods Cross"
src="wc-large-dog-boarding.jpg"></a>
<a href="wc-large-dog-outdoor"><img alt="Thumbnail for large dog outdoor in Woods Cross"
src="wc-large-dog-outdoor.jpg"></a>
<p>Large dog boarding</p>
<p>Large dog outdoor</p>
</div>
<div class="row">
<a href="wc-outdoor-west-yard"><img alt="Thumbnail for outdoor west yard in Woods Cross"
src="wc-outdoor-west-yard.jpg"></a>
<a href="wc-outdoor-east-yard"><img alt="Thumbnail for outdoor east yard in Woods Cross"
src="wc-outdoor-east-yard.jpg"></a>
<p>Outdoor west yard</p>
<p>Outdoor east yard</p>
</div>
<div class="row">
<a href="wc-kitty-condos"><img alt="Thumbnail for kitty condos in Woods Cross"
src="wc-kitty-condos.jpg"></a>
<a class="hide" href=""><!--suppress RequiredAttributes --><img alt="" class="hide"></a>
<p>Kitty condos</p>
<p class="hide"></p>
</div>
</body>
</html>