Rewrite homepage using Bootstrap.
This commit is contained in:
Daniel Kraus
parent
be9c7305ec
commit
d6bbeaf954
79
www/css/jumbotron-narrow.css
Normal file
79
www/css/jumbotron-narrow.css
Normal file
@ -0,0 +1,79 @@
|
||||
/* Space out content a bit */
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Everything but the jumbotron gets side spacing for mobile first views */
|
||||
.header,
|
||||
.marketing,
|
||||
.footer {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* Custom page header */
|
||||
.header {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
/* Make the masthead heading the same height as the navigation */
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* Custom page footer */
|
||||
.footer {
|
||||
padding-top: 19px;
|
||||
color: #777;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Customize container */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 730px;
|
||||
}
|
||||
}
|
||||
.container-narrow > hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/* Main marketing message and sign up button */
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
padding: 14px 24px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
/* Supporting marketing content */
|
||||
.marketing {
|
||||
margin: 40px 0;
|
||||
}
|
||||
.marketing p + h4 {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
/* Responsive: Portrait tablets and up */
|
||||
@media screen and (min-width: 768px) {
|
||||
/* Remove the padding we set earlier */
|
||||
.header,
|
||||
.marketing,
|
||||
.footer {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
/* Space out the masthead */
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/* Remove the bottom border on the jumbotron for visual effect */
|
||||
.jumbotron {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
419
www/index.html
419
www/index.html
@ -1,186 +1,251 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>zaaReloaded2 by Daniel Kraus</title>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/jumbotron-narrow.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<title>zaaReloaded2</title>
|
||||
<meta name="author" content="Daniel Kraus">
|
||||
<style type="text/css"><!--
|
||||
* {
|
||||
font-family: Arial; font-size: 16px; line-height: 125%;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
body { margin: 16px 24px; max-width: 800px; }
|
||||
|
||||
h1, h2 { color: #5e2750; }
|
||||
h1 { font-size: 300%; margin: 48px 0 24px 0; }
|
||||
h2 { font-size: 200%; margin: 32px 0 16px 0; }
|
||||
|
||||
p { text-align: justify; }
|
||||
|
||||
img {
|
||||
box-shadow: 2px 2px 8px #444;
|
||||
}
|
||||
|
||||
.download {
|
||||
width: 500px; margin: 16px auto;
|
||||
padding: 8px; border: 1px solid #888;
|
||||
box-shadow: 2px 2px 8px #444;
|
||||
background-color: #eef;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
margin: 8px 0 8px 16px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
--></style>
|
||||
<meta name="descrption" content="Add-in für Microsoft Word 2010-2013,
|
||||
das die Zentrale Arztbriefablage um Funktionen für das Formatieren von
|
||||
Laborwerten erweitert.">
|
||||
</head>
|
||||
<body>
|
||||
<h1>zaaReloaded2</h1>
|
||||
<p style="font-weight: bold;">
|
||||
Erweiterung für Microsoft® Word 2010-2013, das die <a
|
||||
href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">
|
||||
Zentrale Arztbriefablage (ZAA)</a> um Funktionen für das Formatieren
|
||||
von Laborwerten erweitert.
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="header clearfix">
|
||||
<nav>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li>
|
||||
<a href="downloads/">Download</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="doc/">Code Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="doc/md_HISTORY.html">Versionsgeschichte</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<h1>zaaReloaded2</h1>
|
||||
<p class="lead">
|
||||
Erweiterung für Microsoft® Word 2010-2013, das die
|
||||
<a href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">Zentrale Arztbriefablage (ZAA)</a>
|
||||
um Funktionen für das Formatieren von Laborwerten erweitert.
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<a class="btn btn-lg btn-primary" href="downloads/">
|
||||
Download
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="download">
|
||||
<h2 style="margin-top:0">Download</h2>
|
||||
<p><a href="downloads/">zaa.nephrowiki.de/downloads</a></p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">Vorher</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<img class="img-responsive center-block" src="img/vorher.png" alt="Vorher">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">Nachher</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<img class="img-responsive center-block" src="img/nachher.png" alt="Nachher">
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<p>Am Beispiel des Ambulanz-Stils</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="clearfix">
|
||||
<h2 class="page-header">
|
||||
<img class="pull-right img-responsive" src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
|
||||
Anleitung
|
||||
</h2>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Laborwerte auf üblichem Wege in einen Arztbrief einfügen
|
||||
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
|
||||
ein Beispieldokument mit Laborwerten geöffnet).
|
||||
</li>
|
||||
<li>
|
||||
<img class="pull-right img-responsive" src="img/stilauswahl.png" alt="Stil auswählen" />
|
||||
Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
|
||||
klicken.
|
||||
</li>
|
||||
<li>
|
||||
Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den
|
||||
gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
|
||||
wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil
|
||||
genommen.
|
||||
</li>
|
||||
<li>
|
||||
Einen Moment warten... Voilà.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2 class="page-header">
|
||||
Updates
|
||||
</h2>
|
||||
<p>
|
||||
Das Addin sucht täglich nach Updates und lädt und installiert
|
||||
diese bei Bedarf im Hintergrund.
|
||||
</p>
|
||||
|
||||
<h2 class="page-header">
|
||||
Anpassen
|
||||
</h2>
|
||||
<p>
|
||||
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
|
||||
bearbeitet und neue Stile entworfen werden können:
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
|
||||
</p>
|
||||
|
||||
<p class="clearfix">
|
||||
<img src="img/elementpicker.png" alt="Elemente" class="pull-right" />
|
||||
Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
|
||||
<i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
|
||||
(erster Tag/letzter Tag) zuständig sind, und es gibt
|
||||
<i>Ausgabeelemente</i>, die die eigentliche Formatierung und Ausgabe
|
||||
der Laborwerte übernehmen.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
Steuerelemente
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul>
|
||||
<li>Ersten Tag auswählen</li>
|
||||
<li>Letzten Tag auswählen</li>
|
||||
<li>Jeden Tag nacheinander auswählen</li>
|
||||
<li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
Ausgabeelemente
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul>
|
||||
<li>Laborparameter</li>
|
||||
<li>Beliebiger Text</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
|
||||
enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann
|
||||
man z.B. Platzhalter für Urinsedimente ausgeben lassen, die dann
|
||||
noch händisch vervollständigt werden.
|
||||
</p>
|
||||
<p>
|
||||
"Laborparameter" enthalten eine durch Kommata getrennte Auflistung
|
||||
von Parametern, die ausgegeben werden sollen. Jedes Element
|
||||
"Laborparameter" kann optional einen Titel enthalten:
|
||||
</p>
|
||||
<p>
|
||||
Beispiel:
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
<img src="img/elementbearbeiten.png" alt="Element bearbeiten" />
|
||||
</p>
|
||||
<p>
|
||||
Klinische Chemie: Na, K, Cl, (usw.)
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
In diesem Fall ist "Klinische Chemie:" der optionale Titel.
|
||||
</p>
|
||||
<p>
|
||||
Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert.
|
||||
Teils decken sie sich mit den Bezeichnungen, wie sie in der
|
||||
Zentralen Arztbriefablage erscheinen; teils sind sie aber auch
|
||||
Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr.
|
||||
CKD-EP").
|
||||
</p>
|
||||
<p>
|
||||
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
|
||||
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
|
||||
"*" sollte daher als letztes verwendet werden.
|
||||
</p>
|
||||
<p>
|
||||
Die Liste der möglichen Parameternamen ist momentan fest
|
||||
einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
|
||||
beim Entwickeln eines Stils aber probehalber den Platzhalter "*"
|
||||
verwenden und sieht dann, welche Parameternamen noch verwendet
|
||||
werden könnten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<p>
|
||||
© 2015 <a href="http://www.bovender.de">Daniel Kraus</a>
|
||||
<span class="pull-right">
|
||||
Handarbeit mit
|
||||
<a href="http://www.vim.org">
|
||||
Vim
|
||||
</a>
|
||||
und
|
||||
<a href="http://getbootstrap.com">
|
||||
Bootstrap
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<h2>Vorher</h2>
|
||||
<p class="center"><img src="img/vorher.png" alt="Vorher" /></p>
|
||||
|
||||
<h2>Nachher</h2>
|
||||
<p>Am Beispiel des Ambulanz-Stils:</p>
|
||||
<p class="center"><img src="img/nachher.png" alt="Nachher" /></p>
|
||||
|
||||
<h2>Anleitung</h2>
|
||||
|
||||
<p class="center">
|
||||
<img src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>Laborwerte auf üblichem Wege in einen Arztbrief einfügen
|
||||
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
|
||||
ein Beispieldokument mit Laborwerten geöffnet).</li>
|
||||
<li>Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
|
||||
klicken.</li>
|
||||
<p class="center">
|
||||
<img src="img/stilauswahl.png" alt="Stil auswählen" />
|
||||
</p>
|
||||
<li>
|
||||
Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den
|
||||
gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
|
||||
wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil
|
||||
genommen.</li>
|
||||
<li>Einen Moment warten... Voilà.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<h2 class="clear">Anpassen</h2>
|
||||
<p>
|
||||
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
|
||||
bearbeitet und neue Stile entworfen werden können:
|
||||
</p>
|
||||
<p class="center">
|
||||
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
|
||||
</p>
|
||||
|
||||
<p class="clear">
|
||||
<img src="img/elementpicker.png" alt="Elemente" class="float-right" />
|
||||
Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
|
||||
<i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
|
||||
(erster Tag/letzter Tag) zuständig sind, und es gibt
|
||||
<i>Ausgabeelemente</i>, die die eigentliche Formatierung und Ausgabe
|
||||
der Laborwerte übernehmen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Steuerelemente:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Ersten Tag auswählen</li>
|
||||
<li>Letzten Tag auswählen</li>
|
||||
<li>Jeden Tag nacheinander auswählen</li>
|
||||
<li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Ausgabeelemente:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Laborparameter</li>
|
||||
<li>Beliebiger Text</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
|
||||
enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann
|
||||
man z.B. Platzhalter für Urinsedimente ausgeben lassen, die dann
|
||||
noch händisch vervollständigt werden.
|
||||
</p>
|
||||
<p>
|
||||
"Laborparameter" enthalten eine durch Kommata getrennte Auflistung
|
||||
von Parametern, die ausgegeben werden sollen. Jedes Element
|
||||
"Laborparameter" kann optional einen Titel enthalten:
|
||||
</p>
|
||||
<p>
|
||||
Beispiel:
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
<img src="img/elementbearbeiten.png" alt="Element bearbeiten" />
|
||||
</p>
|
||||
<p>
|
||||
Klinische Chemie: Na, K, Cl, (usw.)
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
In diesem Fall ist "Klinische Chemie:" der optionale Titel.
|
||||
</p>
|
||||
<p>
|
||||
Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert.
|
||||
Teils decken sie sich mit den Bezeichnungen, wie sie in der
|
||||
Zentralen Arztbriefablage erscheinen; teils sind sie aber auch
|
||||
Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr.
|
||||
CKD-EP").
|
||||
</p>
|
||||
<p>
|
||||
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
|
||||
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
|
||||
"*" sollte daher als letztes verwendet werden.
|
||||
<p>
|
||||
Die Liste der möglichen Parameternamen ist momentan fest
|
||||
einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
|
||||
beim Entwickeln eines Stils aber probehalber den Platzhalter "*"
|
||||
verwenden und sieht dann, welche Parameternamen noch verwendet
|
||||
werden könnten.
|
||||
</p>
|
||||
|
||||
<h2>Updates</h2>
|
||||
<p>
|
||||
Das Addin sucht täglich nach Updates und lädt und installiert diese
|
||||
bei Bedarf im Hintergrund.
|
||||
</p>
|
||||
|
||||
<h2>Weitere Informationen</h2>
|
||||
<p><a href="doc/md_HISTORY.html">Versionsgeschichte</a></p>
|
||||
<p><a href="doc/index.html">Quellcode-Dokumentation</a></p>
|
||||
|
||||
<hr />
|
||||
<p>© 2015 <a href="http://www.bovender.de">Daniel Kraus</a></p>
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
<!-- vim: set tw=72 ai sts=2 ts=2 sw=2 : -->
|
||||
<!-- vim: set tw=72 et ai sts=2 ts=2 sw=2 : -->
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user