scc.html

{% extends 'base.html' %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/scc.css')[1:] }}">
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/libs/schemarama.bundle.min.js')[1:] }}"></script>
    <script src="{{ url_for('static', filename='js/scc/pretty-markup.js')[1:] }}"></script>
    <script src="{{ url_for('static', filename='js/scc/shex.js')[1:] }}"></script>
    <script src="{{ url_for('static', filename='js/scc/shacl.js')[1:] }}"></script>
    <script src="{{ url_for('static', filename='js/scc/layout.js')[1:] }}"></script>
    <script src="{{ url_for('static', filename='js/scc/core.js')[1:] }}"></script>
{% endblock %}

{% block header_controls %}
    <a href="shapes.html">
        Shapes
    </a>
    <div class="lang-selector">
        <label for="validation-lang-select">Validation language</label>
        <select class="form-control" name="validation-lang-select" id="validation-lang-select">
            <option value="shex">ShEx</option>
            <option value="shacl">SHACL</option>
        </select>
    </div>
{% endblock %}

{% block content %}
    <div class="content">
        <div id="validate-btn"><img src="{{ url_for('static', filename='images/icons/play_arrow.svg')[1:] }}"
                                    alt="validate"></div>
        <div class="block input-block">
            <div class="url-input">
                <img src="{{ url_for('static', filename='images/icons/world.svg')[1:] }}" alt="remote url">
                <input type="text" id="url-input" class="form-control" placeholder="Enter remote url">
                <div class="btn" id="url-submit-button">Load</div>
            </div>
            <div class="input-placeholder d-none loading-curtain">
                <div class="lds-roller">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <textarea class="form-control input-placeholder" name="input-text" id="input-text" cols="30"
                      rows="10"></textarea>
            <div class="tests-display">
                <div class="tests d-none"></div>
                <div id="show-tests-btn">Show tests</div>
            </div>
        </div>
        <div class="block output-block">
            <div class="hierarchy">
                <div class="title">Hierarchy</div>
                <div class="h-items"></div>
            </div>
            <div class="reports"></div>
        </div>
    </div>
{% endblock %}