Initial import
This commit is contained in:
Admin Nasledstvo
+1
@@ -0,0 +1 @@
|
||||
custom: ['https://www.buymeacoffee.com/orestbida']
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 30
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- pinned
|
||||
- enhancement
|
||||
- bug
|
||||
- documentation
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: wontfix
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed if no further activity occurs. Thank you
|
||||
for your contributions.
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: false
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 Orest Bida
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,833 @@
|
||||
<h1 align="center" style="text-align: center;">Cookie Consent</h1>
|
||||
<div align="center" style="text-align: center;">
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
[](https://github.com/orestbida/cookieconsent/releases)
|
||||
</div>
|
||||
<div align="center" style="text-align: center; max-width: 770px; margin: 0 auto;">
|
||||
|
||||
A __lightweight__ & __gdpr compliant__ cookie consent plugin written in plain javascript. An "all-in-one" solution which also allows you to write your cookie policy inside it without the need of having a dedicated page.
|
||||
|
||||
</div>
|
||||
<div style="padding-top: .6em;">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Table of contents
|
||||
1. [Key features](#key-features)
|
||||
2. [How to use](#how-to-use)
|
||||
3. [Download & CDN/NPM](#download--cdn)
|
||||
4. [Layout options & customization](#layout-options--customization)
|
||||
5. [APIs & config. parameters](#apis--configuration-parameters)
|
||||
6. [Manage third party scripts](#manage-third-party-scripts)
|
||||
7. [Configuration examples](#full-example-configurations)
|
||||
8. [How to enable/manage revisions](#how-to-enablemanage-revisions)
|
||||
9. [FAQ](#faq)
|
||||
10. [License](#license)
|
||||
|
||||
## Key features
|
||||
- __Lightweight__
|
||||
- __Cross-browser__ support (IE8+)
|
||||
- __Standalone__ (no external dependencies needed)
|
||||
- __GDPR compliant__
|
||||
- __Support for multi language__
|
||||
- __[WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics) compliant__
|
||||
- Allows you to __define different cookie categories with opt in/out toggle__
|
||||
- Allows you to __define custom cookie tables__ to specify the cookies you use
|
||||
|
||||
## How to use
|
||||
1. Download (or use via [cdn](#download--cdn)) and include the script at the bottom of `body` tag.
|
||||
```html
|
||||
<script src="<path-to-cookieconsent.js>"></script>
|
||||
```
|
||||
2. Run the plugin with your configuration parameters. **IMPORTANT**: you must provide at least the following parameters: `current_lang` and `languages`
|
||||
<br>
|
||||
<details><summary><b>Show basic example</b></summary>
|
||||
|
||||
```html
|
||||
<script defer src="<path-to-cookieconsent.js>"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
|
||||
var cookieconsent = initCookieConsent();
|
||||
|
||||
cookieconsent.run({
|
||||
current_lang : 'en',
|
||||
theme_css : '<path-to-cookieconsent.css>',
|
||||
|
||||
onAccept : function(){
|
||||
// do something ...
|
||||
},
|
||||
|
||||
languages : {
|
||||
en : {
|
||||
consent_modal : {
|
||||
title : "I use cookies",
|
||||
description : 'Your cookie consent message here',
|
||||
primary_btn: {
|
||||
text: 'Accept',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Reject',
|
||||
role : 'accept_necessary' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : 'Cookie settings',
|
||||
save_settings_btn : "Save settings",
|
||||
accept_all_btn : "Accept all",
|
||||
reject_all_btn : "Reject all", // optional, [v.2.5.0 +]
|
||||
close_btn_label: "Close",
|
||||
blocks : [
|
||||
{
|
||||
title : "Cookie usage",
|
||||
description: 'Your cookie usage disclaimer'
|
||||
},{
|
||||
title : "Strictly necessary cookies",
|
||||
description: 'Category description ... ',
|
||||
toggle : {
|
||||
value : 'necessary',
|
||||
enabled : false,
|
||||
readonly: true
|
||||
}
|
||||
},{
|
||||
title : "Analytics cookies",
|
||||
description: 'Category description ... ',
|
||||
toggle : {
|
||||
value : 'analytics',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
</summary>
|
||||
</details>
|
||||
<br>
|
||||
|
||||
For more details check out [full examples](#full-example-configurations) and [how to configure languages & cookie settings](#how-to-configure-languages--cookie-settings) sections.
|
||||
|
||||
|
||||
## Download & CDN
|
||||
You can download the [latest version](https://github.com/orestbida/cookieconsent/releases) or use it via cdn:
|
||||
|
||||
javascript :
|
||||
```html
|
||||
https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.0/dist/cookieconsent.js
|
||||
```
|
||||
|
||||
stylesheet :
|
||||
```html
|
||||
https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.0//dist/cookieconsent.css
|
||||
```
|
||||
|
||||
## NPM
|
||||
Thanks to [Till Sanders](https://github.com/tillsanders) for bringing the plugin on [npm](https://www.npmjs.com/package/vanilla-cookieconsent).
|
||||
|
||||
```
|
||||
npm i vanilla-cookieconsent
|
||||
yarn add vanilla-cookieconsent
|
||||
```
|
||||
|
||||
## Layout options & customization
|
||||
You can change the color scheme with css variables inside cookieconsent.css. You can also change some basic layout options via the `gui_options` inside the config. object; example:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...
|
||||
gui_options: {
|
||||
consent_modal : {
|
||||
layout : 'cloud', // box/cloud/bar
|
||||
position : 'bottom center', // bottom/middle/top + left/right/center
|
||||
transition: 'slide' // zoom/slide
|
||||
},
|
||||
settings_modal : {
|
||||
layout : 'box', // box/bar
|
||||
// position : 'left', // left/right
|
||||
transition: 'slide' // zoom/slide
|
||||
}
|
||||
}
|
||||
...
|
||||
});
|
||||
```
|
||||
<i>Default layout is `box` and default transition is `zoom`.</i>
|
||||
|
||||
## Manage third party scripts
|
||||
If you have `<script>` tags which you want to manage through the cookieconsent (enable based on a specific cookie category) you can do this by either moving the javascript code inside the onAccept/onChange methods and using the provided APIs below, or via `page_scripts` option:
|
||||
|
||||
1. Enable page scripts management:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...
|
||||
page_scripts: true
|
||||
...
|
||||
});
|
||||
```
|
||||
2. Disable the script tag by setting `type="text/plain"`:
|
||||
|
||||
```html
|
||||
<script type="text/plain" src="<path>/analytics.js" defer>
|
||||
```
|
||||
3. Add `data-cookiecategory` attribute:
|
||||
|
||||
```html
|
||||
<script type="text/plain" data-cookiecategory="analytics" src="<path>/analytics.js" defer>
|
||||
```
|
||||
<i>Note: data-cookiecategory must also be defined inside the config. object</i>
|
||||
|
||||
## APIs & configuration parameters
|
||||
After getting the plugin like so:
|
||||
|
||||
```javascript
|
||||
var cookieconsent = initCookieConsent();
|
||||
```
|
||||
|
||||
the following methods are available:
|
||||
|
||||
- cookieconsent`.run(<config_object>)`
|
||||
- cookieconsent`.show(<optional_delay>)`
|
||||
- cookieconsent`.hide()`
|
||||
- cookieconsent`.showSettings(<optional_delay>)`
|
||||
- cookieconsent`.hideSettings()`
|
||||
|
||||
Additional methods for an easier management of your scripts and cookie settings (expand them to see usage example):
|
||||
- <details><summary>cookieconsent<code>.accept(<accepted_categories>, <optional_rejected_categories>)</code> [v2.5.0+]</summary>
|
||||
<p>
|
||||
|
||||
- accepted_categories: `string` or `string[]`
|
||||
- rejected_categories: `string[]` - optional
|
||||
|
||||
<br>
|
||||
|
||||
Note: **all categories marked as `readonly` will ALWAYS be enabled/accepted regardless of the categories provided inside the `.accept()` API call.**
|
||||
|
||||
Examples:
|
||||
|
||||
```javascript
|
||||
cookieconsent.accept('all'); // accept all categories
|
||||
cookieconsent.accept([]); // accept none (reject all)
|
||||
cookieconsent.accept('analytics'); // accept only analytics category
|
||||
cookieconsent.accept(['cat_1', 'cat_2']); // accept only these 2 categories
|
||||
cookieconsent.accept(); // accept all currently selected categories inside modal
|
||||
|
||||
cookieconsent.accept('all', ['analytics']); // accept all except "analytics" category
|
||||
cookieconsent.accept('all', ['cat_1', 'cat_2']); // accept all except these 2 categories
|
||||
```
|
||||
|
||||
How to later reject a specific category (cookieconsent already accepted)? Same as above:
|
||||
|
||||
```javascript
|
||||
cookieconsent.accept('all', ['targeting']); // opt out of targeting category
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.allowedCategory(<category_name>)</code></summary>
|
||||
<p>
|
||||
|
||||
<b>Note:</b> there are no default cookie categories, you create them!
|
||||
|
||||
|
||||
A cookie category corresponds to the string of the <code>value</code> property inside the <code>toggle</code> object:
|
||||
|
||||
```javascript
|
||||
...
|
||||
toggle : {
|
||||
value: 'analytics', // cookie category
|
||||
enabled : false, // default status
|
||||
readonly: false // allow to enable/disable
|
||||
// reload : 'on_disable', // allows to reload page when the current cookie category is deselected
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
Example:
|
||||
```javascript
|
||||
// Check if user accepts cookie consent with analytics category enabled
|
||||
if(!cookieconsent.allowedCategory('analytics')){
|
||||
// yoo, you might want to load analytics.js ...
|
||||
};
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.validCookie(<cookie_name>)</code></summary>
|
||||
<p>
|
||||
|
||||
If cookie exists and has non empty (<code>''</code>) value => return <code>true</code>, otherwise <code>false</code>.
|
||||
|
||||
```javascript
|
||||
// Example: check if '_gid' cookie is set
|
||||
if(!cookieconsent.validCookie('_gid')){
|
||||
// yoo, _gid cookie is not set, do something ...
|
||||
};
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.eraseCookies(<cookie_names>, <optional_path>, <optional_domains>)</code> [v2.5.0+]</summary>
|
||||
<p>
|
||||
|
||||
- cookie_names: `string[]`
|
||||
- path: `string` - optional
|
||||
- domains: `string[]` - optional
|
||||
|
||||
<br>
|
||||
|
||||
Examples:
|
||||
|
||||
```javascript
|
||||
cookieconsent.eraseCookies(['cc_cookies']); // erase "cc_cookie" if it exists
|
||||
cookieconsent.eraseCookies(['cookie1', 'cookie2']); // erase these 2 cookies
|
||||
|
||||
cookieconsent.eraseCookies(['cc_cookie'], "/demo");
|
||||
cookieconsent.eraseCookies(['cc_cookie'], "/demo", [location.hostname]);
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.loadScript(<path>, <callback_function>, <optional_custom_attributes>)</code></summary>
|
||||
<p>
|
||||
|
||||
Basic example:
|
||||
|
||||
```javascript
|
||||
cookieconsent.loadScript('https://www.google-analytics.com/analytics.js', function(){
|
||||
// Script loaded, do something
|
||||
});
|
||||
```
|
||||
How to load scripts with custom attributes:
|
||||
```javascript
|
||||
cookieconsent.loadScript('https://www.google-analytics.com/analytics.js', function(){
|
||||
// Script loaded, do something
|
||||
}, [
|
||||
{name: 'id', value: 'ga_id'},
|
||||
{name: 'another-attribute', value: 'value'}
|
||||
]);
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.set(<field>, <object>)</code> [v2.6.0+]</summary>
|
||||
<p>
|
||||
|
||||
The `.set()` method allows you to set the following values:
|
||||
- **data** (used to save custom data inside the plugin's cookie)
|
||||
- **revision**
|
||||
|
||||
<br>
|
||||
|
||||
How to save custom `data`:
|
||||
```javascript
|
||||
// Set cookie's "data" field to whatever the value of the `value` prop. is
|
||||
cookieconsent.set('data', {value: {id: 21, country: "italy"}});
|
||||
|
||||
// Only add/update the specified props.
|
||||
cookieconsent.set('data', {value: {id: 22, new_prop: 'new prop value'}, mode: 'update'});
|
||||
```
|
||||
|
||||
How to enforce/set a new `revision`:
|
||||
```javascript
|
||||
// Update revision to the new value (without prompting the user)
|
||||
cookieconsent.set('revision', {value: 2});
|
||||
|
||||
// Update revision to the new value (ask consent before setting the new revision)
|
||||
cookieconsent.set('revision', {value: 2, prompt_consent: true});
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>cookieconsent<code>.get(<field>)</code> [v2.6.0+]</summary>
|
||||
<p>
|
||||
|
||||
The `.get()` method allows you to retrieve any of the fields inside the plugin's cookie:
|
||||
```javascript
|
||||
cookieconsent.get('level'); // retrieve all accepted categories (if cookie exists)
|
||||
cookieconsent.get('data'); // retrieve custom data (if cookie exists)
|
||||
cookieconsent.get('revision'); // retrieve revision number (if cookie exists)
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
|
||||
|
||||
### All available options
|
||||
Below a table which sums up all of the available options (must be passed to the .run() method).
|
||||
| Option | Type | Default | Description |
|
||||
|--------------------- |---------- |--------- |---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `autorun` | boolean | true | If enabled, show the cookie consent as soon as possible (otherwise you need to manually call the `.show()` method) |
|
||||
| `delay` | number | 0 | Number of `milliseconds` before showing the consent-modal |
|
||||
| `cookie_expiration` | number | 182 | Number of days before the cookie expires (182 days = 6 months) |
|
||||
| `cookie_path` | string | "/" | Path where the cookie will be set |
|
||||
| `cookie_domain` | string | location.hostname | Specify your domain (will be grabbed by default) or a subdomain |
|
||||
| `cookie_same_site` | string | "Lax" | SameSite attribute |
|
||||
| `use_rfc_cookie` | boolean | false | Enable if you want the value of the cookie to be rfc compliant (it's base64 encoded) |
|
||||
| `theme_css` | string | - | Specify path to the .css file |
|
||||
| `force_consent` | boolean | false | Enable if you want to block page navigation until user action (check [faq](#faq) for a proper implementation) |
|
||||
| `revision` | number | 0 | Specify this option to enable revisions. [Check below](#how-to-enablemanage-revisions) for a proper usage |
|
||||
| `current_lang` | string | - | Specify one of the languages you have defined (can also be dynamic): `'en'`, `'de'` ... |
|
||||
| `auto_language` | boolean | false | Automatically detect language based on the user's browser language, if language is not defined => use specified `current_lang` |
|
||||
| `autoclear_cookies` | boolean | false | Enable if you want to automatically delete cookies when user opts-out of a specific category inside cookie settings |
|
||||
| `page_scripts` | boolean | false | Enable if you want to easily `manage existing <script>` tags. Check [manage third party scripts](#manage-third-party-scripts) |
|
||||
| `remove_cookie_tables`| boolean | false | Enable if you want to remove the html cookie tables (but still want to make use of `autoclear_cookies`) |
|
||||
| `hide_from_bots` | boolean | false | Enable if you don't want the plugin to run when a bot/crawler is detected |
|
||||
| `gui_options` | object | - | Customization option which allows to choose layout, position and transition. Check [layout options & customization](#layout-options--customization) |
|
||||
| __`onAccept`__ | function | - | Method run `once` either when: <br> 1. The moment the cookie consent is accepted <br> 2. After each page load (if cookie consent has already been accepted) |
|
||||
| __`onChange`__ | function | - | Method run `whenever preferences are modified` (and only if cookie consent has already been accepted) |
|
||||
| `languages` | object | - | [Check below](#how-to-configure-languages--cookie-settings) for configuration
|
||||
|
||||
## Full example configurations
|
||||
- <details><summary>Configuration with gtag.js - Google Analytics</summary>
|
||||
<p>
|
||||
|
||||
How to:
|
||||
1. enable `page_scripts`
|
||||
2. set `type="text/plain"`and `data-cookiecategory="<your-category>"` to each script:
|
||||
|
||||
<br>
|
||||
|
||||
```html
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script type="text/plain" data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
|
||||
<script type="text/plain" data-cookiecategory="analytics">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){window.dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'GA_MEASUREMENT_ID');
|
||||
</script>
|
||||
|
||||
<script defer src="<path-to-cookieconsent.js>"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
// obtain cookieconsent plugin
|
||||
var cookieconsent = initCookieConsent();
|
||||
|
||||
// run plugin with config object
|
||||
cookieconsent.run({
|
||||
autorun : true,
|
||||
current_lang : 'en',
|
||||
theme_css : "<path-to-cookieconsent.css>",
|
||||
autoclear_cookies : true,
|
||||
page_scripts: true,
|
||||
|
||||
onAccept: function(cookie){
|
||||
// ... cookieconsent accepted
|
||||
},
|
||||
|
||||
onChange: function(cookie, changed_preferences){
|
||||
// ... cookieconsent preferences were changed
|
||||
},
|
||||
|
||||
languages : {
|
||||
en : {
|
||||
consent_modal : {
|
||||
title : "I use cookies",
|
||||
description : 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only upon approval. <a aria-label="Cookie policy" class="cc-link" href="#">Read more</a>',
|
||||
primary_btn: {
|
||||
text: 'Accept',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Settings',
|
||||
role : 'settings' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : 'Cookie preferences',
|
||||
save_settings_btn : "Save settings",
|
||||
accept_all_btn : "Accept all",
|
||||
reject_all_btn : "Reject all", // optional, [v.2.5.0 +]
|
||||
cookie_table_headers : [
|
||||
{col1: "Name" },
|
||||
{col2: "Domain" },
|
||||
{col3: "Expiration" },
|
||||
{col4: "Description" },
|
||||
{col5: "Type" }
|
||||
],
|
||||
blocks : [
|
||||
{
|
||||
title : "Cookie usage",
|
||||
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.'
|
||||
},{
|
||||
title : "Strictly necessary cookies",
|
||||
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly.',
|
||||
toggle : {
|
||||
value : 'necessary',
|
||||
enabled : true,
|
||||
readonly: true
|
||||
}
|
||||
},{
|
||||
title : "Analytics cookies",
|
||||
description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you.',
|
||||
toggle : {
|
||||
value : 'analytics',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_ga',
|
||||
col2: 'google.com',
|
||||
col3: '2 years',
|
||||
col4: 'description ...' ,
|
||||
col5: 'Permanent cookie',
|
||||
is_regex: true
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'google.com',
|
||||
col3: '1 day',
|
||||
col4: 'description ...' ,
|
||||
col5: 'Permanent cookie'
|
||||
}
|
||||
]
|
||||
},{
|
||||
title : "More information",
|
||||
description: 'For any queries in relation to my policy on cookies and your choices, please <a class="cc-link" href="#yourwebsite">contact me</a>.',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- More to be added ...
|
||||
|
||||
### How to configure languages & cookie settings
|
||||
Languages is an object which basically holds all of the text/html of your cookie modals in different languages. In here you can define `cookie categories`, `cookie tables`, `opt-in/out toggle` for each category and more. For each language, a `consent_modal` object and a `settings_modal` object must be configured.
|
||||
|
||||
<details><summary>Example with <b>multiple languages</b> ('en' and 'it')</summary>
|
||||
<p>
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...,
|
||||
languages : {
|
||||
'en' : {
|
||||
consent_modal : {
|
||||
title : "Title here ...",
|
||||
description : 'Description here ...',
|
||||
primary_btn: {
|
||||
text: 'Accept',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Settings',
|
||||
role : 'settings' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : 'Cookie preferences ...',
|
||||
save_settings_btn : "Save settings",
|
||||
accept_all_btn : "Accept all",
|
||||
blocks : [
|
||||
{
|
||||
title : "First block title ...",
|
||||
description: 'First block description ...'
|
||||
},{
|
||||
title : "Second block title ...",
|
||||
description: 'Second block description ...',
|
||||
toggle : {
|
||||
value : 'my_category1',
|
||||
enabled : true,
|
||||
readonly: true
|
||||
}
|
||||
},{
|
||||
title : "Third block title ...",
|
||||
description: 'Third block description ...',
|
||||
toggle : {
|
||||
value : 'my_category2',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
'it' : {
|
||||
consent_modal : {
|
||||
title : "Title in italian here ...",
|
||||
description : 'Description in italian here ...',
|
||||
primary_btn: {
|
||||
text: 'Accept in italian',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Settings',
|
||||
role : 'settings' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : 'Cookie preferences ...',
|
||||
save_settings_btn : "Save settings in italian",
|
||||
accept_all_btn : "Accept all",
|
||||
blocks : [
|
||||
{
|
||||
title : "First block title in italian ...",
|
||||
description: 'First block description in italian ...'
|
||||
},{
|
||||
title : "Second block title in italian ...",
|
||||
description: 'Second block description in italian...',
|
||||
toggle : {
|
||||
value : 'my_category1',
|
||||
enabled : true,
|
||||
readonly: true
|
||||
}
|
||||
},{
|
||||
title : "Third block title in italian ...",
|
||||
description: 'Third block description in italian...',
|
||||
toggle : {
|
||||
value : 'my_category2',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details><summary>Example with <b>custom cookie table</b></summary>
|
||||
<p>
|
||||
|
||||
You can create tables with a custom number of columns to explain what each cookie does.
|
||||
|
||||
**NOTE**: If you want to also use `autoclear_cookie`, make sure the first column of the cookie table contains the name of the cookie.
|
||||
|
||||
[Check demo app.js](demo/app.js) which has a full example with cookie table.
|
||||
|
||||
</p>
|
||||
</details>
|
||||
|
||||
## How to enable/manage revisions
|
||||
Note:
|
||||
- default revision number is 0
|
||||
- if existing revision number is different from the one you just specified => show consent modal
|
||||
|
||||
1. Enable revisions by specifying a valid `revision` parameter:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...,
|
||||
revision: 1,
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
2. Set a valid `revision_message` parameter (optional) inside `consent_modal`, and put the following placeholder `{{revision_message}}` somewhere inside `description`:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...,
|
||||
revision: 1,
|
||||
...,
|
||||
languages : {
|
||||
en : {
|
||||
consent_modal : {
|
||||
...,
|
||||
description: "Usual description ... {{revision_message}}",
|
||||
revision_message: "<br> Dude, my terms have changed. Sorry for bothering you again!",
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
## FAQ
|
||||
- <details><summary>How to enable dark-mode</summary>
|
||||
<p>
|
||||
|
||||
Either manually add the following class `c_darkmode` to the body/html tag, or toggle it via javascript:
|
||||
```javascript
|
||||
document.body.classList.toggle('c_darkmode');
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>How to add link/button to open cookie settings</summary>
|
||||
<p>
|
||||
|
||||
Create a link (or button) with `data-cc="c-settings"` attribute:
|
||||
```javascript
|
||||
<a href="javascript:void(0);" aria-label="View cookie settings" data-cc="c-settings">Cookie Settings</a>
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>How to integrate with my multi-language website</summary>
|
||||
<p>
|
||||
|
||||
If you have multiple versions of your html page, each with a different <html <b>lang="..."</b> > attribute, you can grab this value using:
|
||||
|
||||
```javascript
|
||||
document.documentElement.getAttribute('lang');
|
||||
```
|
||||
|
||||
and then set it as `current_lang` value like this:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...
|
||||
current_lang : document.documentElement.getAttribute('lang'),
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
**Note**: make sure that the lang attribute's value format (example: 'en' => 2 characters) is identical to the ones you defined. If you have 'en-US' as lang attribute, make sure to also specify 'en-US' (and not just 'en') in the config. parameters.
|
||||
|
||||
</p>
|
||||
</details>
|
||||
|
||||
- <details><summary>How to load scripts after a specific cookie category has been accepted</summary>
|
||||
<p>
|
||||
|
||||
Suppose you have a `analytics.js` file you want to load after the `analytics` category has been accepted:
|
||||
- <details><summary>Method 1 (recommended)</summary>
|
||||
<p>
|
||||
|
||||
1. enable `page_scripts`:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
..,
|
||||
page_scripts: true,
|
||||
...
|
||||
});
|
||||
```
|
||||
2. add a `<script>` tag with the following attributes: `type="text/plain"` and `data-cookiecategory="<category>"`
|
||||
|
||||
```html
|
||||
<script type="text/plain" data-cookiecategory="analytics" src="<path-to-analytics.js"></script>
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>Method 2</summary>
|
||||
<p>
|
||||
|
||||
Load script using the `.loadScript()` method inside the `onAccept` method:
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
..,
|
||||
onAccept: function(){
|
||||
if(cookieconsent.allowedCategory('analytics')){
|
||||
cookieconsent.loadScript('<path-to-analytics.js', function(){
|
||||
// script loaded ...
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
</p>
|
||||
</details>
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>How to autoload the .css file</summary>
|
||||
<p id="autoload-css">
|
||||
|
||||
You need to set `theme_css` to a valid path.
|
||||
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...
|
||||
theme_css : "../src/cookieconsent.css",
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>Make consent required (block page navigation until action)</summary>
|
||||
<p>
|
||||
|
||||
This is a css only solution:
|
||||
|
||||
1. enable `force_consent` option:
|
||||
```javascript
|
||||
cookieconsent.run({
|
||||
...
|
||||
force_consent : true,
|
||||
...
|
||||
});
|
||||
```
|
||||
2. That should do it. If you want to remove the weird horizontal jump (due to the scrollbar disappearing) you can add the following style **inside the head tag** of your page:
|
||||
```html
|
||||
<style>
|
||||
html,
|
||||
body{
|
||||
height: auto!important;
|
||||
width: 100vw!important;
|
||||
overflow-x: hidden!important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
For a full example check the <a href="demo/index2.html">second demo</a>.
|
||||
</p>
|
||||
</details>
|
||||
- <details><summary>How to create custom cookie tables</summary>
|
||||
<p>
|
||||
|
||||
- **Cookie tables are defined by you, that is you choose how many columns and what their naming will be**
|
||||
- **Make sure that the first column of the table contains the name of the cookie for <code>autoclear_cookie</code> to work properly**
|
||||
<br>
|
||||
|
||||
1. Specify the table structure via the `cookie_table_headers` property inside `settings_modal` object:
|
||||
|
||||
Example with 3 columns:
|
||||
|
||||
```javascript
|
||||
...
|
||||
cookie_table_headers : [
|
||||
{col1: "Name" },
|
||||
{col2: "Source" },
|
||||
{col3: "Description" },
|
||||
]
|
||||
...
|
||||
```
|
||||
|
||||
2. Now you can create a `cookie_table` array of objects:
|
||||
|
||||
```javascript
|
||||
...
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '_ga',
|
||||
col2: 'google.com',
|
||||
col3: 'description ..',
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'google.com',
|
||||
col3: 'description ..',
|
||||
}
|
||||
]
|
||||
...
|
||||
```
|
||||
|
||||
**Check the examples above for a valid implementation.**
|
||||
</p>
|
||||
</details>
|
||||
## License
|
||||
Distributed under the MIT License. See [LICENSE](https://github.com/orestbida/cookieconsent/blob/master/LICENSE) for more information.
|
||||
@@ -0,0 +1,220 @@
|
||||
|
||||
// obtain cookieconsent plugin
|
||||
var cc = initCookieConsent();
|
||||
|
||||
// microsoft logo
|
||||
var logo = '<svg style="width: 110px; height: 30px; display: block;" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 337.6 72"><path fill="#737373" d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2a8.08 8.08 0 0 1 2.8.4v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9a8.1 8.1 0 0 1 1.8 5.3c0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"/><path fill="#f25022" d="M0 0h34.2v34.2H0z"/><path fill="#7fba00" d="M37.8 0H72v34.2H37.8z"/><path fill="#00a4ef" d="M0 37.8h34.2V72H0z"/><path fill="#ffb900" d="M37.8 37.8H72V72H37.8z"/></svg>';
|
||||
var cookie = '🍪';
|
||||
|
||||
// run plugin with config object
|
||||
cc.run({
|
||||
current_lang : window.location.pathname.split('/')[1],
|
||||
autoclear_cookies : true, // default: false
|
||||
theme_css: '/_public/plugins/cookieconsent-master/src/cookieconsent.css',
|
||||
cookie_name: 'cc_cookie_demo1', // default: 'cc_cookie'
|
||||
cookie_expiration : 365, // default: 182
|
||||
page_scripts: true, // default: false
|
||||
|
||||
// auto_language : false, // default: false
|
||||
// autorun : true, // default: true
|
||||
// delay : 0, // default: 0
|
||||
// force_consent: false,
|
||||
// hide_from_bots: false, // default: false
|
||||
// remove_cookie_tables: false // default: false
|
||||
// cookie_domain: location.hostname, // default: current domain
|
||||
// cookie_path: "/", // default: root
|
||||
// cookie_same_site: "Lax",
|
||||
// use_rfc_cookie: false, // default: false
|
||||
// revision: 0, // default: 0
|
||||
|
||||
gui_options : {
|
||||
consent_modal : {
|
||||
layout : 'cloud', // box,cloud,bar
|
||||
position : 'bottom center', // bottom,middle,top + left,right,center
|
||||
transition : 'slide' // zoom,slide
|
||||
},
|
||||
settings_modal : {
|
||||
layout : 'box', // box,bar
|
||||
position: 'left', // right,left (available only if bar layout selected)
|
||||
transition : 'slide' // zoom,slide
|
||||
}
|
||||
},
|
||||
|
||||
onAccept: function(cookie){
|
||||
console.log("onAccept fired ...");
|
||||
|
||||
// delete line below
|
||||
typeof doDemoThings === 'function' && doDemoThings(cookie);
|
||||
},
|
||||
|
||||
onChange: function(cookie, changed_preferences){
|
||||
console.log("onChange fired ...");
|
||||
|
||||
// If analytics category's status was changed ...
|
||||
if(changed_preferences.indexOf('analytics') > -1){
|
||||
|
||||
// If analytics category is disabled ...
|
||||
if(!cc.allowedCategory('analytics')){
|
||||
|
||||
// Disable gtag ...
|
||||
console.log("disabling gtag")
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'analytics_storage': 'denied'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// delete line below
|
||||
typeof doDemoThings === 'function' && doDemoThings(cookie);
|
||||
},
|
||||
|
||||
languages : {
|
||||
'bg' : {
|
||||
consent_modal : {
|
||||
title : cookie + " Този уебсайт използва бисквитки!",
|
||||
description : 'за да се гарантира правилното му функциониране и по-ефектиното му използване от ваша страна. Ще намерите подробна информация в страницата с политика за използване на бисквитки. <a href="/bg/politika-za-biskvitki/">Научи повече</a>',
|
||||
primary_btn: {
|
||||
text: 'Приемам всичко',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Отхвърлете всички',
|
||||
role : 'accept_necessary' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : logo,
|
||||
save_settings_btn : "Запазете настройките",
|
||||
accept_all_btn : "Приемам всичко",
|
||||
reject_all_btn: "Отхвърлете всички",
|
||||
close_btn_label: "Затвори",
|
||||
cookie_table_headers : [
|
||||
{col1: "Име" },
|
||||
{col2: "Домейн" },
|
||||
{col3: "Изтичане" },
|
||||
{col4: "Описание" }
|
||||
],
|
||||
blocks : [
|
||||
{
|
||||
title : "Използване на бисквитки 📢",
|
||||
description: ''
|
||||
},{
|
||||
title : "Строго необходими бисквитки",
|
||||
description: 'Тези бисквитки са от съществено значение за правилното функциониране на уебсайта. Без тези бисквитки уебсайтът няма да работи правилно',
|
||||
toggle : {
|
||||
value : 'necessary',
|
||||
enabled : true,
|
||||
readonly: true //cookie categories with readonly=true are all treated as "necessary cookies"
|
||||
}
|
||||
},{
|
||||
title : "Бисквитки за ефективност и анализ",
|
||||
description: 'Тези бисквитки позволяват на уебсайта да запомни изборите, които сте направили в миналото',
|
||||
toggle : {
|
||||
value : 'analytics', //there are no default categories => you specify them
|
||||
enabled : false,
|
||||
readonly: false
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_ga',
|
||||
col2: 'google.com',
|
||||
col3: '2 years',
|
||||
col4: 'description ...' ,
|
||||
is_regex: true
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'google.com',
|
||||
col3: '1 day',
|
||||
col4: 'description ...' ,
|
||||
}
|
||||
]
|
||||
},{
|
||||
title : "Рекламни и таргетиращи бисквитки",
|
||||
description: 'Тези бисквитки събират информация за това как използвате уебсайта, кои страници сте посетили и върху кои връзки сте кликнали. Всички данни са анонимизирани и не могат да бъдат използвани за идентифициране на Вашата самоличност',
|
||||
toggle : {
|
||||
value : 'targeting',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
'en' : {
|
||||
consent_modal : {
|
||||
title : cookie + " This website use cookies",
|
||||
description : 'to ensure its proper operation and to be more effective to you. You will find detailed information on the cookie policy page. <a href="/en/cookie-policy/">Learn more</a>',
|
||||
primary_btn: {
|
||||
text: 'Accept all',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Reject all',
|
||||
role : 'accept_necessary' //'settings' or 'accept_necessary'
|
||||
}
|
||||
},
|
||||
settings_modal : {
|
||||
title : logo,
|
||||
save_settings_btn : "Save settings",
|
||||
accept_all_btn : "Accept all",
|
||||
reject_all_btn: "Reject all",
|
||||
close_btn_label: "Close",
|
||||
cookie_table_headers : [
|
||||
{col1: "Name" },
|
||||
{col2: "Domain" },
|
||||
{col3: "Expiration" },
|
||||
{col4: "Description" }
|
||||
],
|
||||
blocks : [
|
||||
{
|
||||
title : "Cookie usage 📢",
|
||||
description: 'The NEPI Rockcastle Group uses cookies so that you can enjoy the best experience on the site. We’ve created special options to customise your preferences, and we want you to know that you can always choose to delete or manage them. By choosing the option “SAVE SETTINGS”, you are explicitly consenting to the storage of third-party cookies placed to enhance your site experience by personalising the advertising content displayed and to assist us in our marketing efforts. Read the <a href="/bg/page/cookies-policy"></a>.'
|
||||
},{
|
||||
title : "Strictly necessary cookies",
|
||||
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
|
||||
toggle : {
|
||||
value : 'necessary',
|
||||
enabled : true,
|
||||
readonly: true //cookie categories with readonly=true are all treated as "necessary cookies"
|
||||
}
|
||||
},{
|
||||
title : "Performance and Analytics cookies",
|
||||
description: 'These cookies allow the website to remember the choices you have made in the past',
|
||||
toggle : {
|
||||
value : 'analytics', //there are no default categories => you specify them
|
||||
enabled : false,
|
||||
readonly: false
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_ga',
|
||||
col2: 'google.com',
|
||||
col3: '2 years',
|
||||
col4: 'description ...' ,
|
||||
is_regex: true
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'google.com',
|
||||
col3: '1 day',
|
||||
col4: 'description ...' ,
|
||||
}
|
||||
]
|
||||
},{
|
||||
title : "Advertisement and Targeting cookies",
|
||||
description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
|
||||
toggle : {
|
||||
value : 'targeting',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,233 @@
|
||||
// obtain cookieconsent plugin
|
||||
var cc = initCookieConsent();
|
||||
|
||||
// run plugin with config object
|
||||
cc.run({
|
||||
current_lang : 'en',
|
||||
autoclear_cookies : true, // default: false
|
||||
theme_css: '/public_assets/lib/cookieconsent-master/src/cookieconsent.css',
|
||||
cookie_name: 'cc_cookie_demo2', // default: 'cc_cookie'
|
||||
cookie_expiration : 365, // default: 182
|
||||
page_scripts: true, // default: false
|
||||
force_consent: true, // default: false
|
||||
|
||||
// auto_language : false, // default: false
|
||||
// autorun : true, // default: true
|
||||
// delay : 0, // default: 0
|
||||
// hide_from_bots: false, // default: false
|
||||
// remove_cookie_tables: false // default: false
|
||||
// cookie_domain: location.hostname, // default: current domain
|
||||
// cookie_path: "/", // default: root
|
||||
// cookie_same_site: "Lax",
|
||||
// use_rfc_cookie: false, // default: false
|
||||
// revision: 0, // default: 0
|
||||
|
||||
gui_options : {
|
||||
consent_modal : {
|
||||
layout : 'cloud', // box,cloud,bar
|
||||
position : 'bottom center', // bottom,middle,top + left,right,center
|
||||
transition : 'slide' // zoom,slide
|
||||
},
|
||||
settings_modal : {
|
||||
layout : 'bar', // box,bar
|
||||
position: 'left', // right,left (available only if bar layout selected)
|
||||
transition : 'slide' // zoom,slide
|
||||
}
|
||||
},
|
||||
|
||||
/* End new options added in v2.4 */
|
||||
|
||||
onAccept: function(cookie){
|
||||
console.log("onAccept fired ...");
|
||||
disableBtn('btn2');
|
||||
disableBtn('btn3');
|
||||
|
||||
// Delete line below
|
||||
document.getElementById("cookie_val") && (document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2));
|
||||
},
|
||||
|
||||
onChange: function(cookie, changed_preferences){
|
||||
console.log("onChange fired ...");
|
||||
|
||||
// If analytics category's status was changed ...
|
||||
if(changed_preferences.indexOf('analytics') > -1){
|
||||
|
||||
// If analytics category is disabled ...
|
||||
if(!cc.allowedCategory('analytics')){
|
||||
|
||||
// Disable gtag ...
|
||||
console.log("disabling gtag")
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'analytics_storage': 'denied'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Delete line below
|
||||
document.getElementById("cookie_val") && (document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2));
|
||||
},
|
||||
|
||||
languages : {
|
||||
'en' : {
|
||||
consent_modal : {
|
||||
title : "Hello traveller, it's cookie time!",
|
||||
description : 'Our website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <a href="#privacy-policy" class="cc-link">Privacy policy</a>',
|
||||
primary_btn: {
|
||||
text: 'Accept all',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text : 'Preferences',
|
||||
role : 'settings' //'settings' or 'accept_necessary'
|
||||
},
|
||||
revision_message: "<br><br> Dear user, terms and conditions have changed since the last time you visisted!"
|
||||
},
|
||||
settings_modal : {
|
||||
title : 'Cookie settings',
|
||||
save_settings_btn : "Save current selection",
|
||||
accept_all_btn : "Accept all",
|
||||
reject_all_btn: "Reject all",
|
||||
close_btn_label: "Close",
|
||||
cookie_table_headers : [
|
||||
{col1: "Name" },
|
||||
{col2: "Domain" },
|
||||
{col3: "Expiration" }
|
||||
],
|
||||
blocks : [
|
||||
{
|
||||
title : "Cookie usage",
|
||||
description: getLoremIpsum()+' <a href="#" class="cc-link">Privacy Policy</a>.'
|
||||
},{
|
||||
title : "Strictly necessary cookies",
|
||||
description: getLoremIpsum()+getLoremIpsum()+"<br><br>"+getLoremIpsum()+getLoremIpsum(),
|
||||
toggle : {
|
||||
value : 'necessary',
|
||||
enabled : true,
|
||||
readonly: true //cookie categories with readonly=true are all treated as "necessary cookies"
|
||||
}
|
||||
},{
|
||||
title : "Analytics & Performance cookies",
|
||||
description: getLoremIpsum(),
|
||||
toggle : {
|
||||
value : 'analytics',
|
||||
enabled : false,
|
||||
readonly: false
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_ga',
|
||||
col2: 'yourdomain.com',
|
||||
col3: "description ...",
|
||||
is_regex: true
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'description ...',
|
||||
},
|
||||
{
|
||||
col1: '_my_cookie',
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'test cookie with custom path ...',
|
||||
path: '/demo' // needed for autoclear cookies
|
||||
}
|
||||
]
|
||||
},{
|
||||
title : "Targeting & Advertising cookies",
|
||||
description: 'If this category is deselected, <b>the page will reload when preferences are saved</b>... <br><br>(demo example with reload option enabled, for scripts like microsoft clarity which will re-set cookies and send beacons even after the cookies have been cleared by the cookieconsent\'s autoclear function)',
|
||||
toggle : {
|
||||
value : 'targeting',
|
||||
enabled : false,
|
||||
readonly: false,
|
||||
reload: 'on_disable' // New option in v2.4, check readme.md
|
||||
},
|
||||
cookie_table : [
|
||||
{
|
||||
col1: '^_cl', // New option in v2.4: regex (microsoft clarity cookies)
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'These cookies are set by microsoft clarity',
|
||||
// path: '/', // New option in v2.4
|
||||
is_regex: true // New option in v2.4
|
||||
}
|
||||
]
|
||||
},{
|
||||
title : "More information",
|
||||
description: getLoremIpsum() + ' <a class="cc-link" href="https://orestbida.com/contact/">Contact me</a>.',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function getLoremIpsum(){
|
||||
return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
||||
}
|
||||
|
||||
// DELETE ALL CONTENT BELOW THIS COMMENT!!!
|
||||
if(cc.validCookie('cc_cookie')){
|
||||
//if cookie is set => disable buttons
|
||||
disableBtn('btn2');
|
||||
disableBtn('btn3');
|
||||
}
|
||||
|
||||
function disableBtn(id){
|
||||
document.getElementById(id).disabled = true;
|
||||
document.getElementById(id).className = "styled_btn disabled";
|
||||
}
|
||||
|
||||
var darkmode = false;
|
||||
|
||||
function toggleDarkmode(){
|
||||
if(!darkmode){
|
||||
document.getElementById('theme').innerText = 'dark theme';
|
||||
document.body.className='d_mode c_darkmode';
|
||||
darkmode = true;
|
||||
}else{
|
||||
document.getElementById('theme').innerText = 'light theme';
|
||||
document.body.className='d_mode';
|
||||
darkmode = false;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The following lines of code are for demo purposes (show api functions)
|
||||
*/
|
||||
if(document.addEventListener){
|
||||
|
||||
document.getElementById("btn2").addEventListener('click', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").addEventListener('click', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").addEventListener('click', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").addEventListener('click', function(){
|
||||
toggleDarkmode();
|
||||
});
|
||||
}else{
|
||||
document.getElementById("btn2").attachEvent('onclick', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").attachEvent('onclick', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").attachEvent('onclick', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").attachEvent('onclick', function(){
|
||||
toggleDarkmode();
|
||||
});
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
console.log("loaded cookie_test.js");
|
||||
|
||||
var _setCookie = function(name, value) {
|
||||
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (1000 * ( 30 * 24 * 60 * 60)));
|
||||
var expires = "; expires=" + date.toUTCString();
|
||||
|
||||
var cookieStr = name + "=" + (value || "") + expires + "; Path=/demo;";
|
||||
cookieStr += " SameSite=Lax;";
|
||||
|
||||
// assures cookie works with localhost (=> don't specify domain if on localhost)
|
||||
if(location.hostname.indexOf(".") > -1){
|
||||
cookieStr += " Domain=" + window.location.hostname + ";";
|
||||
}
|
||||
|
||||
if(location.protocol === "https:") {
|
||||
cookieStr += " Secure;";
|
||||
}
|
||||
|
||||
document.cookie = cookieStr;
|
||||
}
|
||||
|
||||
_setCookie("_my_cookie", "ciao=212");
|
||||
|
||||
window.myObject = {
|
||||
write: function(msg){
|
||||
console.log(msg, "this message is printed from cookie_test.js: myObject.write()");
|
||||
}
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
+461
@@ -0,0 +1,461 @@
|
||||
*,:after,:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body{
|
||||
height: auto!important;
|
||||
width: 100vw!important;
|
||||
overflow-x: hidden!important;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.15;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#_mainwrapper{
|
||||
color: #2b3744;
|
||||
}
|
||||
|
||||
body, html{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
._max_width{
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 1.8em 1.4em;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cc_div b{
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, div, a{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, li, ol{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.v-align{
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
._unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#_cookie_ic{
|
||||
font-size: .6em;
|
||||
display: inline-block;
|
||||
padding-top: .56em;
|
||||
vertical-align: top;
|
||||
letter-spacing: -0.15em;
|
||||
margin-left: -0.15em;
|
||||
}
|
||||
|
||||
#app_title{
|
||||
margin-bottom: 10px;
|
||||
font-size: 3em;
|
||||
padding-bottom: 0;
|
||||
color: #1e1c1b;
|
||||
margin-top: 40px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
#app_description{
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
margin-bottom: 80px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#app_settings{
|
||||
margin-bottom: 50px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.styled_btn{
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
background: #161515;
|
||||
background: #ffeec0;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
color: #000000;
|
||||
padding: 1em 1em;
|
||||
cursor: pointer;
|
||||
font-size: .8em;
|
||||
transition: box-shadow .3s ease;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn.disabled{
|
||||
background: #6d6141;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn.disabled:focus{
|
||||
background: #6d6141;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#app_settings > h3{
|
||||
margin-bottom: 14px;
|
||||
color: #ffffff;
|
||||
background: #2c2c2c;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._cookie_value{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#theme{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#theme,
|
||||
#cookie{
|
||||
background: #2c2c2c;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
color: #fee194;
|
||||
}
|
||||
|
||||
#cookie{
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.c_emf{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style-type: NONE;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li{
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 9px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#_title_span{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#api_section h3,
|
||||
#additional_section > p{
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
background: #1e1c1b;
|
||||
color: #ffeec0;
|
||||
padding: 5px 10px;
|
||||
margin-left: 0;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#api_section > ul{
|
||||
list-style-type: NONE;
|
||||
}
|
||||
|
||||
#additional_section{
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#github_link{
|
||||
display: inline-block;
|
||||
BACKGROUND: #1e1c1b;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 0px 0px 4px #dad9d9;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 0;
|
||||
}
|
||||
#_icon,
|
||||
#_text{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#_icon > svg{
|
||||
FILL: #ffffff;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#_text{
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
DISPLAY: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
._badge{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#_badges{
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
max-width: 100px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
#_badges > img{
|
||||
display: inline-block!important;
|
||||
}
|
||||
|
||||
body.d_mode{
|
||||
background: #141416;
|
||||
}
|
||||
|
||||
|
||||
.d_mode #_mainwrapper{
|
||||
color: #d0d4d8;
|
||||
}
|
||||
|
||||
.d_mode #app_title{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.d_mode #github_link{
|
||||
BACKGROUND: #ffeec0;
|
||||
color: #141416;
|
||||
box-shadow: 0px 0px 0px 4px #37352e;
|
||||
}
|
||||
|
||||
.d_mode #_icon > svg{
|
||||
FILL: #141416;
|
||||
}
|
||||
|
||||
.d_mode .c_emf{
|
||||
COLOR: #ffe295;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn{
|
||||
background: #fee194;
|
||||
}
|
||||
|
||||
.d_mode #api_section h3,
|
||||
.d_mode #additional_section > p{
|
||||
color: #ffffff;
|
||||
background: #2c2c2c;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn:focus{
|
||||
box-shadow: 0 0 0 3px #4b4639;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
#app_description{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#github_link{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
if(cc.validCookie('cc_cookie')){
|
||||
//if cookie is set => disable buttons
|
||||
disableBtn('btn2');
|
||||
disableBtn('btn3');
|
||||
}
|
||||
|
||||
function disableBtn(id){
|
||||
document.getElementById(id).disabled = true;
|
||||
document.getElementById(id).className = "styled_btn disabled";
|
||||
}
|
||||
|
||||
function themeText(){
|
||||
if(!darkmode){
|
||||
document.getElementById('theme').innerText = 'dark theme';
|
||||
darkmode = true;
|
||||
}else{
|
||||
document.getElementById('theme').innerText = 'light theme';
|
||||
darkmode = false;
|
||||
}
|
||||
}
|
||||
|
||||
var darkmode = false;
|
||||
|
||||
/*
|
||||
* The following lines of code are for demo purposes (show api functions)
|
||||
*/
|
||||
if(document.addEventListener){
|
||||
|
||||
document.getElementById("btn2").addEventListener('click', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").addEventListener('click', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").addEventListener('click', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").addEventListener('click', function(){
|
||||
document.body.classList.toggle('c_darkmode');
|
||||
themeText();
|
||||
});
|
||||
}else{
|
||||
document.getElementById("btn2").attachEvent('onclick', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").attachEvent('onclick', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").attachEvent('onclick', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").attachEvent('onclick', function(){
|
||||
document.body.className='d_mode c_darkmode';
|
||||
});
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CookieConsent demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<script defer src="/_public/plugins/cookieconsent-master/src/cookieconsent.js"></script>
|
||||
<script defer src="/_public/plugins/cookieconsent-master/src/app2.js"></script>
|
||||
|
||||
<!-- =================================================== -->
|
||||
<!-- All the scripts below are managed by the cookieconsent -->
|
||||
|
||||
<!-- INLINE GTAG -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CookieConsent demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="keywords" content="cookieconsent, orestbida, github,cookie consent gdpr, vanillajs">
|
||||
<meta name="description" content="demo cookieconsent gdpr orest bida">
|
||||
<link rel="icon" type="image/png" href="https://orestbida.com/favicon.png">
|
||||
<link rel="apple-touch-icon" href="https://orestbida.com/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<script defer src="../src/cookieconsent.js"></script>
|
||||
<script defer src="app.js"></script>
|
||||
|
||||
<!-- INLINE GTAG -->
|
||||
<script type="text/plain" data-cookiecategory="analytics">
|
||||
// Google Tag Manager (configured with GA internally)
|
||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-TKL88W3');
|
||||
console.log("loaded gtm.js");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CookieConsent demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<script defer src="../src/cookieconsent.js"></script>
|
||||
<script defer src="app2.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+1
File diff suppressed because one or more lines are too long
+38
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
CookieConsent v2.6.1
|
||||
https://www.github.com/orestbida/cookieconsent
|
||||
Author Orest Bida
|
||||
Released under the MIT License
|
||||
*/
|
||||
(function(){function Xa(Ya){function Ga(a,b){return a.classList?a.classList.contains(b):!!a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))}function ua(a,b){a.classList?a.classList.remove(b):a.className=a.className.replace(new RegExp("(\\s|^)"+b+"(\\s|$)")," ")}function F(a,b){a.classList?a.classList.add(b):Ga(a,b)||(a.className+=" "+b)}function ha(a){if("object"===typeof a){var b=[],c=0;for(b[c++]in a);return b}}function G(a,b,c,d){a.addEventListener?d?a.addEventListener(b,c,{passive:!0}):a.addEventListener(b,
|
||||
c,!1):a.attachEvent("on"+b,c)}function Ha(a,b,c){b=b?b:"/";for(var d=0;d<a.length;d++)for(var e=0;e<c.length;e++)document.cookie=a[d]+"=; path="+b+(-1<c[e].indexOf(".")?"; domain="+c[e]:"")+"; Expires=Thu, 01 Jan 1970 00:00:01 GMT;"}function ia(a,b,c){var d;if("one"===b){if((d=(d=document.cookie.match("(^|;)\\s*"+a+"\\s*=\\s*([^;]+)"))?c?d.pop():a:"")&&a===S){try{d=JSON.parse(d)}catch(e){d=JSON.parse(decodeURIComponent(d))}d=JSON.stringify(d)}}else if("all"===b)for(a=document.cookie.split(/;\s*/),
|
||||
d=[],b=0;b<a.length;b++)d.push(a[b].split("=")[0]);return d}function va(a,b){b=ja?encodeURIComponent(b):b;var c=new Date;c.setTime(c.getTime()+864E5*Ia);a=a+"="+(b||"")+("; expires="+c.toUTCString())+"; Path="+Ja+";";a+=" SameSite="+Ka+";";-1<location.hostname.indexOf(".")&&(a+=" Domain="+T+";");"https:"===location.protocol&&(a+=" Secure;");document.cookie=a}function La(){if(Ma){var a=Na,b=r.level||[],c=function(d,e){if(e<d.length){var g=d[e],l=g.getAttribute("data-cookiecategory");if(-1<H(b,l)){g.type=
|
||||
"text/javascript";g.removeAttribute("data-cookiecategory");l=g.getAttribute("data-src");var k=f("script");k.textContent=g.innerHTML;(function(t,m){for(var p=m.attributes,W=p.length,J=0;J<W;J++)m=p[J],t.setAttribute(m.nodeName,m.nodeValue)})(k,g);l?k.src=l:l=g.src;l&&(a?k.readyState?k.onreadystatechange=function(){if("loaded"===k.readyState||"complete"===k.readyState)k.onreadystatechange=null,c(d,++e)}:k.onload=function(){k.onload=null;c(d,++e)}:l=!1);g.parentNode.replaceChild(k,g);if(l)return}c(d,
|
||||
++e)}};c(document.querySelectorAll("script[data-cookiecategory]"),0)}}function Oa(a,b){function c(e,g,l,k,t,m,p){m=m&&m.split(" ")||[];if(-1<H(g,t)&&(F(e,t),("bar"!==t||"middle"!==m[0])&&-1<H(l,m[0])))for(g=0;g<m.length;g++)F(e,m[g]);-1<H(k,p)&&F(e,p)}if("object"===typeof a){var d=a.consent_modal;a=a.settings_modal;U&&d&&c(w,["box","bar","cloud"],["top","middle","bottom"],["zoom","slide"],d.layout,d.position,d.transition);!b&&a&&c(I,["bar"],["left","right"],["zoom","slide"],a.layout,a.position,a.transition)}}
|
||||
function Za(){var a=!1,b=!1;G(document,"keydown",function(c){c=c||window.event;"Tab"===c.key&&(u&&(c.shiftKey?document.activeElement===u[0]&&(u[1].focus(),c.preventDefault()):document.activeElement===u[1]&&(u[0].focus(),c.preventDefault()),b||ka||(b=!0,!a&&c.preventDefault(),c.shiftKey?u[3]?u[2]?u[2].focus():u[0].focus():u[1].focus():u[3]?u[3].focus():u[0].focus())),!b&&(a=!0))});document.contains&&G(M,"click",function(c){c=c||window.event;wa?O.contains(c.target)?ka=!0:(h.hideSettings(0),ka=!1):la&&
|
||||
w.contains(c.target)&&(ka=!0)},!0)}function f(a){var b=document.createElement(a);"button"===a&&b.setAttribute("type",a);return b}function H(a,b){for(var c=a.length,d=0;d<c;d++)if(a[d]==b)return d;return-1}function $a(a,b){if("string"!==typeof a||""==a||document.getElementById("cc--style"))b();else{var c=f("style");c.id="cc--style";var d=new XMLHttpRequest;d.onreadystatechange=function(){4==this.readyState&&200==this.status&&(c.setAttribute("type","text/css"),c.styleSheet?c.styleSheet.cssText=this.responseText:
|
||||
c.appendChild(document.createTextNode(this.responseText)),document.getElementsByTagName("head")[0].appendChild(c),b())};d.open("GET",a);d.send()}}function ab(a){var b=document.querySelectorAll(".c-tgl")||[],c=[],d=!1;if(0<b.length){for(var e=0;e<b.length;e++)-1!==H(a,N[e])?(b[e].checked=!0,P[e]||(c.push(N[e]),P[e]=!0)):(b[e].checked=!1,P[e]&&(c.push(N[e]),P[e]=!1));if(Pa&&V&&0<c.length){b=x.length;e=-1;var g=ia("","all"),l=[T,"."+T];if("www."===T.slice(0,4)){var k=T.substr(4);l.push(k);l.push("."+
|
||||
k)}for(k=0;k<b;k++){var t=x[k];if(t.hasOwnProperty("toggle")&&!P[++e]&&t.hasOwnProperty("cookie_table")&&-1<H(c,t.toggle.value)){var m=t.cookie_table,p=ha(X[0])[0],W=m.length;"on_disable"===t.toggle.reload&&(d=!0);for(var J=0;J<W;J++){var K=m[J],n=[],v=K[p],y=K.is_regex||!1,q=K.domain||null;K=K.path||!1;q&&(l=[q,"."+q]);if(y)for(y=0;y<g.length;y++)g[y].match(v)&&n.push(g[y]);else v=H(g,v),-1<v&&n.push(g[v]);0<n.length&&(Ha(n,K,l),"on_clear"===t.toggle.reload&&(d=!0))}}}}}r={level:a,revision:pa,data:C,
|
||||
rfc_cookie:ja};if(!V||0<c.length||!Y)Y=!0,va(S,JSON.stringify(r)),La();if("function"===typeof xa&&!V)return V=!0,xa(r);"function"===typeof ya&&0<c.length&&ya(r,c);d&&window.location.reload()}function bb(a,b){M=f("div");M.id="cc--main";M.style.position="fixed";M.style.zIndex="1000000";M.innerHTML='\x3c!--[if lt IE 9 ]><div id="cc_div" class="cc_div ie"></div><![endif]--\x3e\x3c!--[if (gt IE 8)|!(IE)]>\x3c!--\x3e<div id="cc_div" class="cc_div"></div>\x3c!--<![endif]--\x3e';var c=M.children[0],d=L,e=
|
||||
"string"===typeof ca.textContent?"textContent":"innerText";za=b;Aa=function(z){!0===z.force_consent&&F(ca,"force--consent");var Q=z.languages[d].consent_modal.description;Ba&&(Q=Y?Q.replace("{{revision_message}}",""):Q.replace("{{revision_message}}",Qa||z.languages[d].consent_modal.revision_message||""));if(w)ma.innerHTML=Q;else{w=f("div");var Z=f("div"),qa=f("div"),na=f("div");ma=f("div");var ra=f("div"),oa=f("button"),da=f("button"),sa=f("div");w.id="cm";Z.id="c-inr";qa.id="c-inr-i";na.id="c-ttl";
|
||||
ma.id="c-txt";ra.id="c-bns";oa.id="c-p-bn";da.id="c-s-bn";sa.id="cm-ov";oa.className="c-bn";da.className="c-bn c_link";na.setAttribute("role","heading");na.setAttribute("aria-level","2");w.setAttribute("role","dialog");w.setAttribute("aria-modal","true");w.setAttribute("aria-hidden","false");w.setAttribute("aria-labelledby","c-ttl");w.setAttribute("aria-describedby","c-txt");w.style.visibility=sa.style.visibility="hidden";sa.style.opacity=0;na.insertAdjacentHTML("beforeend",z.languages[d].consent_modal.title);
|
||||
ma.insertAdjacentHTML("beforeend",Q);oa[e]=z.languages[d].consent_modal.primary_btn.text;da[e]=z.languages[d].consent_modal.secondary_btn.text;var Ra;"accept_all"==z.languages[d].consent_modal.primary_btn.role&&(Ra="all");G(oa,"click",function(){h.hide();h.accept(Ra)});"accept_necessary"==z.languages[d].consent_modal.secondary_btn.role?G(da,"click",function(){h.hide();h.accept([])}):G(da,"click",function(){h.showSettings(0)});qa.appendChild(na);qa.appendChild(ma);ra.appendChild(oa);ra.appendChild(da);
|
||||
Z.appendChild(qa);Z.appendChild(ra);w.appendChild(Z);c.appendChild(w);c.appendChild(sa);U=!0}};a||Aa(b);I=f("div");var g=f("div"),l=f("div"),k=f("div");O=f("div");var t=f("div"),m=f("div"),p=f("button"),W=f("div"),J=f("div"),K=f("div");I.id="s-cnt";g.id="c-vln";k.id="c-s-in";l.id="cs";t.id="s-ttl";O.id="s-inr";m.id="s-hdr";J.id="s-bl";p.id="s-c-bn";K.id="cs-ov";W.id="s-c-bnc";p.className="c-bn";p.setAttribute("aria-label",b.languages[d].settings_modal.close_btn_label||"Close");I.setAttribute("role",
|
||||
"dialog");I.setAttribute("aria-modal","true");I.setAttribute("aria-hidden","true");I.setAttribute("aria-labelledby","s-ttl");t.setAttribute("role","heading");I.style.visibility=K.style.visibility="hidden";K.style.opacity=0;W.appendChild(p);G(g,"keydown",function(z){z=z||window.event;27==z.keyCode&&h.hideSettings(0)},!0);G(p,"click",function(){h.hideSettings(0)});x=b.languages[L].settings_modal.blocks;X=b.languages[L].settings_modal.cookie_table_headers;p=x.length;t.insertAdjacentHTML("beforeend",
|
||||
b.languages[L].settings_modal.title);for(var n=0;n<p;++n){var v=f("div"),y=f("div"),q=f("div"),D=f("div");v.className="c-bl";y.className="desc";q.className="p";D.className="title";q.insertAdjacentHTML("beforeend",x[n].description);if("undefined"!==typeof x[n].toggle){var A="c-ac-"+n,aa=f("button"),E=f("label"),B=f("input"),R=f("span"),ba=f("span"),ea=f("span"),Sa=f("span");aa.className="b-tl";E.className="b-tg";B.className="c-tgl";ea.className="on-i";Sa.className="off-i";R.className="c-tg";ba.className=
|
||||
"t-lb";aa.setAttribute("aria-expanded","false");aa.setAttribute("aria-controls",A);B.type="checkbox";R.setAttribute("aria-hidden","true");var Ca=x[n].toggle.value;B.value=Ca;ba[e]=x[n].title;aa.insertAdjacentHTML("beforeend",x[n].title);D.appendChild(aa);R.appendChild(ea);R.appendChild(Sa);a?-1<H(r.level,Ca)?(B.checked=!0,P.push(!0)):P.push(!1):x[n].toggle.enabled?(B.checked=!0,P.push(!0)):P.push(!1);N.push(Ca);x[n].toggle.readonly?(B.disabled=!0,F(R,"c-ro"),Da.push(!0)):Da.push(!1);F(y,"b-acc");
|
||||
F(D,"b-bn");F(v,"b-ex");y.id=A;y.setAttribute("aria-hidden","true");E.appendChild(B);E.appendChild(R);E.appendChild(ba);D.appendChild(E);(function(z,Q,Z){G(aa,"click",function(){Ga(Q,"act")?(ua(Q,"act"),Z.setAttribute("aria-expanded","false"),z.setAttribute("aria-hidden","true")):(F(Q,"act"),Z.setAttribute("aria-expanded","true"),z.setAttribute("aria-hidden","false"))},!1)})(y,v,aa)}else A=f("div"),A.className="b-tl",A.setAttribute("role","heading"),A.setAttribute("aria-level","3"),A.insertAdjacentHTML("beforeend",
|
||||
x[n].title),D.appendChild(A);v.appendChild(D);y.appendChild(q);if(!0!==b.remove_cookie_tables&&"undefined"!==typeof x[n].cookie_table){A=document.createDocumentFragment();for(E=0;E<X.length;++E)B=f("th"),q=X[E],B.setAttribute("scope","col"),q&&(D=q&&ha(q)[0],B[e]=X[E][D],A.appendChild(B));q=f("tr");q.appendChild(A);D=f("thead");D.appendChild(q);A=f("table");A.appendChild(D);E=document.createDocumentFragment();for(B=0;B<x[n].cookie_table.length;B++){R=f("tr");for(ba=0;ba<X.length;++ba)if(q=X[ba])D=
|
||||
ha(q)[0],ea=f("td"),ea.insertAdjacentHTML("beforeend",x[n].cookie_table[B][D]),ea.setAttribute("data-column",q[D]),R.appendChild(ea);E.appendChild(R)}q=f("tbody");q.appendChild(E);A.appendChild(q);y.appendChild(A)}v.appendChild(y);J.appendChild(v)}a=f("div");p=f("button");n=f("button");a.id="s-bns";p.id="s-sv-bn";n.id="s-all-bn";p.className="c-bn";n.className="c-bn";p.insertAdjacentHTML("beforeend",b.languages[L].settings_modal.save_settings_btn);n.insertAdjacentHTML("beforeend",b.languages[L].settings_modal.accept_all_btn);
|
||||
a.appendChild(n);if(b=b.languages[L].settings_modal.reject_all_btn)v=f("button"),v.id="s-rall-bn",v.className="c-bn",v.insertAdjacentHTML("beforeend",b),G(v,"click",function(){h.hideSettings();h.hide();h.accept([])}),O.className="bns-t",a.appendChild(v);a.appendChild(p);G(p,"click",function(){h.hideSettings();h.hide();h.accept()});G(n,"click",function(){h.hideSettings();h.hide();h.accept("all")});m.appendChild(t);m.appendChild(W);O.appendChild(m);O.appendChild(J);O.appendChild(a);k.appendChild(O);
|
||||
l.appendChild(k);g.appendChild(l);I.appendChild(g);c.appendChild(I);c.appendChild(K);(Ya||document.body).appendChild(M)}function Ta(){function a(c,d){var e=!1,g=!1;try{for(var l=c.querySelectorAll(b.join(':not([tabindex="-1"]), ')),k,t=l.length,m=0;m<t;)k=l[m].getAttribute("data-focus"),g||"1"!==k?"0"===k&&(e=l[m],g||"0"===l[m+1].getAttribute("data-focus")||(g=l[m+1])):g=l[m],m++}catch(p){return c.querySelectorAll(b.join(", "))}d[0]=l[0];d[1]=l[l.length-1];d[2]=e;d[3]=g}var b=["[href]","button","input",
|
||||
"details",'[tabindex="0"]'];a(O,fa);U&&a(w,Ea)}function Ua(a,b){if(b.hasOwnProperty(a))return a;if(0<ha(b).length)return b.hasOwnProperty(L)?L:ha(b)[0]}function cb(){for(var a=document.querySelectorAll('a[data-cc="c-settings"], button[data-cc="c-settings"]'),b=0;b<a.length;b++)a[b].setAttribute("aria-haspopup","dialog"),G(a[b],"click",function(c){h.showSettings(0);c.preventDefault?c.preventDefault():c.returnValue=!1})}function db(a){"number"===typeof a.cookie_expiration&&(Ia=a.cookie_expiration);
|
||||
"boolean"===typeof a.autorun&&(Va=a.autorun);"string"===typeof a.cookie_domain&&(T=a.cookie_domain);"string"===typeof a.cookie_same_site&&(Ka=a.cookie_same_site);"string"===typeof a.cookie_path&&(Ja=a.cookie_path);"string"===typeof a.cookie_name&&(S=a.cookie_name);"function"===typeof a.onAccept&&(xa=a.onAccept);"function"===typeof a.onChange&&(ya=a.onChange);"number"===typeof a.revision&&(-1<a.revision&&(pa=a.revision),Ba=!0);!0===a.autoclear_cookies&&(Pa=!0);!0===a.use_rfc_cookie&&(ja=!0);!0===a.hide_from_bots&&
|
||||
(Wa=navigator&&navigator.userAgent&&/bot|crawl|spider|slurp|teoma/i.test(navigator.userAgent));Ma=!0===a.page_scripts;Na=!1!==a.page_scripts_order;if(!0===a.auto_language){var b=navigator.language||navigator.browserLanguage;2<b.length&&(b=b[0]+b[1]);L=Ua(b.toLowerCase(),a.languages)}else"string"===typeof a.current_lang&&(L=Ua(a.current_lang,a.languages))}var L="en",Va=!0,S="cc_cookie",Ia=182,T=location.hostname,Ja="/",Ka="Lax",ja=!1,Pa=!0,pa=0,Ma,Na,h={},r={},U=!1,V=!1,la=!1,wa=!1,ka=!1,u,X,x,xa,
|
||||
ya,Y=!0,Ba=!1,C=null,Wa=!1,ta,Fa,Ea=[],fa=[],P=[],N=[],Da=[],ca=document.documentElement,M,w,I,O,za,Aa,Qa="",ma;h.allowedCategory=function(a){return-1<H(JSON.parse(ia(S,"one",!0)||"{}").level||[],a)};h.run=function(a){if(!document.getElementById("cc_div")&&(db(a),!Wa&&(r=JSON.parse(ia(S,"one",!0)||"{}"),V=void 0!==r.level,C=void 0!==r.data?r.data:null,Y="number"===typeof a.revision?V?-1<a.revision?r.revision===pa:!0:!0:!0,U=!V||!Y,bb(!U,a),$a(a.theme_css,function(){Ta();Oa(a.gui_options);cb();Va&&
|
||||
U&&h.show(a.delay||0);setTimeout(function(){F(M,"c--anim")},30);setTimeout(function(){Za()},100)}),V&&Y))){var b="boolean"===typeof r.rfc_cookie;if(!b||b&&r.rfc_cookie!==ja)r.rfc_cookie=ja,va(S,JSON.stringify(r));La();if("function"===typeof a.onAccept)a.onAccept(r)}};h.showSettings=function(a){setTimeout(function(){F(ca,"show--settings");I.setAttribute("aria-hidden","false");wa=!0;setTimeout(function(){la?Fa=document.activeElement:ta=document.activeElement;0!==fa.length&&(fa[3]?fa[3].focus():fa[0].focus(),
|
||||
u=fa)},200)},0<a?a:0)};h.set=function(a,b){switch(a){case "data":a=b.value;var c=!1;if("update"===b.mode)if(C=h.get("data"),(b=typeof C===typeof a)&&"object"===typeof C){!C&&(C={});for(var d in a)C[d]!==a[d]&&(C[d]=a[d],c=!0)}else!b&&C||C===a||(C=a,c=!0);else C=a,c=!0;c&&(r.data=C,va(S,JSON.stringify(r)));return c;case "revision":return d=b.value,a=b.prompt_consent,b=b.message,M&&"number"===typeof d&&r.revision!==d?(Ba=!0,Qa=b,Y=!1,pa=d,!0===a?(Aa(za),Oa(za.gui_options,!0),Ta(),h.show()):h.accept(),
|
||||
b=!0):b=!1,b}};h.get=function(a){return JSON.parse(ia(S,"one",!0)||"{}")[a]};h.loadScript=function(a,b,c){var d="function"===typeof b;if(document.querySelector('script[src="'+a+'"]'))d&&b();else{var e=f("script");if(c&&0<c.length)for(var g=0;g<c.length;++g)c[g]&&e.setAttribute(c[g].name,c[g].value);d&&(e.readyState?e.onreadystatechange=function(){if("loaded"===e.readyState||"complete"===e.readyState)e.onreadystatechange=null,b()}:e.onload=b);e.src=a;(document.head?document.head:document.getElementsByTagName("head")[0]).appendChild(e)}};
|
||||
h.show=function(a){U&&setTimeout(function(){F(ca,"show--consent");w.setAttribute("aria-hidden","false");la=!0;setTimeout(function(){ta=document.activeElement;u=Ea},200)},0<a?a:0)};h.hide=function(){U&&(ua(ca,"show--consent"),w.setAttribute("aria-hidden","true"),la=!1,setTimeout(function(){ta.focus();u=null},200))};h.hideSettings=function(){ua(ca,"show--settings");wa=!1;I.setAttribute("aria-hidden","true");setTimeout(function(){la?(Fa&&Fa.focus(),u=Ea):(ta.focus(),u=null);ka=!1},200)};h.accept=function(a,
|
||||
b){function c(){for(var g=document.querySelectorAll(".c-tgl")||[],l=[],k=0;k<g.length;k++)g[k].checked&&l.push(g[k].value);return l}a=a||void 0;var d=b||[];b=[];if(a)if("object"===typeof a&&"number"===typeof a.length)for(var e=0;e<a.length;e++)-1!==H(N,a[e])&&b.push(a[e]);else"string"===typeof a&&("all"===a?b=N.slice():-1!==H(N,a)&&b.push(a));else b=c();if(1<=d.length)for(e=0;e<d.length;e++)b=b.filter(function(g){return g!==d[e]});for(e=0;e<N.length;e++)!0===Da[e]&&-1===H(b,N[e])&&b.push(N[e]);ab(b)};
|
||||
h.eraseCookies=function(a,b,c){var d=[];c=c?[c,"."+c]:[T,"."+T];if("object"===typeof a&&0<a.length)for(var e=0;e<a.length;e++)this.validCookie(a[e])&&d.push(a[e]);else this.validCookie(a)&&d.push(a);Ha(d,b,c)};h.validCookie=function(a){return""!=ia(a,"one",!0)};return h}"function"!==typeof window.initCookieConsent&&(window.initCookieConsent=Xa)})();
|
||||
@@ -0,0 +1,238 @@
|
||||
// obtain cookieconsent plugin
|
||||
var cc = initCookieConsent();
|
||||
window.onload = function() {
|
||||
// run plugin with config object
|
||||
cc.run({
|
||||
current_lang: 'bg',
|
||||
autoclear_cookies: true, // default: false
|
||||
theme_css: './cookieconsent.css',
|
||||
cookie_name: 'cc_cookie_demo2', // default: 'cc_cookie'
|
||||
cookie_expiration: 365, // default: 182
|
||||
page_scripts: true, // default: false
|
||||
force_consent: true, // default: false
|
||||
|
||||
// auto_language : false, // default: false
|
||||
// autorun : true, // default: true
|
||||
// delay : 0, // default: 0
|
||||
// hide_from_bots: false, // default: false
|
||||
// remove_cookie_tables: false // default: false
|
||||
// cookie_domain: location.hostname, // default: current domain
|
||||
// cookie_path: "/", // default: root
|
||||
// cookie_same_site: "Lax",
|
||||
// use_rfc_cookie: false, // default: false
|
||||
// revision: 0, // default: 0
|
||||
|
||||
gui_options: {
|
||||
consent_modal: {
|
||||
layout: 'cloud', // box,cloud,bar
|
||||
position: 'bottom center', // bottom,middle,top + left,right,center
|
||||
transition: 'slide' // zoom,slide
|
||||
},
|
||||
settings_modal: {
|
||||
layout: 'bar', // box,bar
|
||||
position: 'left', // right,left (available only if bar layout selected)
|
||||
transition: 'slide' // zoom,slide
|
||||
}
|
||||
},
|
||||
|
||||
/* End new options added in v2.4 */
|
||||
|
||||
onAccept: function (cookie) {
|
||||
console.log("onAccept fired ...");
|
||||
disableBtn('btn2');
|
||||
disableBtn('btn3');
|
||||
|
||||
// Delete line below
|
||||
document.getElementById("cookie_val") && (document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2));
|
||||
},
|
||||
|
||||
onChange: function (cookie, changed_preferences) {
|
||||
console.log("onChange fired ...");
|
||||
|
||||
// If analytics category's status was changed ...
|
||||
if (changed_preferences.indexOf('analytics') > -1) {
|
||||
|
||||
// If analytics category is disabled ...
|
||||
if (!cc.allowedCategory('analytics')) {
|
||||
|
||||
// Disable gtag ...
|
||||
console.log("disabling gtag")
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'analytics_storage': 'denied'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Delete line below
|
||||
document.getElementById("cookie_val") && (document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2));
|
||||
},
|
||||
|
||||
languages: {
|
||||
'en': {
|
||||
consent_modal: {
|
||||
title: "Hello traveller, it's cookie time!",
|
||||
description: 'Our website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <a href="#privacy-policy" class="cc-link">Privacy policy</a>',
|
||||
primary_btn: {
|
||||
text: 'Accept all',
|
||||
role: 'accept_all' //'accept_selected' or 'accept_all'
|
||||
},
|
||||
secondary_btn: {
|
||||
text: 'Preferences',
|
||||
role: 'settings' //'settings' or 'accept_necessary'
|
||||
},
|
||||
revision_message: "<br><br> Dear user, terms and conditions have changed since the last time you visisted!"
|
||||
},
|
||||
settings_modal: {
|
||||
title: 'Cookie settings',
|
||||
save_settings_btn: "Save current selection",
|
||||
accept_all_btn: "Accept all",
|
||||
reject_all_btn: "Reject all",
|
||||
close_btn_label: "Close",
|
||||
cookie_table_headers: [
|
||||
{col1: "Name"},
|
||||
{col2: "Domain"},
|
||||
{col3: "Expiration"}
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
title: "Cookie usage",
|
||||
description: getLoremIpsum() + ' <a href="#" class="cc-link">Privacy Policy</a>.'
|
||||
}, {
|
||||
title: "Strictly necessary cookies",
|
||||
description: getLoremIpsum() + getLoremIpsum() + "<br><br>" + getLoremIpsum() + getLoremIpsum(),
|
||||
toggle: {
|
||||
value: 'necessary',
|
||||
enabled: true,
|
||||
readonly: true //cookie categories with readonly=true are all treated as "necessary cookies"
|
||||
}
|
||||
}, {
|
||||
title: "Analytics & Performance cookies",
|
||||
description: getLoremIpsum(),
|
||||
toggle: {
|
||||
value: 'analytics',
|
||||
enabled: false,
|
||||
readonly: false
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_ga',
|
||||
col2: 'yourdomain.com',
|
||||
col3: "description ...",
|
||||
is_regex: true
|
||||
},
|
||||
{
|
||||
col1: '_gid',
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'description ...',
|
||||
},
|
||||
{
|
||||
col1: '_my_cookie',
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'test cookie with custom path ...',
|
||||
path: '/demo' // needed for autoclear cookies
|
||||
}
|
||||
]
|
||||
}, {
|
||||
title: "Targeting & Advertising cookies",
|
||||
description: 'If this category is deselected, <b>the page will reload when preferences are saved</b>... <br><br>(demo example with reload option enabled, for scripts like microsoft clarity which will re-set cookies and send beacons even after the cookies have been cleared by the cookieconsent\'s autoclear function)',
|
||||
toggle: {
|
||||
value: 'targeting',
|
||||
enabled: false,
|
||||
readonly: false,
|
||||
reload: 'on_disable' // New option in v2.4, check readme.md
|
||||
},
|
||||
cookie_table: [
|
||||
{
|
||||
col1: '^_cl', // New option in v2.4: regex (microsoft clarity cookies)
|
||||
col2: 'yourdomain.com',
|
||||
col3: 'These cookies are set by microsoft clarity',
|
||||
// path: '/', // New option in v2.4
|
||||
is_regex: true // New option in v2.4
|
||||
}
|
||||
]
|
||||
}, {
|
||||
title: "More information",
|
||||
description: getLoremIpsum() + ' <a class="cc-link" href="https://orestbida.com/contact/">Contact me</a>.',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function getLoremIpsum(){
|
||||
return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
||||
}
|
||||
|
||||
// DELETE ALL CONTENT BELOW THIS COMMENT!!!
|
||||
if(cc.validCookie('cc_cookie')){
|
||||
//if cookie is set => disable buttons
|
||||
disableBtn('btn2');
|
||||
disableBtn('btn3');
|
||||
}
|
||||
|
||||
function disableBtn(id){
|
||||
document.getElementById(id).disabled = true;
|
||||
document.getElementById(id).className = "styled_btn disabled";
|
||||
}
|
||||
|
||||
var darkmode = false;
|
||||
|
||||
function toggleDarkmode(){
|
||||
if(!darkmode){
|
||||
document.getElementById('theme').innerText = 'dark theme';
|
||||
document.body.className='d_mode c_darkmode';
|
||||
darkmode = true;
|
||||
}else{
|
||||
document.getElementById('theme').innerText = 'light theme';
|
||||
document.body.className='d_mode';
|
||||
darkmode = false;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The following lines of code are for demo purposes (show api functions)
|
||||
*/
|
||||
if(document.addEventListener){
|
||||
|
||||
document.getElementById("btn2").addEventListener('click', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").addEventListener('click', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").addEventListener('click', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").addEventListener('click', function(){
|
||||
toggleDarkmode();
|
||||
});
|
||||
}else{
|
||||
document.getElementById("btn2").attachEvent('onclick', function(){
|
||||
cc.show(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn3").attachEvent('onclick', function(){
|
||||
cc.hide();
|
||||
});
|
||||
|
||||
document.getElementById("btn5").attachEvent('onclick', function(){
|
||||
cc.showSettings(0);
|
||||
});
|
||||
|
||||
document.getElementById("btn6").attachEvent('onclick', function(){
|
||||
toggleDarkmode();
|
||||
});
|
||||
}
|
||||
+1380
File diff suppressed because it is too large
Load Diff
+1846
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,461 @@
|
||||
*,:after,:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body{
|
||||
height: auto!important;
|
||||
width: 100vw!important;
|
||||
overflow-x: hidden!important;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.15;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#_mainwrapper{
|
||||
color: #2b3744;
|
||||
}
|
||||
|
||||
body, html{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
._max_width{
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 1.8em 1.4em;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cc_div b{
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, div, a{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, li, ol{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.v-align{
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
._unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#_cookie_ic{
|
||||
font-size: .6em;
|
||||
display: inline-block;
|
||||
padding-top: .56em;
|
||||
vertical-align: top;
|
||||
letter-spacing: -0.15em;
|
||||
margin-left: -0.15em;
|
||||
}
|
||||
|
||||
#app_title{
|
||||
margin-bottom: 10px;
|
||||
font-size: 3em;
|
||||
padding-bottom: 0;
|
||||
color: #1e1c1b;
|
||||
margin-top: 40px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
#app_description{
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
margin-bottom: 80px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#app_settings{
|
||||
margin-bottom: 50px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.styled_btn{
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
background: #161515;
|
||||
background: #ffeec0;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
color: #000000;
|
||||
padding: 1em 1em;
|
||||
cursor: pointer;
|
||||
font-size: .8em;
|
||||
transition: box-shadow .3s ease;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn.disabled{
|
||||
background: #6d6141;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn.disabled:focus{
|
||||
background: #6d6141;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#app_settings > h3{
|
||||
margin-bottom: 14px;
|
||||
color: #ffffff;
|
||||
background: #2c2c2c;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._cookie_value{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#theme{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#theme,
|
||||
#cookie{
|
||||
background: #2c2c2c;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
color: #fee194;
|
||||
}
|
||||
|
||||
#cookie{
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.c_emf{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style-type: NONE;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li{
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 9px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#_title_span{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#api_section h3,
|
||||
#additional_section > p{
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
background: #1e1c1b;
|
||||
color: #ffeec0;
|
||||
padding: 5px 10px;
|
||||
margin-left: 0;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#api_section > ul{
|
||||
list-style-type: NONE;
|
||||
}
|
||||
|
||||
#additional_section{
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#github_link{
|
||||
display: inline-block;
|
||||
BACKGROUND: #1e1c1b;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 0px 0px 4px #dad9d9;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 0;
|
||||
}
|
||||
#_icon,
|
||||
#_text{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#_icon > svg{
|
||||
FILL: #ffffff;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#_text{
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
DISPLAY: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
._badge{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#_badges{
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
max-width: 100px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
#_badges > img{
|
||||
display: inline-block!important;
|
||||
}
|
||||
|
||||
body.d_mode{
|
||||
background: #141416;
|
||||
}
|
||||
|
||||
|
||||
.d_mode #_mainwrapper{
|
||||
color: #d0d4d8;
|
||||
}
|
||||
|
||||
.d_mode #app_title{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.d_mode #github_link{
|
||||
BACKGROUND: #ffeec0;
|
||||
color: #141416;
|
||||
box-shadow: 0px 0px 0px 4px #37352e;
|
||||
}
|
||||
|
||||
.d_mode #_icon > svg{
|
||||
FILL: #141416;
|
||||
}
|
||||
|
||||
.d_mode .c_emf{
|
||||
COLOR: #ffe295;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn{
|
||||
background: #fee194;
|
||||
}
|
||||
|
||||
.d_mode #api_section h3,
|
||||
.d_mode #additional_section > p{
|
||||
color: #ffffff;
|
||||
background: #2c2c2c;
|
||||
}
|
||||
|
||||
.d_mode .styled_btn:focus{
|
||||
box-shadow: 0 0 0 3px #4b4639;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
#app_description{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#github_link{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user