├── .gitignore
├── .unibeautifyrc.yml
├── screenshots
    ├── index.png
    └── login.png
├── static
    ├── img
    │   └── favicon.ico
    └── css
    │   └── style.dev.css
├── .vscode
    └── settings.json
├── templates
    ├── errors
    │   └── 404.html
    ├── index.html
    ├── notifications.html
    ├── challenges.html
    ├── confirm.html
    ├── scoreboard.html
    ├── login.html
    ├── reset_password.html
    ├── base.html
    ├── register.html
    ├── users
    │   ├── users.html
    │   ├── private.html
    │   └── public.html
    ├── components
    │   └── navbar.html
    └── settings.html
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/.unibeautifyrc.yml:
--------------------------------------------------------------------------------
1 | HTML:
2 |   beautifiers:
3 |     # - JS-Beautify
4 |     - Pretty Diff
5 | 


--------------------------------------------------------------------------------
/screenshots/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chainflag/ctfd-neon-theme/HEAD/screenshots/index.png


--------------------------------------------------------------------------------
/screenshots/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chainflag/ctfd-neon-theme/HEAD/screenshots/login.png


--------------------------------------------------------------------------------
/static/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chainflag/ctfd-neon-theme/HEAD/static/img/favicon.ico


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "unibeautify.defaultConfig": ".unibeautifyrc.yml",
 3 |     "unibeautify.enabled": true,
 4 |     "[jinja-html]": {
 5 |         "editor.defaultFormatter": "Glavin001.unibeautify-vscode",
 6 |         "editor.formatOnSave": true
 7 |     },
 8 |     "files.associations": {
 9 |         "*.html": "jinja-html"
10 |     }
11 | }


--------------------------------------------------------------------------------
/templates/errors/404.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block content %}
 4 | 
 5 |   <div class="container py-5 mb-5">
 6 |     <h1 class="display-3" style="text-align: center">0100 0000 0100<span class="vim-caret">͏͏&nbsp;</span></h1>
 7 |     <h2 class="mb-4" style="text-align: center">page not found</h2>
 8 |     <div class="row py-4">
 9 |       <h1 style="text-align: center; width: 100%">
10 |         Hackers are Wanderers and Explorers
11 |       </h1>
12 |       <h2 style="text-align: center; width: 100%">
13 |         But sometimes they get lost too...
14 |       </h2>
15 |       <a href="javascript:history.back()" class="mt-5 btn btn-shadow btn-success btn-block">GO BACK</a>
16 |     </div>
17 |   </div>
18 | 
19 | {% endblock %}
20 | 
21 | {% block scripts %}{% endblock %}
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ctfd-neon-theme
 2 | Compatible with CTFd Version >=3.4.0
 3 | 
 4 | Few Screenshots:
 5 | 
 6 |  ![Index Page](screenshots/index.png "Index Page")
 7 |  
 8 |  ![Login Page](screenshots/login.png "Login Page")
 9 | 
10 | ## Install
11 | ```
12 | git clone https://github.com/chainflag/ctfd-neon-theme.git CTFd-path/CTFd/themes/neon
13 | ```
14 | 
15 | ## Usage
16 | 1. Access the CTFd Admin Panel
17 | 2. Go to Config > Themes and select neon theme.
18 | 3. Go to Pages > All Pages > index and use [index.html](https://github.com/chainflag/ctfd-neon-theme/blob/main/templates/index.html) as index page content
19 | 
20 | ## Credits
21 | * [CTFd](https://github.com/CTFd/CTFd)
22 | * [Neon Glow](https://hackerthemes.com/bootstrap-themes/demo/neon-glow) 
23 | * [PICT-CTF-WEBSITE-FRONTEND](https://github.com/ashawe/PICT-CTF-WEBSITE-FRONTEND)
24 | 
25 | ## License
26 | This project is licensed under the GNU General Public License v2.0
27 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <div class="jumbotron bg-transparent mb-0 radius-0">
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-xl-6">
 5 |         <h1 class="display-3">CAPTURE THE FLAG<span class="vim-caret">͏͏&nbsp;</span></h1>
 6 |         <div class="lead mb-3 text-mono text-success">Welcome hackers! Prove the world that a computer genius with a laptop is not a nerd sitting in the corner of a untidy room but a fun loving work of brilliance! Join our CTF and expand your knowledge about computer forensics.
 7 |         </div>
 8 |         <div class="text-mono">
 9 |           <a href="challenges" class="btn btn-primary btn-shadow px-3 my-2 ml-0 text-left">
10 |             Let's Hack!
11 |           </a>
12 |         </div>
13 |         <div class="text-darkgrey text-mono my-2">We won't steal you passwords :)</div>
14 |         <p class="mt-5 text-grey text-spacey">
15 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, dignissimos provident.
16 |           <br>
17 |         </p>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/templates/notifications.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block content %}
 4 |   <div class="container py-5 mb-5">
 5 |     <h1 class="mb-5 text-center">Notifications<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
 6 |     </h1>
 7 |   </div>
 8 |   <div class="container">
 9 |     {% if not notifications %}
10 |       <h2 class="text-center">There are no notifications yet</h2>
11 |     {% endif %}
12 |     {% for notification in notifications %}
13 |       <div class="card mb-4">
14 |         <div class="card-body">
15 |           <h3 class="card-title">{{ notification.title }}</h3>
16 |           <blockquote class="card-blockquote mb-0">
17 |             <p>{{ notification.html }}</p>
18 |             <small class="text-muted">
19 |               <span data-time="{{ notification.date | isoformat }}"></span></small>
20 |           </blockquote>
21 |         </div>
22 |       </div>
23 |     {% endfor %}
24 |   </div>
25 | {% endblock %}
26 | 
27 | {% block entrypoint %}
28 |   <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/pages/notifications.js') }}"></script>
29 | {% endblock %}
30 | 


--------------------------------------------------------------------------------
/templates/challenges.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block stylesheets %}
 4 |   <link rel="stylesheet" href="{{ url_for('views.themes', theme='core', path='css/challenge-board.css') }}">
 5 | {% endblock %}
 6 | 
 7 | {% block content %}
 8 |   <div class="container py-5">
 9 |     <h1 class="text-center">Challenges<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
10 |     </h1>
11 |   </div>
12 | 
13 |   <div class="modal fade" id="challenge-window" tabindex="-1" role="dialog"></div>
14 | 
15 |   <div class="container">
16 |     <div class="row">
17 |       <div class="col-md-12">
18 |         {% include "components/errors.html" %}
19 |       </div>
20 |     </div>
21 | 
22 |     <div id='challenges-board'>
23 |       <div class="min-vh-50 d-flex align-items-center">
24 |         <div class="text-center w-100">
25 |           <i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | {% endblock %}
31 | 
32 | {% block scripts %}{% endblock %}
33 | 
34 | {% block entrypoint %}
35 |   <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/pages/challenges.js') }}"></script>
36 | {% endblock %}
37 | 


--------------------------------------------------------------------------------
/templates/confirm.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block stylesheets %}{% endblock %}
 4 | 
 5 | {% block content %}
 6 |   <div class="container py-5 mb-5">
 7 |     <h1 class="text-center">Confirm<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
 8 |     </h1>
 9 |   </div>
10 |   <div class="container">
11 |     <div class="row">
12 |       <div class="col-md-6 offset-md-3">
13 |         {% include "components/errors.html" %}
14 | 
15 |         <h5 class="text-center">
16 |           We've sent a confirmation email to your email address.
17 |         </h5>
18 | 
19 |         <br>
20 | 
21 |         <h5 class="text-center">
22 |           Please click the link in that email to confirm your account.
23 |         </h5>
24 | 
25 |         <br>
26 | 
27 |         <h5 class="text-center">
28 |           If the email doesn’t arrive, check your spam folder or contact an administrator to manually verify your account.
29 |         </h5>
30 | 
31 |         <hr>
32 | 
33 |         {% with form = Forms
34 |           .auth
35 |           .ConfirmForm() %}
36 |         <form method="POST" action="{{ url_for('auth.confirm') }}">
37 |           <div class="row">
38 |             <div class="col-md-6">
39 |               {{ form.submit(class="btn btn-md btn-primary btn-outlined w-100") }}
40 |             </div>
41 |             <div class="col-md-6">
42 |               <a href="{{ url_for('views.settings') }}" class="btn btn-md btn-secondary btn-outlined w-100">
43 |                 Change Email Address
44 |               </a>
45 |             </div>
46 |             {{ form.nonce() }}
47 |           </div>
48 |         </form>
49 |         {% endwith %}
50 |       </div>
51 |     </div>
52 |   </div>
53 | {% endblock %}
54 | 
55 | {% block scripts %}{% endblock %}
56 | 


--------------------------------------------------------------------------------
/templates/scoreboard.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block content %}
 4 |   <div class="container py-5 mb-5">
 5 |     <h1 class="text-center">Scoreboard<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
 6 |     </h1>
 7 |   </div>
 8 |   <div class="container">
 9 |     {% include "components/errors.html" %}
10 |     {% cache 60,
11 |     CacheKeys.PUBLIC_SCOREBOARD_TABLE %}
12 |     {% if standings %}
13 |       <div id="scoreboard" class="row">
14 |         <div class="col-md-12">
15 |           <table class="table table-striped">
16 |             <thead>
17 |               <tr>
18 |                 <td scope="col" width="10px">
19 |                   <b>Place</b>
20 |                 </td>
21 |                 <td scope="col">
22 |                   <b>{{ get_mode_as_word(capitalize=True) }}</b>
23 |                 </td>
24 |                 <td scope="col">
25 |                   <b>Score</b>
26 |                 </td>
27 |               </tr>
28 |             </thead>
29 |             <tbody>
30 |               {% for standing in standings %}
31 |                 <tr>
32 |                   <th scope="row" class="text-center">{{ loop.index }}</th>
33 |                   <td>
34 |                     <a href="{{ generate_account_url(standing.account_id) }}">
35 |                       {{ standing.name | truncate(50) }}
36 |                     </a>
37 |                   </td>
38 |                   <td>{{ standing.score }}</td>
39 |                 </tr>
40 |               {% endfor %}
41 |             </tbody>
42 |           </table>
43 |         </div>
44 |       </div>
45 |     {% endif %}
46 |     {% endcache %}
47 |   </div>
48 | {% endblock %}
49 | 
50 | {% block scripts %}
51 |   <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/echarts.bundle.js') }}"></script>
52 | {% endblock %}
53 | 
54 | {% block entrypoint %}
55 |   <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/pages/scoreboard.js') }}"></script>
56 | {% endblock %}
57 | 


--------------------------------------------------------------------------------
/templates/login.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block stylesheets %}{% endblock %}
 4 | 
 5 | {% block content %}
 6 |   <div class="container py-5 mb-5">
 7 |     <h1 class="mb-5 text-center">Before we start HACKING<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
 8 |     </h1>
 9 |     <div class="row py-4">
10 |       <div class="col-md-8 order-md-2">
11 |         {% include "components/errors.html" %}
12 |         {% with form = Forms
13 |           .auth
14 |           .LoginForm() %}
15 |         <form method="post" accept-charset="utf-8" autocomplete="off">
16 |           <div class="mb-3">
17 |             {{ form.name.label }}
18 |             <div class="input-group">
19 |               <div class="input-group-prepend">
20 |                 <span class="input-group-text">@</span>
21 |               </div>
22 |               {{ form.name(class="form-control", value=name, placeholder="Who are you?") }}
23 |               <div class="invalid-feedback" style="width: 100%;">
24 |                 Your username is required.
25 |               </div>
26 |             </div>
27 |           </div>
28 | 
29 |           <div class="mb-3">
30 |             {{ form.password.label }}
31 | 
32 |             <a class="float-right align-text-to-button" href="{{ url_for('auth.reset_password') }}">
33 |               Forgot your password?
34 |             </a>
35 |             <div class="input-group">
36 |               <div class="input-group-prepend">
37 |                 <span class="input-group-text">#</span>
38 |               </div>
39 |               {{ form.password(class="form-control", value=password, placeholder="Make sure nobody's behind you ;)") }}
40 |               <div class="invalid-feedback">
41 |                 Please enter a valid password.
42 |               </div>
43 |             </div>
44 |           </div>
45 |           <hr class="mb-4">
46 |           {{ form.submit(class="btn btn-outline-success btn-shadow btn-lg btn-block") }}
47 |           {{ form.nonce() }}
48 |         </form>
49 |         {% endwith %}
50 |       </div>
51 |       <div class="col-md-2 order-md-1"></div>
52 |       <div class="col-md-2 order-md-3"></div>
53 |     </div>
54 |   </div>
55 | {% endblock %}
56 | 
57 | {% block scripts %}{% endblock %}
58 | 


--------------------------------------------------------------------------------
/templates/reset_password.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block stylesheets %}{% endblock %}
 4 | 
 5 | {% block content %}
 6 |   <div class="container py-5 mb-5">
 7 |     <h1 class="text-center">Reset Password<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
 8 |     </h1>
 9 |   </div>
10 |   <div class="container">
11 |     <div class="row">
12 |       <div class="col-md-6 offset-md-3">
13 |         {% include "components/errors.html" %}
14 | 
15 |         {% if mode == "set" %}
16 |           {% with form = Forms
17 |             .auth
18 |             .ResetPasswordForm() %}
19 |           <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
20 |             <div class="row">
21 |               <div class="col-md-12">
22 |                 <p>You can now reset the password for your account and log in. Please enter in a new password below.</p>
23 |               </div>
24 |             </div>
25 |             <div class="form-group">
26 |               {{ form.password.label }}
27 |               {{ form.password(class="form-control") }}
28 |             </div>
29 |             <div class="row">
30 |               <div class="col-md-6 offset-md-6">
31 |                 {{ form.submit(class="btn btn-md btn-primary float-right") }}
32 |               </div>
33 |             </div>
34 |             {{ form.nonce() }}
35 |           </form>
36 |           {% endwith %}
37 |         {% else %}
38 |           {% with form = Forms
39 |             .auth
40 |             .ResetPasswordRequestForm() %}
41 |           <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
42 |             <div class="row">
43 |               <div class="col-md-12">
44 |                 <p>Please provide the email address associated with your account below.</p>
45 |               </div>
46 |             </div>
47 |             <div class="form-group">
48 |               {{ form.email.label }}
49 |               {{ form.email(class="form-control") }}
50 |             </div>
51 |             <div class="row">
52 |               <div class="col-md-6 offset-md-6">
53 |                 {{ form.submit(class="btn btn-md btn-primary float-right") }}
54 |               </div>
55 |             </div>
56 |             {{ form.nonce() }}
57 |           </form>
58 |           {% endwith %}
59 |         {% endif %}
60 |       </div>
61 |     </div>
62 |   </div>
63 | {% endblock %}
64 | 
65 | {% block scripts %}{% endblock %}
66 | 


--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>{{ Configs.ctf_name }}</title>
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="shortcut icon" href="{{ Configs.ctf_small_icon }}" type="image/x-icon">
 9 |     <link rel="stylesheet" href="{{ url_for('views.themes', theme='core', path='css/fonts.css') }}">
10 |     <link rel="stylesheet" href="{{ url_for('views.themes', theme='core', path='css/core.min.css') }}">
11 |     <link rel="stylesheet" href="{{ url_for('views.themes', path='css/style.dev.css') }}">
12 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HackerThemes/theme-machine@latest/dist/neon-glow/css/bootstrap4-neon-glow.min.css">
13 | 
14 |     <link rel='stylesheet' href='https://cdn.jsdelivr.net/font-hack/2.020/css/hack.min.css'>
15 |     {% block stylesheets %}{% endblock %}
16 | 
17 |     {{ Plugins.styles }}
18 |     <script type="text/javascript">
19 |       var init = {
20 |         'urlRoot': "{{ request.script_root }}",
21 |         'csrfNonce': "{{ Session.nonce }}",
22 |         'userMode': "{{ Configs.user_mode }}",
23 |         'userId': {{ Session.id }},
24 |         'start': {{ Configs.start | tojson }},
25 |         'end': {{ Configs.end | tojson }},
26 |         'theme_settings': {{ Configs.theme_settings | tojson }}
27 |       }
28 |     </script>
29 |     {{ Configs.theme_header }}
30 |   </head>
31 | 
32 |   <body>
33 |     {% include "components/navbar.html" %}
34 | 
35 |     <main role="main">
36 |       {% block content %}{% endblock %}
37 |     </main>
38 | 
39 |     <footer class="footer">
40 |       <div class="container text-center">
41 |         <a href="https://ctfd.io" class="text-secondary">
42 |           <small class="text-muted">Powered by CTFd</small>
43 |         </a>
44 |       </div>
45 |     </footer>
46 | 
47 |     <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/vendor.bundle.js') }}"></script>
48 |     <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/core.js') }}"></script>
49 |     <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/helpers.js') }}"></script>
50 | 
51 |     {% block entrypoint %}
52 |       <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/pages/main.js') }}"></script>
53 |     {% endblock %}
54 | 
55 |     {% block scripts %}{% endblock %}
56 | 
57 |     {{ Plugins.scripts }}
58 | 
59 |     {{ Configs.theme_footer }}
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/templates/register.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block stylesheets %}{% endblock %}
 4 | 
 5 | {% block content %}
 6 |   <div class="container py-5 mb-5">
 7 |     <h1 class="mb-5 text-center">Register for
 8 |       {{ Configs.ctf_name }}
 9 |       <span class="vim-caret">͏͏&nbsp;&nbsp;</span></h1>
10 |     <div class="row py-4">
11 |       <div class="col-md-8 order-md-2">
12 |         {% include "components/errors.html" %}
13 |         {% with form = Forms
14 |           .auth
15 |           .RegistrationForm() %}
16 |         {% from "core/macros/forms.html" import render_extra_fields %}
17 |         <form method="post" accept-charset="utf-8" autocomplete="off" role="form">
18 |           <div class="mb-3">
19 |             {{ form.name.label }}
20 |             <div class="input-group">
21 |               <div class="input-group-prepend">
22 |                 <span class="input-group-text">@</span>
23 |               </div>
24 |               {{ form.name(class="form-control", value=name, placeholder="Username") }}
25 |               <div class="invalid-feedback" style="width: 100%;">
26 |                 Your username is required.
27 |               </div>
28 |             </div>
29 |           </div>
30 | 
31 |           <div class="mb-3">
32 |             {{ form.email.label }}
33 |             {{ form.email(class="form-control", value=email, placeholder="you@example.com") }}
34 |             <div class="invalid-feedback">
35 |               Please enter a valid email address.
36 |             </div>
37 |           </div>
38 | 
39 |           <div class="mb-3">
40 |             {{ form.password.label }}
41 |             <div class="input-group">
42 |               <div class="input-group-prepend">
43 |                 <span class="input-group-text">#</span>
44 |               </div>
45 |               {{ form.password(class="form-control", value=password, placeholder="Make sure nobody's behind you ;)") }}
46 |               <div class="invalid-feedback">
47 |                 Please enter a valid password.
48 |               </div>
49 |             </div>
50 |           </div>
51 |           <hr class="mb-4">
52 |           {{ form.nonce() }}
53 |           {{ render_extra_fields(form.extra) }}
54 |           {{ form.submit(class="btn btn-outline-success btn-shadow btn-lg btn-block") }}
55 |         </form>
56 |         {% endwith %}
57 |         {% if Configs.tos_or_privacy %}
58 |           <hr class="mb-4">
59 |           <div class="custom-control">
60 |             <div class="col-md-12 text-center">
61 |               <small class="text-muted text-center">
62 |                 By registering, you agree to the
63 |                 <a href="{{ Configs.privacy_link }}" rel="noopener" target="_blank">privacy policy</a>
64 |                 and
65 |                 <a href="{{ Configs.tos_link }}" rel="noopener" target="_blank">terms of service</a>
66 |               </small>
67 |             </div>
68 |           </div>
69 |         {% endif %}
70 |       </div>
71 |       <div class="col-md-2 order-md-1"></div>
72 |       <div class="col-md-2 order-md-3"></div>
73 |     </div>
74 |   </div>
75 | {% endblock %}
76 | 
77 | {% block scripts %}{% endblock %}
78 | 


--------------------------------------------------------------------------------
/templates/users/users.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block stylesheets %}
  4 | {% endblock %}
  5 | 
  6 | {% block content %}
  7 | 	<div class="container py-5 mb-5">
  8 | 		<h1 class="text-center">Users<span class="vim-caret">͏͏&nbsp;&nbsp;</span>
  9 | 		</h1>
 10 | 	</div>
 11 | 	<div class="container">
 12 | 		<div class="row">
 13 | 			<div class="col-md-12">
 14 | 				{% if q and field %}
 15 | 				<h5 class="text-muted text-center">
 16 | 					Searching for users with <strong>{{ field }}</strong> matching <strong>{{ q }}</strong>
 17 | 				</h5>
 18 | 				<h6 class="text-muted text-center pb-3">
 19 | 					Page {{ users.page }} of {{ users.total }} results
 20 | 				</h6>
 21 | 				{% endif %}
 22 | 
 23 | 				{% with form = Forms.users.PublicUserSearchForm(field=field, q=q) %}
 24 | 				<form method="GET" class="form-inline">
 25 | 					<div class="form-group col-md-2">
 26 | 						{{ form.field(class="form-control custom-select w-100") }}
 27 | 					</div>
 28 | 					<div class="form-group col-md-8">
 29 | 						{{ form.q(class="form-control w-100", placeholder="Search for matching users") }}
 30 | 					</div>
 31 | 					<div class="form-group col-md-2">
 32 | 						<button type="submit" class="btn btn-primary w-100">
 33 | 							<i class="fas fa-search" aria-hidden="true"></i>
 34 | 						</button>
 35 | 					</div>
 36 | 				</form>
 37 | 				{% endwith %}
 38 | 			</div>
 39 | 		</div>
 40 | 
 41 | 		<hr>
 42 | 
 43 | 		<div class="row">
 44 | 			<div class="col-md-12">
 45 | 				<table class="table table-striped">
 46 | 					<thead>
 47 | 					<tr>
 48 | 						<td><b>User</b></td>
 49 | 						<td><b>Website</b></td>
 50 | 						<td class="d-none d-md-table-cell d-lg-table-cell"><b>Affiliation</b></td>
 51 | 					</tr>
 52 | 					</thead>
 53 | 					<tbody>
 54 | 					{% for user in users.items %}
 55 | 						<tr>
 56 | 							<td>
 57 | 								{% if scores_visible() %}
 58 | 									<a href="{{ url_for('users.public', user_id=user.id) }}">
 59 | 										{{ user.name | truncate(50) }}
 60 | 									</a>
 61 | 								{% else %}
 62 | 									<span>{{ user.name | truncate(50) }}</span>
 63 | 								{% endif %}
 64 | 								{% if user.oauth_id %}
 65 | 									<a href="https://majorleaguecyber.org/u/{{ user.name }}">
 66 | 										<span class="badge badge-primary">Official</span>
 67 | 									</a>
 68 | 								{% endif %}
 69 | 							</td>
 70 | 							<td class="text-center" style="width: 10px;">
 71 | 								{% if user.website and (user.website.startswith('http://') or user.website.startswith('https://')) %}
 72 | 									<a href="{{ user.website }}" target="_blank" rel="noopener">
 73 | 										<i class="fas fa-external-link-alt" data-toggle="tooltip" data-placement="top"
 74 | 										   title="{{ user.website }}"></i>
 75 | 									</a>
 76 | 								{% endif %}
 77 | 							</td>
 78 | 							<td class="d-none d-md-table-cell d-lg-table-cell">
 79 | 								{% if user.affiliation %}
 80 | 									{% if user.affiliation | length > 50 %}
 81 | 										<span data-toggle="tooltip" data-placement="top" title="{{ user.affiliation }}">
 82 | 									{% if user.affiliation %}{{ user.affiliation | truncate(50) }}{% endif %}
 83 | 								</span>
 84 | 									{% else %}
 85 | 										<span>
 86 | 									{% if user.affiliation %}{{ user.affiliation | truncate(50) }}{% endif %}
 87 | 								</span>
 88 | 									{% endif %}
 89 | 								{% endif %}
 90 | 							</td>
 91 | 						</tr>
 92 | 					{% endfor %}
 93 | 					</tbody>
 94 | 				</table>
 95 | 			</div>
 96 | 		</div>
 97 | 		{% if users.pages > 1 %}
 98 | 			<div class="row">
 99 | 				<div class="col-md-12">
100 | 					<div class="text-center">Page
101 | 						<br>
102 | 						{% if users.page != 1 %}
103 | 						<a href="{{ prev_page }}">&lt;&lt;&lt;</a>
104 | 						{% endif %}
105 | 						<select class="page-select">
106 | 							{% for page in range(1, users.pages + 1) %}
107 | 							<option {% if users.page == page %}selected{% endif %}>{{ page }}</option>
108 | 							{% endfor %}
109 | 						</select>
110 | 						{% if users.next_num %}
111 | 						<a href="{{ next_page }}">&gt;&gt;&gt;</a>
112 | 						{% endif %}
113 | 					</div>
114 | 				</div>
115 | 			</div>
116 | 		{% endif %}
117 | 	</div>
118 | {% endblock %}
119 | 
120 | {% block scripts %}
121 | {% endblock %}
122 | 


--------------------------------------------------------------------------------
/templates/components/navbar.html:
--------------------------------------------------------------------------------
 1 | <div class="ht-tm-navbar navbar-dark text-white">
 2 |   <div class="container">
 3 |     <div class="ht-tm-navbar-left">
 4 |       <a href="{{ url_for('views.static_html', route='/') }}" class="text-decoration-none text-light">
 5 |         <span class="ht-tm-navbar-title">{{ Configs.ctf_name }}</span>
 6 |       </a>
 7 |       <nav class="ht-tm-nav">
 8 |         <a href="{{ url_for('views.static_html', route='/') }}" class="pl-md-0 p-3 text-light">Home</a>
 9 |         {% for page in Plugins.user_menu_pages %}
10 |           <a class="text-decoration-none text-light" href="{{ page.route }}">{{ page.title }}</a>
11 |         {% endfor %}
12 | 
13 |         {% if Configs.account_visibility != 'admins' %}
14 |           <a class="text-decoration-none text-light" href="{{ url_for('users.listing') }}">Users</a>
15 |           {% if Configs.user_mode == 'teams' %}
16 |             <a class="text-decoration-none text-light" href="{{ url_for('teams.listing') }}">Teams</a>
17 |           {% endif %}
18 |         {% endif %}
19 | 
20 |         {% if Configs.score_visibility != 'admins' %}
21 |           <a class="text-decoration-none text-light" href="{{ url_for('scoreboard.listing') }}">Scoreboard</a>
22 |         {% endif %}
23 |         <a class="text-decoration-none text-light" href="{{ url_for('challenges.listing') }}">Challenges</a>
24 |         <a class="text-decoration-none text-light" href="{{ url_for('views.notifications') }}">Notifications</a>
25 |       </nav>
26 |     </div>
27 |     <div class="ht-tm-element btn-group ml-auto">
28 |       {% if authed() %}
29 |         {% if is_admin() %}
30 |           <a class="btn btn-sm btn-outline-light ml-auto" href="{{ url_for('admin.view') }}">
31 |             <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Admin Panel">
32 |               <i class="fas fa-wrench d-none d-md-block d-lg-none"></i>
33 |             </span>
34 |             <span class="d-sm-block d-md-none d-lg-block">
35 |               <i class="fas fa-wrench pr-1"></i>Admin Panel
36 |             </span>
37 |           </a>
38 |         {% endif %}
39 |         {% if Configs.user_mode == "teams" %}
40 |           <a class="btn btn-sm btn-outline-light" href="{{ url_for('teams.private') }}">
41 |             <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Team">
42 |               <i class="fas fa-users d-none d-md-block d-lg-none"></i>
43 |             </span>
44 |             <span class="d-sm-block d-md-none d-lg-block">
45 |               <i class="fas fa-users pr-1"></i>Team
46 |             </span>
47 |           </a>
48 |         {% endif %}
49 |         <a class="btn btn-sm btn-outline-light" href="{{ url_for('users.private') }}">
50 |           <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Profile">
51 |             <i class="fas fa-user-circle d-none d-md-block d-lg-none"></i>
52 |           </span>
53 |           <span class="d-sm-block d-md-none d-lg-block">
54 |             <i class="fas fa-user-circle pr-1"></i>Profile
55 |           </span>
56 |         </a>
57 |         <a class="btn btn-sm btn-outline-light" href="{{ url_for('views.settings') }}">
58 |           <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Settings">
59 |             <i class="fas fa-cogs d-none d-md-block d-lg-none"></i>
60 |           </span>
61 |           <span class="d-sm-block d-md-none d-lg-block">
62 |             <i class="fas fa-cogs pr-1"></i>Settings
63 |           </span>
64 |         </a>
65 |         <a class="btn btn-sm btn-outline-light" href="{{ url_for('auth.logout') }}">
66 |           <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Logout">
67 |             <i class="fas fa-sign-out-alt d-none d-md-block d-lg-none"></i>
68 |           </span>
69 |           <span class="d-sm-block d-md-none d-lg-block">
70 |             <i class="fas fa-sign-out-alt pr-1"></i>
71 |             <span class="d-lg-none">Logout</span>
72 |           </span>
73 |         </a>
74 |       {% else %}
75 |         {% if registration_visible() %}
76 |           <a class="btn btn-sm btn-outline-light" href="{{ url_for('auth.register') }}">
77 |             <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Register">
78 |               <i class="fas fa-user-plus d-none d-md-block d-lg-none"></i>
79 |             </span>
80 |             <span class="d-sm-block d-md-none d-lg-block">
81 |               <i class="fas fa-user-plus pr-1"></i>Register
82 |             </span>
83 |           </a>
84 |         {% endif %}
85 |         <a class="btn btn-sm btn-outline-light" href="{{ url_for('auth.login') }}">
86 |           <span class="d-block" data-toggle="tooltip" data-placement="bottom" title="Login">
87 |             <i class="fas fa-sign-in-alt d-none d-md-block d-lg-none"></i>
88 |           </span>
89 |           <span class="d-sm-block d-md-none d-lg-block">
90 |             <i class="fas fa-sign-in-alt pr-1"></i>Login
91 |           </span>
92 |         </a>
93 |       {% endif %}
94 |     </div>
95 |   </div>
96 | </div>
97 | 


--------------------------------------------------------------------------------
/templates/users/private.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block stylesheets %}
  4 | {% endblock %}
  5 | 
  6 | {% block content %}
  7 | 	<div class="jumbotron">
  8 | 		<div class="container">
  9 | 			<h1>{{ user.name }}</h1>
 10 | 
 11 | 			{% if user.team_id %}
 12 | 				<h2>
 13 | 					<a href="{{ url_for('teams.private') }}">
 14 | 						<span class="badge badge-secondary">
 15 | 							{{ user.team.name }}
 16 | 						</span>
 17 | 					</a>
 18 | 				</h2>
 19 | 			{% endif %}
 20 | 
 21 | 			{% if user.affiliation %}
 22 | 				<h3 class="d-inline-block">
 23 | 					<span class="badge badge-primary">{{ user.affiliation }}</span>
 24 | 				</h3>
 25 | 			{% endif %}
 26 | 
 27 | 			{% for field in user.fields %}
 28 | 				<h3 class="d-inline-block">
 29 | 					{{ field.name }}: {{ field.value }}
 30 | 				</h3>
 31 | 			{% endfor %}
 32 | 
 33 | 			<div>
 34 | 				<h2 class="text-center">
 35 | 					{% if account.place %}
 36 | 						{{ account.place }} <small>place</small>
 37 | 					{% endif %}
 38 | 				</h2>
 39 | 				<h2 class="text-center">
 40 | 					{% if account.place %}
 41 | 						{{ account.score }} <small>points</small>
 42 | 					{% endif %}
 43 | 				</h2>
 44 | 			</div>
 45 | 
 46 | 			<div class="pt-3">
 47 | 				{% if user.website %}
 48 | 					<a href="{{ user.website }}" target="_blank" style="color: inherit;" rel="noopener">
 49 | 						<i class="fas fa-external-link-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
 50 | 						   title="{{ user.website }}"></i>
 51 | 					</a>
 52 | 				{% endif %}
 53 | 			</div>
 54 | 		</div>
 55 | 	</div>
 56 | 	<div class="container">
 57 | 		{% include "components/errors.html" %}
 58 | 
 59 | 		{% set solves = user.solves %}
 60 | 		{% set awards = user.awards %}
 61 | 		{% if solves or awards %}
 62 | 			<div class="row">
 63 | 				<div class="col-md-6 d-none d-md-block d-lg-block">
 64 | 					<div id="keys-pie-graph" class="d-flex align-items-center">
 65 | 						<div class="text-center w-100">
 66 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 67 | 						</div>
 68 | 					</div>
 69 | 				</div>
 70 | 				<div class="col-md-6 d-none d-md-block d-lg-block">
 71 | 					<div id="categories-pie-graph" class="d-flex align-items-center">
 72 | 						<div class="text-center w-100">
 73 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 74 | 						</div>
 75 | 					</div>
 76 | 				</div>
 77 | 				<br class="clearfix">
 78 | 				<div class="col-md-12 d-none d-md-block d-lg-block">
 79 | 					<div id="score-graph" class="w-100 d-flex align-items-center">
 80 | 						<div class="text-center w-100">
 81 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 82 | 						</div>
 83 | 					</div>
 84 | 				</div>
 85 | 			</div>
 86 | 
 87 | 			<div class="clearfix"></div>
 88 | 
 89 | 			<div class="row">
 90 | 				<div class="col-md-12">
 91 | 					<h3>Awards</h3>
 92 | 				</div>
 93 | 				{% for award in awards %}
 94 | 					<div class="col-md-3 col-sm-6">
 95 | 						<p class="text-center">
 96 | 							<i class="award-icon award-{{ award.icon }} fa-2x"></i>
 97 | 							<br>
 98 | 							<strong>{{ award.name }}</strong>
 99 | 						</p>
100 | 						<p class="text-center">{{ award.category or ""}}</p>
101 | 						<p class="text-center">{{ award.description or ""}}</p>
102 | 						<p class="text-center">{{ award.value }}</p>
103 | 					</div>
104 | 				{% endfor %}
105 | 			</div>
106 | 
107 | 			<br>
108 | 
109 | 			<div class="row">
110 | 				<div class="col-md-12">
111 | 					<h3>Solves</h3>
112 | 					<table class="table table-striped">
113 | 						<thead>
114 | 						<tr>
115 | 							<td><b>Challenge</b></td>
116 | 							<td class="d-none d-md-block d-lg-block"><b>Category</b></td>
117 | 							<td><b>Value</b></td>
118 | 							<td><b>Time</b></td>
119 | 						</tr>
120 | 						</thead>
121 | 						<tbody>
122 | 						{% for solve in solves %}
123 | 							<tr>
124 | 								<td>
125 | 									<a href="{{ url_for('challenges.listing') }}#{{ solve.challenge.name }}-{{ solve.challenge.id }}">
126 | 										{{ solve.challenge.name }}
127 | 									</a>
128 | 								</td>
129 | 								<td class="d-none d-md-block d-lg-block">{{ solve.challenge.category }}</td>
130 | 								<td>{{ solve.challenge.value }}</td>
131 | 								<td class="solve-time">
132 | 									<span data-time="{{ solve.date | isoformat }}"></span>
133 | 								</td>
134 | 							</tr>
135 | 						{% endfor %}
136 | 						</tbody>
137 | 					</table>
138 | 				</div>
139 | 			</div>
140 | 		{% else %}
141 | 			<div class="row min-vh-25">
142 | 				<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
143 | 					No solves yet
144 | 				</h3>
145 | 			</div>
146 | 		{% endif %}
147 | 	</div>
148 | {% endblock %}
149 | 
150 | {% block scripts %}
151 | 	<script>
152 | 		var stats_data = {{ {
153 | 			'type': 'user',
154 | 			'id': user.id,
155 | 			'name': user.name,
156 | 			'account_id': 'me',
157 | 		} | tojson }};
158 | 	</script>
159 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/echarts.bundle.js') }}"></script>
160 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/graphs.js') }}"></script>
161 | {% endblock %}
162 | 
163 | {% block entrypoint %}
164 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/pages/stats.js') }}"></script>
165 | {% endblock %}
166 | 


--------------------------------------------------------------------------------
/templates/users/public.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block stylesheets %}
  4 | {% endblock %}
  5 | 
  6 | {% block content %}
  7 | 	<div class="jumbotron">
  8 | 		<div class="container">
  9 | 			<h1>{{ user.name }}</h1>
 10 | 
 11 | 			{% if user.team_id %}
 12 | 				<h2>
 13 | 					<a href="{{ url_for('teams.public', team_id=user.team_id) }}">
 14 | 						<span class="badge badge-secondary">
 15 | 							{{ user.team.name }}
 16 | 						</span>
 17 | 					</a>
 18 | 				</h2>
 19 | 			{% endif %}
 20 | 
 21 | 			{% if user.affiliation %}
 22 | 				<h3 class="d-inline-block">
 23 | 					<span class="badge badge-primary">{{ user.affiliation }}</span>
 24 | 				</h3>
 25 | 			{% endif %}
 26 | 
 27 | 			{% for field in user.fields %}
 28 | 				<h3 class="d-block">
 29 | 					{{ field.name }}: {{ field.value }}
 30 | 				</h3>
 31 | 			{% endfor %}
 32 | 
 33 | 			<div>
 34 | 				<h2 class="text-center">
 35 | 					{% if account.place %}
 36 | 						{{ account.place }} <small>place</small>
 37 | 					{% endif %}
 38 | 				</h2>
 39 | 				<h2 class="text-center">
 40 | 					{% if account.place %}
 41 | 						{{ account.score }} <small>points</small>
 42 | 					{% endif %}
 43 | 				</h2>
 44 | 			</div>
 45 | 
 46 | 			<div class="pt-3">
 47 | 				{% if user.website %}
 48 | 					<a href="{{ user.website }}" target="_blank" style="color: inherit;" rel="noopener">
 49 | 						<i class="fas fa-external-link-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
 50 | 						   title="{{ user.website }}"></i>
 51 | 					</a>
 52 | 				{% endif %}
 53 | 			</div>
 54 | 		</div>
 55 | 	</div>
 56 | 	<div class="container">
 57 | 		{% include "components/errors.html" %}
 58 | 
 59 | 		{% set solves = user.solves %}
 60 | 		{% set awards = user.awards %}
 61 | 		{% if solves or awards %}
 62 | 			<div class="row">
 63 | 				<div class="col-md-6 d-none d-md-block d-lg-block">
 64 | 					<div id="keys-pie-graph" class="d-flex align-items-center">
 65 | 						<div class="text-center w-100">
 66 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 67 | 						</div>
 68 | 					</div>
 69 | 				</div>
 70 | 				<div class="col-md-6 d-none d-md-block d-lg-block">
 71 | 					<div id="categories-pie-graph" class="d-flex align-items-center">
 72 | 						<div class="text-center w-100">
 73 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 74 | 						</div>
 75 | 					</div>
 76 | 				</div>
 77 | 				<br class="clearfix">
 78 | 				<div class="col-md-12 d-none d-md-block d-lg-block">
 79 | 					<div id="score-graph" class="w-100 d-flex align-items-center">
 80 | 						<div class="text-center w-100">
 81 | 							<i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
 82 | 						</div>
 83 | 					</div>
 84 | 				</div>
 85 | 			</div>
 86 | 
 87 | 			<div class="clearfix"></div>
 88 | 
 89 | 			<div class="row">
 90 | 				<div class="col-md-12">
 91 | 					<h3>Awards</h3>
 92 | 				</div>
 93 | 				{% for award in awards %}
 94 | 					<div class="col-md-3 col-sm-6">
 95 | 						<p class="text-center">
 96 | 							<i class="award-icon award-{{ award.icon }} fa-2x"></i>
 97 | 							<br>
 98 | 							<strong>{{ award.name }}</strong>
 99 | 						</p>
100 | 						<p class="text-center">{{ award.category or "" }}</p>
101 | 						<p class="text-center">{{ award.description or "" }}</p>
102 | 						<p class="text-center">{{ award.value }}</p>
103 | 					</div>
104 | 				{% endfor %}
105 | 			</div>
106 | 
107 | 			<br>
108 | 
109 | 			<div class="row">
110 | 				<div class="col-md-12">
111 | 					<h3>Solves</h3>
112 | 					<table class="table table-striped">
113 | 						<thead>
114 | 						<tr>
115 | 							<td><b>Challenge</b></td>
116 | 							<td class="d-none d-md-block d-lg-block"><b>Category</b></td>
117 | 							<td><b>Value</b></td>
118 | 							<td><b>Time</b></td>
119 | 						</tr>
120 | 						</thead>
121 | 						<tbody>
122 | 						{% for solve in solves %}
123 | 							<tr>
124 | 								<td>
125 | 									<a href="{{ url_for('challenges.listing') }}#{{ solve.challenge.name }}-{{ solve.challenge.id }}">
126 | 										{{ solve.challenge.name }}
127 | 									</a>
128 | 								</td>
129 | 								<td class="d-none d-md-block d-lg-block">{{ solve.challenge.category }}</td>
130 | 								<td>{{ solve.challenge.value }}</td>
131 | 								<td class="solve-time">
132 | 									<span data-time="{{ solve.date | isoformat }}"></span>
133 | 								</td>
134 | 							</tr>
135 | 						{% endfor %}
136 | 						</tbody>
137 | 					</table>
138 | 				</div>
139 | 			</div>
140 | 		{% else %}
141 | 			<div class="row min-vh-25">
142 | 				<h3 class="opacity-50 text-center w-100 justify-content-center align-self-center">
143 | 					No solves yet
144 | 				</h3>
145 | 			</div>
146 | 		{% endif %}
147 | 	</div>
148 | {% endblock %}
149 | 
150 | {% block scripts %}
151 | 	<script>
152 | 		var stats_data = {{ {
153 | 			'type': 'user',
154 | 			'id': user.id,
155 | 			'name': user.name,
156 | 			'account_id': user.id,
157 | 		} | tojson }};
158 | 	</script>
159 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/echarts.bundle.js') }}"></script>
160 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/graphs.js') }}"></script>
161 | {% endblock %}
162 | 
163 | {% block entrypoint %}
164 | 	<script defer src="{{ url_for('views.themes', theme='core', path='js/pages/stats.js') }}"></script>
165 | {% endblock %}
166 | 


--------------------------------------------------------------------------------
/templates/settings.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | 
  3 | {% block stylesheets %}{% endblock %}
  4 | 
  5 | {% block content %}
  6 |   <hr class="mb-4">
  7 |   <div class="container">
  8 |     <div class="row">
  9 |       <div class="col-md-2 offset-md-1">
 10 |         <div class="nav flex-column nav-pills" role="tablist">
 11 |           <a class="nav-link active" id="settings-profile-tab" data-toggle="pill" href="#profile" role="tab">Profile</a>
 12 |           <a class="nav-link" id="settings-tokens-tab" data-toggle="pill" href="#tokens" role="tab">Access Tokens</a>
 13 |         </div>
 14 |       </div>
 15 |       <div class="col-md-8">
 16 |         <div class="tab-content" id="v-pills-tabContent">
 17 |           <div class="tab-pane fade show active" id="profile" role="tabpanel">
 18 |             {% include "components/errors.html" %}
 19 | 
 20 |             {% with form = Forms
 21 |               .self
 22 |               .SettingsForm(country = country) %}
 23 |             {% from "core/macros/forms.html" import render_extra_fields %}
 24 |             <form id="user-profile-form" method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
 25 |               <div class="form-group">
 26 |                 <b>{{ form.name.label }}</b>
 27 |                 {{ form.name(class="form-control", value=name) }}
 28 |               </div>
 29 |               <div class="form-group">
 30 |                 <b>{{ form.email.label }}</b>
 31 |                 {{ form.email(class="form-control", value=email) }}
 32 |               </div>
 33 | 
 34 |               <hr>
 35 | 
 36 |               <div class="form-group">
 37 |                 <b>{{ form.confirm.label }}</b>
 38 |                 {{ form.confirm(class="form-control") }}
 39 |               </div>
 40 |               <div class="form-group">
 41 |                 <b>{{ form.password.label }}</b>
 42 |                 {{ form.password(class="form-control") }}
 43 |               </div>
 44 | 
 45 |               <hr>
 46 | 
 47 |               <div class="form-group">
 48 |                 <b>{{ form.affiliation.label }}</b>
 49 |                 {{ form.affiliation(class="form-control", value=affiliation or "") }}
 50 |               </div>
 51 |               <div class="form-group">
 52 |                 <b>{{ form.website.label }}</b>
 53 |                 {{ form.website(class="form-control", value=website or "") }}
 54 |               </div>
 55 | 
 56 |               <hr>
 57 | 
 58 |               {{ render_extra_fields(form.extra) }}
 59 | 
 60 |               <div id="results" class="form-group"></div>
 61 | 
 62 |               <div class="form-group">
 63 |                 {{ form.submit(class="btn btn-md btn-primary btn-outlined float-right") }}
 64 |               </div>
 65 |             </form>
 66 |             {% endwith %}
 67 |           </div>
 68 |           <div class="tab-pane fade" id="tokens" role="tabpanel">
 69 |             {% with form = Forms
 70 |               .self
 71 |               .TokensForm() %}
 72 |             <form method="POST" id="user-token-form">
 73 |               <div class="form-group">
 74 |                 <b>{{ form.expiration.label }}</b>
 75 |                 {{ form.expiration(class="form-control") }}
 76 |               </div>
 77 | 
 78 |               <div class="form-group text-right">
 79 |                 {{ form.submit(class="btn btn-md btn-primary btn-outlined") }}
 80 |               </div>
 81 |             </form>
 82 |             {% endwith %}
 83 | 
 84 |             {% if tokens %}
 85 |               <hr>
 86 |               <h4 class="text-center">Active Tokens</h4>
 87 |               <table class="table table-striped">
 88 |                 <thead>
 89 |                   <tr>
 90 |                     <td class="text-center">
 91 |                       <b>Type</b>
 92 |                     </td>
 93 |                     <td class="text-center">
 94 |                       <b>Created</b>
 95 |                     </td>
 96 |                     <td class="text-center">
 97 |                       <b>Expiration</b>
 98 |                     </td>
 99 |                     <td class="text-center">
100 |                       <b>Delete</b>
101 |                     </td>
102 |                   </tr>
103 |                 </thead>
104 |                 <tbody>
105 |                   {% for token in tokens %}
106 |                     <tr>
107 |                       <td>{{ token.type }}</td>
108 |                       <td>
109 |                         <span data-time="{{ token.created | isoformat }}"></span></td>
110 |                       <td>
111 |                         <span data-time="{{ token.expiration | isoformat }}"></span></td>
112 |                       <td class="text-center">
113 |                         <span class="delete-token" role="button" data-token-id="{{ token.id }}">
114 |                           <i class="btn-fa fas fa-times"></i>
115 |                         </span>
116 |                       </td>
117 |                     </tr>
118 |                   {% endfor %}
119 |                 </tbody>
120 |               </table>
121 |             {% endif %}
122 |           </div>
123 |         </div>
124 |       </div>
125 |     </div>
126 |   </div>
127 | {% endblock %}
128 | 
129 | {% block scripts %}{% endblock %}
130 | 
131 | {% block entrypoint %}
132 |   <script defer="defer" src="{{ url_for('views.themes', theme='core', path='js/pages/settings.js') }}"></script>
133 | {% endblock %}
134 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 | 
280 |                      END OF TERMS AND CONDITIONS
281 | 
282 |             How to Apply These Terms to Your New Programs
283 | 
284 |   If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 | 
288 |   To do so, attach the following notices to the program.  It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 | 
293 |     <one line to give the program's name and a brief idea of what it does.>
294 |     Copyright (C) <year>  <name of author>
295 | 
296 |     This program is free software; you can redistribute it and/or modify
297 |     it under the terms of the GNU General Public License as published by
298 |     the Free Software Foundation; either version 2 of the License, or
299 |     (at your option) any later version.
300 | 
301 |     This program is distributed in the hope that it will be useful,
302 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
303 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
304 |     GNU General Public License for more details.
305 | 
306 |     You should have received a copy of the GNU General Public License along
307 |     with this program; if not, write to the Free Software Foundation, Inc.,
308 |     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 | 
310 | Also add information on how to contact you by electronic and paper mail.
311 | 
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 | 
315 |     Gnomovision version 69, Copyright (C) year name of author
316 |     Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 |     This is free software, and you are welcome to redistribute it
318 |     under certain conditions; type `show c' for details.
319 | 
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License.  Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 | 
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary.  Here is a sample; alter the names:
328 | 
329 |   Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 |   `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 | 
332 |   <signature of Ty Coon>, 1 April 1989
333 |   Ty Coon, President of Vice
334 | 
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs.  If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library.  If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 | 


--------------------------------------------------------------------------------
/static/css/style.dev.css:
--------------------------------------------------------------------------------
  1 | main{padding-top:3.5rem}
  2 | html{position:relative;min-height:100%}main{margin-bottom:100px}.footer{position:absolute;bottom:1px;width:100%;height:60px;line-height:60px;z-index:-20}
  3 | 
  4 | /*
  5 | HackerThemes.com
  6 | Author: Alexander Rechsteiner
  7 | Author URI: https://hackerthemes.com
  8 |  */
  9 | /* Using bootstrap button mixin for some custom buttons */
 10 | .btn-ht-blue {
 11 |   color: #fff;
 12 |   background-color: #262F49;
 13 |   border-color: #262F49; }
 14 |   .btn-ht-blue:hover {
 15 |     color: #fff;
 16 |     background-color: #191f30;
 17 |     border-color: #151927; }
 18 |   .btn-ht-blue:focus, .btn-ht-blue.focus {
 19 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(71, 78, 100, 0.5);
 20 |             box-shadow: 0 0 0 0.2rem rgba(71, 78, 100, 0.5); }
 21 |   .btn-ht-blue.disabled, .btn-ht-blue:disabled {
 22 |     color: #fff;
 23 |     background-color: #262F49;
 24 |     border-color: #262F49; }
 25 |   .btn-ht-blue:not(:disabled):not(.disabled):active, .btn-ht-blue:not(:disabled):not(.disabled).active,
 26 |   .show > .btn-ht-blue.dropdown-toggle {
 27 |     color: #fff;
 28 |     background-color: #151927;
 29 |     border-color: #10141f; }
 30 |     .btn-ht-blue:not(:disabled):not(.disabled):active:focus, .btn-ht-blue:not(:disabled):not(.disabled).active:focus,
 31 |     .show > .btn-ht-blue.dropdown-toggle:focus {
 32 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(71, 78, 100, 0.5);
 33 |               box-shadow: 0 0 0 0.2rem rgba(71, 78, 100, 0.5); }
 34 |   .btn-ht-blue:active, .btn-ht-blue:focus {
 35 |     color: #fff; }
 36 | 
 37 | .btn-ht-black {
 38 |   color: #fff;
 39 |   background-color: #303030;
 40 |   border-color: #303030; }
 41 |   .btn-ht-black:hover {
 42 |     color: #fff;
 43 |     background-color: #1d1d1d;
 44 |     border-color: #171717; }
 45 |   .btn-ht-black:focus, .btn-ht-black.focus {
 46 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5);
 47 |             box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5); }
 48 |   .btn-ht-black.disabled, .btn-ht-black:disabled {
 49 |     color: #fff;
 50 |     background-color: #303030;
 51 |     border-color: #303030; }
 52 |   .btn-ht-black:not(:disabled):not(.disabled):active, .btn-ht-black:not(:disabled):not(.disabled).active,
 53 |   .show > .btn-ht-black.dropdown-toggle {
 54 |     color: #fff;
 55 |     background-color: #171717;
 56 |     border-color: #101010; }
 57 |     .btn-ht-black:not(:disabled):not(.disabled):active:focus, .btn-ht-black:not(:disabled):not(.disabled).active:focus,
 58 |     .show > .btn-ht-black.dropdown-toggle:focus {
 59 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5);
 60 |               box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5); }
 61 |   .btn-ht-black:active, .btn-ht-black:focus {
 62 |     color: #fff; }
 63 | 
 64 | .btn-ht-outline-black {
 65 |   color: #303030;
 66 |   border-color: #303030; }
 67 |   .btn-ht-outline-black:hover {
 68 |     color: #fff;
 69 |     background-color: #303030;
 70 |     border-color: #303030; }
 71 |   .btn-ht-outline-black:focus, .btn-ht-outline-black.focus {
 72 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5);
 73 |             box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); }
 74 |   .btn-ht-outline-black.disabled, .btn-ht-outline-black:disabled {
 75 |     color: #303030;
 76 |     background-color: transparent; }
 77 |   .btn-ht-outline-black:not(:disabled):not(.disabled):active, .btn-ht-outline-black:not(:disabled):not(.disabled).active,
 78 |   .show > .btn-ht-outline-black.dropdown-toggle {
 79 |     color: #fff;
 80 |     background-color: #303030;
 81 |     border-color: #303030; }
 82 |     .btn-ht-outline-black:not(:disabled):not(.disabled):active:focus, .btn-ht-outline-black:not(:disabled):not(.disabled).active:focus,
 83 |     .show > .btn-ht-outline-black.dropdown-toggle:focus {
 84 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5);
 85 |               box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); }
 86 | 
 87 | .btn-ht-facebook-blue {
 88 |   color: #fff;
 89 |   background-color: #4267B2;
 90 |   border-color: #4267B2; }
 91 |   .btn-ht-facebook-blue:hover {
 92 |     color: #fff;
 93 |     background-color: #385796;
 94 |     border-color: #34518d; }
 95 |   .btn-ht-facebook-blue:focus, .btn-ht-facebook-blue.focus {
 96 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(94, 126, 190, 0.5);
 97 |             box-shadow: 0 0 0 0.2rem rgba(94, 126, 190, 0.5); }
 98 |   .btn-ht-facebook-blue.disabled, .btn-ht-facebook-blue:disabled {
 99 |     color: #fff;
100 |     background-color: #4267B2;
101 |     border-color: #4267B2; }
102 |   .btn-ht-facebook-blue:not(:disabled):not(.disabled):active, .btn-ht-facebook-blue:not(:disabled):not(.disabled).active,
103 |   .show > .btn-ht-facebook-blue.dropdown-toggle {
104 |     color: #fff;
105 |     background-color: #34518d;
106 |     border-color: #314c83; }
107 |     .btn-ht-facebook-blue:not(:disabled):not(.disabled):active:focus, .btn-ht-facebook-blue:not(:disabled):not(.disabled).active:focus,
108 |     .show > .btn-ht-facebook-blue.dropdown-toggle:focus {
109 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(94, 126, 190, 0.5);
110 |               box-shadow: 0 0 0 0.2rem rgba(94, 126, 190, 0.5); }
111 |   .btn-ht-facebook-blue:active, .btn-ht-facebook-blue:focus {
112 |     color: #fff; }
113 | 
114 | .btn-ht-github-grey {
115 |   color: #fff;
116 |   background-color: #5a5a5a;
117 |   border-color: #5a5a5a; }
118 |   .btn-ht-github-grey:hover {
119 |     color: #fff;
120 |     background-color: #474747;
121 |     border-color: #414141; }
122 |   .btn-ht-github-grey:focus, .btn-ht-github-grey.focus {
123 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(115, 115, 115, 0.5);
124 |             box-shadow: 0 0 0 0.2rem rgba(115, 115, 115, 0.5); }
125 |   .btn-ht-github-grey.disabled, .btn-ht-github-grey:disabled {
126 |     color: #fff;
127 |     background-color: #5a5a5a;
128 |     border-color: #5a5a5a; }
129 |   .btn-ht-github-grey:not(:disabled):not(.disabled):active, .btn-ht-github-grey:not(:disabled):not(.disabled).active,
130 |   .show > .btn-ht-github-grey.dropdown-toggle {
131 |     color: #fff;
132 |     background-color: #414141;
133 |     border-color: #3a3a3a; }
134 |     .btn-ht-github-grey:not(:disabled):not(.disabled):active:focus, .btn-ht-github-grey:not(:disabled):not(.disabled).active:focus,
135 |     .show > .btn-ht-github-grey.dropdown-toggle:focus {
136 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(115, 115, 115, 0.5);
137 |               box-shadow: 0 0 0 0.2rem rgba(115, 115, 115, 0.5); }
138 |   .btn-ht-github-grey:active, .btn-ht-github-grey:focus {
139 |     color: #fff; }
140 | 
141 | .btn-ht-twitter-blue {
142 |   color: #fff;
143 |   background-color: #38A6EE;
144 |   border-color: #38A6EE; }
145 |   .btn-ht-twitter-blue:hover {
146 |     color: #fff;
147 |     background-color: #1596eb;
148 |     border-color: #138fe0; }
149 |   .btn-ht-twitter-blue:focus, .btn-ht-twitter-blue.focus {
150 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(86, 179, 241, 0.5);
151 |             box-shadow: 0 0 0 0.2rem rgba(86, 179, 241, 0.5); }
152 |   .btn-ht-twitter-blue.disabled, .btn-ht-twitter-blue:disabled {
153 |     color: #fff;
154 |     background-color: #38A6EE;
155 |     border-color: #38A6EE; }
156 |   .btn-ht-twitter-blue:not(:disabled):not(.disabled):active, .btn-ht-twitter-blue:not(:disabled):not(.disabled).active,
157 |   .show > .btn-ht-twitter-blue.dropdown-toggle {
158 |     color: #fff;
159 |     background-color: #138fe0;
160 |     border-color: #1287d4; }
161 |     .btn-ht-twitter-blue:not(:disabled):not(.disabled):active:focus, .btn-ht-twitter-blue:not(:disabled):not(.disabled).active:focus,
162 |     .show > .btn-ht-twitter-blue.dropdown-toggle:focus {
163 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(86, 179, 241, 0.5);
164 |               box-shadow: 0 0 0 0.2rem rgba(86, 179, 241, 0.5); }
165 |   .btn-ht-twitter-blue:active, .btn-ht-twitter-blue:focus {
166 |     color: #fff; }
167 | 
168 | .share-buttons, .ht-blog-share-buttons {
169 |   line-height: 31px; }
170 | 
171 | .btn-ht-md {
172 |   padding: 11px 20px;
173 |   font-size: 1.125rem;
174 |   line-height: 22px;
175 |   border-radius: 0.25rem; }
176 |   .btn-ht-md .fa {
177 |     font-size: 18px;
178 |     margin-right: 10px;
179 |     top: 0px; }
180 | 
181 | .btn-ht-xs {
182 |   padding: 6px 8px;
183 |   font-size: 0.875rem;
184 |   line-height: 14px;
185 |   border-radius: 0.25rem; }
186 | 
187 | .btn-ht-icon .fa {
188 |   font-size: 16px;
189 |   margin-right: 10px;
190 |   top: 0px; }
191 | 
192 | .ht-btn-cta {
193 |   margin: 6px 0;
194 |   padding: 13px 46px; }
195 | 
196 | .ht-license-buy-dev,
197 | .ht-license-buy-ent {
198 |   min-width: 238px; }
199 |   .ht-demo-bar .ht-license-buy-dev, .ht-demo-bar
200 |   .ht-license-buy-ent {
201 |     min-width: 0; }
202 | 
203 | .ht-btn-outline-secondary:hover {
204 |   background-color: rgba(255, 255, 255, 0.1); }
205 | 
206 | .ht-btn-outline-secondary:focus {
207 |   color: #fff; }
208 | 
209 | /*
210 |   Five-color theme from a single blue hue.
211 | */
212 | .hljs {
213 |   display: block;
214 |   overflow-x: auto;
215 |   padding: 0.5em;
216 |   background: #eaeef3; }
217 | 
218 | .hljs {
219 |   color: #00193a; }
220 | 
221 | .hljs-keyword,
222 | .hljs-selector-tag,
223 | .hljs-title,
224 | .hljs-section,
225 | .hljs-doctag,
226 | .hljs-name,
227 | .hljs-strong {
228 |   font-weight: bold; }
229 | 
230 | .hljs-comment {
231 |   color: #738191; }
232 | 
233 | .hljs-string,
234 | .hljs-title,
235 | .hljs-section,
236 | .hljs-built_in,
237 | .hljs-literal,
238 | .hljs-type,
239 | .hljs-addition,
240 | .hljs-tag,
241 | .hljs-quote,
242 | .hljs-name,
243 | .hljs-selector-id,
244 | .hljs-selector-class {
245 |   color: #0048ab; }
246 | 
247 | .hljs-meta,
248 | .hljs-subst,
249 | .hljs-symbol,
250 | .hljs-regexp,
251 | .hljs-attribute,
252 | .hljs-deletion,
253 | .hljs-variable,
254 | .hljs-template-variable,
255 | .hljs-link,
256 | .hljs-bullet {
257 |   color: #4c81c9; }
258 | 
259 | .hljs-emphasis {
260 |   font-style: italic; }
261 | 
262 | .ht-tm-message-wrapper {
263 |   min-height: 80px; }
264 | 
265 | .ht-tm-message {
266 |   opacity: 0;
267 |   visibility: hidden;
268 |   padding: 12px;
269 |   text-align: center;
270 |   min-height: 48px;
271 |   background: #3A3F49;
272 |   color: white; }
273 |   .ht-tm-message .ht-tm-message-inspector {
274 |     display: none; }
275 |   .ht-tm-message.ht-tm-message-fixed {
276 |     position: fixed;
277 |     z-index: 999;
278 |     top: 0;
279 |     left: 0;
280 |     right: 0; }
281 |     @media (max-width: 767.98px) {
282 |       .ht-tm-message.ht-tm-message-fixed {
283 |         top: 0;
284 |         padding-right: 60px; }
285 |         .ht-tm-message.ht-tm-message-fixed .ht-tm-message-menu-placeholder {
286 |           width: 50px;
287 |           position: absolute;
288 |           right: 0;
289 |           top: 0;
290 |           height: 100%; } }
291 |   .ht-tm-message a {
292 |     color: white;
293 |     text-decoration: underline; }
294 |   .ht-tm-wrapper-pickeron .ht-tm-message {
295 |     opacity: 1;
296 |     visibility: visible; }
297 |     .ht-tm-wrapper-pickeron .ht-tm-message .ht-tm-message-picker {
298 |       display: block; }
299 |     .ht-tm-wrapper-pickeron .ht-tm-message .ht-tm-message-inspector {
300 |       display: none; }
301 |   .ht-tm-wrapper-inspectoron .ht-tm-message {
302 |     opacity: 1;
303 |     visibility: visible; }
304 |     .ht-tm-wrapper-inspectoron .ht-tm-message .ht-tm-message-picker {
305 |       display: none; }
306 |     .ht-tm-wrapper-inspectoron .ht-tm-message .ht-tm-message-inspector {
307 |       display: block; }
308 | 
309 | .ht-tm-codemodal-dialog {
310 |   max-width: 95%;
311 |   z-index: 1061; }
312 |   @media (min-width: 1200px) {
313 |     .ht-tm-codemodal-dialog {
314 |       max-width: 1200px; } }
315 | 
316 | .ht-tm-codesample-code {
317 |   padding: 0; }
318 |   .ht-tm-codesample-code pre {
319 |     margin: 0;
320 |     border-radius: 0 0 5px 5px;
321 |     padding: 15px;
322 |     background: white; }
323 | 
324 | .ht-tm-colorpicker-btn {
325 |   width: 37px;
326 |   margin: 0 5px 5px 0;
327 |   text-align: center;
328 |   padding-left: 10px; }
329 |   .ht-tm-colorpicker-btn.btn-light {
330 |     border: 1px grey solid; }
331 | 
332 | .ht-tm-container {
333 |   margin-bottom: 120px; }
334 | 
335 | .ht-tm-componentsblock {
336 |   padding: 76px 0; }
337 |   @media (min-width: 1200px) {
338 |     .ht-tm-componentsblock {
339 |       padding: 36px 50px;
340 |       -webkit-box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
341 |               box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
342 |       margin-left: -50px;
343 |       margin-right: 26px; } }
344 |   .ht-tm-componentsblock.bg-dark .ht-tm-cat-title,
345 |   .ht-tm-componentsblock.bg-dark .ht-tm-cat-subtitle {
346 |     color: #fff; }
347 | 
348 | @media (max-width: 400px) {
349 |   .ht-tm-maincolumn {
350 |     max-width: 100%;
351 |     overflow: hidden; } }
352 | 
353 | .ht-tm-component-title {
354 |   margin-top: 100px;
355 |   margin-bottom: 60px; }
356 |   @media (max-width: 767.98px) {
357 |     .ht-tm-component-title {
358 |       margin-top: 0px;
359 |       margin-bottom: 0px;
360 |       font-size: 37px; } }
361 | 
362 | #ht-tm-toggle-sidenav-external {
363 |   display: none; }
364 |   @media (max-width: 1199px) {
365 |     #ht-tm-toggle-sidenav-external.fixed {
366 |       display: block; } }
367 | 
368 | .ht-tm-toggle-sidenav {
369 |   position: fixed;
370 |   bottom: 0;
371 |   right: 12px;
372 |   padding: 3px 6px;
373 |   background: #3b3b3b;
374 |   color: #fff;
375 |   z-index: 998; }
376 |   .ht-tm-toggle-sidenav:hover, .ht-tm-toggle-sidenav:focus, .ht-tm-toggle-sidenav:active {
377 |     color: #fff; }
378 | 
379 | .ht-tm-superspecialcardcheat {
380 |   padding-right: 19px; }
381 | 
382 | .ht-tm-header {
383 |   padding: 52px 0; }
384 | 
385 | .ht-tm-sidenav-wrapper {
386 |   position: relative; }
387 | 
388 | .ht-tm-sidenav .ht-tm-toggle-sidenav {
389 |   position: absolute;
390 |   top: 0px;
391 |   bottom: auto;
392 |   right: 12px; }
393 |   @media (min-width: 1200px) {
394 |     .ht-tm-sidenav .ht-tm-toggle-sidenav {
395 |       display: none; } }
396 | 
397 | @media (max-width: 1199px) {
398 |   .ht-tm-sidenav {
399 |     background: #fff;
400 |     position: fixed;
401 |     text-align: center;
402 |     z-index: 999;
403 |     padding: 15px;
404 |     left: 0;
405 |     right: 0;
406 |     bottom: 0;
407 |     top: auto;
408 |     -webkit-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
409 |             box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
410 |     max-width: 100%;
411 |     display: none; }
412 |     .ht-tm-sidenav.fixed {
413 |       display: block; } }
414 | 
415 | @media (min-width: 1200px) {
416 |   .ht-tm-sidenav {
417 |     width: 255px;
418 |     display: -webkit-box !important;
419 |     display: -webkit-flex !important;
420 |     display: -ms-flexbox !important;
421 |     display: flex !important;
422 |     -webkit-box-orient: vertical;
423 |     -webkit-box-direction: normal;
424 |     -webkit-flex-flow: column nowrap;
425 |         -ms-flex-flow: column nowrap;
426 |             flex-flow: column nowrap; }
427 |     .ht-tm-sidenav div {
428 |       -webkit-flex-shrink: 0;
429 |           -ms-flex-negative: 0;
430 |               flex-shrink: 0; } }
431 | 
432 | @media (min-width: 1200px) {
433 |   .ht-tm-sidenav {
434 |     position: absolute; } }
435 |   @media (min-width: 1200px) and (max-height: 645px) {
436 |     .ht-tm-sidenav {
437 |       overflow: auto; } }
438 | 
439 | @media (min-width: 1200px) {
440 |     .ht-tm-sidenav.fixed {
441 |       max-height: 100%;
442 |       position: fixed;
443 |       padding-top: 110px;
444 |       top: 0; }
445 |     .ht-tm-sidenav.bottom {
446 |       bottom: 0;
447 |       top: auto; } }
448 | 
449 | @media (max-width: 500px) {
450 |   .ht-tm-sidenav .btn {
451 |     padding-top: 2px;
452 |     padding-bottom: 2px; } }
453 | 
454 | .ht-tm-sidenav .ht-blog-share-buttons {
455 |   line-height: 33px;
456 |   text-align: left; }
457 |   @media (max-width: 1199px) {
458 |     .ht-tm-sidenav .ht-blog-share-buttons {
459 |       display: none; } }
460 | 
461 | .ht-tm-sidenav-title {
462 |   display: -webkit-box;
463 |   display: -webkit-flex;
464 |   display: -ms-flexbox;
465 |   display: flex;
466 |   -webkit-box-orient: horizontal;
467 |   -webkit-box-direction: normal;
468 |   -webkit-flex-flow: row nowrap;
469 |       -ms-flex-flow: row nowrap;
470 |           flex-flow: row nowrap;
471 |   font-size: 14px;
472 |   margin-bottom: 9px;
473 |   -webkit-box-align: center;
474 |   -webkit-align-items: center;
475 |       -ms-flex-align: center;
476 |           align-items: center; }
477 |   @media (max-width: 1199px) {
478 |     .ht-tm-sidenav-title {
479 |       display: none; } }
480 | 
481 | .ht-tm-sidenav-title-text {
482 |   display: block; }
483 | 
484 | .ht-tm-sidenav-title-bar {
485 |   display: block;
486 |   min-width: 20px;
487 |   margin-left: 10px;
488 |   -webkit-box-flex: 2;
489 |   -webkit-flex-grow: 2;
490 |       -ms-flex-positive: 2;
491 |           flex-grow: 2;
492 |   height: 1px;
493 |   background: #c6c6c6; }
494 | 
495 | .ht-tm-sidenav-title-bar-help {
496 |   margin-left: 10px;
497 |   color: rgba(124, 124, 124, 0.63); }
498 | 
499 | .ht-tm-sidenav-nav {
500 |   display: -webkit-box;
501 |   display: -webkit-flex;
502 |   display: -ms-flexbox;
503 |   display: flex;
504 |   -webkit-box-orient: vertical;
505 |   -webkit-box-direction: normal;
506 |   -webkit-flex-flow: column wrap;
507 |       -ms-flex-flow: column wrap;
508 |           flex-flow: column wrap;
509 |   max-height: 197px; }
510 |   @media (max-width: 1199px) {
511 |     .ht-tm-sidenav-nav {
512 |       display: none; } }
513 |   .ht-tm-sidenav-nav a {
514 |     color: #555; }
515 |     .ht-tm-sidenav-nav a .fas,
516 |     .ht-tm-sidenav-nav a .fab {
517 |       margin-right: 4px; }
518 | 
519 | @media (min-width: 1200px) {
520 |   .ht-tm-sidenav-mainbuttons {
521 |     display: -webkit-box;
522 |     display: -webkit-flex;
523 |     display: -ms-flexbox;
524 |     display: flex;
525 |     -webkit-box-orient: horizontal;
526 |     -webkit-box-direction: normal;
527 |     -webkit-flex-flow: row wrap;
528 |         -ms-flex-flow: row wrap;
529 |             flex-flow: row wrap; }
530 |     .ht-tm-sidenav-mainbuttons a {
531 |       -webkit-box-flex: 1;
532 |       -webkit-flex-grow: 1;
533 |           -ms-flex-positive: 1;
534 |               flex-grow: 1; } }
535 | 
536 | @media (min-width: 1200px) {
537 |   .ht-tm-sidenav-modifiers {
538 |     display: -webkit-box;
539 |     display: -webkit-flex;
540 |     display: -ms-flexbox;
541 |     display: flex; } }
542 | 
543 | @media (min-width: 1200px) {
544 |   .ht-tm-sidenav-colorpicker {
545 |     display: -webkit-box;
546 |     display: -webkit-flex;
547 |     display: -ms-flexbox;
548 |     display: flex;
549 |     -webkit-box-orient: horizontal;
550 |     -webkit-box-direction: normal;
551 |     -webkit-flex-flow: row wrap;
552 |         -ms-flex-flow: row wrap;
553 |             flex-flow: row wrap;
554 |     width: 126px; } }
555 | 
556 | @media (max-width: 427px) {
557 |   .ht-tm-sidenav-colorpicker {
558 |     max-width: 220px; } }
559 | 
560 | @media (min-width: 1200px) {
561 |   .ht-tm-sidenav-size {
562 |     margin-left: auto;
563 |     display: -webkit-box;
564 |     display: -webkit-flex;
565 |     display: -ms-flexbox;
566 |     display: flex;
567 |     -webkit-box-align: stretch;
568 |     -webkit-align-items: stretch;
569 |         -ms-flex-align: stretch;
570 |             align-items: stretch;
571 |     -webkit-box-orient: vertical;
572 |     -webkit-box-direction: normal;
573 |     -webkit-flex-flow: column;
574 |         -ms-flex-flow: column;
575 |             flex-flow: column;
576 |     width: 113px; } }
577 | 
578 | .ht-tm-sidenav-size .btn {
579 |   margin-bottom: 5px; }
580 |   @media (min-width: 1200px) {
581 |     .ht-tm-sidenav-size .btn {
582 |       text-align: left;
583 |       display: -webkit-box;
584 |       display: -webkit-flex;
585 |       display: -ms-flexbox;
586 |       display: flex;
587 |       -webkit-box-align: center;
588 |       -webkit-align-items: center;
589 |           -ms-flex-align: center;
590 |               align-items: center; } }
591 | 
592 | .ht-tm-sidenav-size .fas,
593 | .ht-tm-sidenav-size .fab {
594 |   margin-left: auto;
595 |   visibility: hidden; }
596 |   @media (max-width: 1199px) {
597 |     .ht-tm-sidenav-size .fas,
598 |     .ht-tm-sidenav-size .fab {
599 |       display: none; } }
600 | 
601 | .ht-tm-sidenav-size .active-size .fas,
602 | .ht-tm-sidenav-size .active-size .fab {
603 |   visibility: visible;
604 |   display: inline-block; }
605 | 
606 | @media (max-width: 1199px) {
607 |   .ht-tm-sidenav-colorpicker,
608 |   .ht-tm-sidenav-mainbuttons,
609 |   .ht-tm-sidenav-size {
610 |     margin: 0 15px; } }
611 | 
612 | @media (max-width: 800px) {
613 |   .ht-tm-sidenav-colorpicker,
614 |   .ht-tm-sidenav-mainbuttons,
615 |   .ht-tm-sidenav-size {
616 |     margin: 0 7px; } }
617 | 
618 | @media (max-width: 1199px) {
619 |   .ht-tm-sidenav-modifiers,
620 |   .ht-tm-sidenav-mainbuttons,
621 |   .ht-tm-sidenav-colorpicker,
622 |   .ht-tm-sidenav-size {
623 |     display: inline-block; } }
624 | 
625 | @media (max-width: 767.98px) {
626 |   .ht-tm-jumbotron {
627 |     padding-left: 0;
628 |     padding-right: 0; } }
629 | 
630 | .ht-tm-element {
631 |   margin-top: 5px;
632 |   margin-bottom: 5px; }
633 | 
634 | .ht-tm-wrapper-pickeron .ht-tm-element,
635 | .ht-tm-wrapper-inspectoron .ht-tm-element {
636 |   position: relative; }
637 |   .ht-tm-wrapper-pickeron .ht-tm-element:hover,
638 |   .ht-tm-wrapper-inspectoron .ht-tm-element:hover {
639 |     position: relative; }
640 |     .ht-tm-wrapper-pickeron .ht-tm-element:hover:after,
641 |     .ht-tm-wrapper-inspectoron .ht-tm-element:hover:after {
642 |       content: '';
643 |       background: rgba(221, 47, 85, 0.7);
644 |       position: absolute;
645 |       top: -5px;
646 |       left: -5px;
647 |       right: -5px;
648 |       bottom: -5px;
649 |       z-index: 995; }
650 | 
651 | .ht-tm-element:hover:after {
652 |   content: ''; }
653 | 
654 | .ht-tm-sidenav-iconlinks {
655 |   padding: 10px 0; }
656 |   .ht-tm-sidenav-iconlinks a {
657 |     color: #3d3d3d;
658 |     width: 145px;
659 |     display: inline-block; }
660 |     .ht-tm-sidenav-iconlinks a .fas,
661 |     .ht-tm-sidenav-iconlinks a .fab {
662 |       text-align: center;
663 |       width: 44px; }
664 |     .ht-tm-sidenav-iconlinks a.ht-iconlink-smaller {
665 |       width: 90px; }
666 | 
667 | a.ht-anchor {
668 |   display: block;
669 |   position: relative;
670 |   top: -50px;
671 |   height: 1px;
672 |   visibility: hidden; }
673 | 
674 | .ht-tm-cat:first-child .ht-tm-cat-title {
675 |   margin-top: 0; }
676 | 
677 | .ht-tm-cat-title {
678 |   margin-top: 36px;
679 |   margin-bottom: 12px; }
680 | 
681 | .ht-tm-pos-relative {
682 |   position: relative; }
683 | 
684 | .ht-tm-cloud-1 {
685 |   position: absolute;
686 |   top: 144px;
687 |   right: 15%; }
688 |   @media (max-width: 991.98px) {
689 |     .ht-tm-cloud-1 {
690 |       right: 66px;
691 |       top: 66px; } }
692 |   @media (max-width: 767.98px) {
693 |     .ht-tm-cloud-1 {
694 |       display: none; } }
695 | 
696 | .ht-tm-cloud-2 {
697 |   position: absolute;
698 |   top: 250px;
699 |   left: 66px; }
700 |   @media (max-width: 1199.98px) {
701 |     .ht-tm-cloud-2 {
702 |       display: none; } }
703 | 
704 | .ht-tm-fish-1 {
705 |   position: absolute;
706 |   top: 77px;
707 |   left: 15%; }
708 |   @media (max-width: 1199.98px) {
709 |     .ht-tm-fish-1 {
710 |       left: auto;
711 |       right: 60px;
712 |       top: 30px; } }
713 | 
714 | .ht-tm-octopus-1 {
715 |   position: absolute;
716 |   top: 287px;
717 |   right: 133px; }
718 |   @media (max-width: 767.98px) {
719 |     .ht-tm-octopus-1 {
720 |       right: 33px;
721 |       bottom: 30px;
722 |       top: auto; } }
723 |   @media (max-width: 575.98px) {
724 |     .ht-tm-octopus-1 {
725 |       display: none; } }
726 | 
727 | .ht-tm-cat-subtitle {
728 |   margin-top: 24px; }
729 | 
730 | .ht-tm-codeblock {
731 |   margin: 12px 0; }
732 | 
733 | #ht-tm-copied-msg {
734 |   position: absolute;
735 |   top: -30px;
736 |   background: #3D3D3D;
737 |   color: white;
738 |   border-radius: 5px;
739 |   padding: 3px 6px;
740 |   z-index: 997; }
741 | 
742 | .radius-0 {
743 |   border-radius: 0; }
744 | 
745 | .debug-fixed {
746 |   position: absolute;
747 |   top: 0;
748 |   width: 300px;
749 |   height: 30px;
750 |   background: fuchsia; }
751 | 
752 | .debug-fixed-info {
753 |   position: fixed;
754 |   right: 0;
755 |   top: 0;
756 |   width: 200px;
757 |   height: 200px;
758 |   background: yellow; }
759 | 
760 | .ht-tm-needs-darkness {
761 |   padding: 10px 0;
762 |   background: transparent; }
763 |   @media (min-width: 576px) {
764 |     .ht-tm-needs-darkness {
765 |       padding: 10px 50px;
766 |       margin-left: -50px;
767 |       margin-right: -50px; } }
768 |   .ht-tm-needs-darkness.ht-tm-darkness {
769 |     background: #1b1e21; }
770 |     @media (max-width: 575.98px) {
771 |       .ht-tm-needs-darkness.ht-tm-darkness {
772 |         padding: 10px; } }
773 |     .ht-tm-needs-darkness.ht-tm-darkness .ht-tm-cat-subtitle {
774 |       color: #fff; }
775 | 
776 | body.ht-tm-default-theme .ht-tm-sidenav-title {
777 |   color: #646464; }
778 | 
779 | @media (max-width: 767.98px) {
780 |   body.ht-tm-default-theme .ht-tm-header .display-3 {
781 |     font-size: 46px; } }
782 | 
783 | @media (max-width: 467px) {
784 |   body.ht-tm-default-theme .ht-tm-header .display-3 {
785 |     font-size: 33px; } }
786 | 
787 | body.ht-tm-default-theme .ht-tm-btn-white {
788 |   color: #212529;
789 |   background-color: #fff;
790 |   border-color: #fff; }
791 |   body.ht-tm-default-theme .ht-tm-btn-white:hover {
792 |     color: #212529;
793 |     background-color: #ececec;
794 |     border-color: #e6e6e6; }
795 |   body.ht-tm-default-theme .ht-tm-btn-white:focus, body.ht-tm-default-theme .ht-tm-btn-white.focus {
796 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
797 |             box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
798 |   body.ht-tm-default-theme .ht-tm-btn-white.disabled, body.ht-tm-default-theme .ht-tm-btn-white:disabled {
799 |     color: #212529;
800 |     background-color: #fff;
801 |     border-color: #fff; }
802 |   body.ht-tm-default-theme .ht-tm-btn-white:not(:disabled):not(.disabled):active, body.ht-tm-default-theme .ht-tm-btn-white:not(:disabled):not(.disabled).active,
803 |   .show > body.ht-tm-default-theme .ht-tm-btn-white.dropdown-toggle {
804 |     color: #212529;
805 |     background-color: #e6e6e6;
806 |     border-color: #dfdfdf; }
807 |     body.ht-tm-default-theme .ht-tm-btn-white:not(:disabled):not(.disabled):active:focus, body.ht-tm-default-theme .ht-tm-btn-white:not(:disabled):not(.disabled).active:focus,
808 |     .show > body.ht-tm-default-theme .ht-tm-btn-white.dropdown-toggle:focus {
809 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5);
810 |               box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }
811 | 
812 | body.ht-tm-default-theme .ht-tm-btn-outline-white {
813 |   color: #fff;
814 |   border-color: #fff; }
815 |   body.ht-tm-default-theme .ht-tm-btn-outline-white:hover {
816 |     color: #212529;
817 |     background-color: #fff;
818 |     border-color: #fff; }
819 |   body.ht-tm-default-theme .ht-tm-btn-outline-white:focus, body.ht-tm-default-theme .ht-tm-btn-outline-white.focus {
820 |     -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
821 |             box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
822 |   body.ht-tm-default-theme .ht-tm-btn-outline-white.disabled, body.ht-tm-default-theme .ht-tm-btn-outline-white:disabled {
823 |     color: #fff;
824 |     background-color: transparent; }
825 |   body.ht-tm-default-theme .ht-tm-btn-outline-white:not(:disabled):not(.disabled):active, body.ht-tm-default-theme .ht-tm-btn-outline-white:not(:disabled):not(.disabled).active,
826 |   .show > body.ht-tm-default-theme .ht-tm-btn-outline-white.dropdown-toggle {
827 |     color: #212529;
828 |     background-color: #fff;
829 |     border-color: #fff; }
830 |     body.ht-tm-default-theme .ht-tm-btn-outline-white:not(:disabled):not(.disabled):active:focus, body.ht-tm-default-theme .ht-tm-btn-outline-white:not(:disabled):not(.disabled).active:focus,
831 |     .show > body.ht-tm-default-theme .ht-tm-btn-outline-white.dropdown-toggle:focus {
832 |       -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
833 |               box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
834 |   body.ht-tm-default-theme .ht-tm-btn-outline-white:hover, body.ht-tm-default-theme .ht-tm-btn-outline-white:active {
835 |     color: #007bff !important; }
836 | 
837 | body.ht-tm-vibrant-sea .ht-tm-darkness {
838 |   background-color: #021127; }
839 | 
840 | body.ht-tm-vibrant-sea .ht-blog-share-buttons {
841 |   line-height: 28px; }
842 | 
843 | body.ht-tm-neon-glow .ht-tm-sidenav {
844 |   background: #0c0d16; }
845 | 
846 | body.ht-tm-neon-glow .hljs {
847 |   color: #b1b5ff; }
848 | 
849 | body.ht-tm-neon-glow .hljs-comment {
850 |   color: #a0b5c6; }
851 | 
852 | body.ht-tm-neon-glow .hljs-string,
853 | body.ht-tm-neon-glow .hljs-title,
854 | body.ht-tm-neon-glow .hljs-section,
855 | body.ht-tm-neon-glow .hljs-built_in,
856 | body.ht-tm-neon-glow .hljs-literal,
857 | body.ht-tm-neon-glow .hljs-type,
858 | body.ht-tm-neon-glow .hljs-addition,
859 | body.ht-tm-neon-glow .hljs-tag,
860 | body.ht-tm-neon-glow .hljs-quote,
861 | body.ht-tm-neon-glow .hljs-name,
862 | body.ht-tm-neon-glow .hljs-selector-id,
863 | body.ht-tm-neon-glow .hljs-selector-class {
864 |   color: #b1e6b1; }
865 | 
866 | body.ht-tm-neon-glow .hljs-meta,
867 | body.ht-tm-neon-glow .hljs-subst,
868 | body.ht-tm-neon-glow .hljs-symbol,
869 | body.ht-tm-neon-glow .hljs-regexp,
870 | body.ht-tm-neon-glow .hljs-attribute,
871 | body.ht-tm-neon-glow .hljs-deletion,
872 | body.ht-tm-neon-glow .hljs-variable,
873 | body.ht-tm-neon-glow .hljs-template-variable,
874 | body.ht-tm-neon-glow .hljs-link,
875 | body.ht-tm-neon-glow .hljs-bullet {
876 |   color: #efe9a1; }
877 | 
878 | body.ht-tm-neon-glow .ht-tm-codesample-code pre {
879 |   background: #32334a; }
880 | 
881 | body.ht-tm-neon-glow .ht-blog-share-buttons {
882 |   line-height: 28px; }
883 | 
884 | body.ht-tm-neon-glow .ht-tm-sidenav-nav a {
885 |   color: #cccccc; }
886 | 
887 | body.ht-tm-neon-glow .ht-tm-componentsblock {
888 |   -webkit-box-shadow: none;
889 |           box-shadow: none; }
890 | 
891 | body.ht-tm-neon-glow .ht-tm-needs-darkness.ht-tm-darkness {
892 |   background: #c3dbe6; }
893 |   body.ht-tm-neon-glow .ht-tm-needs-darkness.ht-tm-darkness .ht-tm-cat-subtitle {
894 |     color: #0C0D16; }
895 | 
896 | body.ht-tm-neon-glow .ht-navbar-wrapper {
897 |   background: #0C0D16; }
898 | 
899 | .text-underline {
900 |   text-decoration: underline; }
901 | 
902 | .ht-neonglow-github-link {
903 |   color: #6f6974;
904 |   text-decoration: underline; }
905 |   .ht-neonglow-github-link:hover, .ht-neonglow-github-link:focus, .ht-neonglow-github-link:active {
906 |     color: #6f6974; }
907 | 
908 | .ht-tm-neon-glow #theme-download-modal .modal-dialog {
909 |   max-width: 650px; }
910 | 
911 | .ht-tm-hello-world .ht-tm-jumbotron {
912 |   padding: 0; }
913 | 
914 | .tm-footer {
915 |   padding: 30px;
916 |   display: -webkit-box;
917 |   display: -webkit-flex;
918 |   display: -ms-flexbox;
919 |   display: flex;
920 |   -webkit-box-align: center;
921 |   -webkit-align-items: center;
922 |       -ms-flex-align: center;
923 |           align-items: center;
924 |   -webkit-box-pack: center;
925 |   -webkit-justify-content: center;
926 |       -ms-flex-pack: center;
927 |           justify-content: center; }
928 | 
929 | @media (max-width: 767.98px) {
930 |   .ht-tm-navbar {
931 |     padding: 10px 0; } }
932 | 
933 | .ht-tm-navbar .container {
934 |   display: -webkit-box;
935 |   display: -webkit-flex;
936 |   display: -ms-flexbox;
937 |   display: flex;
938 |   -webkit-box-orient: horizontal;
939 |   -webkit-box-direction: normal;
940 |   -webkit-flex-direction: row;
941 |       -ms-flex-direction: row;
942 |           flex-direction: row;
943 |   -webkit-box-align: center;
944 |   -webkit-align-items: center;
945 |       -ms-flex-align: center;
946 |           align-items: center; }
947 | 
948 | .ht-tm-navbar-left {
949 |   -webkit-box-align: baseline;
950 |   -webkit-align-items: baseline;
951 |       -ms-flex-align: baseline;
952 |           align-items: baseline;
953 |   display: -webkit-box;
954 |   display: -webkit-flex;
955 |   display: -ms-flexbox;
956 |   display: flex;
957 |   -webkit-box-orient: horizontal;
958 |   -webkit-box-direction: normal;
959 |   -webkit-flex-direction: row;
960 |       -ms-flex-direction: row;
961 |           flex-direction: row; }
962 |   @media (max-width: 767.98px) {
963 |     .ht-tm-navbar-left {
964 |       -webkit-box-orient: vertical;
965 |       -webkit-box-direction: normal;
966 |       -webkit-flex-direction: column;
967 |           -ms-flex-direction: column;
968 |               flex-direction: column; } }
969 | 
970 | .ht-tm-nav {
971 |   margin-left: 20px; }
972 |   .ht-tm-nav a {
973 |     display: inline-block;
974 |     padding: 20px 10px; }
975 |   @media (max-width: 767.98px) {
976 |     .ht-tm-nav {
977 |       -webkit-box-orient: vertical;
978 |       -webkit-box-direction: normal;
979 |       -webkit-flex-direction: column;
980 |           -ms-flex-direction: column;
981 |               flex-direction: column;
982 |       display: -webkit-box;
983 |       display: -webkit-flex;
984 |       display: -ms-flexbox;
985 |       display: flex;
986 |       margin-left: 0; }
987 |       .ht-tm-nav a {
988 |         padding: 5px 0; } }
989 | 
990 | .ht-tm-navbar-bubblegum nav a {
991 |   color: #fff; }
992 | 
993 | .ht-logo-img {
994 |   vertical-align: baseline; }
995 | 
996 | .ht-tm-navbar-title {
997 |   font-size: 25px; }
998 | 


--------------------------------------------------------------------------------