index.html

<!DOCTYPE html>
<html>

<head>
   <title>Python Bot Playground</title>
   <link rel="stylesheet" href="styles/style.css">
   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
   <script type="text/python3" src="app.py"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.7.5/brython.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.7.5/brython_stdlib.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js" charset="utf-8"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-language_tools.js" charset="utf-8"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/theme-monokai.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js"></script>
   <script>
      // Workaround to allow brython to handle AttributeErrors correctly
      window.$raise = () => null;
   </script>
   <script>
      function configure() {
         brython({debug:1})
         
         document.querySelector("#export_button")
            .addEventListener("click", () => { 
               saveAs(
                  new Blob([ window.ace.edit("editor").getValue() ]),
                  "bot.py"
               ) 
            })

         document.querySelector("#import")
            .addEventListener("change", function(e) { 
               const file = e.target.files[0];
               if (!file) return;
               
               const reader = new FileReader();
               reader.onload = e => window.ace.edit("editor").setValue(e.target.result);                  
               reader.readAsText(file);
            })
      }
   </script>
</head>

<body onload="configure()">
   <div class="app">
      <div class="editor-panel">
         <div id="editor">
            <div class="loader-container">
               <div class="loader">
               </div>
            </div>
         </div>
         <div class="button-container">
            <div>
               <button id="import_button" class="option-button">
                  <label for="import">
                     <span>Import</span>
                     <i class="fa fa-upload"></i>
                  </label>
                  <input id="import" type="file" onchange="onImportSelected(this)"/>
               </button>
            </div>
            <div>
               <button id="export_button" class="option-button" onclick="onExportClick()">
                  <span>Export</span>
                  <i class="fa fa-download"></i>
               </button>
            </div>
            <div>
               <button id="reset_button" class="option-button">
                  <span>Reset</span>
                  <i class="fa fa-refresh"></i>
               </button>
            </div>
            <div>
               <button id="execute_button" class="option-button">
                  <span>Run</span>
                  <i class="fa fa-play"></i>
               </button>
            </div>
         </div>
      </div>
      <div class="console-panel">
         <textarea class="console" id="console" readonly autocomplete="off" cols="60"></textarea>
         <div class="docs-links">
            <a href="docs.html#cheatsheet.md">Cheat Sheet</a>
            <a href="docs.html#examples.md">Examples</a>
         </div>
      </div>
      <div class="messenger-panel">
         <div class="messenger-panel-inner">
            <div class="contact-profile">
               <img class="contact-profile-image" src="assets/bot.gif" alt="" />
               <p class="bot-name" id="bot-name">Bot</p>
            </div>
            <ul class="messages-list" id="messages-list">
               <li class="replies">
                  <div class="message-wrapper"><img src="assets/bot.gif" class="profile-image">
                     <div class="message-text-wrapper">
                        <p class="message-text">No bot is registered. Press Run to register a bot.</p>
                     </div>
                  </div>
               </li>
            </ul>
            <div id="message-input-wrapper" class="message-input-wrapper">
               <input id="message-input" class="message-input" type="text" placeholder="Talk to your bot..." />
               <button id="send-message" class="send-message" class="submit">
                  <img src="assets/send.svg"></img>
               </button>
            </div>
         </div>
      </div>
   </div>
</body>

</html>