{{define "title"}}A social network for real nudists and exhibitionists{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">{{ PrettyTitle }}</h1>
                <h2 class="subtitle">{{ .Subtitle }}</h2>
            </div>
        </div>
    </section>
</div>

<div class="block p-4">
    <div class="columns">
        <div class="column content is-three-quarters p-4">
            <p>
                Welcome to <strong>{{PrettyTitle}}</strong>, a social network designed for <strong>real</strong>
                nudists and exhibitionists!
            </p>

            <p>
                This website was designed by a life-long nudist, exhibitionist and software engineer to create
                a safe space for like-minded individuals online. What makes this site unique is that only
                real people and their own pictures are allowed here;
                you'll be expected to <a href="/faq#certification-faqs">certify yourself</a> as being a real
                human being to gain full access to the community on this website.
            </p>

            <p>
                This website is open to <em>all</em> nudists and exhibitionists who are legal adults 18 years
                or older.
            </p>

            <p>
                {{PrettyTitle}} is first and foremost a "nudist website" and the default experience of this site
                is to be kept clean and non-sexual in nature. However, we are not prudes here; for the exhibitionists
                or more 'sex-positive nudists' among us this website also permits the sharing of more
                <a href="/faq#define-explicit">'explicit'</a> photos, in designated areas only. Please just mark
                those photos as 'Explicit' so people who don't want to see don't have to. <em>Seeing</em> explicit
                content is strictly opt-in and the default is to hide any explicit photos or forums from your view.
            </p>

            <!-- Show a peek at website demographics -->
            {{if .Demographic.Computed}}
            <h4><em>A peek inside the site:</em></h4>

            <p>
                {{PrettyTitle}} has been found to fill a much needed niche in between the "strict naturist websites"
                and the "hyper sexual porn sites" out there. As of <strong>{{.Demographic.LastUpdated.Format "January _2, 2006"}}</strong> here is a brief
                <a href="/insights">peek inside the website</a> to see what the balance of content is like in our community.
            </p>

            <ul>
                <li>
                    Photo Gallery: only {{.Demographic.Photo.PercentExplicit}}% of our photos are 'explicit' or sexual in nature ({{FormatNumberCommas .Demographic.Photo.Explicit}} out of {{FormatNumberCommas .Demographic.Photo.Total}}).
                    It is strictly opt-in if you want to see that stuff - it's hidden by default!
                </li>
                <li>Nudists vs. Exhibitionists: {{FormatNumberCommas .Demographic.People.ExplicitOptIn}} ({{.Demographic.People.PercentExplicit}}%, out of {{FormatNumberCommas .Demographic.People.Total}}) of members have opted-in to see explicit content on the site.
                    Only {{.Demographic.People.PercentExplicitPhoto}}% of members ({{FormatNumberCommas .Demographic.People.ExplicitPhoto}}) have shared at least one 'explicit' photo on their gallery.</li>
            </ul>

            <p>
                <strong>
                    <i class="fa fa-circle-arrow-right mr-1"></i> See more:
                </strong>
                <small>
                    <a href="/insights">Click here to see detailed insights</a> about the people and content in our community -- updated regularly!
                </small>
            </p>
            {{end}}

        </div>

        <div class="column is-one-quarter">

            {{if .LoggedIn}}
            <div class="card">
                <header class="card-header has-background-link">
                    <p class="card-header-title has-text-light">Welcome back, {{.CurrentUser.Username}}!</p>
                </header>

                <div class="card-content p-2">
                    <aside class="menu">
                        <ul class="menu-list">
                            <li>
                                <a href="/messages"{{if .NavUnreadMessages}} class="has-text-warning"{{end}}>
                                    <span class="icon"><i class="fa fa-envelope"></i></span>
                                    {{if .NavUnreadMessages}}
                                        <span>{{.NavUnreadMessages}} New Message{{Pluralize64 .NavUnreadMessages}}!</span>
                                    {{else}}
                                        <span>Messages</span>
                                    {{end}}
                                </a>
                            </li>
                            <li>
                                <a href="/friends{{if .NavFriendRequests}}?view=requests{{end}}"{{if .NavFriendRequests}} class="has-text-warning"{{end}}>
                                    <span class="icon"><i class="fa fa-user-group"></i></span>
                                    {{if .NavFriendRequests}}
                                        <span>{{.NavFriendRequests}} Friend Request{{Pluralize64 .NavFriendRequests}}!</span>
                                    {{else}}
                                        <span>Friends</span>
                                    {{end}}
                                </a>
                            </li>
                            <li>
                                <a href="/me{{if .NavUnreadNotifications}}?view=requests{{end}}"{{if .NavUnreadNotifications}} class="has-text-warning"{{end}}>
                                    <span class="icon"><i class="fa {{if .NavUnreadNotifications}}fa-bell{{else}}fa-home-user{{end}}"></i></span>
                                    {{if .NavUnreadNotifications}}
                                        <span>{{.NavUnreadNotifications}} New Notification{{Pluralize64 .NavUnreadNotifications}}!</span>
                                    {{else}}
                                        <span>Dashboard</span>
                                    {{end}}
                                </a>
                            </li>
                            <li>
                                <a href="/u/{{.CurrentUser.Username}}">
                                    <span class="icon"><i class="fa fa-user"></i></span>
                                    My Profile
                                </a>
                            </li>
                            <li>
                                <a href="/u/{{.CurrentUser.Username}}/photos">
                                    <span class="icon"><i class="fa fa-image"></i></span>
                                    My Photos
                                </a>
                            </li>
                            <li>
                                <a href="/photo/upload">
                                    <span class="icon"><i class="fa fa-upload"></i></span>
                                    Upload Photos
                                </a>
                            </li>
                        </ul>
                    </aside>
                </div>
            </div>
            {{else}}
            <div class="card">
                <header class="card-header has-background-link">
                    <p class="card-header-title has-text-light">Log In</p>
                </header>

                <div class="card-content">
                    <form action="/login" method="POST">
                        {{ InputCSRF }}
                        <div class="field">
                            <label class="label" for="idx_username">Username</label>
                            <input type="text" class="input"
                                name="username"
                                placeholder="username"
                                id="idx_username"
                                autocomplete="off">
                        </div>

                        <div class="field">
                            <label class="label" for="idx_password">Password</label>
                            <input type="password" class="input"
                                name="password"
                                placeholder="password"
                                id="idx_password"
                                autocomplete="off">
                            <a href="/forgot-password">Forgot?</a>
                        </div>

                        <div class="columns">
                            <div class="column">
                                <button type="submit" class="button is-link is-fullwidth">Log in</button>
                            </div>
                            <div class="column">
                                <a href="/signup" class="button is-secondary is-fullwidth">Sign up</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            {{end}}
        </div>
    </div>

    <h1 class="title">What sets {{PrettyTitle}} apart</h1>

    <div class="grid is-col-min-12 mb-6">
        <div class="cell">
            <article class="card is-fullheight nonshy-home-card">
                <div class="card-header has-text-centered" style="background-image: url(/static/img/certification-icon.png)">
                    <div class="card-header-title has-text-light has-text-centered">
                        Only Certified Profiles
                    </div>
                </div>
                <div class="card-content content has-text-justified">
                    <p>
                        Only <strong>real people</strong> are allowed to join {{PrettyTitle}}.
                    </p>

                    <p>
                        It is required that you
                        will submit a "<a href="/faq#certification-faqs">Verification Selfie</a>" to the site admin before
                        you can meet the rest of the community here. We don't want any catfishers coming in with stolen
                        photos, or shy anonymous lurkers who never show their face.
                    </p>

                    <p>
                        Having a face picture on your profile is also required; but you <em>MAY</em> set it to
                        'friends only' visibility if you must.
                    </p>

                    <p>
                        <a href="/faq#certification-faqs" target="_blank" class="has-text-grey">
                            <i class="fa fa-external-link mr-1"></i>
                            Learn more about the certification process
                        </a>
                    </p>
                </div>
            </article>
        </div>

        <div class="cell">
            <article class="card is-fullheight nonshy-home-card">
                <div class="card-header has-text-centered" style="background-image: url(/static/img/camera-emoji.png)">
                    <div class="card-header-title has-text-light has-text-centered">
                        Self Photos Only
                    </div>
                </div>
                <div class="card-content content has-text-justified">
                    <p>
                        Share photos of your naked journey with your friends and the greater {{PrettyTitle}} community.
                    </p>

                    <p>
                        Each member gets their own Photo Gallery on their profile page, and they can feature
                        their photos on the site-wide gallery for all (certified) members to see.
                    </p>

                    <p>
                        Pictures can be marked for "friends-only" or "private" visibility, so you are always in control
                        of which photos of yourself are shared with whom.
                    </p>

                    <p>
                        <a href="/faq#photo-faqs" target="_blank" class="has-text-grey">
                            <i class="fa fa-external-link mr-1"></i>
                            Learn more about photo sharing
                        </a>
                    </p>
                </div>
            </article>
        </div>

        <div class="cell">
            <article class="card is-fullheight nonshy-home-card">
                <div class="card-header has-text-centered" style="background-image: url(/static/img/imp-emoji.png)">
                    <div class="card-header-title has-text-light has-text-centered">
                        Exhibitionists Welcome
                    </div>
                </div>
                <div class="card-content content has-text-justified">
                    <p>
                        While {{PrettyTitle}} is first and foremost a "nudist website," we are not prudes here and
                        we acknowledge that humans are sexual creatures who should be allowed to show off their horny side,
                        too, with consenting audiences.
                    </p>

                    <p>
                        We just mark our sexy photos and webcams as '<strong class="has-text-danger">Explicit</strong>' so that
                        nudists who prefer not to see that stuff don't have to; the <strong>default</strong> experience
                        of the website is kept clean and non-sexual in nature &mdash; you can opt-in to see explicit
                        content if you like that stuff!
                    </p>

                    <p>
                        <a href="/faq#why-sex-positive" target="_blank" class="has-text-grey">
                            <i class="fa fa-external-link mr-1"></i>
                            Why does nonshy permit sexual content?
                        </a>
                    </p>
                </div>
            </article>
        </div>
    </div>

    <h1 class="title">Some of {{PrettyTitle}}'s notable features</h1>

    <div class="grid is-col-min-12 mb-6">
        <div class="cell">
            <article class="card is-fullheight">
                <div class="card-image">
                    <figure class="image is-16by9">
                        <img src="/static/img/chat-screenshot.png" alt="Chat screenshot">
                    </figure>
                </div>
                <div class="card-content content has-text-justified">
                    <p class="subtitle">A Webcam Chat Room</p>

                    <p>
                        Our chat room was custom built with {{PrettyTitle}}'s unique needs in mind.
                        It has public text channels, private messages, and async webcam support.
                    </p>

                    <p>
                        Some of its unique features include:
                    </p>

                    <ul>
                        <li>
                            An option to require your webcam viewers to <em>also</em> be sharing their
                            own camera first before they can watch yours.
                        </li>
                        <li>
                            It is permitted to be horny on camera as long as you tag your webcam as
                            being '<span class="has-text-danger">Explicit</span>' which will show your
                            camera icon in a <span class="has-text-danger">red</span> color (as opposed
                            to the <span class="has-text-link">blue</span>, or 'not explicit' cameras)
                        </li>
                    </ul>

                    <p>
                        Learn more about the <a href="/features#webcam-chat-room">chat room features.</a>
                    </p>
                </div>
            </article>
        </div>

        <div class="cell">
            <article class="card is-fullheight">
                <div class="card-image">
                    <figure class="image is-16by9">
                        <img src="/static/img/gallery-screenshot.png" alt="Chat screenshot">
                    </figure>
                </div>
                <div class="card-content content has-text-justified">
                    <p class="subtitle">A Site-wide Photo Gallery</p>

                    <p>
                        The "Member Gallery" is where you can find photos shared by the wider {{PrettyTitle}}
                        community all in one place. When members upload a new picture to their profile page,
                        they can opt to feature it on the Member Gallery for the rest of the community to see.
                    </p>

                    <p>
                        Only certified members are able to view the gallery, and you can also see "friends only"
                        pictures your friends had uploaded on this page as well. 'Explicit' photos will not appear
                        unless you have opted-in to see that stuff on your account settings.
                    </p>

                    <p>
                        It's also possible to upload a photo <em>only</em> to your profile and not feature it
                        on the site-wide gallery if you want.
                    </p>
                </div>
            </article>
        </div>

        <div class="cell">
            <article class="card is-fullheight">
                <div class="card-image">
                    <figure class="image is-16by9">
                        <img src="/static/img/forum-screenshot.png" alt="Chat screenshot">
                    </figure>
                </div>
                <div class="card-content content has-text-justified">
                    <p class="subtitle">Discussion Forums</p>

                    <p>
                        If slower paced, but more in-depth discussions are your cup of tea,
                        {{PrettyTitle}} has a variety of forums centered around various topics
                        where you can meet the community and make some new friends!
                    </p>

                    <p>
                        Some forums are centered around thoughtful discussions, others are more
                        for sharing pictures and stories. We also have some forums for sexual (or
                        'explicit') topics, which are only visible to members who have opted-in to
                        see explicit content on their account settings.
                    </p>
                </div>
            </article>
        </div>
    </div>

    <div class="block content">
        <p>
            You can read more <a href="/about">about this website</a>, see a <a href="/features">tour of its features</a>
            or check out the <a href="/faq">FAQ</a> page for more information.
        </p>

        <p>
            Follow <a rel="me" href="https://bsky.app/profile/nonshy.com">@nonshy.com on <i class="fab fa-bluesky"></i> Bluesky</a>
            for news, status alerts and reblogs from some of our members on the Fediverse!
        </p>
    </div>

    {{if not .LoggedIn}}
    <div class="has-text-centered">
        <a href="/signup" class="button is-success is-large">
            Create your account today
        </a>
    </div>
    {{end}}

</div>
{{end}}