TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="ArozOS Photo" />
    <title>Photo</title>
    <link rel="stylesheet" href="../script/semantic/semantic.min.css">
    <script src="../script/alpine.min.js"></script>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/semantic/semantic.min.js"></script>
    <script src="../script/ao_module.js"></script>
    <script src="photo.js"></script>
    <style>
        @media only screen and (min-width: 1200px) {
            #menu {
                flex: 1;
                max-width: 200px;
                min-width: 200px;
                height: 100vh;
                display: block;
            }
            #showmenuBtn {
                display: none;
            }
        }
        
        @media only screen and (max-width: 1200px) {
            #menu {
                display: none;
                height: 100vh;
            }
            #showmenuBtn {
                position: fixed;
                bottom: 30px;
                left: 30px;
            }
        }
        
        #display {
            flex: 1;
            margin: 0 0;
            height: 100vh;
        }
        
        #main {
            display: flex;
        }
        
        body {
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div id="main">
        <div class="ui left vertical menu" id="menu">
            <div class="item">
                <img class="ui fluid image" src="img/banner.png">
            </div>
            <div class="item">
                Browse Photos
                <div class="menu">
                    <a class="active item">user:/</a>
                </div>
            </div>

            <div class="item">
                Tags by AI
                <div class="menu">
                    <a class="active item">#a</a>
                    <a class="item">#b</a>
                    <a class="item">#c</a>
                    <a class="item">See More</a>
                </div>
            </div>


        </div>

        <div id="display" class="ui segment" x-data='folderObject()' x-init="init()">
            <div class="ui six cards viewbox">
                <template x-for="image in images">
                <div class="ui small card" x-on:click="showImage($el);"
                    :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))">
                    <a class="image">
                        <img :src="'../system/file_system/loadThumbnail?bytes=true&vpath=' + image">
                    </a>
                </div>
            </template>
            </div>
            <button x-on:click="updateRenderingPath('user:/Photo/油圖/*.jpg');">Click Me</button>
        </div>
    </div>
    <button id="showmenuBtn" onclick="$('#menu').slideToggle();">S</button>
</body>
<script>
    $(window).on("resize ", function() {
        //check if the menu is opened
        if (window.innerWidth < 1200) {
            $('#menu').slideUp();
        }
        if (window.innerWidth >= 1200) {
            $('#menu').slideDown();
        }

        if (window.innerWidth < 500) {
            $(".viewbox ").attr("class ", "ui three cards viewbox ");
        } else if (window.innerWidth < 800) {
            $(".viewbox ").attr("class ", "ui four cards viewbox ");
        } else if (window.innerWidth < 1200) {
            $(".viewbox ").attr("class ", "ui six cards viewbox ");
        } else {
            $(".viewbox ").attr("class ", "ui ten cards viewbox ");
        }
    });
</script>

</html>