new file: index.de.html

renamed:    index.html -> index.en.html
	modified:   style.css
main
anthony 3 weeks ago
parent 651df41f4d
commit 3030799301

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Communist Internet Federation</title>
</head>
<body>
<!--Welcome Page Sector-->
<div class="page" id="page1">
<h1 class="slidefadein title"><span class="no-break">[ CiF ].su</span></h1>
<h2 class="slidefadein"><span class="no-break">Lass uns die Welt verändern.</span> <span class="no-break">Zum Besseren.</span> <span class="no-break">Gemeinsam.</span> <span class="no-break">Stück für <span class="glitch">Stück</span>.</span></h2>
<div class="background-arms">
<div class="sunken-arms">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 594.962">
<g transform="matrix(3.1679 0 0 3.1679 -.95 -.947)">
<!-- Hammer -->
<path class="filled" d="M84 49h22v112H84z"/>
<path class="filled" d="M64 54h52l16 21v7H64z"/>
<!-- Right grain -->
<path class="stroked" d="M370 495c-15-28-41-45-72-48M367 498c-14-28-41-45-71-47M365 501c-14-26-36-43-70-46M362 504c-12-24-35-43-68-45M357 502c-15-24-35-37-62-39M354 505c-12-21-30-35-58-38M350 506c-11-19-28-32-53-35" transform="translate(-194 -446)"/>
<path class="filled" d="M262 629h13c37-8 64-23 79-45s17-50 4-81 0-1 1-1h1c14 32 11 60-4 83s-43 40-80 48c-8 2-14-4-14-4z" transform="translate(-194 -446)"/>
<path class="filled" d="M370 495c7 31-21 18 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M346 503c31 5 9 27 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M378 509c3 39-25 20 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M352 517c32 10 4 28 0 0zM381 528c0 32-29 22 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M355 530c0 35 27 15 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M383 546c-7 33-35 17 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M353 544c0 32 27 18 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M379 565c-12 31-34 7 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M351 556c-6 33 21 24 0 0zM370 585c-8 16-20 15-21 11-1-2-4-6 21-11zM359 603c-20 22-43-7 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M337 583c-24 28 8 32 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M343 618c-37-15-29 18 0 0z" transform="translate(-194 -446)"/>
<path class="filled" d="M323 594c-28 23 4 35 0 0zM353 491c-3 29 25 15 0 0zM346 569c-9 15-4 24 0 23s7 1 0-23z" transform="translate(-194 -446)"/>
<!-- Left grain -->
<path class="stroked" d="M370 495c-15-28-41-45-72-48M367 498c-14-28-41-45-71-47M365 501c-14-26-36-43-70-46M362 504c-12-24-35-43-68-45M357 502c-15-24-35-37-62-39M354 505c-12-21-30-35-58-38M350 506c-11-19-28-32-53-35" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M262 629h13c37-8 64-23 79-45s17-50 4-81 0-1 1-1h1c14 32 11 60-4 83s-43 40-80 48c-8 2-14-4-14-4z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M370 495c7 31-21 18 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M346 503c31 5 9 27 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M378 509c3 39-25 20 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M352 517c32 10 4 28 0 0zM381 528c0 32-29 22 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M355 530c0 35 27 15 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M383 546c-7 33-35 17 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M353 544c0 32 27 18 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M379 565c-12 31-34 7 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M351 556c-6 33 21 24 0 0zM370 585c-8 16-20 15-21 11-1-2-4-6 21-11zM359 603c-20 22-43-7 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M337 583c-24 28 8 32 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M343 618c-37-15-29 18 0 0z" transform="translate(384 -446) scale(-1,1)"/>
<path class="filled" d="M323 594c-28 23 4 35 0 0zM353 491c-3 29 25 15 0 0zM346 569c-9 15-4 24 0 23s7 1 0-23z" transform="translate(384 -446) scale(-1,1)"/>
</g>
</svg>
</div>
</div>
</div>
<!--Info Sector-->
<div class="page" id="page2">
<div class="card neomorphic about">
<h1>Ach du Scheiße...</h1>
<p>Die Welt steht in Flammen. Sinngemäß und Wortwörtlich. Großunternehmen zerstören den Planeten. Manipulieren die Politil und Bestehlen jeden einzelnen von uns. ES IST ZEIT WAS ZU ÄNDERN. Leider können wir nicht alles auf einmal ändern (auch wenn wir das WIRKLICH WOLLEN würden…), also beginnen wir mit der wichtigsten Säule der modernen Welt: dem Internet.</p>
</div>
<div class="card neomorphic mission">
<h1>Unsere Mission:</h1>
<p>Kostenlose, quelloffene Software, die Nutzer in den Vordergrund stellt und Privatsphäre respektiert. Keine Werbung, keine Sponsoren, keine Tracker und Datenhändler. Alles wird durch Spenden finanziert und von Freiwilligen entwickelt und gewartet.</p>
</div>
<div class="card neomorphic principals">
<h1>Unsere Prinzipien</h1>
<ul>
<li><h2>Transparen</h2><p>Wir laden alle unsere Arbeiten in unser öffentliches Git-Repo hoch auch frühe Entwicklungsversionen oder Sachen, die nicht für die Öffentlichkeit bestimmt sind.</p></li>
<li><h2>Vernetzung und Vereinigung</h2><p>Alle Projekte, die auf serverbasierte Informationen angewiesen sind, müssen sicherstellen, dass andere Server auf Augenhöhe interagieren und mit ihnen interagiert werden kann.</p></li>
<li><h2>Offenes-Schluss Richtlinien</h2><p>Wir müssen sicherstellen, dass alle unsere Projekte so aufgebaut sind, dass der Nutzer die Möglichkeit hat, unser Ökosystem zu verlassen, ohne dabei Funktionen oder gesammelte Nutzerdaten zu verlieren, solange dies technisch möglich ist.</p></li>
<li><h2>Demokratie</h2><p>Alle Entscheidungsfindung muss auf einer anarchisch-demokratischen Basis erfolgen und ALLE freiwilligen [ CiF ]-Mitglieder einbeziehen.</p></li>
<li><h2>Meinungsfreiheit</h2><p>Zur Sicherung der Meinungsfreiheit ist jede Moderation zu dokumentieren und öffentlich zugänglich zu machen, wobei nur das Notwendigste verborgen werden darf.</p></li>
</ul>
</div>
<!--Project Intorductions-->
<div class="card neomorphic projects">
<h1>Unsere Projekte</h1>
<ul>
<li class="cards1 neomorphic-i project"><a href="https://lemmy.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Lemmy/CiF-Lemmy.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://lemmy.cif.su">Lemmy</a></h2><p>Eine Forum-basierte Social-Media-Plattform ähnlich wie Reddit und 4Chan. Voll kompatibel mit dem Fediverse. Ein guter Ort für Diskussionen und Ratschläge.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://peertube.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Peertube/CiF-Peertube.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://peertube.cif.su">Peertube</a></h2><p>Eine P2P-föderierte VOD-Plattform ähnlich wie YouTube und Bilibili. Kostenlos nutzbar für alle ohne Upload-Limit.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://mastodon.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Mastodon/CiF-Mastodon.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://mastodon.cif.su">Mastodon</a></h2><p>Ein Kurznachrichtendienst, ähnlich wie Twitter und BlueSky. Gut für die neuesten Nachrichten, Updates und um deine Meinung kundzutun.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://code.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Git/CiF-Git.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://code.cif.su">Git</a></h2><p>Unser kostenloses Code-Repository, in das wir alle unsere fertigen und laufenden Projekte hochladen. Auch für dich kostenlos nutzbar, als dein eigenes Git-Repository.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://fm.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://fm.cif.su">Radio</a></h2><p>Ein rund um die Uhr linker Webradio-Stream, um die Zeit bis zum endgültigen Kollaps des Kapitalismus zu überbrücken.</p></div></li>
</ul>
</div>
</div>
</body>
</html>

@ -71,7 +71,7 @@
<li><h2>Transparancy</h2><p>All of our work is uploaded to our open Git-Reposetory, even if early development stages, or if they're not even ment for public use.</p></li>
<li><h2>Federation And Unification</h2><p>All Projects that rely on server based Information, have to make sure, that other servers can Interact and can be interacted with, on an Eye-to-Eye Level.</p></li>
<li><h2>Open-Lock Policy</h2><p>We have to make sure all of our projects are build in a way that gives the User the Posibility to leave our Ecosystem, without loosing any Features or Accumulated Userdata, as long as technically possible.</p></li>
<li><h2>Democracy</h2><p>All Decisionmaking, has to be made on a Anarchic-Democratic basis, involving ALL volunteering [CiF] Members</p></li>
<li><h2>Democracy</h2><p>All Decisionmaking, has to be made on a Anarchic-Democratic basis, involving ALL volunteering [ CiF ] Members</p></li>
<li><h2>Freedom of Speech</h2><p>To ensure Freedom of Speech, all Moderation work has to be documented and publically displayed, with only the most necesary elements obscured.</p></li>
</ul>
@ -81,10 +81,11 @@
<div class="card neomorphic projects">
<h1>Our Projects </h1>
<ul>
<li class="cards1 neomorphic-i project"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Lemmy/CiF-Lemmy.svg" class="cards2 neomorphic2"/><div class="info"><h2><a href="https://lemmy.cif.su">Lemmy</a></h2><p>A Forum based Social-Media Platform Similar to Reddit and 4Chan. Fully Compatible with the Fediverse. A good place for Discussion and Advice</p></div></li>
<li class="cards1 neomorphic-i project"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Peertube/CiF-Peertube.svg" class="cards2 neomorphic2"/><div class="info"><h2><a href="https://peertube.cif.su">Peertube</a></h2><p>A Forum based Social-Media Platform Similar to Reddit and 4Chan. Fully Compatible with the Fediverse. A good place for Discussion and Advice</p></div></li>
<li class="cards1 neomorphic-i project"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Mastodon/CiF-Mastodon.svg" class="cards2 neomorphic2"/><div class="info"><h2><a href="https://mastodon.cif.su">Mastodon</a></h2><p>A Forum based Social-Media Platform Similar to Reddit and 4Chan. Fully Compatible with the Fediverse. A good place for Discussion and Advice</p></div></li>
<li class="cards1 neomorphic-i project"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Git/CiF-Git.svg" class="cards2 neomorphic2"/><div class="info"><h2><a href="https://code.cif.su">Git</a></h2><p>Our Free to Use Code Reposetory, where we upload all of our finished & work-in-progress projects. Also Free for you, to use as your own git Reposetory.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://lemmy.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Lemmy/CiF-Lemmy.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://lemmy.cif.su">Lemmy</a></h2><p>A Forum based Social-Media Platform Similar to Reddit and 4Chan. Fully Compatible with the Fediverse. A good place for Discussion and Advice.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://peertube.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Peertube/CiF-Peertube.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://peertube.cif.su">Peertube</a></h2><p>A P2P Federated VOD Platform similar to Youtube and BilliBilli. Free to use for everyone without upload-limit.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://mastodon.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Mastodon/CiF-Mastodon.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://mastodon.cif.su">Mastodon</a></h2><p>A Short-Messaging Service, Similar to Twitter and BlueSky. Good, for the Latest News, Updates and making your opinion heard.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://code.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Git/CiF-Git.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://code.cif.su">Git</a></h2><p>Our Free to Use Code Reposetory, where we upload all of our finished & work-in-progress projects. Also Free for you, to use as your own git Reposetory.</p></div></li>
<li class="cards1 neomorphic-i project"><a href="https://fm.cif.su/"><img src="https://code.cif.su/CiF/Branding/raw/branch/main/Logos/Radio/CiF-Radio.svg" class="cards2 neomorphic2"/></a><div class="info"><h2><a href="https://fm.cif.su">Radio</a></h2><p>A Leftist 24/7 Radio Webradio Stream, to kill the time until the collapse of capitalism finally has gone through.</p></div></li>
</ul>
</div>
</div>

@ -302,7 +302,7 @@ img {
/*Light Color Themes*/
@media (prefers-color-scheme: light) {
:root{
background-color: #000000;
background-color: #fff3f9;
}
#page1 {
@ -469,11 +469,9 @@ img {
.project {
color: #ffa7c7;
}
.project h1 {
color: #fff3f9;
}
.project a:link {
color: #fff3f9;
}
@ -492,3 +490,80 @@ img {
}
}
/*Button Hover Animation*/
@media (prefers-color-scheme: light) {
.neomorphic{
background: #ffa7c7;
box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
2px 2px 20px rgb(255,90,153)
}
.neomorphic-i{
background: #ffa7c7;
box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
1px 1px 15px rgb(255,90,153) inset
}
.neomorphic2{
background: #ffa7c7;
transition: all 0.1s ease-in-out;
transform: scale(1);
cursor: pointer;
box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
2px 2px 20px rgb(255,90,153)
}
.neomorphic2:hover{
background: #ffa7c7;
transform: scale(0.98);
box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
2px 2px 20px rgba(255, 90, 153, 0)
}
.neomorphic2:active{
background: #ffa7c7;
transform: scale(0.96);
box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
1px 1px 15px rgb(255,90,153) inset
}
}
@media (prefers-color-scheme: dark) {
.neomorphic{
background: #55052c;
box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
2px 2px 20px rgba(0, 215, 143, 0.425)
}
.neomorphic-i{
background: #55052c;
box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
1px 1px 15px rgb(0, 0, 0) inset
}
.neomorphic2{
background: #55052c;
transition: all 0.1s ease-in-out;
transform: scale(1);
box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
2px 2px 20px rgba(0, 215, 143, 0.534)
}
.neomorphic2:hover{
background: #55052c;
transform: scale(0.98);
box-shadow: -5px -5px 20px rgba(1, 1, 0, 0),
2px 2px 20px rgba(1, 1, 0, 0)
}
.neomorphic2:active{
background: #55052c;
transform: scale(0.96);
box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
1px 1px 15px rgba(0, 215, 143, 0.425) inset
}
}

Loading…
Cancel
Save