261 lines
7.2 KiB
Plaintext
261 lines
7.2 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OnDocAPIHome.aspx.cs" Inherits="OnDocAPI_NetFramework.DemoSeite" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<title>Application Dashboard</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Segoe UI', Arial;
|
|
background: #f4f6fb;
|
|
}
|
|
|
|
/* Layout */
|
|
.wrapper {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: #1e293b;
|
|
color: white;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.sidebar h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Login Box */
|
|
.login-box {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.login-box input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5db;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-box button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: #2563eb;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login-box button:hover {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
/* Sidebar Links */
|
|
.sidebar a {
|
|
display: block;
|
|
padding: 14px 30px;
|
|
color: #cbd5f5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
background: #334155;
|
|
}
|
|
|
|
/* Main */
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Topbar */
|
|
.topbar {
|
|
background: white;
|
|
padding: 16px 30px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
padding: 30px;
|
|
}
|
|
|
|
/* Cards */
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
|
animation: fadeInUp 0.6s ease;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
/* Buttons */
|
|
.button-area {
|
|
background:white;
|
|
padding:30px;
|
|
border-radius:12px;
|
|
box-shadow:0 10px 20px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.btn {
|
|
padding:14px 20px;
|
|
border:none;
|
|
border-radius:8px;
|
|
font-size:15px;
|
|
cursor:pointer;
|
|
color:white;
|
|
margin-top:10px;
|
|
width:220px;
|
|
}
|
|
|
|
.btn1 {
|
|
background:#6366f1;
|
|
}
|
|
|
|
.btn1:hover {
|
|
background:#4f46e5;
|
|
}
|
|
|
|
.btn2 {
|
|
background:#10b981;
|
|
}
|
|
|
|
.btn2:hover {
|
|
background:#059669;
|
|
}
|
|
|
|
/* Animation */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity:0;
|
|
transform:translateY(20px);
|
|
}
|
|
to {
|
|
opacity:1;
|
|
transform:translateY(0);
|
|
}
|
|
}
|
|
|
|
small {
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Login error */
|
|
#<%= lblLoginError.ClientID %> {
|
|
color: red;
|
|
display:block;
|
|
margin-bottom:8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<div class="wrapper">
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<h2>OnDoc-API</h2>
|
|
<div class="login-box">
|
|
<asp:Label ID="lblLoginError" runat="server"></asp:Label>
|
|
<asp:TextBox ID="txtUserID" runat="server" Placeholder="Benutzer-ID"></asp:TextBox>
|
|
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Placeholder="Passwort"></asp:TextBox>
|
|
<asp:Button ID="btnLogin" runat="server" Text="Anmelden" OnClick="btnLogin_Click"/>
|
|
</div>
|
|
|
|
<%--<a href="#">Dashboard</a>
|
|
<a href="#">Statistiken</a>
|
|
<a href="#">Benutzer</a>
|
|
<a href="#">Einstellungen</a>--%>
|
|
</div>
|
|
|
|
<!-- Main -->
|
|
<div class="main">
|
|
<div class="topbar">OnDoc-API-Übersicht</div>
|
|
<div class="content">
|
|
<!-- Dashboard Cards -->
|
|
<div class="cards">
|
|
<div class="card">
|
|
<h3>Aktuelle Zeit</h3>
|
|
<p>
|
|
<span id="liveClock"></span><br/>
|
|
<small id="timezone"></small>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Version</h3>
|
|
<p>
|
|
<asp:Label ID="lblVersion" runat="server"></asp:Label>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>API Uptime</h3>
|
|
<p>
|
|
<asp:Label ID="lblUptime" runat="server"></asp:Label>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schnellzugriff Buttons -->
|
|
<div class="button-area">
|
|
<h2>Schnellzugriff</h2>
|
|
<asp:Button ID="Button1" runat="server" Text="CLM-Dokumente" CssClass="btn btn1" OnClick="OpenPage1" Visible="false"/><br/>
|
|
<asp:Button ID="Button2" runat="server" Text="Json-Viewer" CssClass="btn btn2" OnClick="OpenPage2" Visible="false"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Live Clock Script -->
|
|
<script>
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const year = now.getFullYear();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
|
const timeString = day + "." + month + "." + year + " " + hours + ":" + minutes + ":" + seconds;
|
|
document.getElementById("liveClock").innerText = timeString;
|
|
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
document.getElementById("timezone").innerText = tz;
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
</script>
|
|
|
|
<!-- Server-side Code -->
|
|
<script runat="server">
|
|
|
|
</script>
|
|
</body>
|
|
</html> |