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 @@
+