API tools faq
paste
Advertisement
Talilo

vscode v.7.0.html

Talilo
Feb 21st, 2023 (edited)
859
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>VS Code - IDE Online</title>
  8.     <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.iconscout.com/icon/free/png-256/vscode-4069952-3365471.png">
  9.     <link rel="stylesheet" href="style.css">
  10.     <link rel="preconnect" href="https://fonts.googleapis.com">
  11.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12.     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
  13.  
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
  15.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-beautify.js"></script>
  16.     <style>
  17.         body {font-family: 'Roboto', sans-serif;
  18.             background-color:#323050;
  19.             color: white;
  20.         }
  21.        
  22.         #editor {
  23.           position: relative;
  24.           width: 93vw;
  25.           height: 85vh;
  26.         }
  27.  
  28.         #exportar {
  29.         border: solid gray 2px;
  30.         border-radius: 5px;
  31.         position:absolute;
  32.         width: 800px;
  33.         height: 255px;
  34.         top: 70px;
  35.         left: 450px;
  36.         background-color: #f1f0f2;
  37.         padding: 20px;
  38.        
  39.         }
  40.        
  41.         #fecha_exportar {
  42.         display:none}
  43.        
  44.         .nome_baixar_arq{
  45.         display: block;
  46.         color: #0d0d0d;
  47.         font-size: 20px;
  48.         cursor: pointer;
  49.         }
  50.         .nome_baixar_arquivo{
  51.          display: block;
  52.         color: #0d0d0d;
  53.         font-size: 20px;
  54.        
  55.        
  56.         }
  57.         .head{
  58.         display:flex;
  59.         justify-content: space-between;
  60.         align-items: center;
  61.         }
  62.        
  63.         .campo_nome_u{
  64.         display:flex;
  65.         justify-content: start;
  66.         align-items: center;
  67.         }
  68.         #nome_arquivo{
  69.         width: 40vw;
  70.         height: 25px;
  71.         padding: 5px;
  72.         margin: 10px;
  73.         }
  74.        
  75.         #salvar_final{
  76.         background-color:#007fff;
  77.         font-size: 18px;
  78.         color: white;
  79.         border: none;
  80.         cursor: pointer;
  81.         border-radius: 2px;
  82.         }
  83.        
  84.         #contener{
  85.         display:flex;
  86.         padding: 5px;
  87.         }
  88.        
  89.         #menu_vscode{
  90.         display:flex;
  91.         flex-direction: column;
  92.         max-height: 94vh;
  93.         justify-content: space-between;
  94.         align-items: center;
  95.        
  96.         }
  97.         .logo > i {
  98.         font-size: 30px;
  99.         padding:5px;
  100.         color: gray;
  101.         trasition: 0.5;
  102.         margin:10px 15px;
  103.         }
  104.        
  105.         .logo > img{
  106.         width: 25px;
  107.         margin: 20px 15px;
  108.         }
  109.        
  110.         .logo > i:hover{
  111.         color: #4B92db;
  112.         cursor: pointer;
  113.         opacity: 1.0;
  114.         }
  115.         .barra_menus > ul{
  116.         display:flex;
  117.         list-style-type: none;
  118.         padding: 0 0px;
  119.         cursor: pointer;
  120.         }
  121.        
  122.         .barra_menus > ul > li{
  123.         padding: 0 20px;
  124.         font-size: 25px:
  125.         font-weight:300;
  126.         }
  127.        
  128.         li{font-size: 20px;
  129.         font-weight:300;
  130.         }
  131.        
  132.         .barra_menus > ul > li:hover{
  133.         color: #4B92db;
  134.         font-size: 20px;
  135.         font-weight:300;
  136.         opacity: 1.0;
  137.         }
  138.        
  139.         .footer{
  140.         padding: 0 20px;
  141.         }
  142.        
  143.         .footer > button, #homebtn2{
  144.         background-color:#007fff;
  145.         font-size: 18px;
  146.         color: white;
  147.         border: none;
  148.         cursor: pointer;
  149.         border-radius: 0px;
  150.         margin: 5px;
  151.         }
  152.        
  153.         .footer > button > a, #homebtn2{
  154.         text-decoration: none;
  155.         color: #fff;
  156.         cursor: pointer;
  157.         }
  158.         .abrir{
  159.         display: inline;
  160.         }
  161.        
  162.         .btn_hover:hover{
  163.         opacity: 0.5;
  164.         }
  165.        
  166.     </style>
  167. </head>
  168. <body>
  169.         <div id="contener">
  170.             <!--MENU LATERAL VS CODE-->
  171.             <div id="menu_vscode">
  172.                 <div>
  173.                         <div class="logo">
  174.                         <img src="https://cdn.iconscout.com/icon/free/png-256/vscode-4069952-3365471.png">
  175.                         </div>
  176.                         <div class="logo">
  177.                         <i class="fas fa-copy"></i>
  178.                     </div>
  179.                         <div class="logo">
  180.                         <i class="fas fa-magnifying-glass"></i>
  181.                         </div>
  182.                     <div class="logo">
  183.                     <i class="fas fa-regular fa-code-fork"></i>
  184.                     </div>
  185.                     <div class="logo">
  186.                     <i class="fas fa-regular fa-bug"></i>
  187.                     </div>
  188.                    
  189.                     <div class="logo">
  190.                     <i class="fas fa-brands fa-github"></i>
  191.                     </div>
  192.                 </div>
  193.                 <div>
  194.                     <div class="logo">
  195.                     <i class="fas fa-regular fa-user-large"></i>
  196.                     </div>
  197.                     <div class="logo" >
  198.                     <i class="fas fa-regular fa-gear"></i>
  199.                     </div>
  200.                 </div>
  201.         </div>
  202.         <!--header e textarea do codigo-->
  203.         <div id="editor_full">
  204.     <div class="barra_menus">
  205.         <ul>
  206.             <li id="salvar_exporte">Salvar</li>
  207.             <li>Exportar</li>
  208.             <li>Editar</li>
  209.             <li>Terminal</li>
  210.             <li>Ajuda</li>
  211.         </ul>
  212.         </div>
  213.     <div id="editor">
  214.    
  215.     </div>
  216.     <div class="footer">
  217.       <button class="btn_hover"><a href="../">Voltar</a></button>
  218.       <input class="btn_hover" type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
  219.       <button class="btn_hover" id="formatar" >Formatar</button>
  220.       <button class="btn_hover"  id="button">salvar</button>
  221.       <label class="abrir">Abrir:</label>
  222.       <input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
  223.         <label class="abrir">Tema:</label>
  224.        <select id="menu_tema" onChange="mudaTemas()">
  225.        <option value="dracula">Dracula</option>
  226.         <option value="tomorrow_night">Tema Dark</option>
  227.         <option value="github">Tema claro</option>
  228.         <option value="vibrant_ink">Dark City</option>
  229.         <option value="terminal">Terminal</option>
  230.   </select>
  231.    <label class="abrir">Linguagem:</label>
  232.    <select id="menu_linguage" onChange="mudaLinguagem()">
  233.        <option value="javascript">Javascrip</option>
  234.         <option value="css">CSS</option>
  235.         <option value="html">html</option>
  236.         <option value="c">C</option>
  237.         </select>
  238.         <!--Selecionar tamanho da fonte-->
  239.       <label class="abrir">Fonte:</label>
  240.    <select id="menu_fonte" onChange="mudaFonte()">
  241.        <option value="18px">18px</option>
  242.         <option value="20px">20px</option>
  243.         <option value="22px">22px</option>
  244.         <option value="24px">24px</option>
  245.         </select>
  246.               <label class="abrir">Fundo:</label>
  247.    <select id="menu_fundo" onChange="mudaFundo()">
  248.         <option value="#282A36">LightViolet</option>
  249.        <option value="#333333">Cinza</option>
  250.         <option value="#323050">NightViolet</option>
  251.         <option value="#1E1E1E">Black</option>
  252.         </select>
  253.     </div>
  254.     </div>
  255.    
  256.     </div>
  257.  
  258.     <!-- conteudo para exportar e salva o codigo -->  
  259.       <div id="fecha_exportar">
  260.       <div class="head">   
  261.       <div class="nome_baixar_arquivo "><i class="fas fa-floppy-disk"></i> Salvar</div>
  262.       <div id="xxx" class="nome_baixar_arq btn_hover"><i class="fas fa-square-xmark"></i>
  263.        </div>
  264.        </div>
  265.        <div class="campo_nome_u">
  266.       <p class="nome_baixar_arquivo">Nome do Arquivo:
  267.        </p>
  268.       <input id="nome_arquivo" value="index.html" type="text" alt="Informe o nome do arquivo e o tipo, Ex.: index.html" required></input>
  269.       </div>
  270.       <p class="nome_baixar_arquivo">Informe o nome do arquivo e o tipo.<b>Ex.: index.html, index.css ou index.js</b></p>
  271.       <button  class="btn_hover" id="salvar_final">Salvar</button>
  272.       </div>
  273.       <!-- Emplementar lib de personalização do alert  :
  274.         SweetAlert makes popup messages easy and pretty.
  275.         https://sweetalert.js.org/guides/ -->
  276. </body>
  277. <script>
  278. //INFORMAÇÕES:
  279. //Link Ace Editor para emplementar no projeto:
  280. //https://ace.c9.io/
  281. //Temas para editor:
  282. //https://gist.github.com/RyanNutt/cb8d60997d97905f0b2aea6c3b5c8ee0
  283. //https://pt.stackoverflow.com/questions/418443/textarea-semelhante-a-um-editor-de-texto-ex-  
  284.  
  285. //Editor de texto Ace Edito for VS Code
  286.  
  287. var editor = ace.edit("editor");
  288. //MUDAR TAMANHO DA FONTE
  289.     document.getElementById('editor').style.fontSize = '18px';
  290.    
  291.     function mudaFonte() {
  292.     var menu = document.getElementById("menu_fonte");
  293.     var fonte = menu.options[menu.selectedIndex].value;
  294.     var linkFonte = fonte;
  295.     return document.getElementById('editor').style.fontSize = linkFonte;
  296.     }
  297.     mudaFonte();
  298.    
  299.     editor.setTheme("ace/theme/dracula");
  300.    
  301.  //MUDAR TEMAS  
  302.     editor.setTheme("ace/theme/dracula");
  303.    
  304.     function mudaTemas() {
  305.     var menu = document.getElementById("menu_tema");
  306.     var cor = menu.options[menu.selectedIndex].value;
  307.     var link = `ace/theme/${cor}`;
  308.     return editor.setTheme(link);
  309.     console.log(link)
  310.     }
  311.     mudaTemas();
  312.     //MUDAR FUNDO
  313.     function mudaFundo() {
  314.     var menu = document.getElementById("menu_fundo");
  315.     var fundoCor = menu.options[menu.selectedIndex].value;
  316.     console.log(fundoCor);
  317.     document.body.style.backgroundColor = fundoCor;
  318.    
  319.     }
  320.      mudaFundo();
  321.  //MUDAR LIGUAGEM
  322.     editor.session.setMode("ace/mode/javascript");
  323.     function mudaLinguagem() {
  324.     var menu = document.getElementById("menu_linguage");
  325.     var lingua = menu.options[menu.selectedIndex].value;
  326.     var linkLing = `ace/mode/${lingua}`;
  327.     return editor.session.setMode(linkLing);
  328.     console.log(linkLing)
  329.     }
  330.     mudaLinguagem();
  331.    
  332.     editor.session.setTabSize(4);
  333.    
  334.     editor.setOptions({
  335.       autoScrollEditorIntoView: true,
  336.       copyWithEmptySelection: true,
  337.     });
  338.    
  339.     setTimeout(() => {
  340.       var beautify = ace.require("ace/ext/beautify"); // get reference to extension
  341.       beautify.beautify(editor.session);
  342.     }, 500);
  343.    
  344.     //beautify.beautify(editor.session);
  345.     document.getElementById("formatar").onclick = function() {
  346.       var beautify = ace.require("ace/ext/beautify"); // get reference to extension
  347.       beautify.beautify(editor.session);
  348.      
  349.     }
  350.    
  351.       //Salvar arquivo
  352.       function download(content, fileName, contentType) {
  353.           var a = document.createElement("a");
  354.           var file = new Blob([content], {type: contentType + encodeURIComponent(content)});
  355.           a.href = URL.createObjectURL(file);
  356.           a.download = fileName;
  357.           a.click();
  358.         }
  359.        
  360.         //Nome do arquivo na entrada
  361.         //var nomeFile = document.getElementById("nome_arquivo").value;
  362.         //Função para biaxar o arquivo
  363.         var textoSave = editor.getValue();
  364.        
  365.         var button = document.getElementById("salvar_final");
  366.  
  367.     button.addEventListener("click", function() {
  368.     var textoSave = editor.getValue();
  369.     if(document.getElementById("nome_arquivo").value !== ""){
  370.       if( confirm("Deseja salvar o Codigo?")){
  371.       var content =  textoSave;
  372.       var fileName = document.getElementById("nome_arquivo").value;
  373.       var contentType = "text/html";
  374.       download(content, fileName, contentType);
  375.     }else{alert("Cancelado!")}
  376.     }else{alert("Informe o nome do arquivo e o tipo, Ex.: index.html")}});
  377.    
  378.     // Ativar pagina oculta para salvar arquivo
  379.  
  380.     var buttonFecha = document.getElementById("xxx");
  381.    
  382.    
  383.     buttonFecha.addEventListener("click", function(){
  384.     console.log("cliclou");
  385.     if(confirm("deseja sair sem salvar?")){var telaExporte = document.getElementById("exportar");
  386.     telaExporte.setAttribute("id", "fecha_exportar");
  387.    
  388.     }})
  389.    
  390.     var buttonSalvaEx = document.getElementById("salvar_exporte");
  391.    
  392.     buttonSalvaEx.addEventListener("click", function(){
  393.     console.log("cliclou");
  394.     var telaSalvaExporte = document.getElementById("fecha_exportar");
  395.     telaSalvaExporte.setAttribute("id", "exportar");
  396.    
  397.     })
  398.  //Open file in Ace editor
  399.  //https://stackoverflow.com/questions/59004560/how-can-i-open-a-file-into-ace-text-editor
  400.  
  401.   function openCode(files) {
  402.                 var file = files[0]
  403.                 if (!file) return;
  404.                 var modelist = ace.require("ace/ext/modelist")
  405.                 var modeName = modelist.getModeForPath(file.name).mode
  406.                 editor.session.setMode(modeName)
  407.                 reader = new FileReader();
  408.                 reader.onload = function() {
  409.                     editor.session.setValue(reader.result)
  410.                 }  
  411.                 reader.readAsText(file)
  412.             }
  413.  
  414.  
  415.     </script>
  416.     <script src="https://kit.fontawesome.com/32a7e6bf5d.js" crossorigin="anonymous"></script>
  417.     <script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
  418.         <script>
  419. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!