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;
|
||||||
|
}
|
||||||
|
}
|
||||||
249
www/index.html
249
www/index.html
@ -1,103 +1,136 @@
|
|||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
<head>
|
<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">
|
<meta name="author" content="Daniel Kraus">
|
||||||
<style type="text/css"><!--
|
<meta name="descrption" content="Add-in für Microsoft Word 2010-2013,
|
||||||
* {
|
das die Zentrale Arztbriefablage um Funktionen für das Formatieren von
|
||||||
font-family: Arial; font-size: 16px; line-height: 125%;
|
Laborwerten erweitert.">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<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>
|
<h1>zaaReloaded2</h1>
|
||||||
<p style="font-weight: bold;">
|
<p class="lead">
|
||||||
Erweiterung für Microsoft® Word 2010-2013, das die <a
|
Erweiterung für Microsoft® Word 2010-2013, das die
|
||||||
href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">
|
<a href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">Zentrale Arztbriefablage (ZAA)</a>
|
||||||
Zentrale Arztbriefablage (ZAA)</a> um Funktionen für das Formatieren
|
um Funktionen für das Formatieren von Laborwerten erweitert.
|
||||||
von Laborwerten erweitert.
|
</p>
|
||||||
|
<p class="text-center">
|
||||||
|
<a class="btn btn-lg btn-primary" href="downloads/">
|
||||||
|
Download
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="download">
|
|
||||||
<h2 style="margin-top:0">Download</h2>
|
|
||||||
<p><a href="downloads/">zaa.nephrowiki.de/downloads</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Vorher</h2>
|
<div class="row">
|
||||||
<p class="center"><img src="img/vorher.png" alt="Vorher" /></p>
|
<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>
|
||||||
|
|
||||||
<h2>Nachher</h2>
|
<div class="row">
|
||||||
<p>Am Beispiel des Ambulanz-Stils:</p>
|
<div class="col-md-12">
|
||||||
<p class="center"><img src="img/nachher.png" alt="Nachher" /></p>
|
<div class="clearfix">
|
||||||
|
<h2 class="page-header">
|
||||||
<h2>Anleitung</h2>
|
<img class="pull-right img-responsive" src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
|
||||||
|
Anleitung
|
||||||
<p class="center">
|
</h2>
|
||||||
<img src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
<li>Laborwerte auf üblichem Wege in einen Arztbrief einfügen
|
<li>
|
||||||
|
Laborwerte auf üblichem Wege in einen Arztbrief einfügen
|
||||||
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
|
(alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
|
||||||
ein Beispieldokument mit Laborwerten geöffnet).</li>
|
ein Beispieldokument mit Laborwerten geöffnet).
|
||||||
<li>Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
|
</li>
|
||||||
klicken.</li>
|
<li>
|
||||||
<p class="center">
|
<img class="pull-right img-responsive" src="img/stilauswahl.png" alt="Stil auswählen" />
|
||||||
<img src="img/stilauswahl.png" alt="Stil auswählen" />
|
Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
|
||||||
</p>
|
klicken.
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den
|
Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den
|
||||||
gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
|
gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
|
||||||
wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil
|
wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil
|
||||||
genommen.</li>
|
genommen.
|
||||||
<li>Einen Moment warten... Voilà.</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
Einen Moment warten... Voilà.
|
||||||
|
</li>
|
||||||
</ol>
|
</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="clear">Anpassen</h2>
|
<h2 class="page-header">
|
||||||
|
Anpassen
|
||||||
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
|
Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
|
||||||
bearbeitet und neue Stile entworfen werden können:
|
bearbeitet und neue Stile entworfen werden können:
|
||||||
</p>
|
</p>
|
||||||
<p class="center">
|
<p class="text-center">
|
||||||
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
|
<img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="clear">
|
<p class="clearfix">
|
||||||
<img src="img/elementpicker.png" alt="Elemente" class="float-right" />
|
<img src="img/elementpicker.png" alt="Elemente" class="pull-right" />
|
||||||
Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
|
Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
|
||||||
<i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
|
<i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
|
||||||
(erster Tag/letzter Tag) zuständig sind, und es gibt
|
(erster Tag/letzter Tag) zuständig sind, und es gibt
|
||||||
@ -105,26 +138,45 @@
|
|||||||
der Laborwerte übernehmen.
|
der Laborwerte übernehmen.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
</div>
|
||||||
Steuerelemente:
|
</div>
|
||||||
</p>
|
<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>
|
<ul>
|
||||||
<li>Ersten Tag auswählen</li>
|
<li>Ersten Tag auswählen</li>
|
||||||
<li>Letzten Tag auswählen</li>
|
<li>Letzten Tag auswählen</li>
|
||||||
<li>Jeden Tag nacheinander auswählen</li>
|
<li>Jeden Tag nacheinander auswählen</li>
|
||||||
<li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
|
<li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
<p>
|
</div>
|
||||||
Ausgabeelemente:
|
</div>
|
||||||
</p>
|
<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>
|
<ul>
|
||||||
<li>Laborparameter</li>
|
<li>Laborparameter</li>
|
||||||
<li>Beliebiger Text</li>
|
<li>Beliebiger Text</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
<p>
|
<p>
|
||||||
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
|
"Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
|
||||||
enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann
|
enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann
|
||||||
@ -161,6 +213,7 @@
|
|||||||
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
|
Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
|
||||||
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
|
verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
|
||||||
"*" sollte daher als letztes verwendet werden.
|
"*" sollte daher als letztes verwendet werden.
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Die Liste der möglichen Parameternamen ist momentan fest
|
Die Liste der möglichen Parameternamen ist momentan fest
|
||||||
einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
|
einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
|
||||||
@ -168,19 +221,31 @@
|
|||||||
verwenden und sieht dann, welche Parameternamen noch verwendet
|
verwenden und sieht dann, welche Parameternamen noch verwendet
|
||||||
werden könnten.
|
werden könnten.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2>Updates</h2>
|
|
||||||
|
<footer class="footer">
|
||||||
<p>
|
<p>
|
||||||
Das Addin sucht täglich nach Updates und lädt und installiert diese
|
© 2015 <a href="http://www.bovender.de">Daniel Kraus</a>
|
||||||
bei Bedarf im Hintergrund.
|
<span class="pull-right">
|
||||||
|
Handarbeit mit
|
||||||
|
<a href="http://www.vim.org">
|
||||||
|
Vim
|
||||||
|
</a>
|
||||||
|
und
|
||||||
|
<a href="http://getbootstrap.com">
|
||||||
|
Bootstrap
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2>Weitere Informationen</h2>
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||||
<p><a href="doc/md_HISTORY.html">Versionsgeschichte</a></p>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
<p><a href="doc/index.html">Quellcode-Dokumentation</a></p>
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||||
|
<script src="js/bootstrap.min.js"></script>
|
||||||
<hr />
|
|
||||||
<p>© 2015 <a href="http://www.bovender.de">Daniel Kraus</a></p>
|
|
||||||
</body>
|
</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>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user