<!DOCTYPE html>
<html lang="de">
<head>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Das Netzwerk für junge Christen - Youthweb Styleguide</title>
<!-- Include the CSS -->
<link href="../../dist/toolkit.min.css" rel="stylesheet">
<meta name="theme-color" content="#1c60a1">
</head>
<body>
<script type="text/javascript">
app_settings = {
// Profildaten zum eingeloggten User
// TODO: Refactoring profile-settings
profile: null,
urls: {
// Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
// @see https://github.com/frctl/fractal/issues/1042
'root': 'https://styleguide.youthweb.net/components/preview',
'baseUrl': 'http://localhost:8000',
'communityJsonHost': 'http://localhost:8000',
'imagesUploadUrl': 'http://localhost:8000/imageUpload',
},
'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
};
</script>
<div id="app">
<div class="text-white welcome" style="background-color:#19579c">
<div class="container container-fill-height pt-5 pb-5">
<div class="container-content-middle">
<div class="row youthweb-intro text-center">
<div class="col-12 mb-5">
<a href="https://styleguide.youthweb.net/components/preview/timeline">
<img src="../../dist/img/logo-30.png" alt="Youthweb" />
</a>
</div>
<div class="col-12">
<p>youthweb.net ist ein weltweites soziales Netzwerk für junge Christen.<br />Für Jugend-, Teeniegruppen und Hauskreise gibt es besondere Möglichkeiten, um sich auszutauschen.</p>
</div>
</div>
<div class="text-center">
<div id="loginOrRegister" class="carousel slide">
<div class="carousel-inner">
<!-- ?loginOrRegister=0 -->
<div class="carousel-item" data-interval="false">
<form class="mt-5" method="POST" id="passwordLostForm" action="http://localhost:8000/passwordReminder">
<div class="row justify-content-md-center">
<div class="col-md-6">
<h3>Passwort vergessen</h3>
<p>Hast du dein Passwort vergessen? Kein Problem. Gib deine Emailadresse an, mit der du dich bei youthweb.net angemeldet hast und klick unten auf "Passwort anfordern". Nach einer Bestätigungsmail schicken wir dir ein neues Passwort zu.</p>
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="email" class="form-control" id="email" name="user_email" placeholder="E-Mail" required><!-- "error" generiert Mockup-Error-Response -->
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group mt-4">
<input type="hidden" name="csrf_token" value="csrf_token_password_lost" />
<button type="submit" class="btn btn-primary-brand-yellow">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
Passwort anfordern
</button><br />
</div>
</div>
</div>
<div class="row justify-content-md-center ">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="1" class="slideScrollUp ">Stattdessen mit bestehenden Daten anmelden</a></div>
</div>
</form>
</div>
<!-- ?loginOrRegister=1 -->
<div class="carousel-item active" data-interval="false">
<form class="mt-5" method="POST" id="loginForm" action="http://localhost:8000/login">
<div class="row justify-content-md-center">
<div class="col-12">
<h3>Login</h3>
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="text" class="form-control" id="username" name="_username" aria-describedby="emailHelp" placeholder="Username oder E-Mail" required><!-- "error" generiert Mockup-Error-Response -->
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="password" class="form-control " id="password" name="_password" placeholder="Passwort" required>
</div>
</div>
<div class="row justify-content-center">
<div class="custom-control custom-checkbox">
<!-- col-x is missing due to some weird positioning behavior -->
<input class="custom-control-input" type="checkbox" value="1" name="_remember_me" id="remember_me" checked>
<label class="custom-control-label" for="remember_me">Eingeloggt bleiben</label>
</div>
</div>
<div class="row justify-content-center">
<!-- col-x is missing due to some weird positioning behavior -->
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="1" name="invisible_login" id="invisible_login">
<label class="custom-control-label" for="invisible_login">Unsichtbar</label>
</div>
</div>
<div class="form-group mt-4">
<input type="hidden" name="_target_path" value="/" />
<input type="hidden" name="_csrf_token" value="csrf_token_authenticate" />
<button type="submit" class="btn btn-primary-brand-yellow" data-container="body" data-toggle="popover" data-placement="bottom" data-content="error">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
Einloggen
</button>
<a class="btn btn-secondary slideScrollUp " href="#loginOrRegister" data-slide-to="2" role="button">Registrieren</a>
</div>
<div class="row justify-content-md-center">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="0" class="slideScrollUp ">Passwort vergessen?</a></div>
</div>
</form>
</div>
<!-- ?loginOrRegister=2 -->
<div class="carousel-item" data-interval="false">
<form class="mt-5 " method="POST" id="registrationForm" action="http://localhost:8000/registration">
<div class="row">
<div class="col-md-12 mb-3">
<h3>Registrieren</h3>
</div>
<div class="col-md-6">
<h3>Persönliche Daten</h3>
<div class="form-group ">
<input type="email" class="form-control" id="user_email" name="user_email" placeholder="E-Mail" required><!-- "error" generiert Mockup-Error-Response -->
</div>
<div class="form-group ">
<input type="text" class="form-control" id="user_vorname" name="user_vorname" placeholder="Vorname" required>
</div>
<div class="form-group ">
<input type="text" class="form-control" id="user_nachname" name="user_nachname" placeholder="Nachname" required>
</div>
<div class="custom-control custom-radio text-left">
<input type="radio" id="user_geschlecht_m" name="user_geschlecht" class="custom-control-input" value="m" required>
<label class="custom-control-label" for="user_geschlecht_m">männlich</label>
</div>
<div class="custom-control custom-radio text-left">
<input type="radio" id="user_geschlecht_w" name="user_geschlecht" class="custom-control-input" value="w" required>
<label class="custom-control-label" for="user_geschlecht_w">weiblich</label>
</div>
</div>
<div class="col-md-6 text-left">
<h3>Nutzungsbestimmungen</h3>
<p>Alle gekennzeichneten Felder (*) sind Pflichtfelder und müssen ausgefüllt werden.</p>
<p>Achtung: Youthweb ist ein persönliche Community für Jugendliche zwischen 13 und 30 Jahre, in der man sich gerne mit Vornamen anspricht. Deswegen bitten wir dich, wenigstens deinen Vornamen anzugeben, um dich persönlich ansprechen zu können. Deinen Nachnamen kannst du auch abkürzen (z.B. als "N."), aber deine Freunde können dich besser finden, wenn du ihn vollständig angibst. Übrigens wirst du später in den Einstellungen auswählen können, wer deinen Namen sehen darf.</p>
<p>Wir behalten uns vor, einen Account zu löschen, wenn dieser unseriös erscheint oder unvollständige Angaben hat.</p>
<div class="custom-control custom-checkbox text-left">
<input type="checkbox" id="agb" name="agb" class="custom-control-input" value="1" required>
<label class="custom-control-label" for="agb">Ich bin 16 Jahre oder älter und akzeptiere die<a href="https://styleguide.youthweb.net/components/preview/docs/regeln-rechte/agbs-nutzungsbedingungen.html" target="_blank">AGB</a></label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group mt-4">
<input type="hidden" name="csrf_token" value="csrf_token_register" />
<button type="submit" class="btn btn-primary-brand-yellow">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
Registrieren
</button><br />
</div>
</div>
</div>
<div class="row justify-content-md-center ">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="1" class="slideScrollUp ">Stattdessen mit bestehenden Daten anmelden</a></div>
</div>
</form>
</div>
</div>
</div>
<div class="row mt-5 vision">
<div class="col-12">
<h2>Unsere Vision</h2>
</div>
<div class="col-md text-center mt-5">
<p><i class="fas fa-heart mb-4"></i>Weil wir Jesus lieben, gestalten wir Youthweb als Netzwerk, in dem junge Christen einander begegnen, sich gegenseitig ermutigen und voneinander lernen.</p>
</div>
<div class="col-md text-center mt-5">
<p><i class="fas fa-child mb-4"></i>Uns ist es wichtig, dass Youthweb zur Vernetzung von Jugendlichen, Jugendgruppen, Hauskreisen und Gemeinden führt.</p>
</div>
<div class="col-md text-center mt-5">
<p><i class="fas fa-hand-holding-heart mb-4"></i>Es ist unser Anliegen, eine Plattform für Initiativen, Projekte und Veranstaltungen zu bieten.</p>
</div>
</div>
<div class="text-center mb-5">
<!-- mb-5: otherwise navbar overlaps -->
<p><a href="https://styleguide.youthweb.net/components/preview/page/vision" class="btn btn-primary-brand-yellow">Mehr erfahren</a></p>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-bottom navbar-dark bg-secondary app-navbar navbar-toggle-on-scroll" id="">
<a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>
<button class="navbar-toggler navbar-toggler-right d-lg-none" type="button" data-toggle="collapse" data-target="#navbarFooter" aria-controls="navbarFooter" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-collapse-on-scrolldown" id="navbarFooter">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<!-- class.="active" -->
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<div class="d-lg-none d-xl-none">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
Facebook
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
Instagram
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
Twitter
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
Pinterest
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
Shop
</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav float-right mr-0 d-none d-lg-flex">
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
<i class="fab fa-pinterest-p"></i>
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
<i class="fas fa-shopping-basket"></i>
</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="../../dist/toolkit.min.js"></script>
</body>
</html>
{% extends 'landing-page/layouts/public.html.twig' %}
{% set active_page = 'landing-page/index' %}
{% block title %}{{ 'Das Netzwerk für junge Christen'|trans }}{{ parent() }}{% endblock %}
{% block content %}
<div class="text-center">
<div id="loginOrRegister" class="carousel slide">
<div class="carousel-inner">
<!-- ?loginOrRegister=0 -->
<div class="carousel-item{% if active_slide == 'password_lost' %} active{% endif %}" data-interval="false">
<form class="mt-5" method="POST" id="passwordLostForm" action="{{ action_url_passwordlost }}" >
<div class="row justify-content-md-center">
<div class="col-md-6">
<h3>{{ 'Passwort vergessen'|trans }}</h3>
<p>{{ 'Hast du dein Passwort vergessen? Kein Problem. Gib deine Emailadresse an, mit der du dich bei youthweb.net angemeldet hast und klick unten auf "Passwort anfordern". Nach einer Bestätigungsmail schicken wir dir ein neues Passwort zu.'|trans }}</p>
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="email" class="form-control" id="email" name="user_email" placeholder="{{ 'E-Mail'|trans }}" required><!-- "error" generiert Mockup-Error-Response -->
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group mt-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token('password_lost') }}" />
<button type="submit" class="btn btn-primary-brand-yellow">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
{{ 'Passwort anfordern'|trans }}
</button><br/>
</div>
</div>
</div>
<div class="row justify-content-md-center ">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="1" class="slideScrollUp ">{{ 'Stattdessen mit bestehenden Daten anmelden'|trans }}</a></div>
</div>
</form>
</div>
<!-- ?loginOrRegister=1 -->
<div class="carousel-item{% if active_slide == 'login' %} active{% endif %}" data-interval="false">
<form class="mt-5" method="POST" id="loginForm" action="{{ action_url_login }}">
<div class="row justify-content-md-center">
<div class="col-12">
<h3>{{ 'Login'|trans }}</h3>
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="text" class="form-control" id="username" name="_username" aria-describedby="emailHelp" placeholder="{{ 'Username oder E-Mail'|trans }}" required><!-- "error" generiert Mockup-Error-Response -->
</div>
</div>
<div class="row justify-content-md-center">
<div class="form-group col col-md-4">
<input type="password" class="form-control " id="password" name="_password" placeholder="{{ 'Passwort'|trans }}" required>
</div>
</div>
<div class="row justify-content-center">
<div class="custom-control custom-checkbox"><!-- col-x is missing due to some weird positioning behavior -->
<input class="custom-control-input" type="checkbox" value="1" name="_remember_me" id="remember_me" checked>
<label class="custom-control-label" for="remember_me">{{ 'Eingeloggt bleiben'|trans }}</label>
</div>
</div>
<div class="row justify-content-center"><!-- col-x is missing due to some weird positioning behavior -->
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="1" name="invisible_login" id="invisible_login">
<label class="custom-control-label" for="invisible_login">{{ 'Unsichtbar'|trans }}</label>
</div>
</div>
<div class="form-group mt-4">
<input type="hidden" name="_target_path" value="{{ login_target_path }}" />
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
<button type="submit" class="btn btn-primary-brand-yellow" data-container="body" data-toggle="popover" data-placement="bottom" data-content="error">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
{{ 'Einloggen'|trans }}
</button>
<a class="btn btn-secondary slideScrollUp " href="#loginOrRegister" data-slide-to="2" role="button">{{ 'Registrieren'|trans }}</a>
</div>
<div class="row justify-content-md-center">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="0" class="slideScrollUp ">{{ 'Passwort vergessen?'|trans }}</a></div>
</div>
</form>
</div>
<!-- ?loginOrRegister=2 -->
<div class="carousel-item{% if active_slide == 'register' %} active{% endif %}" data-interval="false">
<form class="mt-5 " method="POST" id="registrationForm" action="{{ action_url_registration }}" >
<div class="row">
<div class="col-md-12 mb-3">
<h3>{{ 'Registrieren'|trans }}</h3>
</div>
<div class="col-md-6">
<h3>{{ 'Persönliche Daten'|trans }}</h3>
<div class="form-group ">
<input type="email" class="form-control" id="user_email" name="user_email" placeholder="{{ 'E-Mail'|trans }}" required><!-- "error" generiert Mockup-Error-Response -->
</div>
<div class="form-group ">
<input type="text" class="form-control" id="user_vorname" name="user_vorname" placeholder="{{ 'Vorname'|trans }}" required>
</div>
<div class="form-group ">
<input type="text" class="form-control" id="user_nachname" name="user_nachname" placeholder="{{ 'Nachname'|trans }}" required>
</div>
<div class="custom-control custom-radio text-left">
<input type="radio" id="user_geschlecht_m" name="user_geschlecht" class="custom-control-input" value="m" required>
<label class="custom-control-label" for="user_geschlecht_m">{{ 'männlich'|trans }}</label>
</div>
<div class="custom-control custom-radio text-left" >
<input type="radio" id="user_geschlecht_w" name="user_geschlecht" class="custom-control-input" value="w" required>
<label class="custom-control-label" for="user_geschlecht_w">{{ 'weiblich'|trans }}</label>
</div>
</div>
<div class="col-md-6 text-left">
<h3>{{ 'Nutzungsbestimmungen'|trans }}</h3>
<p>{{ 'Alle gekennzeichneten Felder (*) sind Pflichtfelder und müssen ausgefüllt werden.'|trans }}</p>
<p>{{ 'Achtung: Youthweb ist ein persönliche Community für Jugendliche zwischen 13 und 30 Jahre, in der man sich gerne mit Vornamen anspricht. Deswegen bitten wir dich, wenigstens deinen Vornamen anzugeben, um dich persönlich ansprechen zu können. Deinen Nachnamen kannst du auch abkürzen (z.B. als "N."), aber deine Freunde können dich besser finden, wenn du ihn vollständig angibst. Übrigens wirst du später in den Einstellungen auswählen können, wer deinen Namen sehen darf.'|trans }}</p>
<p>{{ 'Wir behalten uns vor, einen Account zu löschen, wenn dieser unseriös erscheint oder unvollständige Angaben hat.'|trans }}</p>
<div class="custom-control custom-checkbox text-left">
<input type="checkbox" id="agb" name="agb" class="custom-control-input" value="1" required>
<label class="custom-control-label" for="agb">{{ 'Ich bin 16 Jahre oder älter und akzeptiere die%link_start%AGB%link_end%'|trans({'%link_start%': '<a href="'~url('docs_page', {'path':'regeln-rechte/agbs-nutzungsbedingungen.html'})~'" target="_blank">', '%link_end%': '</a>'})|raw }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group mt-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token('register') }}" />
<button type="submit" class="btn btn-primary-brand-yellow">
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
{{ 'Registrieren'|trans }}
</button><br/>
</div>
</div>
</div>
<div class="row justify-content-md-center ">
<div class="col-md-4">
<div class="collapse multi-collapse alertBox mb-4" aria-expanded="false">
<div class="card card-body bg-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><a href="#loginOrRegister" data-slide-to="1" class="slideScrollUp ">{{ 'Stattdessen mit bestehenden Daten anmelden'|trans }}</a></div>
</div>
</form>
</div>
</div>
</div>
<div class="row mt-5 vision">
<div class="col-12"><h2>{{ 'Unsere Vision'|trans }}</h2></div>
<div class="col-md text-center mt-5"><p><i class="fas fa-heart mb-4"></i>{{ 'Weil wir Jesus lieben, gestalten wir Youthweb als Netzwerk, in dem junge Christen einander begegnen, sich gegenseitig ermutigen und voneinander lernen.'|trans }}</p></div>
<div class="col-md text-center mt-5"><p><i class="fas fa-child mb-4"></i>{{ 'Uns ist es wichtig, dass Youthweb zur Vernetzung von Jugendlichen, Jugendgruppen, Hauskreisen und Gemeinden führt.'|trans }}</p></div>
<div class="col-md text-center mt-5"><p><i class="fas fa-hand-holding-heart mb-4"></i>{{ 'Es ist unser Anliegen, eine Plattform für Initiativen, Projekte und Veranstaltungen zu bieten.'|trans }}</p></div>
</div>
<div class="text-center mb-5"><!-- mb-5: otherwise navbar overlaps -->
<p><a href="{{ url('vision_page') }}" class="btn btn-primary-brand-yellow">{{ 'Mehr erfahren'|trans }}</a></p>
</div>
</div>
{% endblock %}
{
"active_slide": "login",
"login_target_path": "/",
"action_url_login": "http://localhost:8000/login",
"action_url_passwordlost": "http://localhost:8000/passwordReminder",
"action_url_registration": "http://localhost:8000/registration"
}
Diese Startseite sehen nur Besucher, die nicht eingeloggt sind.
Verwende in den Formularen error
im Username oder in der Emailadresse, um die Fehlermeldungen zu testen.