570 lines
19 KiB
HTML
570 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PowerOn – Was du mit der Plattform machen kannst</title>
|
||
<style>
|
||
/* PowerOn.swiss Stylesheet */
|
||
/* Tailwind CSS Custom Properties & Design Tokens */
|
||
|
||
:root {
|
||
/* Locale */
|
||
-webkit-locale: "de";
|
||
|
||
/* Tailwind Transform Properties */
|
||
--tw-border-spacing-x: 0;
|
||
--tw-border-spacing-y: 0;
|
||
--tw-translate-x: 0;
|
||
--tw-translate-y: 0;
|
||
--tw-rotate: 0;
|
||
--tw-skew-x: 0;
|
||
--tw-skew-y: 0;
|
||
--tw-scale-x: 1;
|
||
--tw-scale-y: 1;
|
||
--tw-pan-x: ;
|
||
--tw-pan-y: ;
|
||
--tw-pinch-zoom: ;
|
||
--tw-scroll-snap-strictness: proximity;
|
||
|
||
/* Tailwind Gradient Properties */
|
||
--tw-gradient-from-position: ;
|
||
--tw-gradient-via-position: ;
|
||
--tw-gradient-to-position: ;
|
||
|
||
/* Tailwind Typography Properties */
|
||
--tw-ordinal: ;
|
||
--tw-slashed-zero: ;
|
||
--tw-numeric-figure: ;
|
||
--tw-numeric-spacing: ;
|
||
--tw-numeric-fraction: ;
|
||
|
||
/* Tailwind Ring/Shadow Properties */
|
||
--tw-ring-inset: ;
|
||
--tw-ring-offset-width: 0px;
|
||
--tw-ring-offset-color: #fff;
|
||
--tw-ring-color: rgb(59 130 246 / .5);
|
||
--tw-ring-offset-shadow: 0 0 #0000;
|
||
--tw-ring-shadow: 0 0 #0000;
|
||
--tw-shadow: 0 0 #0000;
|
||
--tw-shadow-colored: 0 0 #0000;
|
||
|
||
/* Tailwind Filter Properties */
|
||
--tw-blur: ;
|
||
--tw-brightness: ;
|
||
--tw-contrast: ;
|
||
--tw-grayscale: ;
|
||
--tw-hue-rotate: ;
|
||
--tw-invert: ;
|
||
--tw-saturate: ;
|
||
--tw-sepia: ;
|
||
--tw-drop-shadow: ;
|
||
|
||
/* Tailwind Backdrop Filter Properties */
|
||
--tw-backdrop-blur: ;
|
||
--tw-backdrop-brightness: ;
|
||
--tw-backdrop-contrast: ;
|
||
--tw-backdrop-grayscale: ;
|
||
--tw-backdrop-hue-rotate: ;
|
||
--tw-backdrop-invert: ;
|
||
--tw-backdrop-opacity: ;
|
||
--tw-backdrop-saturate: ;
|
||
--tw-backdrop-sepia: ;
|
||
|
||
/* Tailwind Container Properties */
|
||
--tw-contain-size: ;
|
||
--tw-contain-layout: ;
|
||
--tw-contain-paint: ;
|
||
--tw-contain-style: ;
|
||
|
||
/* Design System Colors (HSL Format) */
|
||
/* Base Colors */
|
||
--background: 0 0% 100%;
|
||
--foreground: 222.2 84% 4.9%;
|
||
|
||
/* Card Colors */
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 222.2 84% 4.9%;
|
||
|
||
/* Popover Colors */
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 222.2 84% 4.9%;
|
||
|
||
/* Primary Colors (Red Brand Color) */
|
||
--primary: 0 84% 42%;
|
||
--primary-foreground: 0 0% 100%;
|
||
|
||
/* Secondary Colors */
|
||
--secondary: 210 40% 96.1%;
|
||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||
|
||
/* Muted Colors */
|
||
--muted: 210 40% 96.1%;
|
||
--muted-foreground: 215.4 16.3% 46.9%;
|
||
|
||
/* Accent Colors */
|
||
--accent: 210 40% 96.1%;
|
||
--accent-foreground: 222.2 47.4% 11.2%;
|
||
|
||
/* Destructive Colors */
|
||
--destructive: 0 84% 42%;
|
||
--destructive-foreground: 210 40% 98%;
|
||
|
||
/* Custom Red Colors */
|
||
--red-primary: 0 84% 42%;
|
||
--red-primary-hover: 0 53% 23%;
|
||
--red-primary-light: 0 84% 60%;
|
||
--red-background-light: 0 84% 97%;
|
||
|
||
/* Border & Input Colors */
|
||
--border: 214.3 31.8% 91.4%;
|
||
--input: 214.3 31.8% 91.4%;
|
||
--ring: 222.2 84% 4.9%;
|
||
|
||
/* Tool/Brand Specific Colors */
|
||
--tool-dark: 0 0% 9.4%;
|
||
--tool-dark-light: 0 0% 16.5%;
|
||
--tool-dark-medium: 0 0% 12.2%;
|
||
--tool-beige: 43 12% 73.7%;
|
||
--tool-beige-light: 43 20% 80%;
|
||
--tool-beige-dark: 43 8% 67%;
|
||
--tool-orange: 9 90% 60.6%;
|
||
--tool-orange-light: 9 85% 65%;
|
||
--tool-orange-dark: 9 94% 53%;
|
||
|
||
/* Border Radius */
|
||
--radius: 0.5rem;
|
||
|
||
/* Sidebar Colors */
|
||
--sidebar-background: 0 0% 98%;
|
||
--sidebar-foreground: 240 5.3% 26.1%;
|
||
--sidebar-primary: 240 5.9% 10%;
|
||
--sidebar-primary-foreground: 0 0% 98%;
|
||
--sidebar-accent: 240 4.8% 95.9%;
|
||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||
--sidebar-border: 220 13% 91%;
|
||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||
}
|
||
|
||
/* Base Reset */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
border-width: 0;
|
||
border-style: solid;
|
||
border-color: hsl(var(--border));
|
||
}
|
||
|
||
/* Body Base Styles */
|
||
body {
|
||
line-height: 1.5;
|
||
-webkit-text-size-adjust: 100%;
|
||
tab-size: 4;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-feature-settings: normal;
|
||
font-variation-settings: normal;
|
||
-webkit-tap-highlight-color: transparent;
|
||
background-color: hsl(var(--background));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
/* Utility Classes für die Farben */
|
||
.bg-background { background-color: hsl(var(--background)); }
|
||
.bg-primary { background-color: hsl(var(--primary)); }
|
||
.bg-secondary { background-color: hsl(var(--secondary)); }
|
||
.bg-muted { background-color: hsl(var(--muted)); }
|
||
.bg-card { background-color: hsl(var(--card)); }
|
||
|
||
.text-foreground { color: hsl(var(--foreground)); }
|
||
.text-primary { color: hsl(var(--primary)); }
|
||
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
|
||
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
|
||
|
||
.border-border { border-color: hsl(var(--border)); }
|
||
|
||
/* Custom Red Button */
|
||
.btn-red-primary {
|
||
background-color: hsl(var(--red-primary));
|
||
color: hsl(var(--primary-foreground));
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
.btn-red-primary:hover {
|
||
background-color: hsl(var(--red-primary-hover));
|
||
}
|
||
|
||
/* Tool Colors */
|
||
.bg-tool-dark { background-color: hsl(var(--tool-dark)); }
|
||
.bg-tool-beige { background-color: hsl(var(--tool-beige)); }
|
||
.bg-tool-orange { background-color: hsl(var(--tool-orange)); }
|
||
|
||
/* Custom Layout Styles */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.header {
|
||
background: hsl(var(--red-primary));
|
||
color: hsl(var(--primary-foreground));
|
||
padding: 60px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.logo a {
|
||
color: hsl(var(--primary-foreground));
|
||
text-decoration: none;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
opacity: 0.9;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 60px 0;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 50px;
|
||
background: hsl(var(--card));
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||
border: 1px solid hsl(var(--border));
|
||
}
|
||
|
||
.section h2 {
|
||
color: hsl(var(--foreground));
|
||
font-size: 2rem;
|
||
margin-bottom: 30px;
|
||
border-bottom: 3px solid hsl(var(--red-primary));
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.section h3 {
|
||
color: hsl(var(--foreground));
|
||
font-size: 1.4rem;
|
||
margin: 30px 0 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.section h3::before {
|
||
content: "▶";
|
||
color: hsl(var(--red-primary));
|
||
margin-right: 10px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: hsl(var(--muted));
|
||
border: 1px solid hsl(var(--border));
|
||
border-radius: var(--radius);
|
||
padding: 25px;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
color: hsl(var(--foreground));
|
||
margin-bottom: 15px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.feature-card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.feature-card li {
|
||
padding: 8px 0;
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.feature-card li::before {
|
||
content: "✓";
|
||
color: hsl(var(--red-primary));
|
||
font-weight: bold;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.scenarios {
|
||
background: hsl(var(--red-background-light));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.scenarios h2 {
|
||
color: hsl(var(--foreground));
|
||
border-bottom-color: hsl(var(--red-primary));
|
||
}
|
||
|
||
.scenarios h3 {
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.scenarios .feature-card {
|
||
background: hsl(var(--card));
|
||
border-color: hsl(var(--red-primary));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.scenarios .feature-card h3 {
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.scenarios .feature-card li::before {
|
||
color: hsl(var(--red-primary));
|
||
}
|
||
|
||
.benefits {
|
||
background: hsl(var(--muted));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.benefits h2 {
|
||
color: hsl(var(--foreground));
|
||
border-bottom-color: hsl(var(--red-primary));
|
||
}
|
||
|
||
.benefits h3 {
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.benefits .feature-card {
|
||
background: hsl(var(--card));
|
||
border-color: hsl(var(--border));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.benefits .feature-card h3 {
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.benefits .feature-card li::before {
|
||
color: hsl(var(--red-primary));
|
||
}
|
||
|
||
.note {
|
||
background: hsl(var(--red-background-light));
|
||
border: 1px solid hsl(var(--red-primary-light));
|
||
border-radius: var(--radius);
|
||
padding: 20px;
|
||
margin-top: 30px;
|
||
color: hsl(var(--red-primary-hover));
|
||
}
|
||
|
||
.note::before {
|
||
content: "ℹ️ ";
|
||
font-weight: bold;
|
||
}
|
||
|
||
.footer {
|
||
background: hsl(var(--tool-dark));
|
||
color: hsl(var(--primary-foreground));
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.footer a {
|
||
color: hsl(var(--red-primary-light));
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.header {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.section {
|
||
padding: 25px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.feature-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="container">
|
||
<div class="logo">
|
||
<a href="https://poweron.swiss/">PowerOn</a>
|
||
</div>
|
||
<div class="subtitle">
|
||
Was du mit der Plattform machen kannst
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="container">
|
||
<div class="section">
|
||
<p style="font-size: 1.1rem; color: #4a5568; margin-bottom: 30px;">
|
||
Dieses Dokument gibt dir einen klaren Überblick, wofür du PowerOn einsetzen kannst – kurz, verständlich.
|
||
</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h3>Verbinden (myConnectors)</h3>
|
||
<ul>
|
||
<li>Binde deine Quellen und Tools an: z. B. SharePoint, OneDrive, Outlook, Microsoft 365, Google Drive, Google Mail, Kalender, sowie weitere Web‑ und Unternehmensdienste.</li>
|
||
<li>Nutze mehrere Verbindungen parallel und wechsle je nach Mandat/Projekt.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Daten & Dokumente</h3>
|
||
<ul>
|
||
<li>Arbeite mit beliebig vielen Dokumenten – hochladen, sichten, organisieren und in Abläufe einbinden.</li>
|
||
<li>Nutze verschiedene Dateitypen (z. B. PDFs, Office‑Dokumente, Text, strukturierte Daten) als Grundlage für Analysen und Ergebnisse.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Datenneutralisierung (Schutz sensibler Inhalte)</h3>
|
||
<ul>
|
||
<li>Entferne oder verfremde persönliche und vertrauliche Informationen nach Regeln.</li>
|
||
<li>Nutze neutrale Daten in Workflows, Berichten und beim Teilen von Ergebnissen.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Workflows & Zusammenarbeit</h3>
|
||
<ul>
|
||
<li>Starte Workflows, die dich Schritt für Schritt unterstützen – alleine oder im Team.</li>
|
||
<li>Steuere Abläufe, gib Feedback, lade zusätzliche Dateien hoch und erhalte nachvollziehbare Resultate.</li>
|
||
<li>Nutze den Chat, um Aufgaben zu beschreiben oder nachzufragen.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>KI‑Assistenz & Prompts</h3>
|
||
<ul>
|
||
<li>Verwende Prompts (Textvorlagen), damit die Assistenz deine Aufgaben und Sprache versteht.</li>
|
||
<li>Baue dir eine kleine Prompt‑Bibliothek für wiederkehrende Tätigkeiten (Recherchen, Zusammenfassungen, Aufbereitungen, Entwürfe).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Voice (Sprache)</h3>
|
||
<ul>
|
||
<li>Sprich mit der Plattform und lasse dir Antworten ausgeben (sofern freigeschaltet).</li>
|
||
<li>Praktisch, wenn du Hände und Augen frei halten willst.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Protokolle & Nachvollziehbarkeit</h3>
|
||
<ul>
|
||
<li>Verfolge Abläufe über Protokolle und Statusanzeigen.</li>
|
||
<li>Stelle sicher, dass Ergebnisse und Zwischenschritte dokumentiert sind.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Verwaltung (für dich und dein Team)</h3>
|
||
<ul>
|
||
<li>Halte Projekte/Kunden als Mandate getrennt – mit eigenen Dateien, Verbindungen und Einstellungen.</li>
|
||
<li>Lege Nutzer an und steuere, wer worauf Zugriff hat.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section scenarios">
|
||
<h2>Typische Einsatzszenarien</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h3>Dokumentenmanagement</h3>
|
||
<ul>
|
||
<li>Informationen aus SharePoint/Google Drive sammeln, zusammenfassen und als Dokument bereitstellen.</li>
|
||
<li>Grosse Dokumentmengen sichten, neutralisieren und für Workshops, Angebote oder Berichte aufbereiten.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>E-Mail & Kommunikation</h3>
|
||
<ul>
|
||
<li>E‑Mails (z. B. Outlook/Gmail) mit Dateien verbinden, um daraus strukturierte Aufgaben abzuleiten.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Teamwork & Kollaboration</h3>
|
||
<ul>
|
||
<li>Team‑Workflows: Dateien hochladen, Ergebnisse prüfen, nächste Schritte anstossen.</li>
|
||
<li>Schnelltests im Chat‑Spielplatz: Ideen, Prompts und Fragestellungen ausprobieren.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section benefits">
|
||
<h2>Warum das nützlich ist</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h3>Effizienz & Organisation</h3>
|
||
<ul>
|
||
<li>Du fasst verteile Informationen an einem Ort zusammen.</li>
|
||
<li>Du arbeitest mit vielen Dokumenten, ohne Limits in der Oberfläche.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<h3>Sicherheit & Kontrolle</h3>
|
||
<ul>
|
||
<li>Du schützt sensible Inhalte durch Datenneutralisierung.</li>
|
||
<li>Du steuerst Abläufe direkt im Chat und bekommst nachvollziehbare Ergebnisse.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Hinweis:</strong> Verfügbare Connectoren, Voice‑Funktionen und Workflows können je nach Einrichtung variieren. Wenn ein Dienst in deinem Zugang fehlt, sprich deine Administration an.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<div class="container">
|
||
<p>© 2025 <a href="https://poweron.swiss/">PowerOn</a> – Intelligente Workflow-Plattform</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|