cryptpad/customize.dist/src/fragments/index.html

{{fork}}

<div id="main">
    <div class="mainOverlay"></div>
    <div id="main-container">
        <div id="data" class="hidden">
          <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>

            <div id="buttons" class="buttons"><button class="btn btn-secondary nologin" data-localization="login_nologin"></button></div>

        </div>

        <div id="userForm" class="form-group hidden">
            <!--<center>
                <h1 data-localization="form_title"></h1>
            </center>-->
            <!--<label for="name" data-localization="form_username"></label>-->
            <input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>

            <!--<label for="password" data-localization="form_password"></label>-->
            <input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
            <div style="display: none;"><span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br></div>
            <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
        </div>
        <div id="loggedIn" class="hidden">
            <p id="loggedInHello"></p>
            <p><button class="btn btn-primary nologin" data-localization="login_accessDrive"></button></p>
            <p><button id="loggedInLogOut" class="btn btn-secondary" data-localization="logoutButton"></button></p>
        </div>
    </div>
</div>
<div class="page category first" id="knowmore">
    <center>
        <h1>How it works</h1>
    </center>
</div>
<div class="page">
    <div class="info-container">
        <div class="left image">
            <img src="customize/images/zk.png" alt="Zero Knowledge" />
        </div>
        <div class="right">
            <h2>Zero Knowledge</h2>
            <p>
                You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your Privacy and Security.
            </p>
        </div>
    </div>
</div>
<div class="page even">
    <div class="info-container">
        <div class="left">
            <h2>Jot it down</h2>
            <p>
                The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.
            </p>
        </div>
        <div class="right image">
            <img src="customize/images/realtime.png" alt="User account" />
        </div>
    </div>
</div>
<div class="page">
    <div class="info-container">
        <div class="left image">
            <img src="customize/images/hash.png" alt="User account" />
        </div>
        <div class="right">
            <h2>Share the link, share the pad</h2>
            <p>
                Grow your ideas together: conduct efficient meetings, collaborate on TODO lists and make quick presentations with all your friends and all your devices.
            </p>
        </div>
    </div>
</div>
<div class="page even">
    <div class="info-container">
        <div class="left">
            <h2>Get organized</h2>
            <p>
                With CryptPad Drive, you can keep your sights on what's important. Folders allow you to keep track of your projects and have a global vision of where things are going.
            </p>
        </div>
        <div class="right image">
            <img src="customize/images/useraccount.png" alt="User account" />
        </div>
    </div>
</div>
<div class="page category" id="tryit">
    <center>
        <h1 data-localization="tryIt">Try it out!</h1>
    </center>
</div>
<div class="page">
    <div class="app-container">
        <div class="app-row">
            <div class="app">
                <center>
                    <h2>Rich Text editor</h2>
                    <img src="customize/images/pad.png" alt="Rich Text application" />
                </center>
                <p>
                    Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
                </p>
                <p class="buttons">
                    <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
                </p>
            </div><div class="app">
                <center>
                    <h2>Code editor</h2>
                    <img src="customize/images/code.png" alt="Code application" />
                </center>
                <p>
                    Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
                </p>
                <p class="buttons">
                    <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
                </p>
            </div><!--
        --></div><!--
        --><div class="app-row"><!--
            --><div class="app">
                <center>
                    <h2>Slide editor</h2>
                    <img src="customize/images/slide.png" alt="Slide applcation" />
                </center>
                <p>
                    Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
                </p>
                <p class="buttons">
                    <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
                </p>
            </div><div class="app">
                <center>
                    <h2>Polls</h2>
                    <img src="customize/images/poll.png" alt="Poll application" />
                </center>
                <p>
                    Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
                </p>
                <p class="buttons">
                    <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
                </p>
            </div>
        </div>
    </div>
</div>