embed.html.erb

<div>

    <div class="simulation" id="simulation" style="height:100%;width:100%">

        <div id="tabsBar" class="noSelect pointerCursor" style="position: absolute; left: 0; top: 0; z-index: 4">
          <!-- <div> Circuits: </div> -->
        </div>
        <div id="code-window" class='code-window-embed'><textarea id="codeTextArea"></textarea></div>
        <% if @project&.assignment_id.present? && @project&.assignment.elements_restricted? %>
          <div id="restrictedElementsDiv" class="alert alert-danger">
            <div> <span style="font-style: italic"> Restricted elements used: </span> <span id="restrictedElementsDiv--list"> </span></div>
          </div>
        <% end %>
        <div id="MessageDiv">
        </div>

        <div class="canvasArea" id="canvasArea" style="height:100%;width:100%">
            <canvas id="backgroundArea" style="position: absolute; left: 0; top: 0; z-index: 0"></canvas>
            <canvas id="simulationArea" style="position: absolute; left: 0; top: 0; z-index: 1; width:100%;height:100%"></canvas>
        </div>
      <div id="elementName">
      </div>
      <div class="zoom-wrapper" id="zoom-in-out-embed">
        <div class="noSelect">
          <button type="button" id='zoom-in-embed' class="" style="font-size: 25px;">
            <span class="fa fa-search-plus" aria-hidden="true" title="Zoom In"></span>
          </button>
        </div>
        <div class="noSelect">
          <button type="button" id='zoom-out-embed' class="" style="font-size: 25px;">
            <span class="fa fa-search-minus" aria-hidden="true" title="Zoom Out"></span>
          </button>
        </div>
      </div>

      <div style="position:absolute; right:10px; top:25px; z-index:100" class="clockPropertyHeader noSelect">
        <div id="clockProperty">
        </div>
      </div>
      <div class="sk-folding-cube loadingIcon" style="display:inline-block;position:absolute; right:50%; bottom:50%; z-index:100">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
      </div>

      <% if @external_embed  == true %>
        <div id="bottom_right_circuit_heading">
          <h5><%= @project.name %></h5>
        </div>
        <div id="bottom_right_watermark">
          <a style="text-decoration:none;
              position: fixed;
              bottom: 0px;
              right: 25px;
              padding: 8px;
              font-family: Verdana;
              font-size: 12px;
              color: grey;
              z-index: 2;"
             href="/users/<%= @author %>/projects/<%= @logix_project_id %>"
             target="_blank">
            Made With CircuitVerse
          </a>
        </div>
      <% end %>
    </div>
</div>

<script type="text/javascript">
    __logix_project_id = "<%= @logix_project_id %>";
        embed=true;
        <% if @project&.assignment_id.present? %>
          restrictedElements = JSON.parse('<%= raw @project&.assignment&.clean_restricted_elements %>');
        <% else %>
          restrictedElements = [];
        <% end %>

 </script>

</body>

</html>