odoo/packs/odoo.v18/devs/kit_code/static/description/index.html

263 lines
10 KiB
HTML
Raw Normal View History

<section class="oe_container">
<div class="oe_row oe_spaced">
<div class="oe_span12">
<h2 class="text-center oe_slogan"
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; color: hsl(0, 0%, 13%);">
Odoo Code
</h2>
<div class="text-center " style="font-weight: bolder !important; margin-top: -20px; color:#6f6060;" >Third-Party</div>
<h3 class="oe_slogan" style="text-shadow: 1px 1px 2px rgb(40, 244, 88);color: #cd0909e0;">Help you build Odoo application code online!</h3>
</div>
</div>
</section>
<section class="oe_container">
<div class="oe_row oe_spaced">
<div class="oe_span12">
<h4 class="oe_slogan"><b>Features</b></h4>
<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 2rem 0;font-size: 1.5rem !important; ">
<ul >
<li class="fa fa-star " style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">View & Write Odoo code through web Code Editor in the same Odoo runtime environment;</span>
</li> <br><br>
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Hot reload, quickly and easily experiment, build UIs, add features, fix bugs & more;</span>
</li> <br><br>
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Locate the Templates Script source code quickly, save time & speed up development process;</span>
</li> <br><br>
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Write Odoo code anytime anywhere, free mind & happy coding! </span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- <section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_row_img oe_centered" align="center">
<img class="oe_demo oe_picture oe_screenshot" src="assets/frontend.gif"/>
</div>
</div>
</section> -->
<!-- Browse gif -->
<div class=" text-left">
<p class="oe_mt32">
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Browse Modules:</font>
</p>
</div>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_screenshot" align="center">
<img style="max-width: 80%" src="assets/code-browse.gif"/>
</div>
</div>
</section>
<div class="text-center">
<p class="oe_mt32" style="font-size: 120%;">
Launch Code Server, browse Odoo modules source code online.
</p>
</div>
<!-- Spy-Code gif -->
<div class=" text-left">
<p class="oe_mt32">
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Spy Element & Edit:</font>
</p>
</div>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_screenshot" align="center">
<img style="max-width: 80%" src="assets/spy-code.gif"/>
</div>
</div>
</section>
<div class="text-center">
<p class="oe_mt32" style="font-size: 120%;">
Insight into the Odoo web page structure, super easy locate the feature source code line, The Spy Element feature should install the <a href="https://apps.odoo.com/apps/modules/17.0/kit_spy">Odoo Spy</a> module.
</p>
</div>
<h4 class="oe_slogan"><b>Screenshots</b></h4>
<div class=" text-left">
<p class="oe_mt32">
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Home Space:</font>
</p>
</div>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_screenshot" align="center">
<img style="max-width: 80%" src="assets/screenshots/editor.png"/>
</div>
</div>
</section>
<div class=" text-left">
<p class="oe_mt32">
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Browse Modules:</font>
</p>
</div>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_screenshot" align="center">
<img style="max-width: 80%" src="assets/screenshots/browse.png"/>
</div>
</div>
</section>
<div class="text-center">
<p class="oe_mt32" style="font-size: 120%;">
All Odoo modules can be load in online code editor, write code, hot-reload frontend UIs, easily and quickly!
</p>
</div>
<!-- <section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_span6">
<div class="oe_row_img oe_centered" align="center">
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/backend-app-studio-1.png"/>
</div>
</div>
<div class="oe_span6">
<div class="oe_row_img oe_centered" align="center">
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/backend-app-studio-2.png"/>
</div>
</div>
</div>
</section> -->
<h4 class="oe_slogan"><b>Usage</b></h4>
<section class="oe_container text-left">
<div class="oe_row " >
<p class="oe_mt0" style="font-size: 120%;margin-left: 16px; margin-right: 16px; ">
&nbsp;&nbsp;&nbsp;&nbsp;Start Code Server from the Code Console page of this module, once start success, browser auto navigate to new window that address is :<span>
<a style="font-weight: bolder !important; color: #827d7d !important; cursor: pointer !important;" href="http://localhost:3030">http://localhost:3030/
</a>
</span>; The core features of code editor server was provide by the open source <span> <a style=" cursor: pointer !important;" href="https://github.com/ixkit/code-server">Code Server
</a> </span>
</p>
</div>
</div>
<div class="oe_row oe_spaced oe_mt0" style="text-align: center; width: 100%;">
<div>
<a href="https://github.com/ixkit/code-server"
target="_blank"
class="btn btn-block mb-2 deep_hover"
style="text-decoration: none; background-color: #413e3eaf; color: #FFF; border-radius: 4px;">
<i class="fa fa-github mr-2"></i>
<span style="margin-left: 6px;">CodeServer</span>
</a>
</div>
<div>
<a style="font-size: 120%; color: #827d7d; cursor: pointer !important;" href="https://github.com/ixkit/code-server">https://github.com/ixkit/code-server
</a>
</div>
</div>
<div class="oe_row oe_spaced oe_mt0">
<p class=" text-left" style="font-size: 120%;">
<font style="font-size: 100%;font-weight: bold !important;color: #6f6060;">Additional Step:</font> Manual install the Code Server
</p>
<div class="oe_span8" style="width: 100%; " >
<ul style="margin-left: -10px;" >
<li >
<p class="oe_mt8" style="font-size: 120%;">
Download the Code Server program from the Code Server<span> <a style=" cursor: pointer !important;" href="https://github.com/ixkit/code-server/releases">repository
</a> </span> or clone the source code and build the Code Sever binary package.
</p>
</li>
<li >
<p class="oe_mt8" style="font-size: 120%;">
Put the Code Sever binary package into the moudule directory './kit_code/vendors/',
</p>
<p class="oe_mt8" style="font-size: 120%;">
eg:<br>
mac platform :
it should be './kit_code/venders/code_server/code-server-macos'
<br>
windows:
it should be './kit_code/venders/code_server/code-server-win.exe'
</p>
</li>
</ul>
</div>
</div>
</section>
<div class="oe_row " style="margin-top: -20px;">
<div class="text-left">
<p class=" text-left" style="font-size: 120%;">
<font style="font-size: 100%;font-weight: bold !important;color: #6f6060;">Notice:</font>
</p>
<p class="oe_mt16 oe_mb16" style="font-size: 120%; ">
<i class="fa fa-exclamation-triangle" style="color: red" aria-hidden="true"></i> This module should only use for development phase! Production Environment is not recommend!
</p>
</div>
</div>
<div class="text-center">
<p class="oe_mb48 oe_mt32" style="font-size: 120%; color: #827d7d;">
Enjoy & Happy Coding!&nbsp;&nbsp;<i class="fa fa-smile-o" aria-hidden="true"></i>
</p>
</div>
<h4 class="oe_slogan"><b>Support</b></h4>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<div class="oe_span6">
<div class="oe_row_img oe_centered" align="center">
<a href="mailto:odoo@ixkit.com" target="_blank"
class="btn btn-block mb-2 deep_hover"
style="text-decoration: none; background-color: #b94646af; color: #FFF; border-radius: 4px;"><i
class="fa fa-envelope mr-2"></i>&nbsp;odoo@ixkit.com</a>
</div>
</div>
<div class="oe_span6">
<div class="oe_row_img oe_centered" align="center">
<a href="skype:live:.cid.c5d5ecc7e54128e2?call"
class="btn btn-block mb-2 deep_hover"
style="text-decoration: none; background-color: #1b9beabd; color: #FFF; border-radius: 4px;">
<i class="fa fa-skype mr-2"></i>&nbsp;&nbsp;ixkit&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</section>
<section class="oe_container oe_dark oe_mt64 oe_mb64"></section>
<h4 class="oe_slogan "><i class="fa fa-heart" aria-hidden="true" style="font-size: 90%;color: rgb(217, 47, 9);"></i>
<span class="font-sans-serif" style="margin-left: 6px;font-size: 90%; cursor: pointer !important; ">
<a style="font-weight: bolder !important; color: #827d7d !important; cursor: pointer !important;" href="http://ixkit.com/odookit">by ixkit team
</a>
</span>
</h4>
</section>
<section class="oe_container oe_separator">
</section>