index.html

---
layout: general

navigation-back: false

exclude-main-element: true
---

<noscript>
    <dialog class="big severe hero" open>
        This page requires JavaScript to work. &#x1F640;
    </dialog>
</noscript>

<aside class="warning-message show-tiny card">
    Sorry, I don't support screens this thin, just yet. Don't worry; I will in the future! For now, if this is a
    phone, try turning it sideways. &#x1F638;
</aside>



<main class="flex-column flex-vert-space-between">

    <h2 class="tagline">Calculate what your portion of the rent should be!</h2>
    <section id="input-vars" class="flex-row flex-wrap flex-horiz-space-around flex-vert-top">
        <table id="Roommates" class="pretty">
            <caption>Roommates</caption>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Monthly Income</th>
                    <th>Proportion</th>
                </tr>
            </thead>
            <tbody>
                <tr id="Add-Roommate-Row">
                    <th id="Add-Roommate-Button" class="text-center" colspan="3" tabindex="0"><i class="fa fa-plus-circle"></i> Add a roommate</th>
                </tr>
            </tbody>
        </table>

        <table id="Expenses" class="pretty">
            <caption>Shared Monthly Expenses</caption>
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Monthly Cost</th>
                </tr>
            </thead>
            <tbody>
                <tr id="Add-Expense-Row">
                    <th id="Add-Expense-Button" class="text-center" colspan="2" tabindex="0"><i class="fa fa-plus-circle"></i> Add an expense</th>
                </tr>
            </tbody>
        </table>
    </section>

    <aside id="Local-Storage-Warning" class="warning-message card   brightness-light">
        {%- assign auto-save-button-text="Turn on auto-save! 🍪" %}
        <h3>Your changes will be lost without auto-save!</h3>

        <p>I can tell your computer to automatically save what you do on this page, even after you refresh it. This
            data will stay on your computer, and I will never send it to a server nor share it or anything; it'll just
            be here so you don't lose your progress.</p>
        <p>If you don't want me to do this, that's fine! I'll only do it if you click the
            <q>{{ auto-save-button-text }}</q> button and I won't save anything.</p>

        <div class="flex-row flex-horiz-space-between flex-wrap">
            <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation" target="_blank" class="medium-emphasis button">Learn more&nbsp;&raquo;</a>
            <div class="flex-row flex-horiz-stretch flex-wrap">
                <button id="Local-Storage-Warning-Decline-Button" class="inverse">No, thank you 🙂</button>
                <button id="Local-Storage-Warning-Consent-Button">{{ auto-save-button-text }}</button>
            </div>
        </div>
    </aside>

    <section id="output" class="big   flex-row flex-horiz-space-around">
        <div class="wide-table-holder">
            <table id="Results" class="pretty">
                <caption>Results</caption>
                <thead><tr></tr></thead>
                <tbody></tbody>
            </table>
        </div>
    </section>

    <section id="State-Management" class="flex-column flex-horiz-space-around">
        <label for="Copy-URL-Button" id="Share-State" class="card   flex-column flex-wrap flex-horiz-stretch flex-vert-bottom">
            <h3>Share this split with your roommates:</h3>
            <!--suppress HtmlUnknownTag -->
            <div id="State-URL-Holder" class="flex-row flex-horiz-stretch   can-have-status" data-status-text="">
                <input type="text" id="State-URL-Field" readonly />
                <button type="button" id="Copy-URL-Button" name="Copy-URL-Button" title="Copy" class="copy-button   can-have-status status-anchored-center" data-status-text=""><i class="fa fa-share-alt fa-lg"></i></button>
            </div>
        </label>
        <!--br/>
        <button type="reset" id="Reset-State-Button" class="big">Reset</button-->
    </section>
</main>



<footer class="flex-column flex-vert-bottom flex-horiz-center   text-uppercase text-center">
    <section class="text-normal">
        Like this project and want to keep it rolling?
        Support us regularly on <a href="https://ko-fi.com/bluehuskystudios" target="_blank">Ko-fi</a>,
        or just once via the lead developer's <a href="https://paypal.me/KyLeggiero" target="_blank">PayPal</a>.
    </section>

    <hr/>

    <aside class="flex-column flex-horiz-center">
        <div>
            <p>Made by <a href="https://KyLeggiero.me" target="_blank">Ky Leggiero</a>. Released under <a href="/LICENSE.txt">the MIT License</a>.</p>
        </div>
        <div><a href="/PRIVACY">Privacy Policy</a> (spoilers: it's pretty chill)</div>
        <a href="https://github.com/BlueHuskyStudios/Rent-Split/releases/tag/{{ site.version }}" target="_blank" class="low-emphasis button">Version {{ site.version }}</a>
        <a href="https://github.com/BlueHuskyStudios/Rent-Split/issues/new" target="_blank" class="button"><i class="fa fa-bug"></i> <span>Report a Bug</span></a>
    </aside>
</footer>


<dialog id="Filter-Dialog" class="brightness-dark">
    <h4>Who should pay <b class="expense-name">this expense</b>?</h4>

    <ul id="Expense-Filter-Applicable-Roommate-Checklist" class="checklist">
        <li class="checklist-item"><label><input type="checkbox" id="Roommate-Filter-Everyone-Checkbox" checked> Everyone</label></li>
        <li><hr /></li>
    </ul>

    <footer class="flex-row flex-horiz-right">
        <button id="Filter-Dialog-Cancel-Button" class="low-emphasis">Cancel</button>
        <button id="Filter-Dialog-Ok-Button" class="medium-emphasis">OK</button>
    </footer>
</dialog>

<script src="./js/production/Rent Split 2/lib/kotlin.js">/* Kotlin/JS */</script>
<script src="./js/production/Rent Split 2/Rent Split 2.js">/* this Rent Split web app */</script>