commit c9efff5250a62c87f5fed3183958674d67203a97
parent 862ad8fbb699f834b52485d5e87b29425560c3f5
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Wed, 11 Jun 2025 22:24:05 +0200
feat: Update app and design substantially
Diffstat:
4 files changed, 160 insertions(+), 60 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -30,15 +30,40 @@
}
}
+/* Buttons */
+.buttonrow {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+}
+.buttonrow > button.c2,
+.buttonrow > .button.c2 {
+ flex: 45%;
+ min-width: 180px;
+ text-align: center;
+}
+
/* Set large margins around the description */
.description {
margin-top: 3em;
/* margin-bottom: 50vh; */
- height: 100vh;
+}
+
+.fullheight {
+ height: 100%;
+ min-height: 100vh;
+}
+
+.screenshots > img {
+ width: 100%;
+ max-width: 250px;
+ display: inline-block;
}
/* Description buttons should always be in one line */
-.description > .button {
+.description > .button,
+.screenshots > .button
+ {
width: calc((100% / 2) - 10px); /* Two buttons with 10px margin between */
text-align: center;
}
@@ -75,3 +100,7 @@ article > .categories > mark
mark {
display: inline-block;
}
+
+img, video {
+ opacity: 1 !important;
+}
diff --git a/assets/img/applications/gfeeds_desktop.jpg b/assets/img/applications/gfeeds_desktop.jpg
Binary files differ.
diff --git a/assets/img/applications/gfeeds_mobile.jpg b/assets/img/applications/gfeeds_mobile.jpg
Binary files differ.
diff --git a/index.php b/index.php
@@ -1,19 +1,16 @@
-<!--
-SPDX-License-Identifier: AGPL-3.0-or-later
-SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
--->
-
-<!-- Loading configuration -->
<?php
+
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
+ */
+
+ /* Loading configuration */
$config = json_decode(
file_get_contents("./news-sources.json"),
true
);
-?>
-
-<!-- OPML Generator -->
-<?php
+ /* OPML Generator */
/* Check for user input */
if (!is_null($_POST["action"])) {
@@ -38,48 +35,36 @@ SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
header('Content-Type: application/xml; charset=UTF-8');
header('Content-Disposition: Attachment;filename=kontra.opml');
?>
+
<opml version="2.0">
<head>
<title>Nachrichten-Export von Kontra - der linke Newsaggregator</title>
</head>
<body>
-<?php
-
- /* Cycle through each category */
- foreach ($config["categories"] as $category) {
-
-?>
-
-<outline
- title="<?php echo $category["name"]; ?>"
- text="<?php echo $category["name"]; ?>"
->
<?php
- /* Within each category, find selected sources that are part of it */
- foreach ($sources as $source) {
- $match = preg_grep("/^" . $category["id"] . "$/", $source["categories"]);
- if (count($match) > 0) {
+ /* Cycle through each source and write source entry */
+ foreach ($sources as $source) {
+
+ /* Create category list */
+ $categories = array();
+ foreach ($source["categories"] as $category) {
+ array_push($categories, $config["categories"][$category]["name"]);
+ }
?>
+
<outline
title="<?php echo $source["title"]; ?>"
text="<?php echo $source["title"]; ?>"
+ category="<?php echo implode(",", $categories); ?>"
xmlUrl="<?php echo $source["rss"]; ?>"
/>
-<?php
-
- } // if-match
- } // foreach-source
-
-?>
-
-</outline>
<?php
- } // foreach-category
+ } // foreach-source
?>
@@ -130,7 +115,7 @@ SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
</header>
<!-- Description -->
- <div class="description">
+ <div class="fullheight description">
<strong style="font-size: 133%;">
<em>Kontra</em> gibt Nutzer:innen die Möglichkeit,
unterschiedliche Nachrichtenquellen zu einem persönlichen
@@ -143,34 +128,99 @@ SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
sonstigen journalistischen Veröffentlichungen, aus denen sich
persönliche Nachrichten-Feeds erstellt werden lassen.
</p>
- <a href="#sources" class="button">
- Zu den Nachrichten!
- </a>
- <a href="#faqs" class="button">
- Wie funktioniert das?
- </a>
+ <div class="buttonrow">
+ <a href="#usage" class="button c2">
+ Wie funktioniert das?
+ </a>
+ <a href="#sources" class="button c2">
+ Zu den Nachrichten!
+ </a>
+ </div>
+ </div>
+
+ <div class="fullheight screenshots" id="usage">
+ <h3>Was ist Kontra?</h3>
+ <figure class="buttonrow">
+ <img style="flex:26%;min-width:91px;margin:2.5px;" src="assets/img/applications/gfeeds_mobile.jpg">
+ <img style="flex:72%;min-width:252px;margin:2.5px;" src="assets/img/applications/gfeeds_desktop.jpg">
+ <figcaption style="width:100%;">
+ Nachrichten Feeds aus Kontra in <a href="https://gfeeds.gabmus.org/" target="_blank">Gnome Feeds</a>
+ </figcaption>
+ </figure>
+ <p>
+ Kontra versetzt Nutzer:innen in die Lage, selbstbestimmt
+ personalisierte Nachrichten-Feeds von seriösen <em>linken</em>
+ Quellen zu erstellen, um immer auf dem Laufenden zu bleiben.
+ Und das selbstverständlich
+ <strong>ohne <a href="https://de.wikipedia.org/wiki/Web_Analytics" target="_blank">Tracking</a></strong>,
+ <strong>ohne Datensammelwut</strong>,
+ <strong>ohne Konto-Zwang</strong>
+ <strong>ohne <a href="https://de.wikipedia.org/wiki/Soziales_Netzwerk_(Internet)#Kritik" target="_blank">Algorithmen</a></strong> und
+ <strong>ohne <a href="https://de.wikipedia.org/wiki/Lock-in-Effekt" target="_blank">Lock-In Effekte</a></strong>.
+ </p>
+ <p>
+ Hierfür nutzt Kontra die offene Schnittstelle
+ <a href="https://de.wikipedia.org/wiki/RSS_(Web-Feed)" target="_blank">
+ RSS
+ </a> (zu deutsch: <em>sehr einfache Verbreitung</em>), welche
+ von Millionen Webseiten und Online-Zeitungen weltweit zur
+ Verfügung gestellt wird, um Nachrichten auf direktem Weg an
+ interessierte zu verteilen. RSS ist das <em>schwarze Brett</em>
+ von Zeitungen, Blogs und digitalen Veröffentlichungen.
+ </p>
+ <p>
+ Kontra ist ein Archiv mit aktuell
+ <?php echo count($config["sources"]); ?> Nachrichtenquellen in
+ <?php echo count($config["categories"]); ?> unterschiedlichen
+ Kategorien, aus dem sich Nutzer:innen nach ihren Interssen
+ eigene Feeds erzeugen können. Die hier herunterladbaren
+ <a href="https://de.wikipedia.org/wiki/Outline_Processor_Markup_Language" target="_blank">
+ Nachrichten-Feed Dateien
+ </a> können in beliebigen
+ <a href="https://de.wikipedia.org/wiki/Feedreader" target="_blank">
+ Feed-Readern
+ </a> eingeladen uns sofort genutzt werden!
+ Zum Beispiel in diesen
+ <a href="https://fsfe.org/freesoftware/freesoftware.de.html" target="_blank">
+ Freien
+ </a> und kostenlosen Apps für Android und iOS:
+ <ul>
+ <li><a href="https://apps.apple.com/us/app/netnewswire-rss-reader/id1480640210" target="_blank">NetNewsWire (iOS)</a></li>
+ <li><a href="https://apps.apple.com/us/app/twine-rss-reader/id6465694958" target="_blank">Twine (iOS)</a></li>
+ <li><a href="https://play.google.com/store/apps/details?id=com.nononsenseapps.feeder.play" target="_blank">Feeder (Android)</a></li>
+ <li><a href="https://play.google.com/store/apps/details?id=dev.sasikanth.rss.reader" target="_blank">Twine (Android)</a></li>
+ <li><a href="https://freshrss.org/" target="_blank">FreshRSS (Web)</a></li>
+ <li><a href="https://www.thunderbird.net/de/" target="_blank">Thunderbird (Windows, MacOS, Linux)</a></li>
+ <li><a href="https://gfeeds.gabmus.org/" target="_blank">Feeds (Linux)</a></li>
+ <li><a href="https://alternativeto.net/browse/search/?q=rss%20reader" target="_blank">und viele weitere</a>...</li>
+ </ul>
+ </p>
+ <p>
+ Ganz einfach in nur <strong>zwei Minuten</strong> loslegen!
+ Nachrichtenquellen aussuchen, Feed-Datei herunterladen, in
+ den Reader importieren und sofort informiert werden.
+ </p>
+
+ <div class="buttonrow">
+ <a href="#faqs" class="button c2">
+ Mehr erfahren
+ </a>
+ <a href="#sources" class="button c2">
+ Zu den Nachrichten!
+ </a>
+ </div>
</div>
<!-- Search Engine Lists -->
- <h3 id="sources">Eigenen Nachrichten-Feed generieren</h3>
-
- <!--<p>
- Aktuell stehen
- <strong><?php echo count($config["sources"]); ?>
- Nachrichtenquellen
- </strong> in
- <strong><?php echo count($config["categories"]); ?>
- Kategorien
- </strong>
- zur verfügung.
- </p>-->
+ <h3 id="sources" style="margin-top:5em;">
+ Eigenen Nachrichten-Feed generieren
+ </h3>
<p>
Wähle beliebig viele Nachrichtenquellen aus der unteren Liste aus
und klicke auf den <strong>Nachrichten-Feed erzeugen</strong> Knopf.
Speichere die darauf angebotene OPML-Datei ab und importiere sie in
deinen RSS-Reader.
</p>
-
<!-- Filterbar -->
<input
id="sources_filterbar"
@@ -279,11 +329,32 @@ SPDX-FileCopyrightText: 2025 JayVii <jayvii+kontra[AT]posteo[DOT]de>
<!-- meaning of name -->
<details>
- <summary>What does serĉi mean?</summary>
+ <summary>Sammelt Kontra meine Daten?</summary>
+ <p>
+ Nein! Kontra sammelt keinerlei Datein über Personen und
+ Geräte, die diese Seite besuchen und Kontra nutzen.
+ Technisch bedingt, wird bei jedem Aufruf <em>jeder</em>
+ Webseite im Internet mindestens die eigene IP-Adresse und
+ oft noch weitere Informationen über das Betriebssystem, den
+ Webbrowser, bzw. das verwendete Gerät übermittelt. Kontra
+ speichert <strong>keine</strong> dieser Informationen.
+ </p>
+ <p>
+ Zudem stellt Kontra lediglich das Archiv von RSS-Feeds zur
+ Verfügung. Kontra speichert außerdem keine Informationen
+ darüber, welche Nachrichtenquellen von Nutzer:innen
+ ausgewählt werden.
+ </p>
<p>
- It is the Esperanto term for "to search".This may not be the
- most creative name for such a software project but to the
- best of my knowledge, it is a unique one.
+ Mit dem Herunterladen der Feed-Datei endet der
+ Datenaustausch zwischen den Nutzer:innen und Kontra. Kontra
+ hat technisch bedingt keinen Einblick darin, ob und welche
+ Nachrichten Nutzende in welche Feedreader einlesen oder
+ welche Nachrichten tatsächlich von Nutzer:innen gelesen
+ werden. Das liegt daran, dass die Nachrichten
+ <strong>direkt</strong> und ohne Umwege von den jeweiligen
+ Nachrichtenseiten kommen und zu keinem Zeitpunkt über Kontra
+ laufen.
</p>
</details>
