From 844eee663d6089ced36e66e7e5dbc31df34a6ae6 Mon Sep 17 00:00:00 2001 From: Knah-Tsaeb Date: Wed, 18 Sep 2024 10:02:32 +0200 Subject: [PATCH] Update theme --- README.md | 161 +++++++++++++++++----------------- app/Utils/ConvertStatus.php | 8 +- public/assets/css/style.css | 166 ++++++++++++++++++++++++++++++++---- tpl/footer.php | 22 ++++- tpl/home.php | 6 +- tpl/infos.php | 14 +-- tpl/login.php | 2 +- tpl/nav.php | 12 ++- tpl/settings.php | 6 +- 9 files changed, 274 insertions(+), 123 deletions(-) diff --git a/README.md b/README.md index 68cb2f0..1e04987 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Use at your own risk -Soshot make webshot of internet page with headless machine. +Soshot make webshot of internet page with headless machine (Google Chrome). ## Ideas @@ -16,15 +16,40 @@ SoShot always make complete webshot (1920x page lenght) + first demande size. Size use 16/9 ratio : - - fav = define by config (default 48px) - og = define by the website himself (no resize or crop) - thumb = 160x90 + - nhd = 640x360 - hd = 1280x720 - full = 1920x1080 - complete = 1920xpage height -## Requirements +## Installation + +### Docker (recommended) + +For the moment I don't provide any image in any hub. + +#### Build image + +```shell +wget https://forge.leslibres.org/Knah-Tsaeb/Soshot/raw/branch/main/Dockerfile +docker buildx build --no-cache -t soshot:0.3.0 . +``` + +#### Start container + +You can use native docker volume. + +docker run -v soshot_datas:/var/www/datas -v soshot_cache:/var/www/cache -e TZ=UTC -p 8187:80 --name soshot soshot:0.3.0 + +Or use absolute path + +docker run -v /opt/soshot/datas:/var/www/datas -v /opt/soshot/cache:/var/www/public/cache -e TZ=UTC -p 8187:80 --name soshot soshot:0.3.0 + +### Classic way + +#### Requirements - PHP 8.* - Sqlite3 @@ -35,39 +60,35 @@ Size use 16/9 ratio : - CRON - Chrome / Chromium -## Installation - Make directory on your web server and go in -` +```shell mkdir /var/www/soshot && cd /var/www/soshot -` +``` Clone git repo -` +```shell git clone https://forge.leslibres.org/Knah-Tsaeb/Soshot.git . -` +``` Install dependencies -` +```shell composer install --no-dev -` +``` Add cron task - -` +```shell sudo crontab -u www-data -e -` +``` - -` +```shell php /var/www/soshot/bin/thumbShoter.php -` +``` -Configure your web server to serve in "public" directory +Configure your web server to serve in "public" directory. Go to web page https://shoshot.your-domain.tld @@ -78,73 +99,45 @@ You can use a web interface (if option "use web gui" is set to true), https://sh Or you can modify config file /datas/config.json. -#### Accept only request from 127.0.0.1 +```json +{ + "onlyLocalServer": true, + "webPage": false, + "log": true, + "alwaysMakePdf": true, + "icoSize": 48, + "expireCache": 12, + "maxGenPerBatch": 50, + "permitType": [ + "fav", + "og", + "pdf", + "thumb", + "nhd", + "hd", + "full", + "complete" + ], + "password": "$2y$10$HE5odSvieeVv0cbmK4jau.eg6nqrtpoN0KNPHHaVnPC3vDACAYVAu", + "key": "acb295c94b12d6364e433d73", + "chromePath": "chromium", + "fileFormat": "jpeg" +} +``` -Default : true - -ShoShot only work for local machine, return 404 if use with remote machine. - -#### Use web gui - -Default : false - -Soshot only work with endpoint /api. Return 404 if endpoint is not /api - -#### Use log - -Default : true - -Not implemented yet. - -#### Always make PDF - -Default : false - -If true, SoShot make a complete webshot and PDF of page. - -#### Favicon size - -Default : 48 - -Define size of favicon. - -#### Permit type of webshot - -Default : none - -Select authorized size or type of webshot. - -#### Cache expiration (for web GUI) in hour - -Default : 12 - -Not implemented yet. - -#### Maximum work per batch - -Default : 5 - -Foreach cron task as launch, SoShot make 5 webshot. - -#### Api key - -Default : random string, lenght 12 - -!!! DANGER !!! - -If you change key, all previous generation will be invalid. Soshot re make all previous generation. - -#### Password - -Default : null - -Password for admin interface. No min or max character. - -#### Chrome path - -Default : empty - -If path of Chrome/Chromium is not in PATH, you can define here. +| Option | Type | Default | Description | +| --- | --- | --- | --- | +| onlyLocalServer | bool | true | ShoShot only work for local machine, return 404 if use with remote machine | +| webPage | bool | false | Soshot only work with endpoint /api. Return 404 if not | +| log | bool | true | Not implemented yet | +| alwaysMakePdf | bool | false | If true, SoShot make a complete webshot and PDF of page | +| icoSize | int | 48 | Define size of favicon | +| expireCache | int | 12 | Not implemented yet | +| permitType | array | null | Select authorized size or type of webshot | +| maxGenPerBatch | int | 5 | Foreach cron task as launch, SoShot make 5 webshot | +| key | string | 12 | !!! DANGER !!! If you change key, all previous generation will be invalid. Soshot re make all previous generationt | +| password | string | null | Password for admin interface. No min or max character | +| chromePath | string | null | If path of Chrome/Chromium is not in PATH, you can define here | ## Usage diff --git a/app/Utils/ConvertStatus.php b/app/Utils/ConvertStatus.php index 66011b0..0324822 100644 --- a/app/Utils/ConvertStatus.php +++ b/app/Utils/ConvertStatus.php @@ -5,13 +5,13 @@ namespace App\Utils; class ConvertStatus { static function convertToIcon($status) { if ($status === 1) { - echo ''; + echo ''; } elseif ($status === 2) { - echo ''; + echo ''; } elseif ($status === 3) { - echo ''; + echo ''; } else { - echo ''; + echo ''; } } } diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 66bcad1..a86725d 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,8 +1,89 @@ +:root { + color-scheme: dark light; + + --primary: #cc2027; + --primary-darken: #8E161B; + --primary-lighten: #D64C52; + --primary-text-contrast: #FFF; + + --secondary: #20ccc5; + --secondary-darken: #168E89; + --secondary-lighten: #4CD6D0; + --secondary-text-contrast: #FFF; + + --error: #c43933; + --error-darken: #892723; + --error-lighten: #CF605B; + --error-text-contrast: #FFF; + + --info: #206ccc; + --info-darken: #164B8E; + --info-lighten: #4C89D6; + --info-text-contrast: #FFF; + + --success: #7dcc20; + --success-darken: #578E16; + --success-lighten: #97D64C; + --success-text-contrast: #000; + + --warning: #cc5e20; + --warning-darken: #8E4116; + --warning-lighten: #D67E4C; + --warning-text-contrast: #FFF; + + --background-color: light-dark(#fffbfb, #171414); + --background-color-darken: light-dark(#B2AFAF, #100E0E); + --background-color-lighten: light-dark(#FFFBFB, #454343); + + --header-background-color: light-dark(#171414, #fffbfb); + --header-background-color-darken: light-dark(#100E0E, #B2AFAF); + --header-background-color-lighten: light-dark(#454343, #FFFBFB); + + --header-text-color: light-dark(#fffbfb, #171414); + --header-text-color-secondary: #ffffffb3; + --header-text-color-disable: light-dark(#ffffff80, #454343); + + --text-color: light-dark(#171414, #fffbfb); + --text-color-secondary: #ffffffb3; + --text-color-disable: light-dark(#454343, #ffffff80); + + --text-color-inverse: light-dark(#fffbfb, #171414); + --text-color-secondary-inverse: #ffffffb3; + --text-color-disable-inverse: light-dark(#ffffff80, #454343); + + --h1-color: var(--primary); + --h2-color: #c33d35; + --h3-color: #b94f44; + --h4-color: #ae5e52; + --h5-color: #a16a61; + --h6-color: #927671; +} + +[data-theme="light"] { + --background-color: #fffbfb; + --text-color: #171414; + --text-color-inverse: #fffbfb; + .title:hover { + color: var(--text-color); + } +} + +[data-theme="dark"] { + table { + color: var(--text-color); + } + .title:hover { + color: var(--text-color-inverse); + } +} + html { font-family: arial, sans-serif; font-weight: bold; line-height: 2em; - background-color: #ffffffcb; + background-color: var(--background-color); + overflow: auto; + color: var(--text-color); } html, @@ -16,25 +97,32 @@ h6 { font-family: "Roboto", sans-serif; } +h1 { + color: var(--primary); +} + +.fa { + /*color: var(--primary);*/ +} + .w3-sidebar { z-index: 3; width: 250px; - top: 43px; height: inherit; } a { text-decoration: none; - color: #8AC007; + color: var(--primary); } -a:hover, -.title:hover { +a:hover { text-decoration: none; + color: var(--primary-darken) } a:visited { - color: #8AC007; + color: var(--primary); } .centerBlock { @@ -46,16 +134,17 @@ a:visited { } .w3-bar { - background-color: #333333 !important; + background-color: var(--background-color) !important; } #mySidebar { - top: inherit; - background-color: initial !important; + top: 84px; + background-color: var(--header-background-color); } -#mySidebar a:hover { +#mySidebar>:hover { text-decoration: none; + color: var(--primary-darken); } .w3-bar-block .w3-bar-item { @@ -63,7 +152,12 @@ a:visited { } .w3-bar { - background-color: #fff !important; + background-color: var(--header-background-color) !important; +} + +.w3-bar-item-selected { + background-color: var(--secondary); + color: var(--secondary-text-contrast); } #myFooter { @@ -82,10 +176,6 @@ a:visited { padding-bottom: 16px; } -.fa { - color: #009688; -} - form label { width: 48% !important; display: inline-block; @@ -99,14 +189,58 @@ form label { width: 48%; } +.w3-input { + background-color: var(--primary-lighten); + color: var(--text-color); +} + +button, +.w3-button { + background-color: var(--primary) !important; + color: var(--text-color) !important; +} + +button:hover, +.w3-button:hover { + background-color: var(--primary-darken) !important; + color: var(--text-color-inverse) !important; +} + .zoom { cursor: zoom-in; } +.delete, +.notGen { + color: var(--error); +} + +.gen { + color: var(--success); +} + +.pending { + color: var(--warning); +} + +#myFooter { + background-color: var(--header-background-color); + color: var(--header-text-color); +} + +#myFooter a:hover { + color: var(--primary-darken); +} + +.title { + color: var(--text-color-inverse); + padding: .5em; +} + @media (max-width:768px) { #mySidebar { - background-color: #ffffffcb !important; + background-color: var(--header-background-color) !important; width: 100%; height: 50%; } diff --git a/tpl/footer.php b/tpl/footer.php index 6b35763..6fb48d9 100644 --- a/tpl/footer.php +++ b/tpl/footer.php @@ -1,6 +1,24 @@ + \ No newline at end of file diff --git a/tpl/home.php b/tpl/home.php index abbf147..bffde36 100644 --- a/tpl/home.php +++ b/tpl/home.php @@ -1,7 +1,9 @@

SoShot

-

Personal webshoter

-
+

+

Personal webshoter

+

+
Thumbshot of french wikipedia home page

diff --git a/tpl/infos.php b/tpl/infos.php index baa1dce..d914a38 100644 --- a/tpl/infos.php +++ b/tpl/infos.php @@ -6,7 +6,7 @@ use App\Utils\Domains; ?>

-

Infos

+

Infos

  • Total :
    • @@ -15,11 +15,11 @@ use App\Utils\Domains;
- - + +
- +
@@ -42,7 +42,7 @@ use App\Utils\Domains; url); ?> - + @@ -62,10 +62,10 @@ use App\Utils\Domains;
0) : ?> - « Previous + « Previous - Next » + Next »
diff --git a/tpl/login.php b/tpl/login.php index 8abcbc4..d9500da 100644 --- a/tpl/login.php +++ b/tpl/login.php @@ -5,7 +5,7 @@
- +
\ No newline at end of file diff --git a/tpl/nav.php b/tpl/nav.php index 32a22b9..ac25231 100644 --- a/tpl/nav.php +++ b/tpl/nav.php @@ -5,7 +5,7 @@ use App\Utils\Page;
- SoShot +

SoShot

runningJob) : ?>
@@ -15,9 +15,13 @@ use App\Utils\Page; -   Infos - Settings - Logout +   Infos + Settings + + Dark/Light + + Logout + diff --git a/tpl/settings.php b/tpl/settings.php index 162d2c6..2bfdcac 100644 --- a/tpl/settings.php +++ b/tpl/settings.php @@ -5,8 +5,8 @@ use App\Utils\Page;
-

title; ?>

-
+

title; ?>

+

@@ -75,7 +75,7 @@ use App\Utils\Page;

- +

Domain created; ?>