frontend/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>yFiles for HTML with ASP.Net MVC</title>
    <style>
        body {
            font-size: 16px;
            font-family: "RobotoDraft",Helvetica,Arial,sans-serif;
            font-weight: 300;
            line-height: 24px;
        }

        #designDiv {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #main {
            margin: 30px 10%;
            position: absolute;
            top: 3%;
            height: 90%;
            width: 1000px;
        }

        #designGrid {
            margin: 0;
            position: absolute;
            top: 70px;
            height: 800px;
            width: 90%;
            min-height: 820px;
        }

        #designSurface {
            border: 1px solid black;
            -ms-border-radius: 5px;
            border-radius: 5px;
            height: 800px;
            padding: 10px;
            position: absolute;
            top: 0px;
            width: 90%;
        }

        .buttons {
            border: 1px solid black;
            -ms-border-radius: 5px;
            border-radius: 5px;
            height: 5%;
            position: absolute;
            top: 95%;
            width: 90%;
            margin-top: 10px;
        }

        button {
            width: 80px;
            height: 25px;
            margin: 13px;
            background-color: silver;
        }

        #detailsPanel {
            margin: 0 0 0 840px;
            display: block;
            border: 1px solid black;
            -ms-border-radius: 5px;
            border-radius: 5px;
            height: 800px;
            position: absolute;
            top: 0px;
            width: 300px;
            padding: 10px;
            display: none;
        }

        #DetailsHeader {
            font-weight: bold;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="main">
        <h2>yFiles for HTML with ASP.Net MVC</h2>
        <div id="designGrid">
            <div id="designSurface">
                <div id="designDiv"></div>
            </div>
            <div id="detailsPanel">
                <div id="DetailsHeader">Details</div>
                <div>First name: <span id="FirstName"></span></div>
                <div>Last name: <span id="LastName"></span></div>
                <hr/>
                <div>Address: <span id="Address"></span></div>
                <div>City: <span id="City"></span></div>
                <div>Zip: <span id="Zip"></span></div>
                <div>Country: <span id="Country"></span></div>
            </div>
        </div>

    </div>
    <script type="text/yfiles-template">
        <g id="designTemplate">
            <rect fill="White" stroke="Silver" stroke-width="1" rx="5" ry="5" width="180" height="60" />
            <text x="20" y="40" font-family="sans-serif" font-size="20px" fill="Orange" data-content="{Binding Label}"></text>
        </g>
    </script>   
    <script type="module" src="/src/app.ts"></script>
</body>
</html>