Update theme

2024-09-18 10:02:32 +02:00 · 2024-09-18 10:02:32 +02:00 · 99607a27b9
commit 99607a27b9
parent d6546d6ecf
9 changed files with 274 additions and 123 deletions
--- 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

--- 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 '<i class="fa fa-check w3-text-green" aria-hidden="true"></i>';
+            echo '<i class="fa fa-check gen" aria-hidden="true"></i>';
        } elseif ($status === 2) {
-            echo '<i class="fa fa-check w3-text-red" aria-hidden="true"></i>';
+            echo '<i class="fa fa-check notGen" aria-hidden="true"></i>';
        } elseif ($status === 3) {
-            echo '<i class="fa fa-clock-o w3-text-orange" aria-hidden="true"></i>';
+            echo '<i class="fa fa-clock-o pending" aria-hidden="true"></i>';
        } else {
-            echo '<i class="fa fa-ban w3-text-red" aria-hidden="true"></i>';
+            echo '<i class="fa fa-ban notGen" aria-hidden="true"></i>';
        }
    }
 }
--- 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%;
  }
--- a/tpl/footer.php
+++ b/tpl/footer.php
@ -1,6 +1,24 @@
 </div>
+<script>
+    function switchTheme(e) {
+        let actualTheme = document.documentElement.getAttribute('data-theme');
+        if (actualTheme === null || actualTheme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.documentElement.setAttribute('data-theme', 'light');
+            localStorage.setItem('theme', 'light');
+        }
+        return false;
+    }
+
+    const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+    if (currentTheme) {
+        document.documentElement.setAttribute('data-theme', currentTheme);
+    }
+</script>
 <footer id="myFooter" class="w3-bottom">
-    <div class="w3-container w3-theme-l1">
-        <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
+    <div class="w3-container">
+        <p>Powered by <a href="https://forge.leslibres.org/Knah-Tsaeb/Soshot" target="_blank"> Soshot </a>| Theme by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
    </div>
 </footer>
--- a/tpl/home.php
+++ b/tpl/home.php
@ -1,7 +1,9 @@
 <div class="w3-row-padding centerBlock homeForm">
  <h1 class="w3-center">SoShot</h1>
-  <p>Per<b>so</b>nal web<b>shot</b>er</p>
-  <div>
+  <p>
+    <h3>Per<b>so</b>nal web<b>shot</b>er</h3>
+  </p>
+  <div class="w3-center">
    <img src="assets/img/wikipedia_logiciel_libre.png" alt="Thumbshot of french wikipedia home page" width="720px">
  </div>
  <p class="w3-center">
--- a/tpl/infos.php
+++ b/tpl/infos.php
@ -6,7 +6,7 @@ use App\Utils\Domains;
 ?>
 <div class="w3-row soshot-main w3-margin-bottom">
  <div class="w3-container">
-    <h1 class="w3-text-teal">Infos</h1>
+    <h1 class="w3-text">Infos</h1>

    <ul>
      <li>Total : <?= $total; ?></li>
@ -15,11 +15,11 @@ use App\Utils\Domains;
    </ul>

    <form>
-      <input type="text" name="search" value="<?= $search; ?>">
-      <input type="submit" value="Rechercher">
+      <input class="w3-input" type="text" name="search" value="<?= $search; ?>" placeholder="Search">
+      <input class="w3-button" type="submit" value="Rechercher">
    </form>

-    <table class="w3-table-all w3-hoverable">
+    <table class="w3-table-all w3-hoverable" data-theme="light">
      <thead>
        <tr>
          <td>Domain</td>
@ -42,7 +42,7 @@ use App\Utils\Domains;
                <a href="#" class="linkDetail" data-hmac="<?= $value->id; ?>" data-href="<?= $value->url; ?>"><?= Domains::getDomain($value->url); ?></a>
              </span>
              <span class="w3-right" style="width:40px">
-                <a href="?page=infos&deleteGen=<?= $value->id; ?>"><i class="fa fa-trash-o w3-text-red" aria-hidden="true"></i></a>
+                <a href="?page=infos&deleteGen=<?= $value->id; ?>"><i class="fa fa-trash-o delete" aria-hidden="true"></i></a>
              </span>
            </td>
            <td><?= $value->created; ?></td>
@ -62,10 +62,10 @@ use App\Utils\Domains;
    <div class="w3-center w3-margin-top">
      <div class="w3-bar">
        <?php if ($start > 0) : ?>
-          <a href="?page=infos&start=<?= $previous; ?>" class="w3-teal w3-button">&laquo; Previous</a>
+          <a href="?page=infos&start=<?= $previous; ?>" class="w3 w3-button">&laquo; Previous</a>
        <?php endif; ?>
        <?php if ($next != $start) :; ?>
-          <a href="?page=infos&start=<?= $next; ?>" class="w3-teal w3-button">Next &raquo; </a>
+          <a href="?page=infos&start=<?= $next; ?>" class="w3 w3-button">Next &raquo; </a>
        <?php endif; ?>
      </div>
    </div>
--- a/tpl/login.php
+++ b/tpl/login.php
@ -5,7 +5,7 @@
    <div class="w3-section">
      <input class="w3-input w3-border" type="password" placeholder="Password" name="loginPassword" required>
      <input type="hidden" name="token" value="<?= $token; ?>" />
-      <button class="w3-button w3-block w3-teal w3-section w3-padding" style="width:30%; margin:0 auto" type="submit">Login</button>
+      <button class="w3-button w3-block w3-section w3-padding" style="width:30%; margin:0 auto" type="submit">Login</button>
    </div>
  </form>
 </div>
--- a/tpl/nav.php
+++ b/tpl/nav.php
@ -5,7 +5,7 @@ use App\Utils\Page;
 <div class="w3-top w3-round">
    <div class="w3-bar w3-theme w3-top w3-left-align w3-large">
        <a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
-        <a href="#" class="w3-bar-item w3-button w3-theme-l1 title"><i class="fa fa-camera" aria-hidden="true"></i> SoShot</a>
+        <h1><a href="#" class="title"><i class="fa fa-camera" aria-hidden="true"></i> SoShot</a></h1>
        <?php if ($this->runningJob) : ?><i class="fa fa-refresh fa-spin w3-text-red"></i><?php endif; ?>
    </div>
 </div>
@ -15,9 +15,13 @@ use App\Utils\Page;
    <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
        <i class="fa fa-remove"></i>
    </a>
-    <a class="w3-bar-item w3-button <?= Page::active($params->page, 'infos', 'w3-gray') ?>" href="?page=infos">&nbsp;<i class="fa fa-info"></i> Infos</a>
-    <a class="w3-bar-item w3-button <?= Page::active($params->page, 'settings', 'w3-gray') ?>" href="?page=settings"><i class="fa fa-cog"></i> Settings</a>
-    <a class="w3-bar-item w3-button w3-margin-top <?= Page::active($params->page, 'logout', 'w3-gray') ?>" href="/logout"><i class="fa fa-sign-out"></i> Logout</a>
+    <a class="w3-bar-item <?= Page::active($params->page, 'infos', 'w3-bar-item-selected') ?>" href="?page=infos">&nbsp;<i class="fa fa-info"></i> Infos</a>
+    <a class="w3-bar-item  <?= Page::active($params->page, 'settings', 'w3-bar-item-selected') ?>" href="?page=settings"><i class="fa fa-cog"></i> Settings</a>
+
+    <a class="w3-bar-item w3-margin-top" onclick="switchTheme();" href="#" ><i class="fa fa-moon" aria-hidden="true"></i>  Dark/Light</a>
+
+    <a class="w3-bar-item  w3-margin-top <?= Page::active($params->page, 'logout', 'w3-bar-item-selected') ?>" href="/logout"><i class="fa fa-sign-out"></i> Logout</a>
+
 </nav>

 <!-- Overlay effect when opening sidebar on small screens -->
--- a/tpl/settings.php
+++ b/tpl/settings.php
@ -5,8 +5,8 @@ use App\Utils\Page;

 <div class="w3-row soshot-main w3-margin-bottom">
  <div class="w3-container">
-    <h1 class="w3-text-teal"><?= $this->title; ?></h1>
-    <form class="w3-container" method="post">
+    <h1 class="w3-text"><?= $this->title; ?></h1>
+    <form class="w3-container" method="post" data-theme="dark">

      <p>
        <label>Accept only request from 127.0.0.1</label>
@ -75,7 +75,7 @@ use App\Utils\Page;
      <p>
        <input type="hidden" name="page" value="settings">
        <input type="hidden" name="token" value="<?= $token; ?>">
-        <button type="submit" class="w3-btn w3-padding w3-teal" style="width:120px">Save</button>
+        <button type="submit" class="w3-btn w3-padding w3" style="width:120px">Save</button>
      </p>
    </form>
  </div>