Update.

Browse Source
This commit is contained in:
retoor 2025-06-07 07:56:57 +02:00
parent 389d417c1b
commit bdddbf678c
2 changed files with 206 additions and 235 deletions
src/snek/templates
base.htmlindex.html

2
src/snek/templates/base.html
View File

@ -10,6 +10,7 @@
<meta name="keywords" content="snek, chat, molodetz">
<meta name="color-scheme" content="dark">
<link rel="stylesheet" href="/sandbox.css" />
<title>{% block title %}Snek chat by Molodetz{% endblock %}</title>
<script src="/polyfills/Promise.withResolvers.js" type="module"></script>
@ -34,6 +35,7 @@
<main>
{% block main %}
{% endblock %}
{% include "sandbox.html" %}
</main>
</body>
</html>

439
src/snek/templates/index.html
View File

@ -1,133 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: white; /* Ensure the iframe has a white background */
}
/* Base reset */
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'Segoe UI',sans-serif;
background: #000;
color: #eee;
line-height:1.5;
}
a { color: #7ef; text-decoration: none; }
a:hover { text-decoration: underline; }
/* Container */
.container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }
/* Hero */
.hero {
text-align: center;
padding: 4rem 0;
}
.hero h1 {
font-size: 3rem;
background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
-webkit-background-clip: text;
color: transparent;
}
.hero p {
font-size: 1.2rem;
margin: 1rem 0 2rem;
}
.btn {
display: inline-block;
padding: .75rem 1.5rem;
margin: .5rem;
background: #0fa;
color: #111;
font-weight: bold;
border-radius: 4px;
transition: background .2s;
}
.btn:hover { background: #7ef; }
/* Features grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.card {
background: #1a1a1a;
border-radius: 6px;
padding: 1.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.card h3 {
margin-bottom: .75rem;
color: #7ef;
}
.card ul {
list-style: disc inside;
margin-top: .5rem;
}
/* Footer */
footer {
text-align: center;
font-size: .9rem;
padding: 2rem 0;
color: #888;
}
footer code {
background: #222;
padding: 2px 4px;
border-radius: 3px;
color: #7ef;
}
/* Mobile tweaks */
@media (max-width: 480px) {
.hero h1 { font-size: 2.4rem; }
.btn { width: 100%; box-sizing: border-box; text-align:center; }
}
</style>
</head>
<body>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Snek – The Ultimate Web Community</title>
<link rel="stylesheet" href="/sandbox.css" />
<style>
/* Base reset */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height: 100%; }
.card {
opacity: 0.7;
z-index: 10;
}
.star {
z-index: -10;
}
body {
font-family: 'Segoe UI',sans-serif;
background: #111;
color: #eee;
line-height:1.5;
min-height: 100vh;
position: relative;
overflow-x: auto;
overflow-y: auto;
}
a { color: #7ef; text-decoration: none; }
a:hover { text-decoration: underline; }
/* Container */
.container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }
/* Hero */
.hero {
text-align: center;
padding: 4rem 0;
background-image: url('/image/snek_logo_256x256.png');
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
}
.hero h1 {
font-size: 3rem;
background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: .5rem;
}
.hero p {
font-size: 1.2rem;
@ -142,10 +58,9 @@
font-weight: bold;
border-radius: 4px;
transition: background .2s;
cursor: pointer;
}
.btn:hover { background: #7ef; }
/* Features grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@ -161,13 +76,28 @@
.card h3 {
margin-bottom: .75rem;
color: #7ef;
font-size: 1.25rem;
}
.card ul {
list-style: disc inside;
margin-top: .5rem;
}
/* Footer */
section#signup,
section#selfhost {
text-align:center;
margin:4rem 0;
}
section#selfhost pre {
display:inline-block;
background:#222;
padding:1rem;
border-radius:4px;
color:#7ef;
font-size:1rem;
margin: 1rem 0;
text-align: left;
box-sizing: border-box;
}
footer {
text-align: center;
font-size: .9rem;
@ -180,140 +110,179 @@
border-radius: 3px;
color: #7ef;
}
/* Mobile tweaks */
.star {
position: fixed;
background: #fff;
border-radius: 50%;
pointer-events: none;
z-index: 0;
opacity: .8;
animation: star-flicker 4s infinite alternate;
}
@keyframes star-flicker {
0%, 100% { opacity: .7; }
50% { opacity: 1; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 2.4rem; }
.btn { width: 100%; box-sizing: border-box; text-align:center; }
.hero {
background-size: 64px 64px;
padding-left: 0;
}
}
#starfield {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: -2;
pointer-events: none;
background: transparent;
display: block;
}
</style>
<link rel="stylesheet" href="/static/sandbox.css" />
</head>
<body>
<header class="container hero">
<h1>Snek</h1>
<p>The Ultimate Web Community for Devs, Testers &amp; AI Enthusiasts</p>
<a href="/login.html" class="btn">Login</a>
<a href="/register.html" class="btn">Register</a>
</header>
<main class="container">
<section id="features" class="grid">
<div class="card">
<h3>File Sharing</h3>
<ul>
<li>SFTP storage with your Snek credentials</li>
<li>WebDAV support – same login</li>
</ul>
</div>
<div class="card">
<h3>Git Repositories</h3>
<ul>
<li>Configure repos for any official Git client</li>
<li>Instant setup, push &amp; pull</li>
</ul>
</div>
<div class="card">
<h3>AI Powerhouse</h3>
<ul>
<li>Chat with free &amp; commercial AIs</li>
<li>Generate AI-powered images</li>
<li>Build your own AI bots in &lt;5 minutes (copy/paste example)</li>
</ul>
</div>
<div class="card">
<h3>Dev &amp; Terminal</h3>
<ul>
<li>Ubuntu web terminal in-browser</li>
<li>Full profile &amp; permissions management</li>
</ul>
</div>
<div class="card">
<h3>Chat &amp; Media</h3>
<ul>
<li>Upload any file type in chat</li>
<li>Rich media support (audio, video, images…)</li>
<li>Direct messaging with other users</li>
</ul>
</div>
<div class="card">
<h3>Privacy &amp; Community</h3>
<ul>
<li>No logging—never even your IP</li>
<li>No email required to sign up</li>
<li>Multi-national, open community</li>
<li>Hacking encouraged!</li>
</ul>
</div>
<div class="card">
<h3>Customization &amp; Deployment</h3>
<ul>
<li>Full layout &amp; theme customization</li>
<li>Install as a PWA on your phone</li>
<li>Optionally self-host: <code>pip install snek</code>, zero config</li>
</ul>
</div>
</section>
<section id="signup" style="text-align:center; margin:4rem 0;">
<h2>Ready to join?</h2>
<p>No email. No logs. Just sign up, pick a username, and dive in!</p>
<a href="/register" class="btn">Sign Up Now</a>
</section>
<section id="selfhost" style="text-align:center; margin-bottom:4rem;">
<h2>Self-Host in Seconds</h2>
<p>Just run:</p>
<pre style="display:inline-block; background:#222; padding:1rem; border-radius:4px; color:#7ef;">
<header class="container hero">
<h1>Snek</h1>
<p>The Ultimate Web Community for Devs, Testers &amp; AI Enthusiasts</p>
<a href="/login.html" class="btn">Login</a>
<a href="/register.html" class="btn">Register</a>
</header>
<main class="container">
<section id="features" class="grid">
<div class="card">
<h3>File Sharing</h3>
<ul>
<li>SFTP storage with your Snek credentials</li>
<li>WebDAV support – same login</li>
</ul>
</div>
<div class="card">
<h3>Git Repositories</h3>
<ul>
<li>Configure repos for any official Git client</li>
<li>Instant setup, push &amp; pull</li>
</ul>
</div>
<div class="card">
<h3>AI Powerhouse</h3>
<ul>
<li>Chat with free &amp; commercial AIs</li>
<li>Generate AI-powered images</li>
<li>Build your own AI bots in &lt;5 minutes (copy/paste example)</li>
</ul>
</div>
<div class="card">
<h3>Dev &amp; Terminal</h3>
<ul>
<li>Ubuntu web terminal in-browser</li>
<li>Full profile &amp; permissions management</li>
</ul>
</div>
<div class="card">
<h3>Chat &amp; Media</h3>
<ul>
<li>Upload any file type in chat</li>
<li>Rich media support (audio, video, images…)</li>
<li>Direct messaging with other users</li>
</ul>
</div>
<div class="card">
<h3>Privacy &amp; Community</h3>
<ul>
<li>No logging—never even your IP</li>
<li>No email required to sign up</li>
<li>Multi-national, open community</li>
<li>Hacking encouraged!</li>
</ul>
</div>
<div class="card">
<h3>Customization &amp; Deployment</h3>
<ul>
<li>Full layout &amp; theme customization</li>
<li>Install as a PWA on your phone</li>
<li>Optionally self-host: <code>pip install</code>, zero config</li>
</ul>
</div>
</section>
<section id="signup">
<h2>Ready to join?</h2>
<p>No email. No logs. Just sign up, pick a username, and dive in!</p>
<a href="/register" class="btn">Sign Up Now</a>
</section>
<section id="selfhost" style="margin-bottom:4rem;">
<h2>Self-Host in Seconds</h2>
<p>Just run:</p>
<pre>
pip install git+https://retoor.molodetz.nl/retoor/snek.git
snek serve
</pre>
<p>No configuration required—it's that simple.</p>
</section>
</main>
<footer>
<p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
</footer>
<script>
// number of stars you want
const STAR_COUNT = 200;
const body = document.body;
for (let i = 0; i < STAR_COUNT; i++) {
const star = document.createElement('div');
star.classList.add('star');
// random position within the viewport
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
// random size (optional)
const size = Math.random() * 2 + 1; // between 1px and 3px
star.style.width = size + 'px';
star.style.height = size + 'px';
// random animation timing for natural flicker
const duration = Math.random() * 3 + 2; // 2s–5s
const delay = Math.random() * 5; // 0s–5s
star.style.animationDuration = duration + 's';
star.style.animationDelay = delay + 's';
body.appendChild(star);
</pre>
<p>No configuration required—it's that simple.</p>
</section>
{% include "sandbox.html" %}
</main>
<footer>
<p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
</footer>
<script>
(function() {
const canvas = document.getElementById('starfield');
const ctx = canvas.getContext('2d');
let stars = [];
let w = window.innerWidth;
let h = window.innerHeight;
function resize() {
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
}
function randomStar() {
return {
x: Math.random() * w,
y: Math.random() * h,
r: Math.random() * 0.8 + 0.2,
o: Math.random() * 0.5 + 0.5,
tw: Math.random() * 100 + 60,
phase: Math.random() * 2 * Math.PI
};
}
function createStars(count) {
stars = [];
for (let i=0; i<count; ++i) stars.push(randomStar());
}
function drawStars(time) {
ctx.clearRect(0, 0, w, h);
for (const s of stars) {
const twinkle = 0.5 + 0.5 * Math.sin(time/1000 * (1000/s.tw) + s.phase);
ctx.globalAlpha = s.o * twinkle;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, 2 * Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
</script>
ctx.globalAlpha = 1;
}
function animate(time) {
drawStars(time || 0);
requestAnimationFrame(animate);
}
function updateStars() {
const count = Math.floor(w * h / 4500);
createStars(count);
}
window.addEventListener('resize', function() {
resize();
updateStars();
});
resize();
updateStars();
animate();
})();
</script>
</body>
</html>