website/src/pages/webapps/scrollbar.scm

;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website 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 General Public License for more details.
;;   
;; You should have received a copy of the GNU General Public License
;; along with this program.  If not, see <https://www.gnu.org/licenses/>.

(import sxml-serializer)

(load "./src/general.scm")

(define title "vilor/webapps/scrollbar")
(define page-name "Scrollbar styling")
(define page-desc
  '((p "Demonstration of possible customization of the scrollbar.")
    (p (@ (class "note"))
       (b "Note")
       ": The result will look different in different browsers, try checking the result in browsers based on different engines.")))
(define page-styles '("scrollbar.css"))
(define page-scripts '("scrollbar.js"))

(define content
  `(div (@ (class "scrollbar-app"))
      (noscript "Sorry, but this crap doesn't work without JavaScript.")
      (form
       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Bar:")
        (div (@ (class "scrollbar-app__input"))
        (label (@ (for "sbw")) "Width: ")
        (input (@
                (type "text")
                (id "sbw")
                (name "sbw")
                (value "10px")
                (pattern "\\d+px")
                (title "Size in pixels with format: \"<NUMBER>px\"")))))

       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Thumbnail:")
        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "thumbclr")) "Color: ")
         (input (@
                 (type "color")
                 (id "thumbclr")
                 (name "thumbclr")
                 (value "#9b3e46")))
         (input (@
                 (type "text")
                 (id "thumbclrtxt")
                 (name "thumbclrtxt")
                 (value "#9b3e46")
                 (pattern "#[0-9A-Fa-f]{6}")
                 (title "Hexadecimal RGB color with \"#\" at the beginning"))))

        (fieldset
         (h4 "Border:")
         (div (@ (class "scrollbar-app__input"))
         (label (@ (for "thumbbstl")) "Style: ")
         (select (@ (id "thumbbstl") (name "thumbbstl"))
                 (option (@ (value "none")) "none")
                 (option (@ (value "hidden")) "hidden")
                 (option (@ (value "solid") (selected "selected")) "solid")
                 (option (@ (value "dotted")) "dotted")
                 (option (@ (value "dashed")) "dashed")
                 (option (@ (value "double")) "double")
                 (option (@ (value "groove")) "groove")
                 (option (@ (value "ridge")) "ridge")
                 (option (@ (value "inset")) "inset")
                 (option (@ (value "outset")) "outset")))

         (div (@ (class "scrollbar-app__input"))
         (label (@ (for "thumbbrad")) "Radius: ")
         (input (@
                 (type "text")
                 (id "thumbbrad")
                 (name "thumbbrad")
                 (value 8px)
                 (pattern "\\d+(px|%)")
                 (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))

         (div (@ (class "scrollbar-app__input"))
         (label (@ (for "thumbbw")) "Width: ")
         (input (@
                 (type "text")
                 (id "thumbbw")
                 (name "thumbbw")
                 (value 1px)
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\""))))

         (div (@ (class "scrollbar-app__input"))
          (label (@ (for "thumbbclr")) "Color: ")
          (input (@
                  (type "color")
                  (id "thumbbclr")
                  (name "thumbbclr")
                  (value "#ffffff")))
          (input (@
                  (type "text")
                  (id "thumbbclrtxt")
                  (name "thumbbclrtxt")
                  (value "#ffffff")
                  (pattern "#[0-9A-Fa-f]{6}")
                  (title "Hexadecimal RGB color with \"\#\" at the beginning"))))))

       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Track:")
        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackclr")) "Color: ")
         (input (@
                 (type "color")
                 (id "trackclr")
                 (name "trackclr")
                 (value "#3b4252")))
         (input (@
                 (type "text")
                 (id "trackclrtxt")
                 (name "trackclrtxt")
                 (value "#3b4252")
                 (pattern "#[0-9A-Fa-f]{6}")
                 (title "Hexadecimal RGB color with \"#\" at the beginning"))))

        (div (@ (class "scrollbar-app__input"))
        (label (@ (for "trackbrad")) "Border radius: ")
        (input (@
                (type "text")
                (id "trackbrad")
                (name "trackbrad")
                (value 8px)
                (pattern "\\d+(px|%)")
                (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))

        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackmt")) "Margin top: ")
         (input (@
                 (type "text")
                 (id "trackmt")
                 (name "trackmt")
                 (value "0px")
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\""))))

        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackmb")) "Margin bottom: ")
         (input (@
                 (type "text")
                 (id "trackmb")
                 (name "trackmb")
                 (value "0px")
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\"")))))

       (div (@ (class "scrollbar-app__buttons"))
       (button (@ (type "button") (id "sbUpdBtn")) "update")
       (button (@ (type "button") (id "sbPrintBtn")) "print scss")
       (button (@ (type "button") (id "sbClearBtn")) "clear output")))

      (pre (@ (class "scrollbar-app__panel") (style "display: none") (id "sbScssOut")))
      (textarea (@ (id "sbTextArea") (readonly "readonly")) "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))

(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
          (default-tpl title content page-name page-desc page-styles page-scripts)))