autocode
Version:
the ultimate developer platform
488 lines (476 loc) • 21.8 kB
HTML
<html>
<head>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" type="text/css" />
<link href="components/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css" />
<link href="components/CodeMirror/addon/merge/merge.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="components/google-diff-match-patch-js/diff_match_patch.js"></script>
<script src="components/CodeMirror/lib/codemirror.js"></script>
<script src="components/CodeMirror/addon/merge/merge.js"></script>
<script src="components/CodeMirror/addon/mode/simple.js"></script>
<script src="components/CodeMirror/mode/clike/clike.js"></script>
<script src="components/CodeMirror/mode/coffeescript/coffeescript.js"></script>
<script src="components/CodeMirror/mode/css/css.js"></script>
<script src="components/CodeMirror/mode/django/django.js"></script>
<script src="components/CodeMirror/mode/dockerfile/dockerfile.js"></script>
<script src="components/CodeMirror/mode/erlang/erlang.js"></script>
<script src="components/CodeMirror/mode/go/go.js"></script>
<script src="components/CodeMirror/mode/haml/haml.js"></script>
<script src="components/CodeMirror/mode/handlebars/handlebars.js"></script>
<script src="components/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="components/CodeMirror/mode/javascript/javascript.js"></script>
<script src="components/CodeMirror/mode/markdown/markdown.js"></script>
<script src="components/CodeMirror/mode/nginx/nginx.js"></script>
<script src="components/CodeMirror/mode/perl/perl.js"></script>
<script src="components/CodeMirror/mode/php/php.js"></script>
<script src="components/CodeMirror/mode/puppet/puppet.js"></script>
<script src="components/CodeMirror/mode/python/python.js"></script>
<script src="components/CodeMirror/mode/ruby/ruby.js"></script>
<script src="components/CodeMirror/mode/rust/rust.js"></script>
<script src="components/CodeMirror/mode/sass/sass.js"></script>
<script src="components/CodeMirror/mode/sql/sql.js"></script>
<script src="components/CodeMirror/mode/swift/swift.js"></script>
<script src="components/CodeMirror/mode/xml/xml.js"></script>
<script src="components/CodeMirror/mode/yaml/yaml.js"></script>
<script src="components/formulator/src/formulator.js"></script>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/jquery-cookie/jquery.cookie.js"></script>
<script src="components/js-yaml/dist/js-yaml.min.js"></script>
<script src="components/marked/marked.min.js"></script>
<script src="components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
<script src="scripts/autocode.js"></script>
<title>Autocode</title>
</head>
<body>
<div id="loader">
<img class="icon" src="images/loader.svg" />
</div>
<div id="container">
<header>
<nav id="main">
<div id="menu">
<a data-hint="Login with GitHub" data-hint-min-top="62" id="user" onclick="autocode.action.toggleUser()">
<span class="icon user-icon"></span>
<span class="text"></span>
</a>
<a data-hint="Choose Project" data-hint-min-top="62" id="project" onclick="autocode.action.toggleMenu()">
<span class="icon project-icon"></span>
<span class="text"></span>
</a>
<a data-hint="Choose Target" data-hint-min-top="62" id="target-icon" onclick="autocode.action.toggleTarget()">
<span class="icon target-icon"></span>
<span class="text">Starting Test Server...</span>
</a>
<span data-hint="Offline" data-hint-min-top="62" id="status-icon"></span>
</div>
<div id="usage">
<div id="usage-off">
<a data-hint="Loading Test Server" data-hint-min-top="62" id="loader-icon" onclick="autocode.action.share()">
<span class="icon loader-icon loading"></span>
</a>
<a class="icon share-icon" data-hint="Share Project" data-hint-min-top="62" id="share-icon" onclick="autocode.action.share()"></a>
</div>
<div id="usage-on">
<a class="icon more-icon" data-hint="More" data-hint-min-top="62" id="more-icon" onclick="autocode.action.toggleMore()"></a>
<a class="icon share-icon" data-hint="Share Project" data-hint-min-top="62" id="share-icon" onclick="autocode.action.share()"></a>
<a class="icon generate-icon" data-hint="Update Project" data-hint-min-top="62" id="generate-icon" onclick="autocode.action.update()"></a>
<a class="icon build-icon" data-hint="Build Project" data-hint-min-top="62" id="build-icon" onclick="autocode.action.build()"></a>
<a class="icon run-icon" data-hint="Run Project" data-hint-min-top="62" id="run-icon" onclick="autocode.action.run()"></a>
</div>
</div>
</nav>
<nav class="app" id="tabs">
<a class="tab" href="overview" id="overview-tab">Globals</a>
<a class="tab" href="imports" id="imports-tab">Imports</a>
<!--
<a class="tab" href="exports" id="exports-tab">Exports</a>
<a class="tab" href="outputs" id="outputs-tab">Outputs</a>
<a class="tab" href="scripts" id="scripts-tab">Scripts</a>
-->
<a class="tab" href="config" id="config-tab">Config</a>
<a class="tab" href="output" id="output-tab">Files</a>
</nav>
</header>
<div id="init">
<div class="title">
Initialize Autocode
</div>
<div>
Autocode has not been initialized for this repo. Would you like to do that now?
</div>
<a class="button" onclick="autocode.action.loadProject()">No, Load Another Project</a> <a class="button" onclick="initAutocode()">Yes, Initialize Autocode</a>
</div>
<div id="welcome">
<div class="options">
<a class="option" id="new-option" onclick="autocode.action.newProject()">
<span class="icon add-icon"></span>
<span class="text">New Project</span>
</a>
<a class="option" id="load-option" onclick="autocode.action.loadProject()">
<span class="icon load-icon"></span>
<span class="text">Load Project</span>
</a>
<a class="option" id="login-option" onclick="autocode.action.login()">
<span class="icon github-icon"></span>
<span class="text">Login with GitHub</span>
</a>
<a class="option" href="tour" id="tour-option">
<span class="icon tour"></span>
<span class="text">Take a Tour</span>
</a>
</div>
<div class="recent">
Recent: <span class="projects"></span>
</div>
</div>
<div class="app">
<div id="content">
<!--
<div class="content" id="tour-content">
<img height="250" class="splash" src="images/mascot.svg" />
<div>
Welcome to Autocode, an open source code automation platform that generates code for frontends, backends and everything in between.
</div>
</div>
-->
<div class="content" id="overview-content">
<aside class="content-left column">
<div class="table">
<a class="file subtab" href="overview/general" id="overview-general-subtab">
<span class="image">
<span class="icon general-icon"></span>
</span>
<span class="info">
<span class="name">Project</span>
<span class="generator">Name, description and url</span>
</span>
</a>
<a class="file subtab" href="overview/author" id="overview-author-subtab">
<span class="image">
<span class="icon author-icon"></span>
</span>
<span class="info">
<span class="name">Author</span>
<span class="generator">Name, email, url and copyright</span>
</span>
</a>
</div>
</aside>
<section class="content-center column">
<div class="subcontent" id="overview-author-content">
<div class="field" id="overview-author-name">
<label>
<span class="text">Name</span>
<span class="icon info-icon" data-hint="Your full name."></span>
</label>
<div class="value" onclick="autocode.action.editAuthorName()"></div>
</div>
<div class="field" id="overview-author-email">
<label>
<span class="text">Email</span>
<span class="icon info-icon" data-hint="Your email address."></span>
</label>
<div class="value" onclick="autocode.action.editAuthorEmail()"></div>
</div>
<div class="field" id="overview-author-url">
<label>
<span class="text">URL</span>
<span class="icon info-icon" data-hint="Your website URL."></span>
</label>
<div class="value" onclick="autocode.action.editAuthorURL()"></div>
</div>
</div>
<div class="subcontent" id="overview-general-content">
<form>
<div class="field" id="overview-general-name">
<label>
<span class="text">Name</span>
<span class="icon info-icon" data-hint="A name for your project."></span>
</label>
<div class="value" onclick="autocode.action.editName()"></div>
</div>
<div class="field" id="overview-general-version">
<label>
<span class="text">Version</span>
<span class="icon info-icon" data-hint="A version for your project."></span>
</label>
<div class="value" onclick="autocode.action.editVersion()"></div>
</div>
<div class="field" id="overview-general-description">
<label>
<span class="text">Description</span>
<span class="icon info-icon" data-hint="A description for your project."></span>
</label>
<div class="value" onclick="autocode.action.editDescription()"></div>
</div>
<div class="field" id="overview-general-url">
<label>
<span class="text">URL</span>
<span class="icon info-icon" data-hint="A URL for your project."></span>
</label>
<div class="value" onclick="autocode.action.editURL()"></div>
</div>
<div class="field" id="overview-general-copyright">
<label>
<span class="text">Copyright</span>
<span class="icon info-icon" data-hint="Your copyright."></span>
</label>
<div class="value" onclick="autocode.action.editProjectCopyright()"></div>
</div>
</form>
</div>
</section>
</div>
<div class="content" id="imports-content">
<div id="imports-content-container">
<aside class="column content-left">
<div class="search">
<input autocomplete="off" placeholder="Add a Module to Your Project" id="imports-search" type="text" />
</div>
<div class="table"></div>
</aside>
<section class="column content-center">
<div id="imports-content-readme"></div>
</section>
<aside class="column content-right">
<div class="field" id="imports-name">
<label>
<span class="text">Name</span>
<span class="icon info-icon" data-hint="The name of the imported module."></span>
</label>
<div class="value" onclick="autocode.action.editImportName()"></div>
</div>
<div class="field" id="imports-version">
<label>
<span class="text">Version</span>
<span class="icon info-icon" data-hint="The version of the module. Supports Semantic Versioning."></span>
</label>
<div class="value" onclick="autocode.action.editImportVersion()"></div>
</div>
<a class="button" onclick="autocode.action.removeImport()">
Remove Import
</a>
</aside>
</div>
</div>
<div class="content" id="exports-content">
<div id="exports-init">
<div class="title">
Exports
</div>
<div>
Exports give other projects/modules extended functionality.
</div>
<button onclick="autocode.action.addExport()">Create Export</button>
</div>
<div id="exports-content-container">
<aside id="content-left">
<div class="table">
<a class="file" href="#">
<span class="image">
<span class="icon add-icon"></span>
</span>
<span class="info">
<span class="name">Create Export</span>
</span>
</a>
<a class="file" href="#">
<span class="image">
<span class="icon schema-icon"></span>
</span>
<span class="info">
<span class="name">ConfigSchema</span>
<span class="generator">Schema</span>
</span>
</a>
</div>
</aside>
<section class="content-center">
<form>
<textarea></textarea>
</form>
</section>
<aside class="content-right">
<form>
<div class="type-field">
<label>Type</label>
<input name="type" spellcheck="false" type="text" />
</div>
<div class="name-field">
<label>Name</label>
<input name="name" spellcheck="false" type="text" />
</div>
<div class="description-field">
<label>Description</label>
<input name="description" spellcheck="false" type="text" />
</div>
<div class="engine-field">
<label>Engine</label>
<input name="engine" spellcheck="false" type="text" />
</div>
<div class="filename-field">
<label>Filename</label>
<input name="filename" spellcheck="false" type="text" />
</div>
<div class="format-field">
<label>Format</label>
<input name="format" spellcheck="false" type="text" />
</div>
<div class="schema-field">
<label>Schema</label>
<input name="schema" spellcheck="false" type="text" />
</div>
</form>
</aside>
</div>
</div>
<div class="content" id="output-content">
<div id="output-init">
<div class="title">
Output
</div>
<div>
Add imports and outputs to your Autocode configuration and click the button below to generate code for your project.
</div>
<a class="button" onclick="autocode.action.build()">Generate Code</a>
</div>
<div id="output-content-container">
<aside class="column content-left">
<div class="table"></div>
</aside>
<div class="column content" id="output-content">
<textarea name="output"></textarea>
</div>
</div>
</div>
<div class="content" id="outputs-content">
<div id="outputs-init">
<div class="title">
Outputs
</div>
<div>
Outputs are generated by Generators and Engines.
</div>
<button onclick="autocode.action.addOutput()">Add Output</button>
</div>
<div id="outputs-content-container">
<aside class="content-left">
<div class="table">
<a class="file" onclick="autocode.action.addOutput()">
<span class="image">
<span class="icon add-icon"></span>
</span>
<span class="info">
<span class="name">Add Output</span>
</span>
</a>
</div>
</aside>
<section class="content-center">
<form>
<button onclick="autocode.action.addProperty()" style="float: right; margin-top: 10px">
Add Property
</button>
<div class="title">Spec</div>
<a class="checkbox checked" href="outputs/hide/toggle">
<span class="text">Hide Unused Properties</span>
<span class="icon"></span>
</a>
<div class="schema"></div>
</form>
</section>
<aside class="content-right">
<form>
<label>Generator</label>
<input name="generator" placeholder="None" spellcheck="false" type="text" />
<label>Filename</label>
<input name="filename" spellcheck="false" type="text" />
<label>Path</label>
<input name="path" placeholder="Project Root" spellcheck="false" type="text" />
<label>Delete Output</label>
<a class="button" href="outputs/delete">Delete</a>
</form>
</aside>
</div>
</div>
<div class="content" id="scripts-content">
<div id="scripts-init">
<div class="title">
Scripts
</div>
<div>
Run Scripts for BUILD, RUN and STOP events.
</div>
<button onclick="autocode.action.addScript()">Add Script</button>
</div>
<div id="scripts-content-container">
<aside class="content-left">
<div class="table">
<a class="file" onclick="autocode.action.addScript()">
<span class="image">
<span class="icon add-icon"></span>
</span>
<span class="info">
<span class="name">Add Script</span>
</span>
</a>
</div>
</aside>
<section class="content-center">
<button onclick="autocode.action.addCommand()" style="float: right; margin-top: 10px">
Add Command
</button>
<div class="title">Commands</div>
<div class="commands"></div>
</section>
</div>
</div>
<div class="content" id="config-content">
<textarea name="config"></textarea>
</div>
</div>
</div>
</div>
<footer>
<nav id="support">
<a href="https://crystal.readme.io" target="_blank">Docs</a>
<a href="https://github.com/crystal/autocode/issues" target="_blank">Issues</a>
<a href="https://autocode.run/contact" target="_blank">Contact</a>
</nav>
<nav>
<a class="icon gitter-icon" href="https://gitter.im/crystal/autocode" target="_blank"></a>
<a class="icon github-icon" href="https://github.com/crystal/autocode" target="_blank"></a>
<a class="icon twitter-icon" href="https://twitter.com/crystalcodegen" target="_blank"></a>
<a class="icon facebook-icon" href="https://facebook.com/crystalcodegen" target="_blank"></a>
</nav>
</footer>
<div id="console">
<div class="title">
<div class="left">
<span class="icon console-icon white"></span>
<span class="text">Console</span>
</div>
<div class="right">
<a class="icon pin-icon active" data-hint="Pin to Bottom" id="pin-icon" onclick="autocode.action.togglePin()"></a>
<a class="icon delete-icon" data-hint="Clear Console" onclick="autocode.action.clearConsole()"></a>
<a class="icon close-icon white" data-hint="Close Console" onclick="autocode.action.toggleConsole()"></a>
</div>
</div>
<div class="content"></div>
</div>
<script>
if (!location.hostname.match(/alpha/)) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61767684-5', 'auto');
ga('send', 'pageview');
}
</script>
</body>
</html>