Photography/index.html

---
layout: default
---

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <h1><a href="index.html"><strong>{{ site.header.title }}</strong> {{ site.header.subtitle }}</a></h1>
        <nav>
            <ul>
                <li><a href="#login-panel" id="login-nav">Login&nbsp;&nbsp;<i class="fa fa-user"></i></a></li>
                <li><a href="#footer">About&nbsp;&nbsp;<i class="fa fa-info-circle text-fg"></i></a></li>
            </ul>
        </nav>
    </header>

    <!-- Main -->
    <div id="main" data-exif='{{ site.exif }}'>
        <!-- Galerie wird dynamisch per JavaScript geladen -->
    </div>

    <!-- Footer -->
    <footer id="footer" class="panel">
        <div class="inner split">
            <div>
                <section>
                    <h2>{{ site.footer.name }}</h2>
                    {% if site.footer.bio and site.footer.bio != "" %}
                    <p>{{ site.footer.bio }}</p>
                    {% endif %}
                </section>
                <section>
                    <h2>Follow me on ...</h2>
                    <ul class="icons">
                        {% if site.social_urls.facebook %}
                            <li>
                                <a href="{{ site.social_urls.facebook }}" class="icon brands fa-facebook">
                                    <span class="label">Facebook</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if site.social_urls.twitter %}
                            <li>
                                <a href="{{ site.social_urls.twitter }}" class="icon brands fa-twitter">
                                    <span class="label">Twitter</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if site.social_urls.instagram %}
                            <li>
                                <a href="{{ site.social_urls.instagram }}" class="icon brands fa-instagram">
                                    <span class="label">Instagram</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if site.social_urls.dribbble %}
                            <li>
                                <a href="{{ site.social_urls.dribbble }}" class="icon brands fa-dribbble">
                                    <span class="label">Dribbble</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if site.social_urls.github %}
                            <li>
                                <a href="{{ site.social_urls.github }}" class="icon brands fa-github">
                                    <span class="label">GitHub</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if site.social_urls.linkedin %}
                            <li>
                                <a href="{{ site.social_urls.linkedin }}" class="icon brands fa-linkedin">
                                    <span class="label">LinkedIn</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </section>
                <p class="copyright">
                    &copy; {{ site.author }}. Design: {{ site.web_design }}
                </p>
            </div>
            <div>
                <section>
                    <h2>Kontakt</h2>
                    <form method="POST" action="https://formsubmit.co/tom@mischlabs.de">
                        <input type="hidden" name="_subject" value="Neue Nachricht von Mischkomposition">
                        <input type="hidden" name="_next" value="https://tom.mischlabs.de">
                        <input type="text" name="_honey" style="display:none">
                        <div class="fields">
                            <div class="field half">
                                <input type="text" name="name" id="name" placeholder="Name" required />
                            </div>
                            <div class="field half">
                                <input type="email" name="email" id="email" placeholder="Email" required />
                            </div>
                            <div class="field">
                                <textarea name="message" id="message" rows="4" placeholder="Nachricht"></textarea>
                            </div>
                        </div>
                        <ul class="actions">
                            <li><input type="submit" value="Senden" class="primary" /></li>
                            <li><input type="reset" value="Zuruecksetzen" /></li>
                        </ul>
                    </form>
                </section>
            </div>
        </div>
    </footer>

    <footer id="login-panel" class="panel">
        <div class="inner">
            <section>
                <h2>Kunden-Portal</h2>
                <p>Logge dich ein, um die Bilder deiner Fotosession zu sehen und herunterzuladen.</p>
                <form id="login-form">
                    <div class="fields">
                        <div class="field">
                            <input type="text" id="login-username" placeholder="Nutzername" required />
                        </div>
                        <div class="field">
                            <input type="password" id="login-password" placeholder="Passwort" required />
                        </div>
                    </div>
                    <ul class="actions">
                        <li><input type="submit" value="Login" class="primary" id="login-submit" /></li>
                        <li><a href="#" id="logout-btn" style="display:none;" class="button">Logout</a></li>
                        <li id="admin-link"></li>
                    </ul>
                </form>
                <div id="pw-change-section" style="display:none; margin-top:1.5em; border-top:1px solid rgba(255,255,255,0.2); padding-top:1.5em;">
                    <h3>Passwort aendern</h3>
                    <form id="pw-change-form">
                        <div class="fields">
                            <div class="field">
                                <input type="password" id="pw-old" placeholder="Altes Passwort" required />
                            </div>
                            <div class="field half">
                                <input type="password" id="pw-new" placeholder="Neues Passwort" required />
                            </div>
                            <div class="field half">
                                <input type="password" id="pw-confirm" placeholder="Passwort bestaetigen" required />
                            </div>
                        </div>
                        <ul class="actions">
                            <li><input type="submit" value="Passwort aendern" class="primary" /></li>
                        </ul>
                    </form>
                </div>
            </section>
        </div>
    </footer>
</div>