jube-fork/Jube.App/wwwroot/kendo/examples/spa/Aeroviewr.html

<!DOCTYPE html>
<html>
<head>
    <title>Aeroviewr</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    <script src="../content/spa/aeroviewr/js/500px.js"></script><script src="../content/spa/aeroviewr/js/aeroviewr.js"></script>
    <link href="../content/spa/aeroviewr/css/aeroviewr.css" rel="stylesheet">
</head>
<body>
    
    
        <!-- Google Tag Manager -->
        <noscript>
            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script>
        <!-- End Google Tag Manager -->
        <div id="root"></div>

        <script type="text/x-kendo-template" id="main">
            <header>
                <!-- <form data-bind="events: { submit: performSearch }">
                    <label>Search: <input type="search" data-bind="value: query" /></label>
                </form>
                <h1 class="aeroLogo"><a href="">aero<span>viewr</span></a></h1>&nbsp; -->
                <!--button id="slideshow-button" data-bind="text: slideShowButtonText, click: toggleSlideShow"></button-->
            </header>

            <section data-bind="events: { click: toggleFocus }" id="image-container">
                <div id="image-wrap">
                    <div class="k-card" style="display: inline-block; width: 600px;">
                        <div class="k-card-header k-inset" style=" ">Important</div
                        <div class="k-card-content">
                            <p>The application is temporarily unavailable due to the deprectaion of the 500px API. <a href="https://demos.telerik.com/kendo-ui/">Redirect to Kendo UI Demos</a>.</p>
                        </div>
                    </div>
                    <!-- <div id="image-inner-wrap" data-bind="events: { click: toggleShowDetails }">
                        <section data-bind="attr: { class: detailsClass }" id="details">
                            <div>
                                <h2 data-bind="text: currentPhoto.name, visible: currentPhoto.name"></h2>
                                <p data-bind="html: currentPhoto.description, visible: currentPhoto.description"></p>
                                <ul>
                                    <li data-bind="visible: currentPhoto.camera"><span>Camera</span><div data-bind="text: currentPhoto.camera"></div></li>
                                    <li data-bind="visible: currentPhoto.focal_length"><span>Focal Length</span><div data-bind="text: currentPhoto.focal_length"></div></li>
                                    <li data-bind="visible: currentPhoto.shutter_speed"><span>Shutter Speed</span><div data-bind="text: currentPhoto.shutter_speed"></div></li>
                                    <li data-bind="visible: currentPhoto.aperture"><span>Aperture</span><div data-bind="text: currentPhoto.aperture"></div></li>
                                    <li data-bind="visible: currentPhoto.iso"><span>ISO</span><div data-bind="text: currentPhoto.iso"></div></li>
                                    <li data-bind="visible: currentPhoto.times_viewed"><span>Times Viewed</span><div data-bind="text: currentPhoto.times_viewed"></div></li>
                                    <li data-bind="visible: currentPhoto.rating"><span>Rating</span><div data-bind="text: currentPhoto.rating + '%'"></div></li>
                                    <li data-bind="visible: currentPhoto.categoryName"><span>Category</span><div data-bind="text: currentPhoto.categoryName"></div></li>
                                    <li data-bind="visible: currentPhoto.user.fullname"><span>Copyright</span><div data-bind="text: currentPhoto.user.fullname"></div></li>
                                    <li data-bind="invisible: currentPhoto.noAvatar"><span>Avatar</span><div><img data-bind="attr: { src: currentPhoto.user.userpic_url }"/></div></li>
                                </ul>
                            </div>
                        </section>
                        <div class="loading" data-bind="style: { width: currentPhoto.calculatedWidth }">
                            <div class="image" data-bind="style: { backgroundImage: currentPhoto.backgroundPhoto, width: currentPhoto.calculatedWidth, visibility: currentPhoto.image_url ? 'visible' : 'hidden' } "></div>
                        </div>
                    </div> -->
                </div>

            </section>

            <footer>
                <!-- <a data-bind="click: scrollLeft" id="scroll-left" class="scroll-arrow">&#x2039;</a>
                <div data-role="listview" data-auto-bind="false" data-bind="{ source: photos }" data-template="photo-thumb" id="photo-thumbs"></div>
                <a data-bind="click: scrollRight" id="scroll-right" class="scroll-arrow">&#x203A;</a> -->
            </footer>
        </script>

        <script type="text/x-kendo-template" id="photo-thumb">
            <a data-bind="attr: { href: thumbHref, class: thumbClass }"><img data-bind="attr: { src: image_url[0] }"></a>
        </script>
    

    
</body>
</html>