Online IDE Design with 'ambiance' 'ace.c9.io' 'c_cpp'

<html> <head> <title> Float Step </title> <style> body{ font-family: Arial; } #menuBar{ font-size: 14px; position: fixed; top: 0px; left: 0px; width: 100%; height: 29px; background: rgb(230, 230, 255); color: black; box-shadow: 0px 0px 3px 3px rgba(0,0,0, 0.2); } .menuBarItem{ float: left; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 5px; margin: 2px; //margin-top: 3px; //border-radius: 15px; border: 1px solid rgba(0,0,0,0); transition: background 0.2s, border 0.2s; } .menuBarItem:hover{ //border: 1px solid #f00; background: rgb(220, 220, 255); border-bottom: 3px solid rgb(180, 180, 255); //color: white; } .icon{ float:left; margin: 4px; } .writeArea{ font-size: 14px; //background: red; position: absolute; top: 80px; left: 20px; width: 70%; //right: 400px; height: auto; bottom: 0px; border: 3px solid rgb(230, 230, 255); box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1); font-size: 14px; padding: 6px; } </style> </head> <body> <div id="menuBar"> <div class="icon"><span style="font-size: 17px"> <span style="background: #aaf; color: black;">{ </span><span style="background: #ada; color: brown;"> }</span></span></div> <div class="menuBarItem">File</div> <div class="menuBarItem">Compile</div> <div class="menuBarItem">Options</div> <div class="menuBarItem">Help</div> </div> <div class="container"> <pre class="writeArea" autofocus id="editor"> #include <iostream> using namespace std; int main(){ return 0; }</pre> </div> <!--script src="js/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script--> <script src="https://ace.c9.io/build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/ambience"); editor.session.setMode("ace/mode/c_cpp"); document.getElementById('editor').style.fontSize='14px'; document.getElementById('editor').style.height='auto'; document.getElementById('editor').style.position='absolute'; document.getElementById('editor').style.bottom='0px'; </script> </body> </html>
A page with online IDE design by using ACE themed to ambiance for C/C++

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.