Source code of the spootle.de website. https://spootle.de
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

168 lines
9.6 KiB

<!-- --------------------------------------------- -->
<!-- ---------- Page ------------- -->
<!-- --------------------------------------------- -->
<!-- Begin HTML document -->
<!DOCTYPE html>
<html lang="de">
<!-- Begin head section -->
<head>
<!-- W3CSS stylesheets -->
<link rel="stylesheet" href="/css/w3.css">
<link rel="stylesheet" href="/css/w3-colors-flat.css">
<!-- Font stylesheets -->
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/fork-awesome.css">
<!-- Customization stylesheets -->
<link rel="stylesheet" href="/css/style.css">
<!-- Generic metadata -->
<meta name="generator" content="makesite.py" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Individual metadata -->
<meta name="description" content="Datenschutzfreundliche Dienste betrieben in Deutschland: Eine alternative Internetplattform zu Google, Amazon, Facebook, Apple und Microsoft.">
<title>Spootle - Start</title>
</head>
<!-- Begin body section -->
<body>
<!-- Header section with site title and navigation -->
<div class="w3-top">
<header class="w3-container w3-flat-midnight-blue w3-left w3-bar">
<h1 class="w3-margin w3-xlarge"> Spootle </h1>
</header>
<div class="w3-bar w3-flat-midnight-blue w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-flat-midnight-blue" href="javascript:void(0);" onclick="toggle('navMobile')" title="Toggle Navigation Menu" aria-label="Menü ausklappen"><i class="fa fa-bars" aria-hidden="true"></i></a>
<a href="/" class="w3-bar-item w3-button w3-padding-large w3-hover-white">Home</a>
<a href="/post/" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Blog</a>
<a href="/dienste/" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Dienste</a>
<a href="/ueber/" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Über</a>
<a href="/kontakt/" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Kontakt</a>
<a href="/folgen/" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Folgen</a>
</div>
<div id="navMobile" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href="/post/" class="w3-bar-item w3-button w3-padding-large">Blog</a>
<a href="/dienste/" class="w3-bar-item w3-button w3-padding-large">Dienste</a>
<a href="/ueber/" class="w3-bar-item w3-button w3-padding-large">Über</a>
<a href="/kontakt/" class="w3-bar-item w3-button w3-padding-large">Kontakt</a>
<a href="/folgen/" class="w3-bar-item w3-button w3-padding-large">Folgen</a>
</div>
</div>
<!-- Generated content -->
<div class="w3-row-padding w3-padding-64">
<div class="w3-padding-64">
<div class="w3-container w3-content">
<h2>Spootle - Apps und Dienste für Menschen von Menschen </h2>
<h3>Alternativen zu Google, Facebook und Co.</h3>
<hr>
<header class="w3-container w3-dark-grey">
<h3>Das bietet Spootle</h3>
</header>
<div class="services_teaser w3-leftbar w3-rightbar w3-border-dark-grey w3-animate-opacity w3-pale-blue w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Einen Chat</h1>
<h5 class="w3-padding-32"><b>Die WhatsApp-Alternative - XMPP macht es möglich:</b> Chatte mit deinen Freunden und deiner Familie über ein offenes und standardisiertes Chat-System</h5>
</div>
<div class="w3-third w3-center">
<img src="img/XMPP_logo.png" width="auto" height="128px" alt="XMPP Logo"></img>
</div>
</div>
</div>
<div class="services_teaser w3-leftbar w3-rightbar w3-border-dark-grey w3-animate-opacity w3-pale-yellow w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Eine Suchmaschine</h1>
<h5 class="w3-padding-32"><b>Searx - Die Alternative zur Google-Suche:</b> Durchsuche die Weiten des Internets, ohne Tracking und Profiling</h5>
</div>
<div class="w3-third w3-center">
<img src="img/128px-Searx_logo.png" width="auto" height="128px" alt="Searx Logo"></img>
</div>
</div>
</div>
<div class="services_teaser w3-leftbar w3-rightbar w3-border-dark-grey w3-animate-opacity w3-pale-green w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Eine Tracking-Blockliste</h1>
<h5 class="w3-padding-32"><b>Die Pi-Hole-Blockliste zum netzwerkweiten blocken von Schnüffler*innen:</b> Was weg kann, kann weg: Tracker, Werbung und Malware</h5>
</div>
<div class="w3-third w3-center">
<img src="img/Pi-hole_Logo.png" height="auto" width="128px" alt="Pi-Hole Logo"></img>
</div>
</div>
</div>
<a class="w3-button w3-block w3-dark-grey" href="/dienste/"><h3>Zu den Diensten</h3></a>
<div class="w3-container w3-padding-32"></div>
<h2>Die Grundwerte</h2>
<hr>
<div class="w3-content w3-padding-32">
<div class="w3-twothird">
<h3>Privacy by Design</h3>
<h5 class="w3-padding-32">
<b>Datenschutz ist ein elementarer Bestandteil eines zukunftsfähigen Internets.</b> Deshalb verzichtet Spootle auf externe Tracking-Methoden, bildet keine Persönlichkeitsprofile zu Marketingzwecken und Verkauft keine persönlichen Daten von Dir.
</h5>
</div>
<div class="w3-third w3-center">
<i class="fa fa-lock fa-5x w3-padding-64" aria-hidden="true"></i>
</div>
</div>
<div class="w3-content w3-padding-32">
<div class="w3-twothird">
<h3>Open Source</h3>
<h5 class="w3-padding-32"><b>Open Source und freie Software ist unerlässlich für eine sichere, transparente und vielfältige digitale Landschaft.</b> Die angebotenen Dienste basieren auf bekannter quelloffener Software und lassen sich vollständig mit solcher nutzen.</h5>
</div>
<div class="w3-third w3-center">
<i class="fa fa-creative-commons fa-5x w3-padding-64" aria-hidden="true"></i>
</div>
</div>
<div class="w3-content w3-padding-32">
<div class="w3-twothird">
<h3>Dezentral</h3>
<h5 class="w3-padding-32">
<b>Monopole sind schädlich für Nutzer*innen.</b> Spootle ist ein Teil einer großen Community um datenschutzfreundliche, quelloffene Angebote. Du wirst ein Teil dieser Community, ohne dass Du in die Fänge von profitgetriebenem vendor-lock-in gerätst.
</h5>
</div>
<div class="w3-third w3-center">
<i class="fa fa-globe fa-5x w3-padding-64" aria-hidden="true"></i>
</div>
</div>
<div class="w3-content w3-padding-32">
<div class="w3-twothird">
<h3>Föderiert</h3>
<h5 class="w3-padding-32">
<b>Walled Gardens sind nicht nachhaltig.</b> Förderierte Angebote sorgen dafür, dass sich die Spootle-Dienste mit anderen Anbieter*innen vernetzen und Du über Plattformgrenzen mit anderen Nutzer*innen interagieren kannst, wie man es von E-Mail kennt.
</h5>
</div>
<div class="w3-third w3-center">
<i class="fa fa-handshake-o fa-5x w3-padding-64" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<script src=js/slideshow_services_teaser.js></script>
<!-- Footer section -->
<footer class="w3-container w3-center w3-opacity">
<div class="w3-xlarge">
<a href="/post/index.xml" aria-label="rss"><i class="fa fa-rss w3-hover-opacity" aria-hidden="true"></i></a>
<a href="https://social.anoxinon.de/@spootle" aria-label="mastodon"><i class="fa fa-mastodon w3-hover-opacity" aria-hidden="true"></i></a>
<a href="#ZgotmplZ" aria-label="xmpp"><i class="fa fa-xmpp w3-hover-opacity" aria-hidden="true"></i></a>
<a href="https://codeberg.org/spootle" aria-label="git"><i class="fa fa-git w3-hover-opacity" aria-hidden="true"></i></a>
</div>
<p>
| <a href="/datenschutz/">Datenschutz</a> | <a href="/impressum/">Impressum</a> | <a href="/agb/">Nutzungsbedingungen</a> |
</p>
</footer>
<!-- Javascript content -->
<script src="/js/script.js"></script>
</body>
</html>