diff options
| author | xengineering <me@xengineering.eu> | 2021-12-02 14:29:47 +0100 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-12-02 14:29:47 +0100 |
| commit | 93cb69b7ddaa60b3d3351272eb024027e4b0778b (patch) | |
| tree | 431b02e7ec8c19a33303cb50efe1792ae9ecbb93 | |
| parent | 48fc5da790fe8c39def552bc4d52dc91389cf016 (diff) | |
| download | libweb-93cb69b7ddaa60b3d3351272eb024027e4b0778b.tar libweb-93cb69b7ddaa60b3d3351272eb024027e4b0778b.tar.zst libweb-93cb69b7ddaa60b3d3351272eb024027e4b0778b.zip | |
Restructure whole Repository
| -rw-r--r-- | README.md | 11 | ||||
| -rw-r--r-- | demo.png (renamed from img/demo.png) | bin | 46706 -> 46706 bytes | |||
| -rw-r--r-- | html/template.html | 93 | ||||
| -rw-r--r-- | html/test_simple.html | 175 | ||||
| -rw-r--r-- | index.html | 61 | ||||
| -rw-r--r-- | libweb.css (renamed from css/xengineering.css) | 0 | ||||
| -rw-r--r-- | libweb.js (renamed from js/xengineering.js) | 0 | ||||
| -rw-r--r-- | test.html (renamed from html/test_nav_main.html) | 6 | ||||
| -rw-r--r-- | todo | 2 |
9 files changed, 14 insertions, 334 deletions
@@ -3,11 +3,18 @@ A repository with reusable components for web development. - + ## Usage -Just clone it to your web server or add it as a Git submodule to your application repository. In each case you can create symbolic links to relevant files. +Just clone it to your web server or add it as a Git submodule to your +application repository. In each case you can create symbolic links to relevant +files. + +## Testing + +Have a look at `test.html`. You can open it in your browser (e.g. `firefox +test.html`) and have a look at all the supported elements. ## Goals diff --git a/html/template.html b/html/template.html deleted file mode 100644 index ef28d03..0000000 --- a/html/template.html +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html> - -<!-- -vim: shiftwidth=4 tabstop=4 noexpandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <https://www.gnu.org/licenses/>. - -contact via mail: me@xengineering.eu ---> - -<html> - - <head> - - <title>libweb</title> - - <meta charset="utf-8"/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="../css/xengineering.css" type="text/css"> - - </head> - - <body> - - <nav> - <button id="menu-button" onclick=toggleMenu()>MENU</button> - <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> - </nav> - - <main> - <h1>libweb</h1> - - <p>A repository with reusable components for web development. Here is a long paragraph:</p> - - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> - - <p>This is a link to <a href="https://example.com">example.com</a>.</p> - - <p>This is an ordered list:</p> - <ol> - <li>One</li> - <li>Two</li> - <li>Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li> - </ol> - - <p>This is an unordered list:</p> - <ul> - <li>One</li> - <li>Two</li> - <li>Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li> - </ul> - - <p>Have a look at this beautiful code:</p> - <pre><code>#!/usr/bin/python3 - -print("This is just some example code!") -</code></pre> - - <p>Sometimes it is quite nice to put things into cards:</p> - <div class="card"> - <h3>This is a Card</h3> - <p>Cards are very good.</p> - </div> - - <p>It is also possible to put cards into an anchor tag:</p> - <a href="https://xengineering.eu"> - <div class="card"> - <h3>This is a Card inside an Anchor</h3> - <p>It is a link!</p> - </div> - </a> - </main> - - <script src="../js/xengineering.js"></script> - - </body> - -</html> diff --git a/html/test_simple.html b/html/test_simple.html deleted file mode 100644 index 3791429..0000000 --- a/html/test_simple.html +++ /dev/null @@ -1,175 +0,0 @@ -<!DOCTYPE html> - -<!-- -vim: shiftwidth=4 tabstop=4 noexpandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <https://www.gnu.org/licenses/>. - -contact via mail: me@xengineering.eu ---> - -<html> - - <head> - - <title>libweb</title> - - <meta charset="utf-8"/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="../css/xengineering.css" type="text/css"> - - </head> - - <body> - - <main> - - <!-- h1 h2 h3 h4 h5 h6 --> - <h1>A simple Test Page</h1> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <h2>A simple Test Page</h2> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <h3>A simple Test Page</h3> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <h4>A simple Test Page</h4> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <h5>A simple Test Page</h5> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - <h6>A simple Test Page</h6> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.</p> - - <!-- p --> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores et ea - rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem - ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus - est Lorem ipsum dolor sit amet.</p> - - <!-- a --> - <a href="https://example.com">Example Link</a> - - <!-- button --> - <button>Testbutton</button> - - <!-- img --> - <img src="../img/demo.png" alt="An example image"> - <img src="null.jpg" alt="Not existing image"> - - <!-- ol ul li --> - <ol> - <li>First item</li> - <li>Second item</li> - <li>Third item</li> - <li>Long item: Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum - dolor sit amet.</li> - <li>an item</li> - <li>an item</li> - <li>an item</li> - <li>an item</li> - <li>an item</li> - <li>an item</li> - </ol> - <p>Just some Lorem ipsum dolor sit amet, consetetur sadipscing elitr, - sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum.</p> - <ul> - <li>An item</li> - <li>Another item</li> - <li>Just another item</li> - <li>Long item: Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum - dolor sit amet.</li> - </ul> - - <!-- pre --> - <pre>#!/bin/sh - -# This is a cool shell script. -echo "I am $(whoami)" -</pre> - - <!-- .card --> - <div class="card"> - <h3 class="card-first-item">This is a Card</h3> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum - dolor sit amet.</p> - <h3>This is a Card</h3> - <p class="card-last-item">Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum - dolor sit amet.</p> - </div> - - <footer></footer> - - <script src="../js/xengineering.js"></script> - - </main> - - </body> - -</html> diff --git a/index.html b/index.html deleted file mode 100644 index db676c0..0000000 --- a/index.html +++ /dev/null @@ -1,61 +0,0 @@ -<!DOCTYPE html> - -<!-- -vim: shiftwidth=4 tabstop=4 noexpandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <https://www.gnu.org/licenses/>. - -contact via mail: me@xengineering.eu ---> - -<html> - - <head> - - <title>libweb</title> - - <meta charset="utf-8"/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="./css/xengineering.css" type="text/css"> - - </head> - - <body> - - <nav> - <button id="menu-button" onclick=toggleMenu()>MENU</button> - <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> - </nav> - - <main> - <h1>libweb</h1> - <p>A repository with reusable components for web development.</p> - - <h3>Test Pages</h3> - <p>Here are some test pages:</p> - <ul> - <li>A simple <a href="./html/test_simple.html">test page</a></li> - <li>A <a href="./html/test_nav_main.html">test page</a> for the navigation menu</li> - </ul> - </main> - - <script src="./js/xengineering.js"></script> - - </body> - -</html> diff --git a/css/xengineering.css b/libweb.css index e54061c..e54061c 100644 --- a/css/xengineering.css +++ b/libweb.css diff --git a/js/xengineering.js b/libweb.js index d82db88..d82db88 100644 --- a/js/xengineering.js +++ b/libweb.js diff --git a/html/test_nav_main.html b/test.html index 7016efc..909832b 100644 --- a/html/test_nav_main.html +++ b/test.html @@ -31,7 +31,7 @@ contact via mail: me@xengineering.eu <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="../css/xengineering.css" type="text/css"> + <link rel="stylesheet" href="./libweb.css" type="text/css"> </head> @@ -91,7 +91,7 @@ contact via mail: me@xengineering.eu <a href="https://example.com">Example Link</a> <!-- img --> - <img src="../img/demo.png" alt="An example image"> + <img src="./demo.png" alt="An example image"> <img src="null.jpg" alt="Not existing image"> <!-- ol ul li --> @@ -168,7 +168,7 @@ echo "I am $(whoami)" </main> - <script src="../js/xengineering.js"></script> + <script src="./libweb.js"></script> </body> @@ -0,0 +1,2 @@ +badge support for https://krautmacher.org/services/ejabberd.html +rotated mobile screen bug |
