avatar/content/index.html

<style>
    .studio-pane {
        height:99%;
    }
    .bold {font-weight:bold}
    .studio {
        display:grid;
        grid-template-columns: 45% auto;
        gap:10px;
        align-content: unset;
        height:90%;
        
    }
    .studio-menu {
        display:grid;
        grid-template-columns: auto auto;
        gap:2px; 
        
    }
    .studio-menu div {background-color: #f3f3f3;;}
    .studio-menu {
        display:grid;
        grid-template-columns: repeat(3,1fr) 48px; gap:2px;
        padding:4px;
        text-transform: capitalize;
    }
    .section {display:none}
    .choice {
        padding:4px;
        margin:4px;
        display:grid;
        grid-template-columns:30% auto; gap:2px;
        
        cursor:pointer;
        align-items: center;
    }
    
    .choice select {width:98%; border-color:transparent; padding:4px;}
   
    .choice .label {
        
        text-align: left;;
        font-weight:bold; text-transform: capitalize;}
    
    .avatar-frame  {
        padding:8px;
        display:grid;
        grid-template-rows: auto 32px;
        gap:10px;
        align-items:center;
        align-content: center;;
    }
    
    .fa-check {color:green}
    .fa-xmark {color:maroon}
    
    .login .form input {
        padding:8px;
        border-color:transparent;
        background-color:#f3f3f3;
        width:90%;
        margin:4px;
        outline: 0px;
    }
</style>
<script src="{{system.context}}/static/js/studio.js"></script>
<div class="studio-pane">

  
    <div class="studio">
        <div class=" avatar-frame">
            <!-- Image goes here -->
            <div class="border-right"><img id="image"/></div>
            <div class="button">
                <div class=" border-round border" onclick="_open('login')">
                  <div class="active bold">
                    <i class="fa-solid fa-floppy-disk"></i>
                    Save & Continue
                  </div>
                </div>
            </div>
        </div>
        <div class="">
        
            {%set _params = routes['api/studio/_parameters']() %}
            {%set sections = _params.keys() %}
            <div class="studio-menu">
                {%for _name in sections %}
                    <div class="active" onclick="_open('{{_name|safe}}')">{{_name}}</div>
                {%endfor%}
                <div class="active" onclick="_reset()"><i class="fa fa-xmark"></i></div>
            </div>
            
            <p>
                <div id="section-label" class="large-text" align="left" style="font-weight:bold; text-transform:capitalize"></div>
            </p>
            {%for _key in _params %}
                
                {%set _iparams = _params[_key] %}
                <div class="">
                    
                    <div class="{{_key}} section border border-round">
                        {%for _name in _iparams%}
                        
                            <div class="choice">
                                <div class="label">{{_name|safe}}</div>
                                {%set values = _iparams[_name]['values'] %}
                                <div class="selection">
                                    <select class="selected_item" name="{{_iparams[_name]['variable']}}" onchange="_build()">
                                        {%for _item in values %}
                                            <option value={{_item.value|int}}>{{_item.name}}</option>
                                        {%endfor%}
                                    </select>
                                </div>
                                
                            </div>
                        
                        {%endfor%}
                    </div>
                    {% if loop.index == 3 %}
                        <script>
                            // _open('{{_key|safe}}')
                            // _build()
                            _reset()
                        </script>
                    {%endif%}
                </div>
            {%endfor%}
            <!-- Login Form-->
            <div class="login section border-round border">
                <p>
                    <div align="left">
                        <ul>
                            <li>Cancel to make changes</li>
                        <li>Continue to the experiment</li>
                        </ul>
                    </div>
                </p>
                <div class="form">
                    <input type="text" id="alias" placeholder="Name/Alias"/>
                    <input type="text" id="email" placeholder="[Email]"/>
                </div>
                <div style="margin-left:3%; margin-right:3%;margin-top:2%; margin-bottom:2%; display:grid; grid-template-columns:auto auto; gap:10px;">
                    <div class="border-round border">
                       <div class="active bold" onclick="_open('basic')">
                        <i class="fa-solid fa-xmark"></i>
                        Cancel
                       </div>
                    </div>
                    <div class="border-round border">
                       <div class="active bold" onclick="_save()">
                        <i class="fa-solid fa-check"></i>
                        Continue
                       </div>
                    </div>
                </div>
            </div>
            <!-- End of Login Form-->
        </div>
       
    </div>
</div>