index_content.html

<section>
    <div>
        <h1 style="margin-bottom: 40px">
            <span>
                <a href="https://apps.apple.com/app/codeface/id1578175415" target="_blank">
                    <img style="max-width:100px;margin-right:-5px"
                         src="app/icon_1024.png"
                         title="Codeface&trade; App"/></a>
                <span style="vertical-align:34%">Codeface&trade;</span>
            </span>
        </h1>
        
        <h2>
            See <nobr>the architecture</nobr> <nobr>of any codebase</nobr>
        </h2>
        
        <video style="width:100%;margin-bottom:60px;margin-top:10px"
            controls
            autoplay
            loop>
            <source src="app/videos/codeface_preview_cropped.mp4" type="video/mp4">
        </video>
        
        <div style="text-align:center;">
            <a href="https://apps.apple.com/app/codeface/id1578175415"
                target="_blank">
                <img style="height:68px;display:inline-block;margin-bottom:-10px"
                    src="app/App_Store_Badge.svg"
                    title="Download Codeface&trade; for free from the Mac App Store">
                </img>
            </a>
        </div>
    </div>
</section>

<section id="vision">
    <div>
        <h1>Vision</h1>
        
        <h2>
            Understand, improve <nobr>and monitor</nobr> <nobr>your code</nobr>
        </h2>
        
        <a href="javascript:toggleLightMode('screen-shot-1')">
            <div class="clickable-image" id="screen-shot-1" style="margin-bottom:10px">
                <div style="padding-top:67.0608%;width:100%;"></div>
            </div>
        </a>
        
        <div class="codeface-3-columns">
            <div>
                <h3>What?</h3>
                Get a grip on any software project by visualizing its internal composition, dependencies and quality metrics.
                <br><br>
                Semantic zoom allows you to inspect all scopes at all levels &#8211; maintaining an overview as well as diving deep.
                <br><br>
                Topological ordering allows you to read a codebase along its control flow &#8211; from big picture to details.
            </div>
            <div>
                <h3>Why?</h3>
                Being able to switch from reading code to seeing architecture helps making better software faster.
                <br><br>
                You understand legacy code, notice red flags, onboard quickly, automate documentation, stay motivated, etc.
                <br><br>
                We ♡ software architecture since 1993 and know how communication and quality require visualization.
            </div>
            <div>
                <h3>The Future</h3>
                This journey is just beginning. There are loads of ideas and development directions to evolve Codeface&trade;.
                <br><br>
                Imagine architectural suggestions, more layouts and metrics, real-time updates, a web dashboard, etc.
                <br><br>
                You may shape Codeface&trade; with your own big ideas and feedback. Just drop us a line: <a href="mailto:hello@codeface.io">hello@codeface.io</a>
            </div>
        </div>
    </div>
</section>

<section id="features">
    <div>
        <h1>Search</h1>
        
        <h2>
            Filter everything <nobr>by a search term</nobr>
        </h2>
        
        <a href="javascript:toggleLightMode('screen-shot-2')">
            <div class="clickable-image" id="screen-shot-2" style="margin-bottom:20px">
                <div style="padding-top:67.0608%;width:100%;"></div>
            </div>
        </a>
        
        <h2>
            And zone in on <nobr>the matching parts</nobr>
        </h2>
        
        <a href="javascript:toggleLightMode('screen-shot-3')">
            <div class="clickable-image" id="screen-shot-3" style="margin-bottom:-40px">
                <div style="padding-top:67.0608%;width:100%;"></div>
            </div>
        </a>
    </div>
</section>

<section>
    <div>
        <h1>LSPService</h1>
        
        <h2>
            Analyze projects <nobr>of all languages</nobr> <nobr>via the <a href="https://microsoft.github.io/language-server-protocol/">LSP</a></nobr>
        </h2>
        
        <div class="codeface-3-columns">
            <div>
                <h3>1. Get LSPService</h3>
                Download <a href="lspservice/index.html">LSPService</a>. It's a free open-source webservice that runs locally and empowers Codeface&trade; to understand any codebase.
            </div>
            <div>
                <h3>2. Add Your Language</h3>
                Add language support if you need more than Swift. LSPService just needs to know how to launch an <nobr><a href="https://langserver.org">LSP server</a></nobr> for a given language.
            </div>
            <div>
                <h3>3. Restart Codeface&trade;</h3>
                Restart LSPService after its setup. Then restart Codeface&trade; and load a project. It will automatically detect LSPService and utilize it.
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div style="text-align:center;">
        <a onclick="ga('send', 'event', 'button', 'click', 'top section');"
            href="https://apps.apple.com/app/codeface/id1578175415"
            target="_blank">
            <img style="height:68px;display:inline-block;"
                src="app/App_Store_Badge.svg"
                title="Download Codeface&trade; for free from the Mac App Store"></a>
        
        <br><br>
        <h2  style="margin-bottom:0px;">Questions? Ideas? Bugs? -> <a href="mailto:hello@codeface.io"><nobr>hello @ codeface.io</nobr></a></h2>
    </div>
</section>