UCSF Recycling & Waste Reduction

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http鈥恊quiv="Content鈥怱ecurity鈥怭olicy" content="default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self';"> <meta name="Referrer鈥怭olicy" value="no鈥恟eferrer | same鈥恛rigin"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>UCSF Recycling & Waste Reduction - Zero Waste App</title> <link rel="stylesheet" type="text/css" href="inc/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="inc/slick/slick-theme.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" integrity="sha512-hbs/7O+vqWZS49DulqH1n2lVtu63t3c3MTAn0oYMINS5aT8eIAbJGDXgLt6IxDHcWyzVTgf9XyzZ9iWyVQ7mCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="wrap"> <div id="ucsf-banner-nav"> <div class="top-header-container row"> <ul class="menu"> <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li> </ul> </div> </div> <section id="masthead" class="secondary tablecontainer"> <a href="" class="js-goback"><img src="img/left-arrow.gif" alt="back" /></a> <h1><a href="index.php">Recycling &<br>Waste Reduction</a></h1> <a href="" id="mobile-menu-toggle"><img src="img/menu.gif" alt="menu" /></a> <a href="search.php" id="search-icon"><img src="img/search.gif" alt="search" /></a> </section><section id="grid" style="background-color: #ffdd00"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="66.6%" height="100" class="browseTitle"> <img src="img/browse.png" alt="browse"> </td> <td width="33.3%" class="allTitle"> <a href="browse.php?cat=all">ALL</a> </td> </tr> </table> <section id="browse-tiles"> <div class="clearfix"> <div class="tile tile-1"> <span class="vHelper"></span> <img src="img/tile-paper.png" alt="paper" id="tile-paper" /> </div> <div class="tile tile-2"> <span class="vHelper"></span> <img src="img/tile-plastic.png" alt="plastic"/> </div> <div class="tile tile-3"> <span class="vHelper"></span> <img src="img/tile-glass.png" alt="glass"/> </div> </div> <div class="clearfix"> <div class="tile tile-4"> <span class="vHelper"></span> <img src="img/tile-food.png" alt="food"/> </div> <div class="tile tile-5"> <span class="vHelper"></span> <img src="img/tile-metal.png" alt="metal"/> </div> <div class="tile tile-6"> <span class="vHelper"></span> <img src="img/tile-other.png" alt="other"/> </div> </div> </section> </section> <section id="sticky-footer-plus"> <div id="itemSubmit"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%" class="first yellow-button"><a href="submitphoto.php">SUBMIT A PHOTO</a></td> <td width="50%" class="second yellow-button"><a href="knowledge.php">TEST MY KNOWLEDGE</a></td> </tr> </table> </div> <div id="footer-nav-tiles" class="clearfix"> <div class="tile"> <a href="index.php" id="tile-home"><img src="img/tile-home.png" alt="home"/> </a> </div> <div class="tile"> <a href="tips.php" id="tile-tips"><img src="img/tile-tips.png" alt="tips"/> </a> </div> <div class="tile"> <a href="knowledge.php" id="tile-testme"><img src="img/tile-testme.png" alt="test me"/> </a> </div> <div class="tile"> <a href="stats.php" id="tile-stats"><img src="img/tile-stats.png" alt="stats"/> </a> </div> </div> </section> <section id="modal-menu" class="modal-frame"> <span class="modal-menu-close">×</span> <div class="modal-box"> <ul> <li><a href="browse.php">Browse</a></li> <li><a href="tips.php">Tips</a></li> <li><a href="knowledge.php">Test Knowledge</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="about.php">About</a></li> </ul> </div> </section> <section id="modal-success" class="modal-frame"> <span class="modal-success-close">×</span> <div class="modal-box"> <h3>Good Job!</h3> <a href="" class="modal-success-close2"><img src="img/checkmark.png" alt="checkmark"></a> <p>Thanks for doing your part.</p> </div> </section> <section id="modal-congrats" class="modal-frame"> <span class="modal-congrats-close">×</span> <div class="modal-box"> <h3></h3> <a href="" class="modal-congrats-close2"><img src="img/checkmark.png" alt="checkmark"></a> </div> </section> <section id="modal-share" class="modal-frame"> <span class="modal-share-close">×</span> <div class="modal-box"> <ul> <li><a href="" onclick="shareFacebook();">Facebook</a></li> <li><a href="" onclick="shareTwitter();">Twitter</a></li> <li><a href="" onclick="shareGoogle();">Google Plus</a></li> <li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a></li> <li><a href="https://www.snapchat.com/" target="_blank" rel="noopener noreferrer">SnapChat</a></li> </ul> </div> </section> <script> //=============================== // close modal menus var modalmenu = document.getElementById('modal-menu'); var modalmenuclose = document.getElementsByClassName("modal-menu-close")[0]; modalmenuclose.onclick = function() { modalmenu.style.display = "none"; } //===================== var modalshare = document.getElementById('modal-share'); var modalshareclose = document.getElementsByClassName("modal-share-close")[0]; modalshareclose.onclick = function() { modalshare.style.display = "none"; } //======================== var modalsuccess = document.getElementById('modal-success'); var modalsuccessclose = document.getElementsByClassName("modal-success-close")[0]; var modalsuccessclose2 = document.getElementsByClassName("modal-success-close2")[0]; modalsuccessclose.onclick = modalsuccessclose2.onclick = function(e) { e.preventDefault(); modalsuccess.style.display = "none"; } //======================== // moved to knowledge.js /* var modalcongrats = document.getElementById('modal-congrats'); var modalcongratsclose = document.getElementsByClassName("modal-congrats-close")[0]; var modalcongratsclose2 = document.getElementsByClassName("modal-congrats-close2")[0]; modalcongratsclose.onclick = modalcongratsclose2.onclick = function() { modalcongrats.style.display = "none"; } */ //===================== // Close modal when the user clicks anywhere outside of the modal window.onclick = function(event) { if (event.target == modalshare || event.target == modalmenu || event.target == modalsuccess ) { modalshare.style.display = "none"; modalmenu.style.display = "none"; modalsuccess.style.display = "none"; } } //======================= // share Socials function shareTwitter() { window.open('https://twitter.com/intent/tweet?url=' + window.location.href,'_blank'); } function shareFacebook() { window.open('https://www.facebook.com/sharer/sharer.php?u=' + window.location.href,'_blank'); } function shareGoogle() { window.open('https://plus.google.com/share?url=' + window.location.href,'_blank'); } </script></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="inc/slick/slick.min.js"></script> <script src="js/moment.js"></script> <script src="js/main.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-88600128-1', 'auto'); ga('send', 'pageview'); </script> <script src="js/response.min.js"></script> <script> // browse specific scripts function computeBrowseTileHeight() { var gridTop = $("#browse-tiles").position().top; var gridBottom = $("#sticky-footer-plus").position().top; var tileHeight = Math.round((gridBottom - gridTop) / 2); $('#grid .tile').css('height', tileHeight + 'px'); } // browse document ready $(document).ready(function() { // when grid tiles are clicked $('.tile-1').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=paper'; }); $('.tile-2').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=plastic'; }); $('.tile-3').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=glass'; }); $('.tile-4').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=food'; }); $('.tile-5').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=metal'; }); $('.tile-6').click(function(e) { e.preventDefault(); window.location.href = 'browse.php?cat=other'; }); // tiles to fill the height Response.action(function(){ computeBrowseTileHeight(); }); }); </script> </body> </html>

CINXE.COM

UCSF Recycling & Waste Reduction - Zero Waste App