html/index.html - master - githubmirror/ydb-pg-shortener

html/index.html
152 строки5 KB
Timofey Koolin
translate to english
27 сен 2023, 11:21
27 сен 2023, 11:212d6874b
<html>
<header>
    <meta charset="UTF-8">
    <title>test page</title>
    <script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(20, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            width: calc(100vw - 60px);
            height: calc(100vh - 40px);
            margin-left: 20px;
        }

        .header {
            grid-row-start: 1;
            grid-row-end: 1;
            grid-column-start: 1;
            grid-column-end: 2;
        }

        .text1 {
            grid-row-start: 2;
            grid-row-end: 4;
            grid-column-start: 1;
            grid-column-end: 1;
        }

        .text2 {
            grid-row-start: 2;
            grid-row-end: 4;
            grid-column-start: 2;
            grid-column-end: 2;
        }

        .shortener-control {
            grid-row-start: 6;
            grid-row-end: 10;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .admin-control {
            grid-row-start: 10;
            grid-row-end: 21;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        a.button {
            background-color: lightgray;
            border: 1px solid #660000;
            border-radius: 5px;
            /*color:#fff;*/
            /*margin-right:10px;*/
            padding: 10px 10px 10px 10px;
            text-decoration: none;

        }

        .button.active {
            background-color: green;
        }
    </style>
</header>
<body>
<div class="parent">
    <h1 class="header">Postgres-compatible</h1>
    <div class="text1">
        You have an application for link shortening. After submitting a URL from the input field, an abbreviated link is created and stored in the database.
        The key feature of this application is its use of a PostgreSQL driver and database syntax.
        This same application can function with both PostgreSQL and YDB due to the added PostgreSQL compatibility since version 23.3.
        <br/>
        <table>
            <tr>
                <td height="60px"><a class="button ydb" target="viewer">YDB</a></td>
                <td width="40px">&nbsp</td>
                <td height="60px"><a class="button postgres" target="viewer">Postgres</a>
                </td>
            </tr>
        </table>
    </div>
    <div class="text2">
        In the application interface, you can select the database that should be used. <br />
        When you click on the button, the interface of the same link shortener connected to YDB or PostgreSQL opens.<br />
        In the adjacent window, the admin panel of the selected database opens, where you can view the contents of the database.<br />
        <br />
        You can run an example on your computer through docker-compose.<br />
        The source code is available at: <a href="https://github.com/ydb-platform/ydb-pg-shortener">github.com/ydb-platform/ydb-pg-shortener</a>
        <br/>
    </div>
    <div class="shortener-control ydb-control">
        <iframe name="shortener-ydb" style="width: 100%; height: 100%;"></iframe>
    </div>
    <div class="admin-control ydb-control">
        <iframe name="admin-ydb" style="width: 100%; height: 100%;"></iframe>
    </div>
    <div class="shortener-control pg-control">
        <iframe name="shortener-pg" style="width: 100%; height: 100%;"></iframe>
    </div>
    <div class="admin-control pg-control">
        <iframe name="admin-pg" style="width: 100%; height: 100%;"></iframe>
    </div>
</div>
<script>

    function selectYDB(ev) {
        $('.ydb')
            .addClass('active');
        $('.postgres')
            .removeClass('active');

        $('.pg-control').hide()
        $('.ydb-control').show()

        ev.preventDefault();
        return false;
    }

    function selectPostgres(ev) {
        $('.postgres')
            .addClass('active');
        $('.ydb')
            .removeClass('active');

        $('.pg-control').show()
        $('.ydb-control').hide()

        ev.preventDefault();
        return false;
    }

    $(document).ready(function () {
        $('.ydb')
            .click(selectYDB);
        $('.postgres')
            .click(selectPostgres);

        $('[name=shortener-ydb]').attr('src', '//' + window.location.hostname + ':2001/');
        $('[name=admin-ydb]').attr('src', '//' + window.location.hostname + ':3001/monitoring/');
        $('[name=shortener-pg]').attr('src', '//' + window.location.hostname +':2002/');
        $('[name=admin-pg]').attr('src', '//' + window.location.hostname +':3002/');

        selectYDB();

    })
</script>
</body>
</html>