Neues Design bei missocial.de (Friendica-Vorlage home.html, home.css, welcome.tpl)
Ich habe mal etwas das Design der Startseite auf missocial.de überarbeitet. Das alte Design war so ein bisschen angestaubt und ich hatte mich daran sattgesehen.
Neu hingekommen ist nun auch die komplett überarbeitete welcome.tpl, die Idee hatte ich mir von einer anderen Instanz gemopst und dann weiter ausgearbeitet:
Die Hilfeseite ist normalerweise nur für neue User in den ersten 14 Tagen zu sehen. Damit diese aber nicht "verloren" geht nach dieser Zeit, habe ich per Button "Tipps für neue User" meiner Startseite hinzugefügt. Diese Willkommenseite kann man sich hier "live" ansehen.
Für die Startseite wird lediglich eine home.css und home.html in das Stammverzeichnis der Friendica-Installation gepackt.
home.html:
<div id="home_wrapper" class="custom-home-container">
<div class="row">
<div class="col-md-7 login-content">
<h1 class="hero-logo">
missocial<span class="logo-suffix">.de</span>
</h1>
<p class="hero-slogan">
⁂ Part of the Fediverse ⁂
</p>
<div class="hero-text">
<p>
Auf missocial.de kannst du dich mit Freunden und neuen Bekanntschaften vernetzen, deine Erlebnisse teilen und die Vielfalt des Fediverse erkunden.
</p>
<p style="margin-top: 25px;">
Werde Teil eines großen, dezentralen Netzwerks mit ca. 13 Mio. aktiven Nutzern und insgesamt über <b>52,7 Mio. Nutzern</b>. Du kannst dich frei mit anderen austauschen, deine Gedanken, Bilder und Entdeckungen teilen, ohne Tracking, Datensammlung und die Algorithmen großer Konzerne.
</p>
</div>
<div style="margin-top: 30px; font-size: 0.95em; line-height: 1.6;">
<p style="margin-bottom: 5px;">
<i class="fa fa-server" style="margin-right: 5px; opacity: 0.6;"></i>
<a href="https://github.com/friendica/friendica" target="_blank" rel="noopener noreferrer">Friendica 'Interrupted Fern' 2025.07-rc</a> | Gehostet in Deutschland.
</p>
</div>
<div class="hero-badges">
<a href="https://missocial.de/newmember" class="badge-item"><i class="fa fa-rocket"></i> Tipps für neue User</a>
<a href="https://fediversum.info" target="_blank" rel="noopener noreferrer" class="badge-item"><i class="fa fa-info-circle"></i> Einsteiger-Infos zum Fediverse</a>
<a href="https://friendica-hilfe.gitbook.io/friendica-hilfe" target="_blank" rel="noopener noreferrer" class="badge-item"><i class="fa fa-life-ring"></i> Hilfe</a>
<a href="https://info.missocial.de" target="_blank" rel="noopener noreferrer" class="badge-item"><i class="fa fa-database"></i> Infobereich</a>
</div>
<div class="action-area">
<p>
<a href="https://up.missocial.de/status/fediverse" target="_blank" rel="noopener noreferrer">Server-Status</a> ·
<a href="https://globalswitchday.net" target="_blank" rel="noopener noreferrer">Datenschutzfreundliche Alternativen</a> ·
<a href="https://info.missocial.de/nutzungsbedingungen-datenschutzerklaerung/" target="_blank" rel="noopener noreferrer">Nutzungsbedingungen & Datenschutzerklärung</a> ·
<a href="https://info.missocial.de/impressum/" target="_blank" rel="noopener noreferrer">Impressum</a>
</p>
</div>
</div>
</div>
</div>
home.css:
/* ============================================================
MISSOCIAL.DE
============================================================ */
body, html {
padding-top: 0 !important;
}
body.mod-home,
body.mod-login,
.mod-home main,
#top {
padding-top: 0 !important;
margin-top: 0 !important;
}
.mod-home.is-not-singleuser main .container {
width: 100% !important;
max-width: 1400px !important;
padding: 0 20px !important;
margin: 0 auto !important;
}
html, body, #top, .mod-home.is-not-singleuser, .mod-login {
background-color: #0f172a !important;
background-image:
radial-gradient(at 10% 20%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 50%, hsla(225,39%,25%,1) 0, transparent 50%),
radial-gradient(at 90% 80%, hsla(339,49%,25%,1) 0, transparent 50%) !important;
background-attachment: fixed !important;
background-size: cover !important;
color: #e2e8f0 !important;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh;
}
header, nav.navbar, .navbar-fixed-top {
display: none !important;
height: 0 !important;
min-height: 0 !important;
}
nav.navbar, .navbar-fixed-top {
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: none !important;
}
.navbar-brand, #logo-img, #navbar-brand-text {
display: none !important;
}
#nav-about, #nav-login {
color: rgba(255,255,255,0.7) !important;
font-size: 16px !important;
font-weight: 600;
}
#nav-about:hover, #nav-login:hover {
color: #fff !important;
}
nav.navbar, .navbar-fixed-top {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.navbar-brand, #logo-img, #navbar-brand-text {
display: none !important;
}
#nav-about, #nav-login, .nav.navbar-nav.navbar-right, .navbar-toggle {
display: none !important;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background-color: transparent !important;
}
@media (min-width: 992px) {
#content {
margin-top: 0 !important;
padding-top: 50px !important;
display: block !important;
min-height: auto !important;
}
#content > .row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 50px;
width: 100% !important;
margin: 0 auto !important;
max-width: 1440px;
}
.col-md-7 {
flex: 1 1 850px !important;
width: auto !important;
max-width: 950px !important;
text-align: left !important;
padding-right: 30px !important;
}
.col-md-5 {
flex: 0 0 420px !important;
width: 420px !important;
max-width: 420px !important;
margin-top: 15px;
}
}
.login-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
backdrop-filter: none !important;
}
.login-content img, .login-content::before, .login-content::after {
display: none !important;
}
.hero-logo {
font-family: sans-serif;
font-weight: 800;
font-size: 80px;
margin-bottom: 10px;
line-height: 1;
letter-spacing: -3px;
background: linear-gradient(to right, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.logo-suffix {
font-weight: 300; -webkit-text-fill-color: #94a3b8;
letter-spacing: -1px;
}
.hero-slogan {
font-size: 24px;
color: #f8fafc;
margin-bottom: 35px;
font-weight: 700;
line-height: 1.2;
opacity: 0.9;
}
.hero-text {
font-size: 19px;
line-height: 1.75;
margin-bottom: 35px;
color: #cbd5e1;
max-width: 900px;
}
.hero-text + div p {
opacity: 0.7 !important;
font-style: italic;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 25px;
}
.badge-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: #e2e8f0 !important;
padding: 12px 22px;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
text-decoration: none !important;
}
.badge-item i {
color: #818cf8;
font-size: 16px;
}
.badge-item:hover {
background: rgba(59, 130, 246, 0.2);
border-color: #60a5fa;
color: #fff !important;
transform: translateY(-3px);
}
.action-area {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.action-area p {
font-size: 12px;
color: #64748b;
}
.action-area a {
color: #94a3b8 !important;
text-decoration: none !important;
font-weight: 600;
margin: 0 5px;
border-bottom: 2px solid transparent;
transition: 0.3s;
}
.action-area a:hover {
color: #fff !important;
border-bottom: 2px solid #60a5fa;
}
.login-form::before, .login-form::after,
.mod-home.is-not-singleuser .login-form::before,
.mod-home.is-not-singleuser .login-form::after {
display: none !important;
content: none !important;
}
.login-form {
background: rgba(20, 25, 40, 0.9) !important;
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px; padding: 40px !important;
box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.7);
margin-bottom: 0 !important;
}
#login-head h1 {
color: #fff !important;
font-weight: 700;
text-align: center;
margin-bottom: 25px;
font-size: 26px;
}
.login-form input.form-control {
background-color: rgba(0, 0, 0, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
border-radius: 10px; padding: 10px 15px;
height: 50px !important;
font-size: 16px !important;
}
::placeholder {
color: rgba(255,255,255,0.4) !important;
font-size: 16px !important;
}
.login-form input.form-control:focus {
border-color: #60a5fa !important;
background-color: rgba(0, 0, 0, 0.6) !important;
}
.login-form .field.checkbox {
margin-top: 25px !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
}
.login-form input[type="checkbox"] {
margin: 0 8px 0 0 !important;
cursor: pointer;
}
.login-form .checkbox label {
font-size: 14px !important;
color: #94a3b8 !important;
display: flex;
align-items: center;
margin-bottom: 0;
cursor: pointer;
}
#lost-password-link {
display: inline-block !important;
font-size: 13px !important;
color: #60a5fa !important;
margin: 0 !important;
position: static !important;
float: none !important;
}
#lost-password-link:hover {
color: #fff !important;
text-decoration: underline;
}
#login-submit-button {
width: 100%; margin-top: 25px;
background: linear-gradient(to right, #2563eb, #4f46e5) !important;
border: none; border-radius: 10px;
color: #fff !important; font-weight: 700; padding: 12px;
font-size: 18px !important;
transition: 0.2s; box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
}
#login-submit-button:hover {
background: linear-gradient(to right, #1d4ed8, #4338ca) !important;
transform: translateY(-2px);
}
#login-extra-links {
margin-top: 30px;
text-align: center;
border-top: none !important;
padding-top: 15px;
background: transparent !important;
box-shadow: none !important;
}
#login-extra-links hr {
display: none !important;
}
#new-here {
color: #94a3b8 !important;
margin-bottom: 15px;
font-size: 16px;
}
#register-link.btn-default {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #f8fafc !important;
border-radius: 10px;
width: 100%;
padding: 14px;
font-weight: 600;
font-size: 18px !important;
transition: all 0.3s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#register-link.btn-default:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: #ffffff !important;
}
#impressum_footer, footer, .footer {
display: none !important;
}
.navbar-toggle {
display: none !important;
}
@media (max-width: 991px) {
.mod-home.is-not-singleuser main .container { padding: 0 15px !important; }
.hero-logo { font-size: 50px; text-align: center; display: block; }
.hero-slogan, .hero-text, .action-area { text-align: center; }
.hero-badges { justify-content: center; margin-bottom: 40px; }
#content > .row { gap: 40px; flex-direction: column; }
.login-form { padding: 30px !important; }
}
Die welcome.tpl liegt im Unterverzeichnis view/templates/welcome.tpl der Friendica-Installation. Währenddessen die home.html und home.css bei einem Update nicht überschrieben wird, gehe ich aber davon aus, dass die welcome.tpl überschrieben werden könnte. Hier sollte man also nach einem Update nachsehen, ob die Datei ersetzt wurde.
In der welcome.tpl sind 4 QR-Codes als Grafik-Datei eingebunden. Diese verweisen auf die jeweiligen Apps. Die QR-Codes liegen im Stammverzeichnis der Friendica-Installation im Ordner "qrcodes".
welcome.tpl:
{{if $welcome}}
<style>
:root {
--brand-color: #818cf8;
--brand-gradient: linear-gradient(to right, #60a5fa, #a78bfa);
--btn-gradient: linear-gradient(to right, #2563eb, #4f46e5);
--bg-card: rgba(20, 25, 40, 0.95);
--text-main: #ffffff;
--text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.1);
}
.f-welcome-overlay *, .f-welcome-overlay *::before, .f-welcome-overlay *::after {
box-sizing: border-box;
}
.f-welcome-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: #0f172a !important;
background-image:
radial-gradient(at 10% 20%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 50%, hsla(225,39%,25%,1) 0, transparent 50%),
radial-gradient(at 90% 80%, hsla(339,49%,25%,1) 0, transparent 50%) !important;
z-index: 10000; overflow-y: auto; display: block; padding: 40px 15px;
font-family: 'Open Sans', -apple-system, sans-serif;
}
.f-welcome-container {
max-width: 1200px; width: 100%; margin: 0 auto;
background: var(--bg-card); backdrop-filter: blur(25px);
border-radius: 24px; border: 1px solid var(--border-color);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
padding: 50px; color: var(--text-main);
}
.f-hero h1 { font-size: 42px !important; font-weight: 800; text-align: center; margin-bottom: 20px; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
.f-hero p { font-size: 18px !important; line-height: 1.6; color: #cbd5e1; text-align: center; margin-bottom: 50px; max-width: 1050px; margin-left: auto; margin-right: auto; }
.f-login-info { background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.3); padding: 20px; border-radius: 16px; margin-bottom: 30px; display: flex; align-items: center; gap: 20px; }
.f-login-info i { font-size: 32px; color: #60a5fa; }
.f-login-text { font-size: 17px !important; line-height: 1.5; color: #e2e8f0; }
.f-login-text strong { background: #4f46e5; padding: 2px 8px; border-radius: 4px; color: white; font-family: monospace; }
.f-section-title { font-size: 26px !important; font-weight: 700; color: white; display: flex; align-items: center; gap: 15px; margin: 50px 0 25px 0 !important; width: 100%; clear: both; }
.f-section-title .badge { background: #4f46e5; color: white; min-width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 15px rgba(79, 70, 229, 0.4); }
.f-grid-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.f-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.f-grid-profile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.f-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 20px; padding: 25px; height: 100%; display: flex; flex-direction: column; transition: 0.3s; }
.f-box-app { text-align: center; transition: 0.2s; text-decoration: none !important; color: white !important; }
.f-box-app:hover { transform: translateY(-5px); border-color: #60a5fa; background: rgba(255,255,255,0.06); }
.f-box-app strong { font-size: 20px !important; display: block; margin-bottom: 4px; }
.f-box-app span { color: #a78bfa; font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.f-box p { font-size: 16px !important; line-height: 1.5; color: var(--text-muted); margin-bottom: 15px; }
.f-qr-wrap { background: white; padding: 10px; border-radius: 12px; margin: 15px auto 0 auto; display: block; width: 100%; max-width: 140px; }
.f-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.f-tag { background: rgba(129, 140, 248, 0.1); border: 1px solid rgba(129, 140, 248, 0.3); color: #a5b4fc !important; padding: 8px 16px; border-radius: 50px; font-weight: 600; font-size: 15px !important; text-decoration: none; transition: 0.2s; }
.f-tag:hover { background: rgba(129, 140, 248, 0.2); border-color: #818cf8; color: white !important; }
.f-video-box { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 27, 75, 0.8)); text-align: center; align-items: center; justify-content: center; }
.f-help-link { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.04); padding: 15px; border-radius: 12px; text-decoration: none; color: #cbd5e1 !important; font-size: 16px !important; font-weight: 600; margin-bottom: 10px; border: 1px solid var(--border-color); transition: 0.2s; }
.f-help-link:hover { border-color: #60a5fa; background: rgba(59, 130, 246, 0.1); color: white !important; }
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: 0.2s; cursor: pointer; border: none; }
.f-btn-red { background: #dc2626; color: white !important; padding: 12px 25px; font-size: 16px; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
.f-btn-purple { background: var(--btn-gradient); color: white !important; padding: 12px 30px; font-size: 17px; margin-top: auto; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
.f-btn-green { background: #10b981; color: white !important; padding: 18px 50px; font-size: 22px; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); }
.f-btn-action { background: var(--btn-gradient); color: white !important; width: 100%; padding: 12px; border-radius: 12px; font-size: 16px; margin-top: auto; }
.f-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.f-footer { text-align: center; margin: 60px 0 30px 0; clear: both; }
@media (max-width: 850px) {
.f-grid-apps { grid-template-columns: 1fr 1fr; }
.f-grid-half, .f-grid-profile { grid-template-columns: 1fr; }
.f-welcome-container { padding: 30px 20px; }
}
</style>
<div class="f-welcome-overlay">
<div class="f-welcome-container">
<header class="f-hero">
<h1>Willkommen bei missocial.de</h1>
<p>Wir möchten dir einige Tipps und Links anbieten, die dir helfen könnten, den Einstieg angenehmer zu machen. Klicke auf ein Element, um die entsprechende Seite zu besuchen. Ein Link zu dieser Seite hier bleibt für dich an deiner Pinnwand für zwei Wochen nach dem Registrierungsdatum sichtbar und wird dann verschwinden. Du kannst diesen Link aber gerne unter deinen Favoriten abspeichern.</p>
</header>
<!-- Punkt 1 -->
<div class="f-section-title"><span class="badge">1</span> Mobile Apps nutzen</div>
<div class="f-login-info">
<i class="fa fa-key"></i>
<div class="f-login-text">
Servername für deine App: <strong>{{$baseurl}}</strong><br>
Nutze zum Login deinen <strong>Benutzernamen</strong> und dein <strong>Passwort</strong> von {{$baseurl}}.
</div>
</div>
<div class="f-grid-apps">
<a href="https://play.google.com/store/apps/details?id=com.livefast.eattrash.raccoonforfriendica" target="_blank" class="f-box f-box-app">
<strong>Raccoon</strong><span>Android</span>
<div class="f-qr-wrap"><img src="{{$baseurl}}/qrcodes/raccoon.jpg" width="100%"></div>
</a>
<a href="https://play.google.com/store/search?q=Tusky&c=apps" target="_blank" class="f-box f-box-app">
<strong>Tusky</strong><span>Android</span>
<div class="f-qr-wrap"><img src="{{$baseurl}}/qrcodes/tusky.jpg" width="100%"></div>
</a>
<a href="https://apps.apple.com/de/app/mona-classic/id1659154653" target="_blank" class="f-box f-box-app">
<strong>Mona</strong><span>iOS</span>
<div class="f-qr-wrap"><img src="{{$baseurl}}/qrcodes/mona.jpg" width="100%"></div>
</a>
<a href="https://apps.apple.com/de/app/ice-cubes-for-mastodon/id6444915884" target="_blank" class="f-box f-box-app">
<strong>IceCubes</strong><span>iOS</span>
<div class="f-qr-wrap"><img src="{{$baseurl}}/qrcodes/icecubes.jpg" width="100%"></div>
</a>
</div>
<!-- Punkt 2 -->
<div class="f-section-title"><span class="badge">2</span> Starthilfe & Wissen</div>
<div class="f-grid-half">
<div class="f-box f-video-box">
<h3 style="font-size: 22px; margin-bottom: 10px; color: white;">Friendica - Timeline mit Inhalten füllen</h3>
<p>Erfahre, wie du sofort Leben in deine Timeline bringst.</p>
<a href="https://clip.place/w/9mH7RduEWaBhZBYxzycstG" target="_blank" class="f-btn f-btn-red"><i class="fa fa-play"></i> Video ansehen</a>
</div>
<div style="display: flex; flex-direction: column;">
<a href="https://fediversum.info" target="_blank" class="f-help-link"><i class="fa fa-info-circle"></i> Einsteiger-Infos zum Fediverse auf fediversum.info</a>
<a href="https://info.missocial.de" target="_blank" class="f-help-link"><i class="fa fa-globe"></i> Infobereich missocial.de</a>
<a href="https://friendica-hilfe.gitbook.io/friendica-hilfe" target="_blank" class="f-help-link"><i class="fa fa-question-circle"></i> Friendica Hilfe</a>
</div>
</div>
<!-- Punkt 3 & 4 (Abstand unten fixiert) -->
<div class="f-grid-half" style="margin-top: 30px; margin-bottom: 100px;">
<div>
<div class="f-section-title" style="margin: 0 0 20px 0 !important;"><span class="badge">3</span> Themen finden</div>
<div class="f-box">
<p>Suche interessante Themen über Hashtags:</p>
<div class="f-tag-cloud">
<a href="{{$baseurl}}/search?q=%23neuhier" class="f-tag">#neuhier</a>
<a href="{{$baseurl}}/search?q=%23fediverse" class="f-tag">#fediverse</a>
<a href="{{$baseurl}}/search?q=%23foto" class="f-tag">#foto</a>
<a href="{{$baseurl}}/search?q=%23katzen" class="f-tag">#katzen</a>
<a href="{{$baseurl}}/search?q=%23berlin" class="f-tag">#berlin</a>
<a href="{{$baseurl}}/search?q=%23followerpower" class="f-tag">#followerpower</a>
<a href="{{$baseurl}}/search?q=%23fedihilfe" class="f-tag">#fedihilfe</a>
</div>
</div>
</div>
<div>
<div class="f-section-title" style="margin: 0 0 20px 0 !important;"><span class="badge">4</span> Sag "Hallo!"</div>
<div class="f-box" style="background: rgba(129, 140, 248, 0.05); border: 1px dashed rgba(129, 140, 248, 0.4); text-align: center;">
<p>Wenn du magst, verfasse gleich deinen ersten Post und stell dich mit <strong>#neuhier</strong> vor, um schneller gefunden zu werden!</p>
<a href="{{$baseurl}}/compose" class="f-btn f-btn-purple"><i class="fa fa-pencil"></i> Beitrag erstellen</a>
</div>
</div>
</div>
<!-- Punkt 5 -->
<div class="f-section-title"><span class="badge">5</span> Profil vervollständigen</div>
<div class="f-grid-profile">
<div class="f-box" style="text-align: center;">
<i class="fa fa-camera fa-2x" style="color:#a78bfa; margin-bottom: 15px;"></i>
<h4 style="font-size: 18px; margin-bottom: 10px; color: white;">Profilbild</h4>
<a href="{{$baseurl}}/settings/profile/photo" class="f-btn f-btn-action">Foto hochladen</a>
</div>
<div class="f-box" style="text-align: center;">
<i class="fa fa-link fa-2x" style="color:#a78bfa; margin-bottom: 15px;"></i>
<h4 style="font-size: 18px; margin-bottom: 10px; color: white;">Netzwerke</h4>
<a href="{{$baseurl}}/settings/connectors" class="f-btn f-btn-action">Verbinden</a>
</div>
<div class="f-box" style="text-align: center;">
<i class="fa fa-cog fa-2x" style="color:#a78bfa; margin-bottom: 15px;"></i>
<h4 style="font-size: 18px; margin-bottom: 10px; color: white;">Konto</h4>
<a href="{{$baseurl}}/settings" class="f-btn f-btn-action">Einstellungen</a>
</div>
</div>
<!-- Punkt 6 -->
<div class="f-section-title"><span class="badge">6</span> Kontakte importieren</div>
<div class="f-box" style="text-align: center;">
<i class="fa fa-users fa-2x" style="color:#a78bfa; margin-bottom: 15px;"></i>
<p style="text-align:center;">Ziehst du von einer anderen Instanz um oder kommst von Mastodon? Hier kannst du deine Kontakte einfach mitnehmen.</p>
<a href="{{$baseurl}}/settings/importcontacts" class="f-btn f-btn-action" style="max-width: 400px; margin: 0 auto;">Kontakte importieren</a>
</div>
<div class="f-footer">
<button class="f-btn f-btn-green" onclick="finishOnboarding()">
🚀 Hier geht es zu den Feeds in deiner Sprache!
</button>
</div>
</div>
</div>
<script>
function finishOnboarding() {
window.location.href = "{{$baseurl}}/network?channel=language";
}
</script>
{{/if}}
QR-Codes (In der Reihenfolge Raccoon, Tusky, Mona, IceCubes:
