feat: html template

2025-08-22 11:47:34 +02:00
parent 68b0256f77
commit 2e279c9b13
14 changed files with 763 additions and 13 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Rechnung vom 0001-01-01 00:00:00 &#43;0000 UTC</title>
+    
+    <style>
+      /* body { */
+/*   font-family: sans-serif; */
+/*   font-size: 14px; */
+/* } */
+/**/
+/* table { */
+/*   width: 100%; */
+/*   border-collapse: collapse; */
+/* } */
+/**/
+/* th, */
+/* td { */
+/*   border: 1px solid #ddd; */
+/*   padding: 8px; */
+/*   text-align: left; */
+/* } */
+/**/
+/* th { */
+/*   background-color: #f4f4f4; */
+/*   font-weight: bold; */
+/* } */
+/**/
+/* tr:nth-child(even) { */
+/*   background-color: #f9f9f9; */
+/* } */
+body {
+  font-family: sans-serif;
+  margin: 40px;
+  color: #333;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+h1 {
+  margin: 0;
+  font-size: 2em;
+}
+.company,
+.client {
+  margin-bottom: 20px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+table,
+th,
+td {
+  border: 1px solid #ccc;
+}
+th,
+td {
+  padding: 10px;
+  text-align: left;
+}
+th {
+  background-color: #f2f2f2;
+}
+tfoot td {
+  font-weight: bold;
+}
+h2 {
+  margin-top: 40px;
+}
+article {
+  margin-bottom: 20px;
+}
+footer {
+  margin-top: 40px;
+  font-size: 0.9em;
+  text-align: center;
+  color: #666;
+}
+.totals {
+  float: right;
+  width: 300px;
+  margin-top: 20px;
+}
+.totals table {
+  border: none;
+}
+.totals td {
+  border: none;
+  padding: 5px 10px;
+  text-align: right;
+}
+
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="company">
+        <h2>.CompanyName <h2>
+        <p>.CompanyAddress <p>
+        <p>.CompanyContact <p>
+      </div>
+      <div class="invoice-info">
+        <p><strong>Rechnung:</strong>  .InvoiceNumber </p>
+        <p><strong>Datum:</strong> .Date </p>
+        <p><strong>Fällig am:</strong>  .DueDate </p>
+      </div>
+    </header>
+    <section class="client">
+      <h2>Rechnung an:</h2>
+      <p> .ClientName </p>
+      <p> .ClientAddress </p>
+      <p> .ClientContact </p>
+    </section>
+    <table>
+      <thead>
+        <tr>
+          <th>FID</th>
+          <th>Name</th>
+          <th>Zeitaufwand</th>
+          <th>Stundensatz</th>
+          <th>Preis CHF</th>
+          <th>Fertiggestellt</th>
+        </tr>
+      </thead>
+      <tbody>
+        
+        <tr>
+          <td>6</td>
+          <td>Multilingual</td>
+          <td>2.50 h</td>
+          <td>16 CHF/h</td>
+          <td>40.00 CHF</td>
+
+          <td>21.08.2025 18:05</td>
+        </tr>
+        
+        <tr>
+          <td>1</td>
+          <td>asdf</td>
+          <td>1.72 h</td>
+          <td>16 CHF/h</td>
+          <td>27.47 CHF</td>
+
+          <td>01.08.2025 14:04</td>
+        </tr>
+        
+      </tbody>
+    </table>
+
+		<div class="totals">
+      <table>
+        <tr>
+          <td>Gesamtbetrag:</td>
+          <td> CHF</td>
+        </tr>
+      </table>
+    </div>
+
+		<section>
+			
+
+    <h2>Details zu den Features</h2>
+
+    
+    <article>
+      <h3>6: Multilingual</h3>
+      <pre><code class="language-info">duration: 2h 30min
+</code></pre>
+
+<p>The application must support English and German.</p>
+
+<h5 id="todo-s">TODO&rsquo;s</h5>
+
+<ul>
+<li><input type="checkbox" checked disabled> Add multiple languages to Pages</li>
+<li><input type="checkbox" checked disabled> Add multiple languages to Events</li>
+</ul>
+
+    </article>
+    
+    <article>
+      <h3>1: asdf</h3>
+      <p>Hello</p>
+
+<pre><code class="language-info">duration: 1h 43min
+</code></pre>
+
+<h4 id="adökfjaösldkjflaa">adökfjaösldkjflaa</h4>
+
+<h5 id="asdfads">ASDFADS</h5>
+
+<h6 id="adllglggl">adllglggl</h6>
+
+    </article>
+    
+
+		</section>
+		<footer>
+      <p>Bitte überweisen Sie den Gesamtbetrag bis zum Fälligkeitsdatum auf folgendes Konto:</p>
+      <p> .BankDetails </p>
+      <p>Vielen Dank für Ihr Vertrauen!</p>
+    </footer>
+  </body>
+</html>