www/shell/client/index.html

<!DOCTYPE html>
<html>
<head>
<title>Dat Polyfill Server</title>
<style>
    * {
        box-sizing: border-box;
    }
    body, html {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex: 1;
        flex-direction: column;
        height: 100%;
    }
    .search-container {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }
    .search-box {
        padding: 0.5em;
        flex: 1;
    }

    .view{
        width:100%
    }
    .hidden {
        display: none
    }
    .selection-form {
        font-family: Arial, Helvetica, sans-serif;
        background: #FAFAFA;
        border-radius: 1em;
    }
    #datListing a:link,
    a:visited,
    a:hover,
    a:focus,
    a:active {
        color: white;
        font-size: 1.5em;
    }
</style>
<script type="text/javascript" src="./iframeResizer.min.js"></script>
    <script type="text/javascript" src="./iframeResizer.contentWindow.min.js"></script>
    <script type="text/javascript" >iFrameResize({log:true})</script>
</head>
<body>
<div id="header">
    <form class="search-container" target="view" onsubmit="return false;">
        <!--<input type="hidden" name="DAT_GATEWAY" value="http://gateway.mauve.moe:3000" />-->
        <input placeholder="dat://" class="search-box" id="address" />
        <button class="open-button" id="open">Refresh</button>
        <button class="sites-button" id="sites">Sites</button>
    </form>
</div>
<div class="client-container">
    <!--<iframe id="client-frame" src="../client/index.html?DAT_GATEWAY=http%3A//localhost%3A3000" class="client-frame" seamless="seamless"></iframe>-->
    <iframe id="view" style="width:100%; height: 100%;" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
    <div id="datListing">
    </div>
</div>

<!--<script src="dat-polyfill.js"></script>-->
<script src="index.js"></script>
</body>
</html>