|
 |
Seite zuletzt verändert am 21:57, 1 Mar 2026 von Minocula
DiskussionsseiteVon $1Inhaltsverzeichniskeine Gliederung<!-- ============================================================
HELIKON DEMO & TESTSEITE
Seite: z.B. Bereiche/INTERN/Testsystem oder Willkommen/Demo
Version: 1.1
Datum: 2026-03-01
Zweck: Testseite fuer Upload-Script & Demo fuer neue Nutzer
Fixes: v1.1 — web.html() fuer Zeilenumbrueche, ASCII statt
4-byte Emojis, URL auto-link fix, tag.name, hero fix
Hinweis: Im MindTouch Source Editor einfuegen (nicht WYSIWYG!)
============================================================ -->
<pre class="script-css">
/* === DEMO PAGE v1.1 STYLES === */
.demo-hero {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #fff;
padding: 40px 32px;
border-radius: 12px;
margin: 0 0 32px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.demo-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
animation: heroGlow 8s ease-in-out infinite;
}
@keyframes heroGlow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(5%, 5%); }
}
.demo-hero h1 {
font-size: 28px;
margin: 0 0 8px 0;
position: relative;
color: #fff;
}
.demo-hero .hero-sub {
font-size: 14px;
opacity: 0.7;
position: relative;
}
.demo-hero .hero-meta {
margin-top: 20px;
font-size: 11px;
opacity: 0.5;
position: relative;
font-family: 'Courier New', monospace;
}
/* === SECTION CARDS === */
.demo-section {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 24px 28px;
margin: 0 0 24px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: box-shadow 0.2s ease;
}
.demo-section:hover {
box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
.demo-section h2 {
color: #0f3460;
border-bottom: 2px solid #e8e8e8;
padding-bottom: 8px;
margin-top: 0;
}
.demo-section h3 {
color: #16213e;
margin-top: 20px;
}
/* === CODE DISPLAY === */
.deki-code {
background: #1e1e2e;
color: #cdd6f4;
padding: 16px 20px;
border-radius: 6px;
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
line-height: 1.8;
overflow-x: auto;
margin: 12px 0;
border-left: 3px solid #cc8800;
}
.deki-code a { color: #cdd6f4 !important; text-decoration: none !important; pointer-events: none; }
.deki-code .code-comment {
color: #6c7086;
}
.deki-code .code-func {
color: #89b4fa;
}
.deki-code .code-string {
color: #a6e3a1;
}
.deki-code .code-keyword {
color: #cba6f7;
}
/* === LIVE OUTPUT === */
.deki-output {
background: #f8faf8;
border: 1px dashed #4caf50;
border-radius: 6px;
padding: 14px 20px;
margin: 12px 0;
font-family: 'Courier New', monospace;
font-size: 13px;
color: #2e7d32;
position: relative;
}
.deki-output::before {
content: '\25B6 LIVE';
position: absolute;
top: -10px;
left: 12px;
background: #4caf50;
color: #fff;
font-size: 9px;
padding: 2px 8px;
border-radius: 3px;
letter-spacing: 1px;
font-family: Arial, sans-serif;
}
/* === INFO BOXES === */
.demo-info {
background: #fff8e1;
border-left: 4px solid #cc8800;
padding: 14px 20px;
margin: 16px 0;
border-radius: 0 6px 6px 0;
font-size: 13px;
color: #5d4037;
}
.demo-tip {
background: #e8f5e9;
border-left: 4px solid #4caf50;
padding: 14px 20px;
margin: 16px 0;
border-radius: 0 6px 6px 0;
font-size: 13px;
color: #2e7d32;
}
.demo-warn {
background: #fce4ec;
border-left: 4px solid #e53935;
padding: 14px 20px;
margin: 16px 0;
border-radius: 0 6px 6px 0;
font-size: 13px;
color: #b71c1c;
}
/* === FEATURE GRID === */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 16px 0;
}
.feature-card {
background: #f5f7fa;
border: 1px solid #e0e4ea;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.feature-icon {
font-size: 32px;
margin-bottom: 8px;
display: block;
}
.feature-card strong {
display: block;
color: #0f3460;
margin-bottom: 6px;
}
.feature-card span.fc-desc {
font-size: 12px;
color: #666;
}
/* === DARK MODE === */
body.dark-mode .demo-section {
background: #1a1a1a;
border-color: #333;
color: #ddd;
}
body.dark-mode .demo-section h2 { color: #cc8800; border-color: #333; }
body.dark-mode .demo-section h3 { color: #e0e0e0; }
body.dark-mode .deki-output { background: #1a2e1a; border-color: #4caf50; color: #81c784; }
body.dark-mode .demo-info { background: #2a2000; color: #ccaa44; }
body.dark-mode .demo-tip { background: #0a200a; color: #81c784; }
body.dark-mode .demo-warn { background: #2a0a0a; color: #ef9a9a; }
body.dark-mode .feature-card { background: #222; border-color: #333; }
body.dark-mode .feature-card strong { color: #cc8800; }
body.dark-mode .feature-card span.fc-desc { color: #999; }
</pre>
<!-- ============================================================
HERO BEREICH
============================================================ -->
<div class="demo-hero">
<h1>★ Willkommen bei MindTouch Core</h1>
<p class="hero-sub">Dein Dokumentations-System — erweitert mit DekiScript, KI und Liebe zum Detail.</p>
<div class="hero-meta">
<pre class="script">
var ts = date.now;
var gruss = 'Hallo';
var h = date.hours(ts);
if (h < 12) { let gruss = 'Guten Morgen'; }
else if (h < 17) { let gruss = 'Guten Tag'; }
else { let gruss = 'Guten Abend'; }
gruss .. ', ' .. (user.name ?? 'Gast') .. '! &mdash; ' .. date.format(ts, 'dd.MM.yyyy') .. ' | ' .. date.format(ts, 'HH:mm') .. ' Uhr';
</pre>
</div>
</div>
<!-- ============================================================
1. WAS IST DEKISCRIPT?
============================================================ -->
<div class="demo-section">
<h2>✎ 1. Was ist DekiScript?</h2>
<p>DekiScript ist die eingebaute Scriptsprache von MindTouch Core. Sie macht aus statischen Wiki-Seiten <strong>lebendige, dynamische Dokumente</strong>. Alles was du zwischen <code><pre class="script"></code> Tags schreibst, wird serverseitig ausgeführt.</p>
<div class="demo-info">
<strong>ⓘ Gut zu wissen:</strong> DekiScript läuft auf dem Server, nicht im Browser. Der Besucher sieht nur das Ergebnis — nie den Code.
</div>
<h3>1.1 Dein erstes DekiScript</h3>
<p>So sieht ein einfaches DekiScript aus:</p>
<div class="deki-code">
<span class="code-comment">// Begruessung mit dem aktuellen Benutzernamen</span><br/>
<span class="code-keyword">var</span> name = <span class="code-func">user.name</span> ?? <span class="code-string">'Gast'</span>;<br/>
<span class="code-string">'Hallo, '</span> .. name .. <span class="code-string">'! Willkommen.'</span>;
</div>
<p><strong>Ergebnis (live):</strong></p>
<div class="deki-output">
<pre class="script">
var name = user.name ?? 'Gast';
'Hallo, ' .. name .. '! Willkommen.';
</pre>
</div>
<h3>1.2 Datum und Uhrzeit</h3>
<div class="deki-code">
<span class="code-comment">// Aktuelles Datum formatiert</span><br/>
<span class="code-keyword">var</span> jetzt = <span class="code-func">date.now</span>;<br/>
<span class="code-string">'Heute: '</span> .. <span class="code-func">date.format</span>(jetzt, <span class="code-string">'dddd, dd. MMMM yyyy'</span>);
</div>
<div class="deki-output">
<pre class="script">
var jetzt = date.now;
'Heute: ' .. date.format(jetzt, 'dddd, dd. MMMM yyyy');
</pre>
</div>
</div>
<!-- ============================================================
2. SEITEN-INFORMATIONEN
============================================================ -->
<div class="demo-section">
<h2>☰ 2. Seiten-Informationen abfragen</h2>
<p>Jede Seite in MindTouch kennt sich selbst. DekiScript gibt dir Zugriff auf alle Metadaten:</p>
<h3>2.1 Seitentitel und Pfad</h3>
<div class="deki-code">
<span class="code-func">page.title</span> <span class="code-comment">// Titel dieser Seite</span><br/>
<span class="code-func">page.path</span> <span class="code-comment">// Pfad im Wiki</span><br/>
<span class="code-func">page.id</span> <span class="code-comment">// Eindeutige Page-ID</span>
</div>
<div class="deki-output">
<pre class="script">
var br = web.html('<br/>');
'Titel: ' .. page.title .. br ..
'Pfad: ' .. page.path .. br ..
'Page-ID: ' .. page.id;
</pre>
</div>
<h3>2.2 Seiten-Statistiken</h3>
<div class="deki-code">
<span class="code-func">page.revisions</span> <span class="code-comment">// Anzahl Revisionen</span><br/>
<span class="code-func">page.date</span> <span class="code-comment">// Letzte Aenderung</span><br/>
<span class="code-func">page.author</span> <span class="code-comment">// Letzter Autor</span>
</div>
<div class="deki-output">
<pre class="script">
var br = web.html('<br/>');
'Letzte Aenderung: ' .. date.format(page.date, 'dd.MM.yyyy HH:mm') .. br ..
'Autor: ' .. (page.author.name ?? page.author ?? 'unbekannt');
</pre>
</div>
<div class="demo-tip">
<strong>✓ Tipp:</strong> Nutze <code>page.id</code> für API-Aufrufe und Automatisierung. Die ID ändert sich nie, auch wenn die Seite verschoben wird!
</div>
</div>
<!-- ============================================================
3. BEDINGTE LOGIK
============================================================ -->
<div class="demo-section">
<h2>⚙ 3. Bedingte Logik</h2>
<p>DekiScript kann Entscheidungen treffen. Zeige Inhalte abhängig von Tageszeit, Benutzer oder anderen Bedingungen:</p>
<h3>3.1 Tageszeit-abhängige Begrüssung</h3>
<div class="deki-code">
<span class="code-keyword">var</span> h = <span class="code-func">date.hours</span>(<span class="code-func">date.now</span>);<br/>
<span class="code-keyword">if</span> (h < 6) { <span class="code-string">'Nachtschicht? Respekt!'</span> }<br/>
<span class="code-keyword">else if</span> (h < 12) { <span class="code-string">'Guten Morgen! Kaffee?'</span> }<br/>
<span class="code-keyword">else if</span> (h < 17) { <span class="code-string">'Guten Tag! Produktiv unterwegs?'</span> }<br/>
<span class="code-keyword">else</span> { <span class="code-string">'Feierabend bald -- noch kurz Doku?'</span> }
</div>
<div class="deki-output">
<pre class="script">
var h = date.hours(date.now);
if (h < 6) { '☾ Nachtschicht? Respekt!' }
else if (h < 12) { '☕ Guten Morgen! Kaffee?' }
else if (h < 17) { '☀ Guten Tag! Produktiv unterwegs?' }
else { '☼ Feierabend bald -- noch kurz Doku?' }
</pre>
</div>
<h3>3.2 Benutzer-Erkennung</h3>
<div class="deki-code">
<span class="code-keyword">var</span> u = <span class="code-func">user.name</span>;<br/>
<span class="code-keyword">if</span> (u == <span class="code-string">'Minocula'</span>) { <span class="code-string">'Admin erkannt!'</span> }<br/>
<span class="code-keyword">else if</span> (u != <span class="code-keyword">nil</span>) { <span class="code-string">'Hallo '</span> .. u }<br/>
<span class="code-keyword">else</span> { <span class="code-string">'Gast-Zugang'</span> }
</div>
<div class="deki-output">
<pre class="script">
var u = user.name;
if (u == 'Minocula') { '★ Admin erkannt! Willkommen zurueck.' }
else if (u != nil) { '▶ Hallo ' .. u .. '!' }
else { '▶ Du bist als Gast unterwegs. Anmelden fuer mehr Features!' }
</pre>
</div>
</div>
<!-- ============================================================
4. LISTEN UND SCHLEIFEN
============================================================ -->
<div class="demo-section">
<h2>☇ 4. Listen und Schleifen</h2>
<p>MindTouch kann dynamisch Listen und Tabellen erzeugen:</p>
<h3>4.1 Unterseiten auflisten</h3>
<div class="deki-code">
<span class="code-keyword">var</span> subs = <span class="code-func">page.subpages</span>;<br/>
<span class="code-keyword">if</span> (#subs > 0) {<br/>
<span class="code-keyword">foreach</span> (<span class="code-keyword">var</span> s <span class="code-keyword">in</span> subs) {<br/>
<span class="code-string">'> '</span> .. <span class="code-func">s.title</span> .. web.html(<span class="code-string">'<br/>'</span>);<br/>
}<br/>
} <span class="code-keyword">else</span> { <span class="code-string">'Keine Unterseiten vorhanden.'</span> }
</div>
<div class="deki-output">
<pre class="script">
var subs = page.subpages;
var br = web.html('<br/>');
if (#subs > 0) {
foreach (var s in subs) {
'▶ ' .. s.title .. br;
}
} else { '(Keine Unterseiten -- erstelle welche um sie hier zu sehen!)' }
</pre>
</div>
<h3>4.2 Eigene Listen erzeugen</h3>
<div class="deki-code">
<span class="code-keyword">var</span> tools = [ <span class="code-string">'MindTouch Core'</span>, <span class="code-string">'DekiScript'</span>, <span class="code-string">'Helikon AI'</span>, <span class="code-string">'ElevenLabs TTS'</span> ];<br/>
<span class="code-keyword">foreach</span> (<span class="code-keyword">var</span> t <span class="code-keyword">in</span> tools) {<br/>
<span class="code-string">'⚡ '</span> .. t .. web.html(<span class="code-string">'<br/>'</span>);<br/>
}
</div>
<div class="deki-output">
<pre class="script">
var tools = [ 'MindTouch Core', 'DekiScript', 'Helikon AI', 'ElevenLabs TTS' ];
var br = web.html('<br/>');
foreach (var t in tools) {
'⚡ ' .. t .. br;
}
</pre>
</div>
</div>
<!-- ============================================================
5. TAGS UND NAVIGATION
============================================================ -->
<div class="demo-section">
<h2>⚑ 5. Tags und Navigation</h2>
<p>Tags sind kraftvolle Werkzeuge für Organisation und Suche:</p>
<h3>5.1 Tags dieser Seite</h3>
<div class="deki-code">
<span class="code-keyword">var</span> tags = <span class="code-func">page.tags</span>;<br/>
<span class="code-keyword">if</span> (#tags > 0) {<br/>
<span class="code-keyword">foreach</span> (<span class="code-keyword">var</span> t <span class="code-keyword">in</span> tags) { <span class="code-string">'[' .. t .. '] '</span>; }<br/>
} <span class="code-keyword">else</span> { <span class="code-string">'Noch keine Tags gesetzt.'</span> }
</div>
<div class="deki-output">
<pre class="script">
var tags = page.tags;
if (#tags > 0) {
foreach (var t in tags) { '[' .. t .. '] '; }
} else { 'Noch keine Tags gesetzt -- fuelle diese Seite mit Leben!' }
</pre>
</div>
<div class="demo-info">
<strong>ⓘ Tipp:</strong> Setze Tags wie <code>demo</code>, <code>test</code>, <code>helikon</code> auf diese Seite. Sie erscheinen dann sofort oben!
</div>
</div>
<!-- ============================================================
6. FEATURE SHOWCASE
============================================================ -->
<div class="demo-section">
<h2>★ 6. Was MindTouch + Helikon kann</h2>
<p>Diese Plattform ist mehr als ein Wiki. Hier ein Überblick was möglich ist:</p>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon">⚙</span>
<strong>Helikon AI Chat</strong>
<span class="fc-desc">Frag den Buddy! Dual-LLM mit lokaler KI und Claude.</span>
</div>
<div class="feature-card">
<span class="feature-icon">♫</span>
<strong>Voice Suite</strong>
<span class="fc-desc">Text-zu-Sprache, Sprache-zu-Text, Anruf-Modus mit ElevenLabs.</span>
</div>
<div class="feature-card">
<span class="feature-icon">⚲</span>
<strong>Wiki-Suche</strong>
<span class="fc-desc">Intelligente Suche über alle Seiten via MindTouch API.</span>
</div>
<div class="feature-card">
<span class="feature-icon">⚛</span>
<strong>Dynamische Inhalte</strong>
<span class="fc-desc">DekiScript macht jede Seite lebendig und kontextabhängig.</span>
</div>
<div class="feature-card">
<span class="feature-icon">☎</span>
<strong>Mobile Ready</strong>
<span class="fc-desc">Responsive Design, Touch-Drag, Shake-to-Surprise.</span>
</div>
<div class="feature-card">
<span class="feature-icon">☰</span>
<strong>Dynamic TOC</strong>
<span class="fc-desc">Automatisches Inhaltsverzeichnis das mitscrollt.</span>
</div>
</div>
</div>
<!-- ============================================================
7. API ZUGRIFF
============================================================ -->
<div class="demo-section">
<h2>⚡ 7. Die MindTouch API</h2>
<p>MindTouch bietet eine mächtige REST API. Hier ein paar Beispiele was damit möglich ist:</p>
<h3>7.1 Seiten-Info per API</h3>
<div class="deki-code">
<span class="code-comment">// Bash: Seiten-Info abrufen</span><br/>
<span class="code-func">curl</span> -s <span class="code-string">"localhost/@api/deki/pages/{PAGE_ID}/info"</span><br/>
<br/>
<span class="code-comment">// Seiteninhalt holen</span><br/>
<span class="code-func">curl</span> -s <span class="code-string">"localhost/@api/deki/pages/{PAGE_ID}/contents"</span><br/>
<br/>
<span class="code-comment">// Properties auslesen</span><br/>
<span class="code-func">curl</span> -s <span class="code-string">"localhost/@api/deki/pages/{PAGE_ID}/properties"</span>
</div>
<h3>7.2 Seiten-Info via DekiScript</h3>
<div class="deki-code">
<span class="code-comment">// API-Basispfad dynamisch</span><br/>
<span class="code-keyword">var</span> apiBase = <span class="code-string">'/@api/deki'</span>;<br/>
<span class="code-keyword">var</span> infoUrl = apiBase .. <span class="code-string">'/pages/'</span> .. <span class="code-func">page.id</span> .. <span class="code-string">'/info'</span>;<br/>
<span class="code-string">'API Endpunkt: '</span> .. infoUrl;
</div>
<div class="deki-output">
<pre class="script">
var apiBase = '/@api/deki';
var infoUrl = apiBase .. '/pages/' .. page.id .. '/info';
'⚡ API Endpunkt: ' .. infoUrl;
</pre>
</div>
<div class="demo-warn">
<strong>⚠ Achtung:</strong> API-Zugriffe die Daten verändern (PUT, POST, DELETE) brauchen Authentifizierung! Lesende Zugriffe (GET) sind je nach Konfiguration offen.
</div>
</div>
<!-- ============================================================
8. SYSTEM-STATUS
============================================================ -->
<div class="demo-section">
<h2>⚙ 8. System-Status</h2>
<p>DekiScript kann auch Systeminformationen anzeigen:</p>
<div class="deki-output">
<pre class="script">
var br = web.html('<br/>');
'★ Site: ' .. site.name .. br ..
'▶ User: ' .. (user.name ?? 'Gast') .. br ..
'▶ Seite: ' .. page.title .. ' (ID ' .. page.id .. ')' .. br ..
'▶ Datum: ' .. date.format(date.now, 'dd.MM.yyyy HH:mm:ss') .. br ..
'▶ Pfad: ' .. page.path;
</pre>
</div>
</div>
<!-- ============================================================
9. ABSCHLUSS
============================================================ -->
<div class="demo-section" style="text-align:center; border-color:#cc8800;">
<h2>★ Auf alten Pfannen lernt man kochen.</h2>
<p style="font-size:14px; color:#666; max-width:560px; margin:12px auto;">
Diese Plattform läuft auf MindTouch Core 2013 — einer Software die älter ist als mancher Praktikant.<br/>
Und doch: Mit DekiScript, KI-Integration und etwas Kreativität entsteht etwas, das kein modernes Wiki von der Stange bieten kann.
</p>
<div style="font-size:12px; color:#999; font-family:'Courier New',monospace;">
<pre class="script">
var br = web.html('<br/>');
'Generiert am ' .. date.format(date.now, 'dd.MM.yyyy') .. ' um ' .. date.format(date.now, 'HH:mm') .. ' Uhr' .. br ..
'von MindTouch Core fuer ' .. (user.name ?? 'einen neugierigen Gast') .. '.' .. br .. br ..
'★ Made in Switzerland -- docs.trialanderror.tech';
</pre>
</div>
</div>
<!-- ============================================================
NoElements: Versteckt Seitenelemente fuer nicht-authentifizierte User
Dies aktiviert auch Dynamic TOC, Tags und andere globale Features.
============================================================ -->
<pre class="script">
NoElements {}
</pre> |
