Willkommen bei stoffices.com
Diese Website ist zurzeit in Bearbeitung.
test KI app CAS
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stoffice | Rechner</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar / Navigation -->
<nav class="sidebar">
<div class="logo">
<i class="fa-solid fa-heart"></i>
<span>Stoffice</span>
</div>
<ul class="nav-links">
<li class="active"><a href="#"><i class="fa-solid fa-calculator"></i> Rechner</a></li>
<li><a href="#"><i class="fa-solid fa-folder-open"></i> Projekte</a></li>
<li><a href="#"><i class="fa-solid fa-gear"></i> Einstellungen</a></li>
</ul>
</nav>
<!-- Main Content -->
<main class="main-content">
<header class="top-bar">
<div class="header-content">
<h1>Neue Berechnung</h1>
<p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.95rem;">
Willkommen im neuen Berechnungstool erstellt für die CAS These der HWZ Januar 2026 mit dem Titel
"Smart Building AI, Data and Values" von Simone Stocker.
</p>
</div>
<div class="user-profile">
<span>Willkommen zurück!</span>
<div class="avatar"><i class="fa-solid fa-user"></i></div>
</div>
</header>
<div class="content-wrapper">
<div class="card input-section">
<div class="card-header">
<h2><i class="fa-solid fa-pen-to-square"></i> Eingabevariablen</h2>
</div>
<form id="calculation-form">
<!-- Base Parameters -->
<div class="input-group-grid">
<div class="form-group">
<label for="daysPerYear"><i class="fa-regular fa-calendar-days"></i> Arbeitstage /
Jahr</label>
<input type="number" id="daysPerYear" name="daysPerYear" value="250"
class="premium-input">
</div>
<div class="form-group">
<label for="incidentsPerDay"><i class="fa-solid fa-bell"></i> Vorfälle / Tag</label>
<input type="number" id="incidentsPerDay" name="incidentsPerDay" value="30"
class="premium-input">
</div>
<div class="form-group">
<label for="minutesPerIncident"><i class="fa-regular fa-clock"></i> Minuten /
Vorfall</label>
<input type="number" id="minutesPerIncident" name="minutesPerIncident" value="48"
class="premium-input">
</div>
<div class="form-group">
<label for="hourlyRate">CHF Stundensatz</label>
<input type="number" id="hourlyRate" name="hourlyRate" value="85" class="premium-input">
</div>
</div>
<!-- Optimization Toggles -->
<div class="card-header" style="margin-top: 2rem;">
<h2><i class="fa-solid fa-wand-magic-sparkles"></i> Optimierungsfaktoren</h2>
</div>
<div class="form-group">
<label for="costAI">Kosten der AI-Lösung (CHF)</label>
<input type="number" id="costAI" name="costAI" value="0" placeholder="0.00"
class="premium-input">
</div>
<div class="toggles-container">
<label class="toggle-row">
<span class="toggle-label">Digitaler Zwilling vorhanden</span>
<input type="checkbox" id="optZwilling" name="optZwilling">
<span class="toggle-switch"></span>
</label>
<label class="toggle-row">
<span class="toggle-label">Anlagen im digitalen Zwilling</span>
<input type="checkbox" id="optAssets" name="optAssets">
<span class="toggle-switch"></span>
</label>
<label class="toggle-row">
<span class="toggle-label">Dokumentation immer aktuell</span>
<input type="checkbox" id="optDoku" name="optDoku">
<span class="toggle-switch"></span>
</label>
<label class="toggle-row">
<span class="toggle-label">Automatisierte Auftragserstellung</span>
<input type="checkbox" id="optAuto" name="optAuto">
<span class="toggle-switch"></span>
</label>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary">Zurücksetzen</button>
<button type="submit" class="btn btn-primary">Berechnen <i
class="fa-solid fa-wand-magic-sparkles"></i></button>
</div>
</form>
</div>
<div class="card result-section">
<div class="card-header">
<h2><i class="fa-solid fa-chart-pie"></i> Ergebnisse</h2>
</div>
<div class="results-placeholder">
<i class="fa-regular fa-face-smile-wink"></i>
<p>Geben Sie Variablen ein, um die Magie zu sehen!</p>
</div>
<div id="results-content" class="hidden">
<!-- Results will be injected here -->
</div>
<!-- Copyright Footer -->
<div class="copyright-footer"
style="margin-top: 2rem; font-size: 0.8rem; color: var(--text-secondary); text-align: center; border-top: 1px solid var(--bg-color); padding-top: 1rem;">
<p><strong>Copyright 2025-2026 Stoffices / Simone J. Stocker - MAS Real Estate</strong></p>
<p>Alle Angaben ohne Gewähr. Angegebene Werte dienen ausschliesslich zur Veranschaulichung &
Testzwecken.</p>
</div>
</div>
</div>
</main>
</div>
<script src="js/app.js"></script>
</body>
</html>