Hello GitHub
53
README.md
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
|
||||||
|
# THome
|
||||||
|
THome is a static minimal personal dashboard made for local use, except its a bit easier to maintain and update it using python
|
||||||
|
|
||||||
|
I just wanted to make my own dashboard for my homelab and used the things i know to put it together as simple as i can
|
||||||
|
|
||||||
|
# Features
|
||||||
|
* simple design
|
||||||
|
* responsive, works great on PC, tablet and phone
|
||||||
|
* doesn't require any special dependencies, for linux at least
|
||||||
|
* has search to filter your cards
|
||||||
|
* works fast and perfectly without internet, since all the css and js are attached
|
||||||
|
|
||||||
|
# requirement
|
||||||
|
* A Text Editor
|
||||||
|
* Python
|
||||||
|
* Web Browser
|
||||||
|
|
||||||
|
# How to use
|
||||||
|
* First of edit the sites.xml, change every thing in CAPS, add as many as you like
|
||||||
|
```
|
||||||
|
<item name = "NAME">
|
||||||
|
<tag>TAG</tag>
|
||||||
|
<tag_text>SHORT_TAG</tag_text>
|
||||||
|
<name>NAME</name>
|
||||||
|
<link>HTTPS://LINK.COM</link>
|
||||||
|
<image_name>FILENAME.PNG</image_name>
|
||||||
|
<powered_by>NAME</powered_by>
|
||||||
|
<description_en>TEXT</description_en>
|
||||||
|
<description_ar>نص</description_ar>
|
||||||
|
</item>
|
||||||
|
```
|
||||||
|
|
||||||
|
** for <tag> use or however you like (this affect the colors of the cards):
|
||||||
|
*** "KB" Stands for: Knowledge Base and Wikis
|
||||||
|
*** "SaM" Stands for: Social networks and media
|
||||||
|
*** "WaB" Stands for: Websites and Blogs
|
||||||
|
*** "SaI" Stands for: Search and Indexing
|
||||||
|
*** "admin" Stands for: Admin tools and such
|
||||||
|
|
||||||
|
** Run the python script to create your index.html
|
||||||
|
`python main.py`
|
||||||
|
|
||||||
|
** put the files in your webserver or just open it in your web browser
|
||||||
|
|
||||||
|
# Used stuff
|
||||||
|
things used here:
|
||||||
|
* HTML
|
||||||
|
* CSS
|
||||||
|
* Bootstrap & jQuery
|
||||||
|
* ["This script for the search" "https://stackoverflow.com/a/61621522"]
|
||||||
|
* Nord Colors
|
||||||
|
* Python
|
7
css/bootstrap.min.css
vendored
Normal file
210
css/customize.css
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
:root {
|
||||||
|
--KB: #BF616A;
|
||||||
|
--SaM: #EBCB8B;
|
||||||
|
--WaB: #A3BE8C;
|
||||||
|
--SaI: #D08770;
|
||||||
|
--admin: #B48EAD;
|
||||||
|
--bg: #1d212b;
|
||||||
|
--darknord: #2E3440;
|
||||||
|
--nord4: #D8DEE9;
|
||||||
|
--nord5: #E5E9F0;
|
||||||
|
--nord6: #ECEFF4;
|
||||||
|
--nord8: #88C0D0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--darknord);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
color: red;
|
||||||
|
background: var(--darknord);
|
||||||
|
background-color: var(--darknord);
|
||||||
|
min-height: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--darknord);
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbox-input {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid{
|
||||||
|
min-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
background-color: var(--bg);
|
||||||
|
padding-top: 50px;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow:auto;
|
||||||
|
padding-bottom:150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col{
|
||||||
|
padding: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-shadow: 0 0 10px black;
|
||||||
|
background-color: var(--darknord);
|
||||||
|
opacity: 100;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
min-width: 310px;
|
||||||
|
max-width: auto;
|
||||||
|
min-height: 177px;
|
||||||
|
color: red;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.applogo {
|
||||||
|
bottom: 0;
|
||||||
|
left: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-right: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.KB {
|
||||||
|
color: var(--KB);
|
||||||
|
}
|
||||||
|
.title.SaM {
|
||||||
|
color: var(--SaM);
|
||||||
|
}
|
||||||
|
.title.WaB {
|
||||||
|
color: var(--WaB);
|
||||||
|
}
|
||||||
|
.title.SaI {
|
||||||
|
color: var(--SaI);
|
||||||
|
}
|
||||||
|
.title.admin {
|
||||||
|
color: var(--admin);
|
||||||
|
}
|
||||||
|
.media-content {
|
||||||
|
/*padding-left: 15px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
*/
|
||||||
|
font-size: 30px;
|
||||||
|
padding-top: 7px;
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
.media-content #powerdby {
|
||||||
|
margin-top: -1.5rem;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--nord8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: red; }
|
||||||
|
|
||||||
|
.en_desc {
|
||||||
|
padding-bottom: -100px;
|
||||||
|
color: var(--nord4);
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.ar_desc {
|
||||||
|
margin-top: 0px;
|
||||||
|
padding-top: -30px;
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
height: 1.5em;
|
||||||
|
background-color: red; /* You should NOT see red color*/
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: -0.2rem;
|
||||||
|
width: .5em;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.tag .tag-text {
|
||||||
|
display: none; }
|
||||||
|
}
|
||||||
|
.tag.uesless { /*Knowledge Base and wikis */
|
||||||
|
background-color: var(--KB);
|
||||||
|
}
|
||||||
|
.tag.KB { /*Knowledge Base and wikis */
|
||||||
|
background-color: var(--KB);
|
||||||
|
}
|
||||||
|
.tag.SaM { /*Social networks and Media*/
|
||||||
|
background-color: var(--SaM);
|
||||||
|
}
|
||||||
|
.tag.WaB { /*Websites and Blogs*/
|
||||||
|
background-color: var(--WaB);
|
||||||
|
}
|
||||||
|
.tag.SaI { /*Search and Indexing*/
|
||||||
|
background-color: var(--SaI);
|
||||||
|
}
|
||||||
|
.tag.admin { /*Search and Indexing*/
|
||||||
|
background-color: var(--admin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
/* OLD ANIMATION
|
||||||
|
transform: translate(0, -1rem);
|
||||||
|
animation: testmaybe 0.2s forwards;
|
||||||
|
@keyframes testmaybe {
|
||||||
|
100% {transform: translate(0, -0.5rem);}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
transform: scale(1.05);
|
||||||
|
z-index: 1;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
box-shadow: 0 0 15px red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover .tag {
|
||||||
|
width: auto;
|
||||||
|
color: red;
|
||||||
|
padding: 0 0.75em;
|
||||||
|
}
|
||||||
|
.card:hover .tag .tag-text {
|
||||||
|
display: block;
|
||||||
|
color: var(--darknord);
|
||||||
|
}
|
||||||
|
.card:hover.useless {
|
||||||
|
box-shadow: 0 0 25px var(--KB);
|
||||||
|
}
|
||||||
|
.card:hover.KB {
|
||||||
|
box-shadow: 0 0 25px var(--KB);
|
||||||
|
}
|
||||||
|
.card:hover.SaM {
|
||||||
|
box-shadow: 0 0 25px var(--SaM);
|
||||||
|
}
|
||||||
|
.card:hover.WaB {
|
||||||
|
box-shadow: 0 0 25px var(--WaB);
|
||||||
|
}
|
||||||
|
.card:hover.SaI {
|
||||||
|
box-shadow: 0 0 25px var(--SaI);
|
||||||
|
}
|
||||||
|
.card:hover.admin {
|
||||||
|
box-shadow: 0 0 25px var(--admin);
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
background-color: var(--darknord);
|
||||||
|
position: relative;
|
||||||
|
}
|
453
index.html
Normal file
@ -0,0 +1,453 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>THome!</title>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/customize.css">
|
||||||
|
<script>
|
||||||
|
/* my case senstive search script
|
||||||
|
$('.searchbox-input').on('keyup',function () {
|
||||||
|
$('.card').show();
|
||||||
|
var filter = $(this).val().toUpperCase();
|
||||||
|
$( ".col:not(:contains(" + filter + "))" ).css( 'display','none' );
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
//not my script tho, and its perfect! credit: https://stackoverflow.com/a/61621522
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.searchbox-input').on("keyup", function() {
|
||||||
|
var value = $(this).val().toLowerCase();
|
||||||
|
$(".col").filter(function() {
|
||||||
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-brand">THome</a>
|
||||||
|
<form class="form-inline">
|
||||||
|
<input class="form-control searchbox-input" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
</form>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="cards ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col">
|
||||||
|
<div class="card KB">
|
||||||
|
<a href="https://www.mediawiki.org/wiki/MediaWiki">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/mediawiki.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag KB">
|
||||||
|
<strong class="tag-text">KNB</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title KB" align="left">The Wiki</p>
|
||||||
|
<p class="subtitle" id="powerdby">MediaWiki</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
MediaWiki is a free and open-source wiki
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
ميديا ويكي موسوعة مدانية ومفتوحة المصدر
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card admin">
|
||||||
|
<a href="http://192.168.1.1/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/router.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag admin">
|
||||||
|
<strong class="tag-text">ADM</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title admin" align="left">Cisco x3500</p>
|
||||||
|
<p class="subtitle" id="powerdby">Original Firmware</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Just a Router in The Network
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
لوحة تحكم الراوتر
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card admin">
|
||||||
|
<a href="https://www.phpmyadmin.net/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/phpmyadmin.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag admin">
|
||||||
|
<strong class="tag-text">ADM</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title admin" align="left">phpMyAdmin</p>
|
||||||
|
<p class="subtitle" id="powerdby">phpMyAdmin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Administrate MySQL over the Web
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
لوحة تحكم بقواعد البيانات من المتصفح
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card SaM">
|
||||||
|
<a href="https://github.com/WWBN/AVideo">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/avid.ico" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag SaM">
|
||||||
|
<strong class="tag-text">MED</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title SaM" align="left">AVid</p>
|
||||||
|
<p class="subtitle" id="powerdby">AVideo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Create Your Own Broadcast Network With AVideo.
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
لإنشاء موقع فيديوهات
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card KB">
|
||||||
|
<a href="https://www.bookstackapp.com/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/bookstack.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag KB">
|
||||||
|
<strong class="tag-text">KNB</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title KB" align="left">Bookstack</p>
|
||||||
|
<p class="subtitle" id="powerdby">Bookstack</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Simple and Free Wiki Software
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
موسوعه خفيفة وبسيطة
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card WaB">
|
||||||
|
<a href="https://wordpress.org/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/wordpress.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag WaB">
|
||||||
|
<strong class="tag-text">WEB</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title WaB" align="left">Wordpress</p>
|
||||||
|
<p class="subtitle" id="powerdby">Wordpress</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
create a beautiful website, blog, or app.
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
أنشاء موقع جميل، مدونة، أو تطبيق.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card WaB">
|
||||||
|
<a href="https://github.com/ve3lst">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/VLS135.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag WaB">
|
||||||
|
<strong class="tag-text">WEB</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title WaB" align="left">Veelst's GH</p>
|
||||||
|
<p class="subtitle" id="powerdby">GitHub</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Veelst's GitHub and stuff
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
صفحة فيّلست على الغيتهب
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card KB">
|
||||||
|
<a href="https://www.openstreetmap.org/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/openstreetmap.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag KB">
|
||||||
|
<strong class="tag-text">KNB</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title KB" align="left">OpenStreetMap</p>
|
||||||
|
<p class="subtitle" id="powerdby">OpenStreetMap</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Maps from around the world!
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
خرائط من حول العالم
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card SaM">
|
||||||
|
<a href="https://lycheeorg.github.io/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/lychee.ico" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag SaM">
|
||||||
|
<strong class="tag-text">IMG</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title SaM" align="left">Lychee</p>
|
||||||
|
<p class="subtitle" id="powerdby">lychee</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
grid and album based photo-management-system
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
إستديو للصور
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card SaI">
|
||||||
|
<a href="https://tsearch.net/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/YaCy.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag SaI">
|
||||||
|
<strong class="tag-text">SRC</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title SaI" align="left">YaCy Search</p>
|
||||||
|
<p class="subtitle" id="powerdby">YaCy</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Decentralized search engine server
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
محرك بحث
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card admin">
|
||||||
|
<a href="https://www.webmin.com/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/webmin.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag admin">
|
||||||
|
<strong class="tag-text">RDT</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title admin" align="left">Webmin</p>
|
||||||
|
<p class="subtitle" id="powerdby">Webmin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
web-based system configuration tool for Unix-like systems
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
واجهة للتحكم بأنضمة لينكس من المتصفح
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card SaM">
|
||||||
|
<a href="http://mail.net">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/rcm.svg" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag SaM">
|
||||||
|
<strong class="tag-text">MAL</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title SaM" align="left">Mail</p>
|
||||||
|
<p class="subtitle" id="powerdby">RoundCubeMail</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Browser-based IMAP client
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
مدير بريد إلكتروني من المتصفح
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card WaB">
|
||||||
|
<a href="https://icecoder.net/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/icecoder.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag WaB">
|
||||||
|
<strong class="tag-text">TXT</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title WaB" align="left">ICEcoder</p>
|
||||||
|
<p class="subtitle" id="powerdby">ICEcoder</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Code editor awesomeness ...in your browser
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
محرر أكواد رائع من المتصفح مباشرة
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card SaM">
|
||||||
|
<a href="https://jellyfin.org/">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/jellyfin.png" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag SaM">
|
||||||
|
<strong class="tag-text">MEd</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title SaM" align="left">Jellyfin</p>
|
||||||
|
<p class="subtitle" id="powerdby">Emby</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
Media server for audio, video, books,and photos
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
ميدياسيرفر للصور والفيديو والصوتيات
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="float-right">
|
||||||
|
<a href="#">Back to the top</a>
|
||||||
|
</p>
|
||||||
|
<p>Copyright © stuff i don't understand goes here, i think?</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
7
js/bootstrap.bundle.min.js
vendored
Normal file
2
js/jquery.min.js
vendored
Normal file
109
main.py
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
# #!/usr/bin/python3
|
||||||
|
|
||||||
|
|
||||||
|
import xml.etree.ElementTree as ET
|
||||||
|
|
||||||
|
tree = ET.parse("sites.xml")
|
||||||
|
root = tree.getroot()
|
||||||
|
with open('index.html', 'w') as file:
|
||||||
|
# tag = 0 tag_text = 1 name = 2 link = 3 image_name = 4 powered_by = 5 description_en = 6 description_ar = 7
|
||||||
|
head = f"""
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>THome!</title>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/customize.css">
|
||||||
|
<script>
|
||||||
|
/* my case senstive search script
|
||||||
|
$('.searchbox-input').on('keyup',function () {{
|
||||||
|
$('.card').show();
|
||||||
|
var filter = $(this).val().toUpperCase();
|
||||||
|
$( ".col:not(:contains(" + filter + "))" ).css( 'display','none' );
|
||||||
|
}});
|
||||||
|
*/
|
||||||
|
//not my script tho, and its perfect! credit: https://stackoverflow.com/a/61621522
|
||||||
|
$(document).ready(function(){{
|
||||||
|
$('.searchbox-input').on("keyup", function() {{
|
||||||
|
var value = $(this).val().toLowerCase();
|
||||||
|
$(".col").filter(function() {{
|
||||||
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
||||||
|
}});
|
||||||
|
}});
|
||||||
|
}});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-brand">THome</a>
|
||||||
|
<form class="form-inline">
|
||||||
|
<input class="form-control searchbox-input" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
</form>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="cards ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
"""
|
||||||
|
file.write( head )
|
||||||
|
# find the first 'item' object
|
||||||
|
for child in root:
|
||||||
|
#print(child.tag, child.attrib, child[name].text, child[textt].text)
|
||||||
|
middle = f"""
|
||||||
|
<div class="col">
|
||||||
|
<div class="card {child[0].text}">
|
||||||
|
<a href="{child[3].text}">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="applogo">
|
||||||
|
<img src="media/{child[4].text}" width="77" height="77">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="tag {child[0].text}">
|
||||||
|
<strong class="tag-text">{child[1].text}</strong>
|
||||||
|
</div>
|
||||||
|
<p class="title {child[0].text}" align="left">{child[2].text}</p>
|
||||||
|
<p class="subtitle" id="powerdby">{child[5].text}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="subtitle en_desc">
|
||||||
|
{child[6].text}
|
||||||
|
</p>
|
||||||
|
<p class="subtitle ar_desc" align="right">
|
||||||
|
{child[7].text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>"""
|
||||||
|
file.write(middle)
|
||||||
|
|
||||||
|
end = f"""
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p class="float-right">
|
||||||
|
<a href="#">Back to the top</a>
|
||||||
|
</p>
|
||||||
|
<p>Copyright © stuff i don't understand goes here, i think?</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
"""
|
||||||
|
file.write(end)
|
||||||
|
|
||||||
|
file.close()
|
BIN
media/VLS135.png
Executable file
After Width: | Height: | Size: 12 KiB |
BIN
media/YaCy.png
Executable file
After Width: | Height: | Size: 6.6 KiB |
BIN
media/alltube.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
media/avid.ico
Normal file
After Width: | Height: | Size: 101 KiB |
BIN
media/bookstack.png
Executable file
After Width: | Height: | Size: 11 KiB |
BIN
media/grav.png
Executable file
After Width: | Height: | Size: 13 KiB |
BIN
media/icecoder.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
media/jellyfin.png
Executable file
After Width: | Height: | Size: 34 KiB |
BIN
media/lychee.ico
Normal file
After Width: | Height: | Size: 33 KiB |
BIN
media/mediawiki.png
Executable file
After Width: | Height: | Size: 22 KiB |
BIN
media/mindmaps.png
Executable file
After Width: | Height: | Size: 230 B |
BIN
media/mymind.ico
Executable file
After Width: | Height: | Size: 34 KiB |
BIN
media/openstreetmap.png
Normal file
After Width: | Height: | Size: 583 KiB |
BIN
media/phpmyadmin.png
Executable file
After Width: | Height: | Size: 28 KiB |
11
media/rcm.svg
Executable file
@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="9.14 141.8 573.65 573.65">
|
||||||
|
<style>
|
||||||
|
.st0,.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#404f54}.st3{fill:#37beff}
|
||||||
|
</style>
|
||||||
|
<path class="st3" d="M582.79 549.77L295.96 384.1V207.27l286.83 165.68z"/>
|
||||||
|
<path class="st0" d="M9.14 549.77L295.96 384.1V207.27L9.14 372.95z"/>
|
||||||
|
<path d="M295.96 141.8c109.56 0 198.41 88.85 198.41 198.41s-88.85 198.41-198.41 198.41S97.55 449.77 97.55 340.21 186.4 141.8 295.96 141.8" fill-rule="evenodd" clip-rule="evenodd" fill="#ccc"/>
|
||||||
|
<path d="M295.96 141.8c109.6 0 198.48 88.85 198.48 198.41s-88.88 198.41-198.48 198.41c-62.91-42.34-88.94-127.64-88.94-198.3s26.03-156.1 88.94-198.52" fill-rule="evenodd" clip-rule="evenodd" fill="#e5e5e5"/>
|
||||||
|
<path class="st3" d="M582.79 372.95L295.96 538.62v176.83l286.83-165.68z"/>
|
||||||
|
<path class="st0" d="M9.14 372.95l286.82 165.67v176.83L9.14 549.77z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 888 B |
BIN
media/router.png
Executable file
After Width: | Height: | Size: 147 KiB |
BIN
media/technitium.png
Executable file
After Width: | Height: | Size: 6.5 KiB |
BIN
media/tube.ico
Executable file
After Width: | Height: | Size: 31 KiB |
BIN
media/unmark.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
media/ves-logo.png
Executable file
After Width: | Height: | Size: 11 KiB |
BIN
media/vgallery.ico
Executable file
After Width: | Height: | Size: 4.2 KiB |
BIN
media/webmin.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
media/wordpress.png
Executable file
After Width: | Height: | Size: 107 KiB |
164
sites.xml
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<!-- To add new card use this template:
|
||||||
|
*for <tag> use:
|
||||||
|
- "KB" Stands for: Knowledge Base and Wikis
|
||||||
|
- "SaM" Stands for: Social networks and media
|
||||||
|
- "WaB" Stands for: Websites and Blogs
|
||||||
|
- "SaI" Stands for: Search and Indexing
|
||||||
|
- "admin" Stands for: Admin tools and such
|
||||||
|
|
||||||
|
<item name = "">
|
||||||
|
<tag></tag>
|
||||||
|
<tag_text></tag_text>
|
||||||
|
<name></name>
|
||||||
|
<link></link>
|
||||||
|
<image_name></image_name>
|
||||||
|
<powered_by></powered_by>
|
||||||
|
<description_en></description_en>
|
||||||
|
<description_ar></description_ar>
|
||||||
|
</item>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<site_items>
|
||||||
|
<item name = "The Wiki">
|
||||||
|
<tag>KB</tag>
|
||||||
|
<tag_text>KNB</tag_text>
|
||||||
|
<name>The Wiki</name>
|
||||||
|
<link>https://www.mediawiki.org/wiki/MediaWiki</link>
|
||||||
|
<image_name>mediawiki.png</image_name>
|
||||||
|
<powered_by>MediaWiki</powered_by>
|
||||||
|
<description_en>MediaWiki is a free and open-source wiki</description_en>
|
||||||
|
<description_ar>ميديا ويكي موسوعة مدانية ومفتوحة المصدر</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "router">
|
||||||
|
<tag>admin</tag>
|
||||||
|
<tag_text>ADM</tag_text>
|
||||||
|
<name>Cisco x3500</name>
|
||||||
|
<link>http://192.168.1.1/</link>
|
||||||
|
<image_name>router.png</image_name>
|
||||||
|
<powered_by>Original Firmware</powered_by>
|
||||||
|
<description_en>Just a Router in The Network</description_en>
|
||||||
|
<description_ar>لوحة تحكم الراوتر</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "phpmyadmin">
|
||||||
|
<tag>admin</tag>
|
||||||
|
<tag_text>ADM</tag_text>
|
||||||
|
<name>phpMyAdmin</name>
|
||||||
|
<link>https://www.phpmyadmin.net/</link>
|
||||||
|
<image_name>phpmyadmin.png</image_name>
|
||||||
|
<powered_by>phpMyAdmin</powered_by>
|
||||||
|
<description_en>Administrate MySQL over the Web</description_en>
|
||||||
|
<description_ar>لوحة تحكم بقواعد البيانات من المتصفح</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "avid">
|
||||||
|
<tag>SaM</tag>
|
||||||
|
<tag_text>MED</tag_text>
|
||||||
|
<name>AVid</name>
|
||||||
|
<link>https://github.com/WWBN/AVideo</link>
|
||||||
|
<image_name>avid.ico</image_name>
|
||||||
|
<powered_by>AVideo</powered_by>
|
||||||
|
<description_en>Create Your Own Broadcast Network With AVideo.</description_en>
|
||||||
|
<description_ar>لإنشاء موقع فيديوهات</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "Bookstack">
|
||||||
|
<tag>KB</tag>
|
||||||
|
<tag_text>KNB</tag_text>
|
||||||
|
<name>Bookstack</name>
|
||||||
|
<link>https://www.bookstackapp.com/</link>
|
||||||
|
<image_name>bookstack.png</image_name>
|
||||||
|
<powered_by>Bookstack</powered_by>
|
||||||
|
<description_en>Simple and Free Wiki Software</description_en>
|
||||||
|
<description_ar>موسوعه خفيفة وبسيطة</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "Wordpress">
|
||||||
|
<tag>WaB</tag>
|
||||||
|
<tag_text>WEB</tag_text>
|
||||||
|
<name>Wordpress</name>
|
||||||
|
<link>https://wordpress.org/</link>
|
||||||
|
<image_name>wordpress.png</image_name>
|
||||||
|
<powered_by>Wordpress</powered_by>
|
||||||
|
<description_en>create a beautiful website, blog, or app.</description_en>
|
||||||
|
<description_ar>أنشاء موقع جميل، مدونة، أو تطبيق.</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "veelst">
|
||||||
|
<tag>WaB</tag>
|
||||||
|
<tag_text>WEB</tag_text>
|
||||||
|
<name>Veelst's GH</name>
|
||||||
|
<link>https://github.com/ve3lst</link>
|
||||||
|
<image_name>VLS135.png</image_name>
|
||||||
|
<powered_by>GitHub</powered_by>
|
||||||
|
<description_en>Veelst's GitHub and stuff</description_en>
|
||||||
|
<description_ar>صفحة فيّلست على الغيتهب</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "openstreetmap">
|
||||||
|
<tag>KB</tag>
|
||||||
|
<tag_text>KNB</tag_text>
|
||||||
|
<name>OpenStreetMap</name>
|
||||||
|
<link>https://www.openstreetmap.org/</link>
|
||||||
|
<image_name>openstreetmap.png</image_name>
|
||||||
|
<powered_by>OpenStreetMap</powered_by>
|
||||||
|
<description_en>Maps from around the world!</description_en>
|
||||||
|
<description_ar>خرائط من حول العالم</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "lychee">
|
||||||
|
<tag>SaM</tag>
|
||||||
|
<tag_text>IMG</tag_text>
|
||||||
|
<name>Lychee</name>
|
||||||
|
<link>https://lycheeorg.github.io/</link>
|
||||||
|
<image_name>lychee.ico</image_name>
|
||||||
|
<powered_by>lychee</powered_by>
|
||||||
|
<description_en>grid and album based photo-management-system</description_en>
|
||||||
|
<description_ar>إستديو للصور</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "YaCy">
|
||||||
|
<tag>SaI</tag>
|
||||||
|
<tag_text>SRC</tag_text>
|
||||||
|
<name>YaCy Search</name>
|
||||||
|
<link>https://tsearch.net/</link>
|
||||||
|
<image_name>YaCy.png</image_name>
|
||||||
|
<powered_by>YaCy</powered_by>
|
||||||
|
<description_en>Decentralized search engine server</description_en>
|
||||||
|
<description_ar>محرك بحث</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "webmin">
|
||||||
|
<tag>admin</tag>
|
||||||
|
<tag_text>RDT</tag_text>
|
||||||
|
<name>Webmin</name>
|
||||||
|
<link>https://www.webmin.com/</link>
|
||||||
|
<image_name>webmin.png</image_name>
|
||||||
|
<powered_by>Webmin</powered_by>
|
||||||
|
<description_en>web-based system configuration tool for Unix-like systems</description_en>
|
||||||
|
<description_ar>واجهة للتحكم بأنضمة لينكس من المتصفح</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "mail">
|
||||||
|
<tag>SaM</tag>
|
||||||
|
<tag_text>MAL</tag_text>
|
||||||
|
<name>Mail</name>
|
||||||
|
<link>http://mail.net</link>
|
||||||
|
<image_name>rcm.svg</image_name>
|
||||||
|
<powered_by>RoundCubeMail</powered_by>
|
||||||
|
<description_en>Browser-based IMAP client</description_en>
|
||||||
|
<description_ar>مدير بريد إلكتروني من المتصفح</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "icecoder">
|
||||||
|
<tag>WaB</tag>
|
||||||
|
<tag_text>TXT</tag_text>
|
||||||
|
<name>ICEcoder</name>
|
||||||
|
<link>https://icecoder.net/</link>
|
||||||
|
<image_name>icecoder.png</image_name>
|
||||||
|
<powered_by>ICEcoder</powered_by>
|
||||||
|
<description_en>Code editor awesomeness ...in your browser</description_en>
|
||||||
|
<description_ar>محرر أكواد رائع من المتصفح مباشرة</description_ar>
|
||||||
|
</item>
|
||||||
|
<item name = "Jellyfin">
|
||||||
|
<tag>SaM</tag>
|
||||||
|
<tag_text>MEd</tag_text>
|
||||||
|
<name>Jellyfin</name>
|
||||||
|
<link>https://jellyfin.org/</link>
|
||||||
|
<image_name>jellyfin.png</image_name>
|
||||||
|
<powered_by>Emby</powered_by>
|
||||||
|
<description_en>Media server for audio, video, books,and photos</description_en>
|
||||||
|
<description_ar>ميدياسيرفر للصور والفيديو والصوتيات</description_ar>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
|
||||||
|
</site_items>
|