hacklab/OASIS-PROJECT
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

oasis-project.pub

Browse source
This commit is contained in:
root 2025-11-06 21:49:24 +01:00
parent 8080b8be65
commit c9bf099c29
184 changed files with 244310 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

335
subdirectorios/forms.css Normal file
View file

@ -0,0 +1,335 @@
/* larp.css */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--black: #000000;
--highlight: #FF8C00;
--font-body: 'Rajdhani', sans-serif;
--font-display: 'Orbitron', sans-serif;
}
body {
background-color: var(--black);
color: var(--yellow);
font-family: var(--font-body);
margin: 0;
padding: 0;
}
.screen {
width: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
position: relative;
text-align: center;
}
.screen-1 {
padding-top: 0.5rem;
margin-top: 0;
}
.screen-2 {
padding-top: 0;
margin-top: 0;
}
.content {
width: 100%;
max-width: none;
background-color: rgba(0, 0, 0, 0.6);
padding: 2rem 3rem;
border-radius: 0;
box-shadow: 0 0 10px var(--orange-neon);
}
h2 {
font-family: var(--font-display);
font-size: 2.8rem;
color: var(--orange-neon);
margin-bottom: 1.5rem;
text-shadow: 0 0 10px var(--orange-neon);
}
h3 {
font-size: 1.5rem;
color: var(--yellow);
margin-top: 1rem;
}
.formulario {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
text-align: left;
}
.formulario label {
font-weight: bold;
color: var(--orange-neon);
text-align: left;
}
.formulario input,
.formulario textarea,
.formulario select {
padding: 0.8rem;
border: none;
border-radius: 6px;
font-size: 1rem;
background-color: #111;
color: var(--yellow);
}
.btn {
background-color: transparent;
color: var(--yellow);
border: 2px solid var(--yellow);
padding: 0.7rem 1.5rem;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin-top: 1rem;
transition: all 0.3s ease;
}
.btn:hover {
background-color: var(--yellow);
color: var(--black);
box-shadow: 0 0 10px var(--yellow);
}
.card-group {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: space-evenly;
margin-top: 2rem;
}
.card {
background-color: rgba(20, 20, 20, 0.9);
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
width: 260px;
max-width: 100%;
cursor: pointer;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 20px var(--orange-neon);
}
.card h3 {
font-size: 1.3rem;
color: var(--orange-neon);
margin-bottom: 0.5rem;
}
.card .summary {
font-size: 1rem;
color: var(--yellow);
}
.extra-info {
display: none;
margin-top: 1rem;
}
.card.expanded .extra-info {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
.extra-info img {
width: 100%;
max-width: 200px;
border-radius: 8px;
margin-top: 0.5rem;
box-shadow: 0 0 10px var(--yellow);
}
/* Tabla visual para las preguntas del formulario estilo HELP OUT */
.question {
margin-top: 2rem;
text-align: left;
width: 100%;
}
.question p {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--yellow);
text-shadow: 0 0 5px var(--yellow);
}
.question-table {
width: 100%;
border-collapse: collapse;
margin-top: 0.5rem;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px var(--orange-neon);
}
.question-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--orange-neon);
font-size: 1rem;
color: var(--yellow);
}
.question-table input[type="radio"] {
margin-right: 0.6rem;
transform: scale(1.2);
}
.question-table label {
cursor: pointer;
display: flex;
align-items: center;
color: var(--yellow);
gap: 0.75rem;
}
/* Asegura que no haya scroll lateral inesperado */
body, html {
overflow-x: hidden;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
h2 {
font-size: 2rem;
}
**** .content {
padding: 1.2rem;
}
.btn {
width: 100%;
padding: 1rem;
font-size: 1.1rem;
margin-top: 1.5rem;
}
.formulario input,
.formulario textarea,
.formulario select,
#quizForm input,
#quizForm textarea,
#quizForm select {
font-size: 1rem;
padding: 0.8rem;
width: 100%;
box-sizing: border-box;
}
.question p {
font-size: 1.05rem;
}
.question label {
font-size: 1rem;
line-height: 1.4;
}
}
@media (max-width: 480px) {
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.screen {
padding: 1rem 0;
}
.content {
padding: 1rem;
width: 100%;
box-sizing: border-box;
}
h2 {
font-size: 1.8rem;
text-align: center;
}
.formulario {
padding: 0;
margin: 0;
}
.formulario input,
.formulario textarea,
.formulario select {
font-size: 1rem;
width: 100%;
box-sizing: border-box;
}
.question {
padding: 0;
margin: 1rem 0;
}
.question p {
font-size: 1rem;
margin-left: 0;
margin-right: 0;
}
.question-table {
width: 100%;
}
.question-table td {
padding: 0.3rem 0.4rem;
font-size: 0.95rem;
line-height: 1.4;
}
.question-table input[type="radio"] {
transform: scale(1.1);
margin-right: 0.4rem;
vertical-align: middle;
}
.question-table label {
display: inline-block;
width: 100%;
padding: 0.2rem 0;
white-space: normal;
color: var(--yellow);
}
.btn {
display: inline-block;
margin-top: 1.2rem;
padding: 0.5rem 1rem;
font-size: 1rem;
max-width: 100%;
text-align: left;
white-space: normal;
box-sizing: border-box;
}
}

205
subdirectorios/forms.html Normal file
View file

@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LARP - OASIS</title>
<link rel="stylesheet" href="forms.css" />
</head>
<body>
<section class="screen screen-1">
<div class="content">
<h2>ACADEMIA</h2>
<p>Have you just arrived? Feeling lost or in a learning phase to become part of a House?
This is your place.</p>
<form id="formulario">
<label for="nombre">Codename:</label>
<input type="text" id="nombre" name="nombre" required />
<button type="button" class="btn" onclick="startTest()">Start Formulary</button>
</form>
<div id="questions" style="display:none;">
<form id="quizForm">
<div class="question" id="q1" style="display:none;">
<p>1. What would you do at a party where you don't know anyone?</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q1" value="a"/> Stay in a corner reading an interesting book or not.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="b"/> Grab the mic to start a conga line or shot contest.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="c"/> Show off your latest tech gadget from your backpack.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="d"/> Find a cat and become best friends all night.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="e"/> Play weird music to see how people react on the dancefloor.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="f"/> Talk to everyone about their deepest beliefs.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="g"/> Join the karaoke and give it your all.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="h"/> Offer to watch the coats and make sure no one drives drunk.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="i"/> Help with snacks and set up the chillout zone lights.</label></td></tr>
<tr><td><label><input type="radio" name="q1" value="j"/> All of the above, depending on the day and the vibe.</label></td></tr>
</tbody>
</table>
</div>
<div class="question" id="q2" style="display:none;">
<p>2. Classic one... What would you take to a deserted island?</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q2" value="a"/> A solid collection of books and manuals.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="b"/> A megaphone to organize the coconuts.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="c"/> A toolkit to make even more tools.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="d"/> Seeds to grow your own garden.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="e"/> A large thick piece of fabric — it's super versatile.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="f"/> A notebook to document everything. A perfect experiment.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="g"/> A camera and a guitar.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="h"/> A first aid kit and a fishing net.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="i"/> Blueprints to build a raft.</label></td></tr>
<tr><td><label><input type="radio" name="q2" value="j"/> Nothing. A deserted island is exactly what I need!</label></td></tr>
</tbody>
</table>
</div>
<div class="question" id="q3" style="display:none;">
<p>3. Define your leadership style in one word:</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q3" value="a"/> I inspire.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="b"/> I organize.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="c"/> I develop.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="d"/> I cultivate.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="e"/> I shake things up.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="f"/> I reflect.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="g"/> I express.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="h"/> I protect.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="i"/> I connect.</label></td></tr>
<tr><td><label><input type="radio" name="q3" value="j"/> I don't identify with any leadership style.</label></td></tr>
</tbody>
</table>
</div>
<div class="question" id="q4" style="display:none;">
<p>4. How do you deal with unexpected challenges?</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q4" value="a"/> I research and seek informed solutions.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="b"/> I organize a team to tackle the issue.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="c"/> I find innovative tools to help solve it.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="d"/> I look to nature for inspiration.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="e"/> I improvise and let creativity flow.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="f"/> I reflect on the challenge’s purpose.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="g"/> I turn it into an opportunity for expression.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="h"/> I assess risks and prioritize safety.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="i"/> I build a solution that serves everyone’s well-being.</label></td></tr>
<tr><td><label><input type="radio" name="q4" value="j"/> I freeze and hope someone else solves it.</label></td></tr>
</tbody>
</table>
</div>
<div class="question" id="q5" style="display:none;">
<p>5. If someone fails to meet their responsibilities, how do you respond?</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q5" value="a"/> I offer support so they can learn.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="b"/> I engage in dialogue to understand and help.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="c"/> I optimize the process to make it easier.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="d"/> I assess the environment affecting performance.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="e"/> I rethink the situation for better collaboration.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="f"/> I reflect on the incident and what to learn from it.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="g"/> I motivate them creatively to engage.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="h"/> I provide practical help immediately.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="i"/> I adjust resources to keep things running.</label></td></tr>
<tr><td><label><input type="radio" name="q5" value="j"/> I think they should have spoken up earlier if they couldn’t manage.</label></td></tr>
</tbody>
</table>
</div>
<div class="question" id="q6" style="display:none;">
<p>6. How do you describe yourself when working in a team?</p>
<table class="question-table">
<tbody>
<tr><td><label><input type="radio" name="q6" value="a"/> I'm the researcher who finds key data.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="b"/> I like to lead and organize the effort.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="c"/> I'm the one who solves technical issues.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="d"/> I bring harmony and connection with the environment.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="e"/> I'm the one with crazy, innovative ideas.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="f"/> I ask deep questions to guide the group.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="g"/> I'm the creative who designs or communicates.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="h"/> I make sure everyone feels safe and cared for.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="i"/> I build bridges so the team works better.</label></td></tr>
<tr><td><label><input type="radio" name="q6" value="j"/> I don’t work well in teams. It makes me uncomfortable.</label></td></tr>
</tbody>
</table>
</div>
<button type="button" class="btn" onclick="nextQuestion()">Next question</button>
<div id="result" style="display:none;">
<h3>You wold fit right in this house, but everybody starts in house ACADEMIA enter the code: </h3>
<a id="resultLink" class="btn" href="#" target="_blank">Tu casa</a>
<h3></h3>
<h3>But everybody starts in house ACADEMIA to join enter the code</h3>
<h3></h3>
<h2>1y6vl2e5</h2>
<h3>Launch OASIS then -->INVITES --> TRIBES: Paste the code and Join! </h3>
<h3>Start your path in OASIS!!</h3>
</div>
</div>
</section>
<script>
let currentQuestion = 1;
function startTest() {
document.getElementById('questions').style.display = 'block';
document.getElementById('q1').style.display = 'block';
}
function nextQuestion() {
const current = document.getElementById('q' + currentQuestion);
if (!document.querySelector('input[name="q' + currentQuestion + '"]:checked')) {
alert("Please select an answer first");
return;
}
current.style.display = 'none';
currentQuestion++;
if (currentQuestion > 6) {
showResult();
} else {
document.getElementById('q' + currentQuestion).style.display = 'block';
}
}
function showResult() {
const counts = {};
for (let i = 1; i <= 6; i++) {
const val = document.querySelector('input[name="q' + i + '"]:checked').value;
counts[val] = (counts[val] || 0) + 1;
}
let max = 0, result = 'a';
for (let k in counts) {
if (counts[k] > max) {
max = counts[k];
result = k;
}
}
const names = {
a: 'ACADEMIA',
b: 'SolarIS',
c: 'ARRakis',
d: 'TERRA.VErDE',
e: 'UNSYSTem',
f: 'DogmA',
g: 'HeliX',
h: 'QuarK',
i: 'HERmanDAD',
j: 'ACADEMIA+HERmanDAD'
};
const houseName = names[result];
const link = 'https://pub.solarnethub.com' + houseName.toLowerCase();
document.getElementById('resultLink').textContent = 'HOUSE ' + houseName;
document.getElementById('resultLink').href = link;
document.getElementById('result').style.display = 'block';
}
</script>
</body>
</html>

175
subdirectorios/helpout.css Normal file
View file

@ -0,0 +1,175 @@
/* helpout.css */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--black: #000000;
--white: #f2f2f2;
--highlight: #FF8C00;
--font-body: 'Rajdhani', sans-serif;
--font-display: 'Orbitron', sans-serif;
}
body {
background-color: var(--black);
color: var(--white);
font-family: var(--font-body);
margin: 0;
padding: 0;
line-height: 1.6;
scroll-behavior: smooth;
}
.screen.help {
min-height: 100vh;
padding: 4rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
background-size: cover;
text-align: center;
}
.content {
width: 95%;
max-width: 2200px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px var(--orange-neon);
}
h2 {
font-family: var(--font-display);
font-size: 2.8rem;
color: var(--orange-neon);
text-shadow: 0 0 10px var(--orange-neon);
margin-bottom: 1.5rem;
}
h3 {
font-size: 1.6rem;
color: var(--yellow);
margin-top: 2rem;
margin-bottom: 1rem;
text-shadow: 0 0 6px var(--yellow);
}
.task-list {
list-style-type: none;
padding: 0;
margin: 1rem 0;
text-align: left;
}
.task-list li {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 1rem;
}
.house-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.toggle-button {
background-color: transparent;
border: 2px solid var(--orange-neon);
color: var(--yellow);
padding: 0.5rem 1rem;
font-family: var(--font-display);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-button:hover {
background-color: var(--orange-neon);
color: #000;
box-shadow: 0 0 10px var(--highlight);
}
.toggle-section {
display: none;
margin-top: 1rem;
}
.toggle-section.visible {
display: block;
}
.house-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
text-align: left;
box-shadow: 0 0 12px var(--orange-neon);
background-color: rgba(20, 20, 20, 0.8);
}
.house-table th, .house-table td {
border: 1px solid var(--yellow);
padding: 0.75rem;
color: var(--white);
}
.house-table th {
background-color: rgba(255, 94, 0, 0.2);
color: var(--orange-neon);
}
a {
color: var(--yellow);
text-decoration: none;
}
a:hover {
color: var(--orange-neon);
text-shadow: 0 0 6px var(--highlight);
}
@media (max-width: 768px) {
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.4rem;
}
.content {
padding: 1.5rem;
}
.house-table th, .house-table td {
font-size: 0.95rem;
}
.toggle-button {
padding: 0.4rem 0.8rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.content {
padding: 1.5rem 1rem;
}
.task-list li,
.house-table td,
.house-table th {
font-size: 0.9rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.2rem;
}
.house-buttons {
flex-direction: column;
gap: 0.5rem;
}
}

117
subdirectorios/helpout.html Normal file
View file

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Help Out - OASIS</title>
<link rel="stylesheet" href="helpout.css" />
</head>
<body>
<section class="screen help">
<div class="content">
<h2>HELP OUT</h2>
<p>We are building OASIS together. Choose where your energy flows best:</p>
<h3>TO:DO LIST</h3>
<table class="house-table">
<thead>
<tr><th>Category</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>[PLUGIN]</td><td>Multicuenta</td></tr>
<tr><td>[CORE]</td><td>Refactorizar GUI (actual)</td></tr>
<tr><td>[PLUGIN]</td><td>SHOP: genera tu propia tienda y ofrece productos</td></tr>
<tr><td>[PLUGIN]</td><td>PODCAST: streaming WebRTC o Jitsi, archivalo vía PeerTube</td></tr>
<tr><td>[PLUGIN]</td><td>JOBS: ofertas y búsqueda de trabajo</td></tr>
<tr><td>[PLUGIN]</td><td>START-UP: presenta ideas, recibe apoyo financiero</td></tr>
<tr><td>[PLUGIN]</td><td>STEALTH: navegación encubierta</td></tr>
<tr><td>[PLUGIN]</td><td>IA ASSISTANT: acompañamiento con IA local</td></tr>
<tr><td>[PLUGIN]</td><td>VoIP dialup: realizar llamadas telefónicas</td></tr>
<tr><td>[PLUGIN]</td><td>Legacy: exportar/importar tu clave secreta cifrada</td></tr>
<tr><td>[CORE]</td><td>Modularizar código: plugins, estilos, rutas</td></tr>
<tr><td>[CORE]</td><td>Añadir idiomas al selector (i18n.js)</td></tr>
<tr><td>[PLUGIN]</td><td>Sistema de cifrado simétrico cliente</td></tr>
<tr><td>[PLUGIN]</td><td>PAD colaborativo para escritura distribuida</td></tr>
</tbody>
</table>
<h3>HOUSE TASK MATRIX</h3>
<div class="house-buttons">
<button class="toggle-button" data-target="academia">🌀 ACADEMIA</button>
<button class="toggle-button" data-target="solaris">🔆 SolarIS</button>
<button class="toggle-button" data-target="arrakis">🔧 ARRakis</button>
<button class="toggle-button" data-target="terra">🌱 TERRA.VErDE</button>
<button class="toggle-button" data-target="unsystem">🌀 UNSYSTem</button>
<button class="toggle-button" data-target="dogma">📖 DogmA</button>
<button class="toggle-button" data-target="helix">🎭 HeliX</button>
<button class="toggle-button" data-target="quark">🛡 QuarK</button>
</div>
<div id="academia" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Educator</td><td>Write guides, prepare onboarding</td></tr></tbody>
</table>
</div>
<div id="solaris" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Moderator</td><td>Forum curation, language facilitation</td></tr></tbody>
</table>
</div>
<div id="arrakis" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Developer</td><td>Fix bugs, host services</td></tr></tbody>
</table>
</div>
<div id="terra" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Eco-Engineer</td><td>Solar servers, minimal protocols</td></tr></tbody>
</table>
</div>
<div id="unsystem" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Strategist</td><td>Disruption, secure routing</td></tr></tbody>
</table>
</div>
<div id="dogma" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Thinker</td><td>Write criticism, compare alternatives</td></tr></tbody>
</table>
</div>
<div id="helix" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Artist</td><td>Create memes, sounds, vibes</td></tr></tbody>
</table>
</div>
<div id="quark" class="toggle-section">
<table class="house-table">
<thead><tr><th>Role</th><th>Task</th></tr></thead>
<tbody><tr><td>Guardian</td><td>Manage backups, rotate keys</td></tr></tbody>
</table>
</div>
<p>Want to join a house or propose your own project? Write to <a href="mailto:solarnethub@riseup.net">solarnethub@riseup.net</a></p>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.toggle-button').forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.target;
document.querySelectorAll('.toggle-section').forEach(sec => sec.classList.remove('visible'));
document.getElementById(id).classList.add('visible');
});
});
});
</script>
</body>
</html>

238
subdirectorios/larp.css Normal file
View file

@ -0,0 +1,238 @@
/* larp.css */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--black: #000000;
--highlight: #FF8C00;
--font-body: 'Rajdhani', sans-serif;
--font-display: 'Orbitron', sans-serif;
}
body {
background-color: var(--black);
color: var(--yellow);
font-family: var(--font-body);
margin: 0;
padding: 0;
}
.screen {
width: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
position: relative;
text-align: center;
}
.screen-1 {
padding-top: 0.5rem;
margin-top: 0;
}
.screen-2 {
padding-top: 0;
margin-bottom: 2rem;
}
.content {
width: 100%;
max-width: none;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 0;
box-shadow: 0 0 10px var(--orange-neon);
}
h2 {
font-family: var(--font-display);
font-size: 2.8rem;
color: var(--orange-neon);
margin-bottom: 1.5rem;
text-shadow: 0 0 10px var(--orange-neon);
}
h3 {
font-size: 1.5rem;
color: var(--yellow);
margin-top: 1rem;
}
.logo-larp {
max-height: 400px;
display: block;
margin: 0 auto;
max-width: 90%;
align: center;
}
.logazo {
max-width: 80%;
display: block;
align: center;
}
.formulario {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
text-align: left;
}
.formulario label {
font-weight: bold;
color: var(--orange-neon);
}
.formulario input,
.formulario textarea,
.formulario select {
padding: 0.8rem;
border: none;
border-radius: 6px;
font-size: 1rem;
background-color: #111;
color: var(--yellow);
}
.btn {
background-color: transparent;
color: var(--yellow);
border: 2px solid var(--yellow);
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 2rem;
padding-right: 0.5rem;
transition: all 0.3s ease;
}
.btn:hover {
background-color: var(--yellow);
color: var(--black);
box-shadow: 0 0 10px var(--yellow);
}
.card-group {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
justify-content: center;
margin-top: 2rem;
}
.card {
flex: 1 1 calc(22% - 2rem); /* 4 cards per row with spacing */
max-width: calc(22% - 2rem);
min-width: 260px;
background-color: rgba(20, 20, 20, 0.9);
border-radius: 10px;
padding: 2.5rem;
box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 20px var(--orange-neon);
}
.card h3 {
font-size: 1.3rem;
color: var(--orange-neon);
margin-bottom: 0.5rem;
}
.card .summary {
font-size: 1rem;
color: var(--yellow);
}
.extra-info {
display: none;
margin-top: 1rem;
}
.card.expanded .extra-info {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
.extra-info img {
width: 100%;
max-width: 200px;
border-radius: 8px;
margin-top: 0.5rem;
box-shadow: 0 0 10px var(--yellow);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
h2 {
font-size: 2rem;
text-align: center;
}
.card-group {
flex-direction: column;
align-items: center;
}
.card {
width: 95%;
max-width: 360px;
margin: 0 auto;
}
.formulario {
padding: 0 1rem;
}
.formulario input,
.formulario textarea,
.formulario select {
font-size: 1rem;
width: 100%;
box-sizing: border-box;
}
.btn {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 480px) {
h2 {
font-size: 1.6rem;
}
.formulario input,
.formulario textarea,
.formulario select {
font-size: 0.95rem;
}
.btn {
font-size: 0.9rem;
}
.card h3 {
font-size: 1.1rem;
}
.card p,
.card .summary {
font-size: 0.95rem;
}
.extra-info img {
max-width: 100%;
}
}

111
subdirectorios/larp.html Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LARP - OASIS</title>
<link rel="stylesheet" href="larp.css" />
</head>
<body>
<!-- Sección principal con botón -->
<section class="screen screen-1">
<div class="content">
<img src="../images/larp.png" alt="larp" class="logo-larp" />
<a href="https://en.wikipedia.org/wiki/Live_action_role-playing_game" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">L.A.R.P</a>
<a href="forms.html" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">START</a>
<a href="https://wiki.solarnethub.com/socialnet/roleplaying" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">MORE..</a>
</div>
</section>
<!-- Sección de Casas -->
<section class="screen screen-2">
<div class="content">
<h2>THE HOUSES</h2>
<p>Select each house to view its description and essence.</p>
<div class="card-group">
<div class="card" onclick="toggleInfo(this)">
<h3>SolarIS</h3>
<p class="summary">Diplomacy, language, governance</p>
<div class="extra-info">
<p><strong>"The word makes us human. Violence, beasts."</strong> — Mediation, translation, community rules.</p>
<img src="../images/solaris_logo.jpg" alt="SolarIS" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3> ARRakis</h3>
<p class="summary">Engineering, infrastructure, backend</p>
<div class="extra-info">
<p><strong>"How long do you say it must be resolved?"</strong> — Coding, servers, system architecture.</p>
<img src="../images/arrakis_logo.jpg" alt="ARRakis" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3> TERRA.VErDE</h3>
<p class="summary">Ecology, sustainability, health</p>
<div class="extra-info">
<p><strong>"Love nature, the universe and being, because we are all one."</strong> — Renewable energy, eco-protocols.</p>
<img src="../images/terra_verde_logo.jpg" alt="TERRA.VErDE" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3>UNSYSTem</h3>
<p class="summary">Chaos, tactics, disruption</p>
<div class="extra-info">
<p><strong>"We do not make statements!"</strong> — Cryptography, tactical interventions.</p>
<img src="../images/unsistem_logo.jpg" alt="UNSYSTem" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3>DogmA</h3>
<p class="summary">Critical thinking, memory, strategy</p>
<div class="extra-info">
<p><strong>"The question is not when to do it, the question is how to do it."</strong> — Debate, memory, strategy and ideology.</p>
<img src="../images/dogma_logo.jpg" alt="DogmA" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3>HeliX</h3>
<p class="summary">Art, culture, celebration</p>
<div class="extra-info">
<p><strong>"If you do not smile, it’s not my revolution."</strong> — Memes, visual culture, expression.</p>
<img src="../images/helix_logo.jpg" alt="HeliX" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3>QuarK</h3>
<p class="summary">Security, continuity, defense</p>
<div class="extra-info">
<p><strong>"Without security, there is no freedom!"</strong> — Backups, security training, threat modeling.</p>
<img src="../images/quark_logo.jpg" alt="QuarK" />
</div>
</div>
<div class="card" onclick="toggleInfo(this)">
<h3>HERmanDAD</h3>
<p class="summary">Production, economy, coordination</p>
<div class="extra-info">
<p><strong>"Grow. Build. Expand!"</strong> — Infrastructure, barter, logistics, production cells.</p>
<img src="../images/hermandad_logo.jpg" alt="HERmanDAD" />
</div>
</div>
</div>
</div>
</section>
<script>
function toggleInfo(card) {
card.classList.toggle("expanded");
}
</script>
</body>
</html>

136
subdirectorios/maintainers.css Normal file
View file

@ -0,0 +1,136 @@
/* maintainers.css */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--black: #000000;
--highlight: #FF8C00;
--font-body: 'Rajdhani', sans-serif;
--font-display: 'Orbitron', sans-serif;
}
body {
background-color: var(--black);
color: var(--yellow);
font-family: var(--font-body);
margin: 0;
padding: 0;
}
.screen {
min-height: 100vh;
padding: 4rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
background-attachment: fixed;
background-position: center;
background-size: cover;
text-align: center;
}
.content {
max-width: 900px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px var(--orange-neon);
}
h2 {
font-family: var(--font-display);
font-size: 2.8rem;
color: var(--orange-neon);
margin-bottom: 1.5rem;
text-shadow: 0 0 10px var(--orange-neon);
}
h3 {
font-size: 1.6rem;
color: var(--yellow);
margin-top: 2rem;
margin-bottom: 1rem;
text-shadow: 0 0 6px var(--yellow);
}
.card {
background: rgba(20, 20, 20, 0.9);
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 1.5rem;
text-align: left;
box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
margin-bottom: 2rem;
}
.gallery img.screenshot {
max-width: 400px;
width: 100%;
border-radius: 10px;
}
.link-section {
margin: 2rem 0;
font-size: 1.1rem;
}
.btn {
background-color: transparent;
color: var(--yellow);
border: 2px solid var(--yellow);
padding: 0.7rem 1.5rem;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
margin-top: 1rem;
margin-left: 22.5rem;
}
.btn:hover {
background-color: var(--yellow);
color: var(--black);
box-shadow: 0 0 10px var(--yellow);
}
@media (max-width: 768px) {
h2 {
font-size: 2rem;
}
.gallery img.screenshot {
max-width: 100%;
}
.content {
padding: 1.5rem;
}
.card {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.2rem;
}
.btn {
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
.link-section {
font-size: 1rem;
}
}

33
subdirectorios/maintainers.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Maintainers - OASIS</title>
<link rel="stylesheet" href="maintainers.css" />
</head>
<body>
<section class="screen maintainers">
<div class="content">
<h2>MAINTAINERS</h2>
<p>This network exists thanks to collective effort, open-source spirit, and the ongoing dedication of distributed contributors.</p>
<div class="card">
<h3> ARRakis</h3>
<p>The House of ARRakis has been instrumental in maintaining critical infrastructure, building scripts, patching nodes, and safeguarding the project through thick and thin. You can explore the public repository at:<br>
<a href="https://github.com/epsylon/oasis" class="btn" target="_blank">REPOSITORY</a></p>
</div>
<div class="gallery">
<a href="https://oasis-project.pub/subdirectorios/larp.html"><img src="../images/larp.png" alt="larp" class="screenshot" /></a>
<a href="https://www.krakenslab.com"><img src="../images/foto_2.jpg" alt="Krakenlabs Logo" class="screenshot" /></a>
</div>
<p>To all those who contribute anonymously, occasionally, passionately or continuously: we see you, we THANK YOU! </p>
</div>
</section>
</body>
</html>

176
subdirectorios/overview.css Normal file
View file

@ -0,0 +1,176 @@
/* overview.css */
/* 1. Fonts & Variables */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--black: #000000;
--white: #f2f2f2;
--font-body: 'Rajdhani', sans-serif;
--font-display:'Orbitron', sans-serif;
}
/* 2. Global Reset & Body */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--black);
color: var(--white);
font-family: var(--font-body);
line-height: 1.5;
overflow-x: hidden;
}
/* 3. Full-page Section with Fixed Background */
.screen-1 {
min-height: 100vh;
padding: 4rem 1rem;
background: url("../images/0ASIS_WEB_PEN/abstract-orange-powder-explosion-on-black-background-freeze-motion-of-orange-dust-particles-splash-free-photo.jpg") center/cover fixed no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 4. Card Group Layout */
.card-group {
width: 90%;
max-width: 1200px;
display: flex;
flex-direction: column;
gap: 2rem;
}
/* 5. Individual Card Styling */
.card {
background: rgba(0, 0, 0, 0.8);
background-opacity: 98%;
border: 2px solid var(--orange-neon);
border-radius: 15px;
padding: 2rem;
alighn: center;
box-shadow: 0 0 15px var(--orange-neon);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-top: 4rem;
}
.card:hover {
transform: scale(1.20);
box-shadow: 0 0 25px var(--orange-neon);
}
.card h3 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--orange-neon);
text-align: center;
margin-bottom: 1rem;
text-shadow: 0 0 8px var(--orange-neon);
}
.card p {
display: block;
font-size: 1rem;
color: var(--yellow);
margin-bottom: 1.5rem;
text-align: center;
white-space: pre-wrap;
}
/* 8. Responsive Images Inside Cards */
.code-image {
display: block;
max-width: 100%;
height: auto;
margin: 1rem auto 0 auto;
border-radius: 10px;
box-shadow: 0 0 10px var(--orange-neon);
}
/* Extra: Ajuste de tamaño máximo en pantallas grandes */
@media (min-width: 1024px) {
.code-image {
max-width: 600px;
}
}
/* 6. Buttons Inside Each Card */
.buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.btn {
display: inline-block;
padding: 0.6rem 1.2rem;
border: 2px solid var(--orange-neon);
border-radius: 5px;
font-family: var(--font-display);
font-size: 0.7rem;
color: var(--yellow);
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease;
}
.btn:hover {
background: var(--yellow);
color: #000;
}
/* 7. Responsive Adjustments */
/* Tablet */
@media (max-width: 768px) {
.card h3 {
font-size: 1.6rem;
}
.card p {
font-size: 0.95rem;
}
.buttons {
gap: 0.8rem;
}
.btn {
font-size: 0.85rem;
padding: 0.5rem 1rem;
}
}
/* Phone */
@media (max-width: 480px) {
.screen-1 {
padding: 2rem 0.5rem;
}
.card-group {
gap: 1.5rem;
}
.card {
padding: 1.5rem;
}
.card h3 {
font-size: 1.4rem;
}
.card p {
font-size: 0.9rem;
}
.buttons {
flex-direction: column;
gap: 0.6rem;
}
.btn {
width: 100%;
text-align: center;
font-size: 0.9rem;
}
}

86
subdirectorios/overview.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Overview – OASIS</title>
<link rel="stylesheet" href="overview.css" />
</head>
<body>
<!-- ALL IN ONE SCREEN FOR A CONTINUOUS FIXED BACKGROUND -->
<section class="screen screen-1">
<!-- Card Group Container -->
<div class="card-group">
<!-- 1) YOUR DATA, OUR FREEDOM -->
<div class="card">
<h3>Your Data, Our Freedom</h3>
<p>The centralized web has created vast inequalities in access, privacy, and digital sovereignty.
Individuals have become the product in a system optimized for surveillance and control.
</p>
<p>People have severe educational deficiencies in digital matters and are exposed to involuntary campaigns to attract attention,
undercover marketing, and political and social manipulation.</p>
<p>OASIS reclaims autonomy. It reconnects us through resilient technologies, bypassing gatekeepers
and enabling a new era of decentralized empowerment — for everyone.
OASIS uses cutting-edge cryptographic frameworks and sustainable deployment models
to create truly sovereign spaces for expression, coordination and solidarity.
</p>
<img src="../images/agent_smith.webp" alt="Local activation diagram" class="code-image" />
<div class="buttons">
<a href="https://wiki.solarnethub.com/docs/research#present_privacy-future_crimes" class="btn">Present Privacy-Future Crimes</a>
<a href="https://wiki.solarnethub.com/docs/research#algorithm_bias" class="btn">Algorithm Bias</a>
<a href="https://wiki.solarnethub.com/docs/research#spionage" class="btn">Spionage</a>
<a href="https://wiki.solarnethub.com/docs/research#manipulation" class="btn">Manipulation</a>
<a href="https://wiki.solarnethub.com/docs/research#addictions" class="btn">Addictions</a>
</div>
</div>
<!-- 2) ECOLOGY FIRST -->
<div class="card">
<h3>Ecology First</h3>
<p>
OASIS envisions a digital ecosystem rooted in ecological awareness. Low-impact systems,
off-grid deployments, and ethical energy use are fundamental to our network.<br/><br/>
Our distributed architecture embraces renewable energy, minimalism, and self-hosting.
We prioritize local-first technologies and environmental resilience in every node.
</p>
<p>Designed for off-grid, low-bandwidth and hostile conditions, it offers global access
without compromising ethics or security.
</p>
<img src="../images/mrbarns.webp" alt="Local activation diagram" class="code-image" />
<div class="buttons">
<a href="https://wiki.solarnethub.com/docs/research#co2_footprint" class="btn">CO₂ Footprint</a>
<a href="https://wiki.solarnethub.com/docs/research#video_streaming_footprint" class="btn">Video Streaming Footprint</a>
<a href="https://wiki.solarnethub.com/docs/research#lithium" class="btn">Lithium</a>
<a href="https://wiki.solarnethub.com/docs/research#coltan" class="btn">Coltan</a>
<a href="https://wiki.solarnethub.com/docs/research#cobalt" class="btn">Cobalt</a>
<a href="https://wiki.solarnethub.com/docs/research#rare_earths" class="btn">Rare Earths</a>
<a href="https://wiki.solarnethub.com/docs/research#e-waste" class="btn">E-waste</a>
<a href="https://wiki.solarnethub.com/docs/research#poverty" class="btn">Poverty</a>
<a href="https://wiki.solarnethub.com/docs/research#semiconductors" class="btn">Semiconductors</a>
<a href="https://wiki.solarnethub.com/docs/research#submarine_cables" class="btn">Submarine Cables</a>
</div>
</div>
<!-- 3) AUTHORITY BOTTLENECK -->
<div class="card">
<h3>Authority Bottleneck</h3>
<p>
We believe in tech as a commons — maintained by the many, for the many.<br/><br/>
OASIS is the free network. No central control. No data mining. No hidden costs.<br/><br/>
Join a distributed constellation of people, servers, and ideas. We build bridges, not walls.
</p>
<img src="../images/monopoly.webp" alt="monopoly" class="code-image" />
<div class="buttons">
<a href="https://wiki.solarnethub.com/docs/research#sovereignty" class="btn">Sovereignty</a>
<a href="https://wiki.solarnethub.com/docs/research#social_networks_centralization" class="btn">Social Networks Centralization</a>
<a href="https://wiki.solarnethub.com/docs/research#corporations_abuses_on_users" class="btn">Corporations Abuses on Users</a>
<a href="https://wiki.solarnethub.com/docs/research#data_traffic" class="btn">Data Traffic</a>
<a href="https://wiki.solarnethub.com/docs/research#growth_perspectives" class="btn">Growth Perspectives</a>
</div>
</div>
</div>
</section>
</body>
</html>

374
subdirectorios/technologies.css Normal file
View file

@ -0,0 +1,374 @@
/* === Variables y fuentes === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
:root {
--orange-neon: #FF5E00;
--yellow: #FFD700;
--white-soft: #f2f2f2;
--black: #000000;
--highlight: #FF8C00;
--font-display: 'Orbitron';
}
body {
background-image:
url("../images/0ASIS_WEB_PEN/palmmm.jpeg"),
url("../images/0ASIS_WEB_PEN/istockphoto-1589481762-612x612.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top, center, bottom;
background-attachment: fixed;
background-color: #000; /* fallback */
}
.screen {
min-height: 100vh;
width: 100%;
padding: 3rem 0rem;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.content {
width: 95%;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 15px var(--orange-neon);
}
h1 {
font-family: var(--font-display);
font-size: 4rem;
color: var(--orange-neon);
margin-bottom: 1rem;
text-shadow: 0 0 12px var(--yellow);
text-align: center;
}
h2 {
text-align: center;
font-family: var(--font-display);
font-size: 2rem;
padding: 2rem 2rem;
color: var(--orange-neon);
margin-bottom: 2rem;
text-shadow: 0 0 12px var(--orange-neon);
}
h3 {
text-align: center;
font-family: var(--font-display);
font-size: 1.4rem;
padding: 2rem 2rem;
color: var(--yellow);
margin: 1.5rem 0 0.8rem;
text-shadow: 0 0 6px var(--yellow);
}
.card-group {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
}
.card {
background: rgba(20, 20, 20, 0.95);
padding: 0.5rem;
border-radius: 10px;
width: 20%;
box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.card-double {
background: rgba(20, 20, 20, 0.95);
padding: 0.5rem;
border-radius: 10px;
width: 80%;
box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: scale(1.03);
box-shadow: 0 0 20px var(--orange-neon);
}
.card-double:hover {
transform: scale(1.03);
box-shadow: 0 0 20px var(--orange-neon);
}
.card p {
align-text: center;
font-size: 1rem;
font-family: var(--font-display);
color: var(--orange-neon);
line-height: 1.6;
}
.card-double p {
text-align: center;
font-size: 1rem;
font-family: var(--font-display);
color: var(--orange-neon);
line-height: 1.6;
}
.card-double p {
text-align: center;
font-size: 1rem;
font-family: var(--font-display);
color: var(--orange-neon);
line-height: 1.6;
}
.card:hover .extra-info {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
.card-double:hover .extra-info {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
.extra-info {
display: none;
margin-top: 1rem;
text-align: left;
}
.extra-info img {
width: 100%;
max-width: 500px;
height: auto;
display: block;
margin: 0.5rem auto 0 auto;
border-radius: 8px;
box-shadow: 0 0 4px var(--orange-neon);
}
.comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 3rem;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.01);
color: var(--white-soft);
box-shadow: 0 0 10px var(--orange-neon);
border: 2px solid var(--orange-neon);
border-radius: 6px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 0.6rem;
text-align: center;
border-bottom: 1px solid var(--yellow);
}
.comparison-table thead th {
background: rgba(255, 94, 0, 0.4);
color: var(--orange-neon);
font-family: var(--font-display);
font-size: 1rem;
}
.comparison-table td:first-child {
text-align: left;
font-weight: bold;
color: var(--yellow);
}
.comparison-table tbody tr:hover {
background-color: rgba(255, 94, 0, 0.9);
transition: background 0.2s ease;
}
/* Botones principales */
.buttons {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.btn {
border: 2px solid var(--yellow);
color: var(--yellow);
background-color: transparent;
padding: 0.7rem 1.8rem;
font-weight: bold;
border-radius: 5px;
font-family: var(--font-display);
text-decoration: none;
transition: all 0.3s ease;
}
.btn:hover {
background: var(--yellow);
color: #000;
box-shadow: 0 0 15px var(--yellow);
}
.layered-cubes {
width: 100%;
border-collapse: collapse;
background: transparent;
margin: 2rem auto;
table-layout: fixed;
}
.layered-cubes col.c1 { background-color: rgba( 0, 50, 0, 0.6); }
.layered-cubes col.c2 { background-color: rgba( 0, 80, 0, 0.7); }
.layered-cubes col.c3 { background-color: rgba( 0,120, 0, 0.7); }
.layered-cubes col.c4 { background-color: rgba(180,180, 0, 0.7); }
.layered-cubes col.c5 { background-color: rgba(220,200, 0, 0.7); }
.layered-cubes col.c6 { background-color: rgba(220,120, 0, 0.8); }
.layered-cubes col.c7 { background-color: rgba(255, 80, 0, 0.9); }
.layered-cubes th,
.layered-cubes td {
border: 1px solid rgba(255,255,255,0.2);
padding: 1rem;
text-align: center;
vertical-align: middle;
background: rgba(0,0,0,0.7);
transition: background 0.3s, transform 0.2s;
}
.layered-cubes th a,
.layered-cubes td a {
color: var(--yellow);
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
}
.layered-cubes th:hover,
.layered-cubes td:hover {
background: rgba(255,255,255,0.1);
transform: scale(1.05);
z-index: 1;
}
/* Altura fija de filas */
.layered-cubes tbody tr,
.layered-cubes tfoot tr {
height: 8rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
h2 {
font-size: 2.2rem;
}
.card {
width: 45%;
}
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 0.4rem;
}
}
@media (max-width: 768px) {
.content {
padding: 1.5rem 1rem;
width: 100%;
box-sizing: border-box;
}
h1, h2, h3 {
font-size: 1.6rem;
text-align: center;
word-break: break-word;
padding: 0 0.5rem;
}
/* Para cualquier .card-group que uses */
.card-group {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.card {
width: 100%;
max-width: 95%;
margin: 0 auto;
}
/* Tables responsivas iguales para comparison-table y layered-cubes */
.comparison-table,
.layered-cubes {
display: block;
width: 100%;
overflow-x: auto;
font-size: 0.85rem;
}
.comparison-table th, .comparison-table td,
.layered-cubes th, .layered-cubes td {
padding: 0.5rem;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
h2, h3 {
font-size: 1.4rem;
}
.btn {
font-size: 0.9rem;
padding: 0.6rem 1rem;
}
.card h3 {
font-size: 1.1rem;
}
.card p {
font-size: 0.95rem;
}
}

235
subdirectorios/technologies.html Normal file
View file

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Technologies - OASIS</title>
<link rel="stylesheet" href="technologies.css" />
</head>
<body>
<section class="screen technologies">
<div class="content wide">
<h1>TECHNOLOGIES</h1>
<!-- SECTION 0: SOLARNETHUB -->
<h2>SOLARNETHUB</h2>
<div class="card-group">
<div class="card-double">
<h3>THE KIT</h3>
<p>Not only a Network, made of software, also a hardware Kit! Resilient, sustainable, portable to survive and connect everywere! </p>
<p>You can make it yourself or support oasis-project and buy it here </p>
<div class="buttons">
<a href="https://wiki.solarnethub.com/stock/submit_request" class="btn">I WANT IT!</a>
<a href="https://code.solarnethub.com/" class="btn">DIY</a>
</div>
<div class="extra-info">
<p>You can make it yourself or support oasis-project and buy it here </p>
<a href="https://wiki.solarnethub.com/stock/submit_request"><img src="../images/kit.webp" /></a>
<p>You can make it yourself or support oasis-project and buy it here </p>
</div>
</div>
<!-- SECTION 1: SELF HOSTED Y ENCRIPTED -->
<h2>SELF HOSTED & ENCRIPTED</h2>
<div class="card-group">
<div class="card">
<h3>Local Activation</h3>
<p>OASIS runs directly on your Linux system. When started, it launches your browser into a locally hosted node interface.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/javascript.webp" alt="Local activation diagram" class="code-image" />
<pre><code>Hack the planet</code></pre>
</div>
</div>
<div class="card">
<h3>Markdown-Based Frontend</h3>
<p>The entire user interface is based on Markdown rendering, making it one of the most auditable, minimal and secure UIs.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/markdown.webp" alt="Markdown frontend" class="code-image" />
</div>
</div>
<div class="card">
<h3>Offline & Replication Recovery</h3>
<p>Each user replicates content they support. If your node is lost, you can recover your content through trusted peers.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/offline_recovery.webp" alt="Replication model" class="code-image" />
</div>
</div>
<div class="card">
<h3>Cryptographic Feed Integrity</h3>
<p>All the content is signed using Ed25519. Every post, connection or interaction is verifiable and immutable.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/cubitos.webp" alt="Encryption schema" class="code-image" />
<pre><code>HACK THE PLANET</code></pre>
</div>
</div>
</div>
<!-- SECTION 2: DECENTRALIZED & FEDERATED -->
<h2>DECENTRALIZED & DISTRIBUTED</h2>
<div class="card-group">
<div class="card">
<h3>Scuttlebutt Protocol</h3>
<p>Based on append-only logs, where each peer maintains a personal chain of content replicated via trust.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/scuttlebut_logoo.webp" alt="SSB architecture" class="code-image" />
<p>Scuttlebut was released in 2017 and presented in the CCC</p>
</div>
</div>
<div class="card">
<h3>Gossip Communication</h3>
<p>Data propagates peer-to-peer through the Gossip protocol, ensuring high fault-tolerance and antifragility.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/3dnodos1.webp" alt="gossip" class="code-image" />
</div>
</div>
<div class="card">
<h3>Modular Plugin Architecture</h3>
<p>Extendable via plugins such as torrents, WebRTC video calls, PDF renderers and more. All using secure JavaScript modules.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/modularized.webp" alt="modularized" class="code-image" />
</div>
</div>
<div class="card">
<h3>Non-indexed Trustnet</h3>
<p>There is no search engine to find every user, you can only view the habitants you support</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/support.webp" alt="nontrustedindex" class="code-image" />
<p>PUBs act as community mirrors with HTTPS frontends, making content accessible from the clearnet while preserving protoco>
<p>Each PUB is a sovereign node. Federation exists only as a convenience layer, not a point of control.</p>
</div>
</div>
</div>
<!-- SECTION 3: BLOCKCHAIN FOR THE PEOPLE -->
<h2>BLOCKCHAIN FOR THE PEOPLE</h2>
<div class="card-group">
<div class="card">
<h3>Unmutable Data</h3>
<p>Replicability enabled by blockchain ensures that once data is recorded, it remains consistent and available across all nodes, making tampering virtually impossible.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/inmutable.webp" alt="unmutable" class="code-image" />
</div>
</div>
<div class="card">
<h3>Ecoin</h3>
<p>ECOin is a crypto-currency with the goal of providing a long-term energy-efficient digital economy strategy.</p>
<div class="extra-info">
<img src="../images/0ASIS_WEB_PEN/ecoin.webp" alt="ecoin" class="code-image" />
<p>It uses -SCRYPT algorithm- and implements 3 different mining systems.</p>
<p>Proof-Of-Work <br /> Proof-Of-Stake <br />Proof-Of-Transaction <br></br>
There is no maximum number of coins, through the estimated coinbase size will be roughly 225 million ECO.</p>
</div>
</div>
</div>
</div>
</section>
<h2>OSI LAYERS</h2>
<section class="screen screen-overview">
<table class="layered-cubes">
<colgroup>
<col class="c1">
<col class="c2">
<col class="c3">
<col class="c4">
<col class="c5">
<col class="c6">
<col class="c7">
</colgroup>
<thead>
<tr>
<th><a href="https://en.wikipedia.org/wiki/Physical_layer" target="_blank">PHYSYCAL</a></th>
<th><a href="https://en.wikipedia.org/wiki/Data_link_layer" target="_blank">DATA LINK</a></th>
<th><a href="https://en.wikipedia.org/wiki/Network_layer" target="_blank">NETWORK</a></th>
<th><a href="https://en.wikipedia.org/wiki/Transport_layer" target="_blank">TRANSPORT</a></th>
<th><a href="https://en.wikipedia.org/wiki/Session_layer" target="_blank">SESSION</a></th>
<th><a href="https://en.wikipedia.org/wiki/Presentation_layer" target="_blank">PRESENTATION</a></th>
<th><a href="https://en.wikipedia.org/wiki/Application_layer" target="_blank">APPLICATION</a></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://awesome-selfhosted.net/" target="_blank">SELF HOSTED</a></td>
<td colspan="2"><a href="https://www.geeksforgeeks.org/system-design/gossip-protocol-in-disrtibuted-systems/" target="_blank">GOSSIP<br>COMMUNICATION</a></td>
<td colspan="2"><a href="https://en.wikipedia.org/wiki/Secure_Hash_Algorithms" target="_blank">CRYPTOGRAPHIC<br>FEED INTEGRITY</a></td>
<td><a href="https://en.wikipedia.org/wiki/Markdown" target="_blank">MARKDOWN<br>FRONTEND</a></td>
<td><a href="https://wiki.solarnethub.com/socialnet/overview" target="_blank">SOCIAL NETWORK</a></td>
</tr>
<tr>
<td></td>
<td colspan="2"><a href="https://en.wikipedia.org/wiki/Data_replication" target="_blank">OFFLINE REPLICATION</a></td>
<td></td>
<td><a href="https://en.wikipedia.org/wiki/Social_network_centralization" target="_blank">NON INDEXED<br>TRUSTNET</a></td>
<td></td>
<td><a href="https://wiki.solarnethub.com/socialnet/overview" target="_blank">MARKET</a></td>
</tr>
<tr>
<td></td>
<td><a href="https://en.wikipedia.org/wiki/Blockchain" target="_blank">IMMUTABLE</a></td>
<td colspan="3"><a href="https://en.wikipedia.org/wiki/Scuttlebutt" target="_blank">SCUTTLEBUTT</a></td>
<td></td>
<td><a href="https://code.03c8.net/epsylon/ecoin/" target="_blank">ECOIN</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7"><a href="https://wiki.solarnethub.com/stock/submit_request" target="_blank">KIT</a></td>
</tr>
</tfoot>
</table>
</section>
</div>
</section>
<!-- COMPARATIVE TABLE -->
<h2>CAPABILITY COMPARISON</h2>
<h3>Oasis added to the secushare capability comparation table </h3>
<table class="comparison-table">
<thead>
<tr>
<th>Requirement</th>
<th><img src="../images/logos/oasis.svg" width="34" alt="OASIS" /></th>
<th><img src="../images/logos/facebook.svg" width="24" alt="Facebook" /></th>
<th><img src="../images/logos/xmpp.png" width="24" alt="XMPP" /></th>
<th>SVPN</th>
<th><img src="../images/logos/mastodon.svg" width="24" alt="Mastodon" /></th>
<th><img src="../images/logos/tor.png" width="24" alt="Tor" /></th>
<th><img src="../images/logos/ssb_tor.png" width="24" alt="SSB+Tor" /></th>
<th><img src="../images/logos/retroshare.png" width="24" alt="Retroshare" /></th>
<th><img src="../images/logos/retroshare_tor.png" width="24" alt="Retroshare+Tor" /></th>
<th><img src="../images/logos/nightweb.png" width="24" alt="Nightweb" /></th>
<th><img src="../images/secushare-0444.png" width="24" alt="Secushare" /></th>
</tr>
</thead>
<tbody>
<tr><td>Link Encryption</td><td>✓</td><td>✓</td><td>⊕</td><td>⊕</td><td>⊕</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
<tr><td>Forward Secrecy</td><td>✓</td><td>⊝</td><td>⊝</td><td>⊙</td><td>⊝</td><td>⊕</td><td>✓</td><td>⊝</td><td>✓</td><td>✓</td><td>⊕</td></tr>
<tr><td>E2E Encryption</td><td>✓</td><td>––</td><td>✗</td><td>⊙</td><td>––</td><td>––</td><td>✓</td><td>✓</td><td>✓</td><td>⊙</td><td>✓</td></tr>
<tr><td>No Strangers</td><td>⊝</td><td>––</td><td>✗</td><td>✗</td><td>✗</td><td>✖</td><td>––</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
<tr><td>Secret Friends</td><td>✓</td><td>––</td><td>––</td><td>⊕</td><td>––</td><td>✖</td><td>––</td><td>✗</td><td>✓</td><td>✓</td><td>⊕</td></tr>
<tr><td>Untraceability</td><td>✓</td><td>––</td><td>––</td><td>––</td><td>––</td><td>✖</td><td>⊕</td><td>––</td><td>⊕</td><td>⊕</td><td>⊕</td></tr>
<tr><td>Unobservability</td><td>✓</td><td>––</td><td>––</td><td>⊙</td><td>––</td><td>✖</td><td>⊕</td><td>––</td><td>⊕</td><td>✓</td><td>✓</td></tr>
<tr><td>Post Deniability</td><td>✓</td><td>✗</td><td>––</td><td>––</td><td>––</td><td>✗</td><td>✗</td><td>✗</td><td>⊝</td><td>⊙</td><td>⊙</td></tr>
<tr><td>Lightweight</td><td>✓</td><td>✓</td><td>✓</td><td>⊙</td><td>––</td><td>✓</td><td>✗</td><td>⊝</td><td>⊕</td><td>✗</td><td>⊕</td></tr>
<tr><td>Group Encryption</td><td>✓</td><td>––</td><td>✗</td><td>––</td><td>––</td><td>✗</td><td>✗</td><td>✓</td><td>✓</td><td>⊙</td><td>⊕</td></tr>
<tr><td>Distribution</td><td>✓</td><td>✓</td><td>✗</td><td>––</td><td>––</td><td>––</td><td>⊕</td><td>⊕</td><td>⊕</td><td>⊕</td><td>⊕</td></tr>
<tr><td>Relay Backbone</td><td>✓</td><td>✓</td><td>⊝</td><td>⊝</td><td>⊝</td><td>⊕</td><td>✓</td><td>⊝</td><td>⊝</td><td>⊝</td><td>⊕</td></tr>
<tr><td>Usability</td><td>⊝</td><td>⊕</td><td>✗</td><td>⊙</td><td>⊕</td><td>⊕</td><td>✓</td><td>✗</td><td>✗</td><td>⊙</td><td>⊝</td></tr>
<tr><td>Features</td><td>✓</td><td>✓</td><td>✓</td><td>✗</td><td>✓</td><td>✓</td><td>⊕</td><td>⊝</td><td>⊝</td><td>⊝</td><td>⊝</td></tr>
</tbody>
</body>
</html>