Docs

In this example below you will see how to do a Docs with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by igcorreia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright igcorreia ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Docs</title>
  <link rel="stylesheet" href="//www.getcomplied.com/assets/css/bootstrap.min.css"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="//www.getcomplied.com/assets/js/bootstrap.min.js"></script>
<script defer src="https://www.getcomplied.com/assets/icons/fa/5.0.6/svg-with-js/js/fontawesome-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/codemirror.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/codemirror.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/hint/javascript-hint.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/addon/edit/matchbrackets.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/addon/comment/continuecomment.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/addon/comment/comment.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/mode/javascript/javascript.min.js"></script>

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.js"></script>




<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.34.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="docs">
  <div class="sidebar border-right border-left">
    <div class="container-fluid h-100">
      <div class="row logo-wrapper border-bottom">
        <div class="col">
          <div class="logo">
            <a href="https://www.getcomplied.com" rel="noopener" title="GDPR SOFTWARE" class="logo ml-auto mr-auto" style="background-image:url('https://res.cloudinary.com/getcomplied/image/fetch/https://www.getcomplied.com/assets/images/logo_vertical.svg');">
              <span class="d-none">GDPR SOFTWARE</span>
            </a>
          </div>
        </div>
      </div>
      <div class="row sidebar-wrapper">
        <div class="col mt-4 ml-0 pl-0">
          <ul class="nav flex-column">
            <li class="nav-item">
              <div class="separator text-uppercase font-weight-bold text-blue">
                <span>Getting started</span>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#home">
                <i class="fal fa-home"></i>
                <span>Home</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#intro">
                <i class="fal fa-align-left"></i>
                <span>Introduction</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#install">
                <i class="fal fa-code"></i>
                <span>Install</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#configure">
                <i class="fal fa-cog"></i>
                <span>Configure</span>
              </a>
            </li>
            <li class="nav-item mt-3">
              <div class="separator text-uppercase font-weight-bold text-blue">
                <span>API's / SDK's</span>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#websdk">
                <i class="fal fa-browser"></i>
                <span>Web SDK</span>
              </a>
              <small>
                <ul class="nav flex-column ml-4">
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#modal">
                      <span>Show Modal</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#lang">
                      <span>Language</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#container">
                      <span>Inside custom container</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#index">
                      <span>Index Level / z-index</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#anim">
                      <span>Animation</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#events">
                      <span>Events</span> <span class="badge badge-danger">new</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#querystring">
                      <span>Query String</span> <span class="badge badge-danger">new</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#users">
                      <span>Users</span> <span class="badge badge-secondary">soon</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#callbacks">
                      <span>Callbacks</span> <span class="badge badge-secondary">soon</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active text-blue" href="#debug">
                      <span>Console Debug</span> <span class="badge badge-secondary">soon</span>
                    </a>
                  </li>
                </ul>
              </small>
            </li>
            <li>
            <li class="nav-item mt-3">
              <div class="separator text-uppercase font-weight-bold text-blue">
                <span>CRM, CMS & ERP</span>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#develop">
                <i class="fal fa-download"></i>
                <span>Integrations</span>
              </a>
            </li>
            <li class="nav-item mt-3">
              <div class="separator text-uppercase font-weight-bold text-blue">
                <span>Help / Support</span>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-blue" href="#help">
                <i class="fal fa-question-circle"></i>
                <span>Still need help?</span>
              </a>
            </li>
              <hr>
            </li>
            <li>
              <a href="https://www.getcomplied.com" class="text-blue" alt="gdpr platform">
                <div class="row">
                  <div class="col">
                    GetComplied
                  </div>
                  <div class="col-auto ml.auto">
                    <i class="fal fa-arrow-square-right"></i>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="content-wrapper bg-white">
  <a name="home"></a>
    <div class="content">
      <div class="row justify-content-center align-items-centerpb-3">
        <div class="col">
          <div class="input-group">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary border-0" type="button">
                <i class="fal fa-search"></i>
              </button>
            </div>
            <input type="text" name="keyword" class="form-control input-sm border-0" placeholder="Search Documentation">
          </div>
        </div>
        <div class="col-auto ml-auto">
          <a class="text-blue " href="https://www.getcomplied.com">Support</a>
          <a class="text-blue ml-3" href="https://www.getcomplied.com">Dashboard <i class="fal fa-arrow-right"></i></a>
        </div>
      </div>
      <hr class="mb-1">
      <div class="row">
        <div class="col">
          <h1 class="text-blue font-weight-normal">Documentation</h1>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <p>
            Welcome to GetComplied! Get familiar with the GetComplied products and explore their features:
          </p>
        </div>
      </div>
      <div class="row mb-4">
        <div class="col-6">
          <a href="#intro" class="btn btn-link font-weight-bold text-blue m-0 p-0 d-block text-left">
          <div class="card drop-shadow">
            <div class="card-body">
              <div class="row justify-content-center align-items-center no-gutters">
                <div class="col-auto">
                  <i class="fal fa-home fa-2x text-blue"></i>
                </div>
                <div class="col ml-3">
                  <div>
                    <div class="m-0 p-0">
                     Introduction
                    </div>
                  </div>
                  <div>
                    <p class="p-0 m-0 font-weight-normal">What is GetComplied.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </a>
        </div>
        <div class="col-6">
          <a href="#install" class="btn btn-link font-weight-bold text-blue m-0 p-0 d-block text-left">
          <div class="card drop-shadow">
            <div class="card-body">
              <div class="row justify-content-center align-items-center no-gutters">
                <div class="col-auto">
                  <i class="fal fa-code fa-2x text-blue"></i>
                </div>
                <div class="col ml-3">
                  <div>
                    <div class="m-0 p-0">
                     Install
                    </div>
                  </div>
                  <div>
                    <p class="p-0 m-0 font-weight-normal">How to install GetComplied.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </a>
        </div>
        <div class="col-6 mt-3">
          <a href="#configure" class="btn btn-link font-weight-bold text-blue m-0 p-0 d-block text-left">
          <div class="card drop-shadow">
            <div class="card-body">
              <div class="row justify-content-center align-items-center no-gutters">
                <div class="col-auto">
                  <i class="fal fa-cog fa-2x text-blue"></i>
                </div>
                <div class="col ml-3">
                  <div>
                    <div class="m-0 p-0">
                     Configure
                    </div>
                  </div>
                  <div>
                    <p class="p-0 m-0 font-weight-normal">How to configure GetComplied.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </a>
        </div>
        <div class="col-6 mt-3">
          <a href="#websdk" class="btn btn-link font-weight-bold text-blue m-0 p-0 d-block text-left">
          <div class="card drop-shadow">
            <div class="card-body">
              <div class="row justify-content-center align-items-center no-gutters">
                <div class="col-auto">
                  <i class="fal fa-browser fa-2x text-blue"></i>
                </div>
                <div class="col ml-3">
                  <div>
                    <div class="m-0 p-0">
                     Web SDK
                    </div>
                  </div>
                  <div>
                    <p class="p-0 m-0 font-weight-normal">What you need to get complied.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </a>
        </div>
      </div>
      <hr class="mb-5">
      <section id="intro">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">What is GetComplied?</h4>
            <div class="row">
              <div class="col-auto ml-auto mr-auto my-4">
                <iframe class="border border-radius drop-shadow bg-grey" width="720" height="320" src="https://www.youtube-nocookie.com/embed/jGlULjjByNE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
              </div>
            </div>
            <p>GetComplied is the most powerful and flexible software for you to comply with the GDPR EU rules. Whenever you create a website, an app, a portal, a landing page, or a software, the GetComplied mission is to provide the most efficient solution
              to help you comply with the law.</p>
          </div>
        </div>
      </section>
      <section id="why">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Why use GetComplied?</h4>
            <p>Until May 25, all websites, apps, and platforms must comply with the GDPR EU Law.</p>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <section id="try">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Snippet Example</h4>
            <p>The following code is a test example of the snippet. So you can see how it looks like in your website.</p>
            <div>
              <textarea class="unselectable" id="ta">
(function(c,o,m,p,l,y){ c.cp = c.cp || function() { (c.cp.q = c.cp.q || []).push(arguments) };
  c.getComplied = { callback: {}, command: function(){}, settings: { cpid: 0, cpsv: 1 }};
  l = o.getElementsByTagName('head')[0];
  y = o.createElement('script');
  y.async = 1;
  y.src = m + c.getComplied.settings.cpid + p + c.getComplied.settings.cpsv;
  l.appendChild(y);
})(window,document,'http://www.contacte-nos.com/complyW/comply/getcomplied-','.js?sv=');</textarea>
            </div>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="install"></a>
      <section id="steps">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Install - First Steps</h4>
            <h6>1 - Create an account</h6>
            <p>Create your GetComplied account at <a href="https://www.getcomplied.com" class="text-blue font-weight-bold">www.getcomplied.com</a></p>
            <img src="https://res.cloudinary.com/getcomplied/image/fetch/https://www.getcomplied.com/assets/images/screens_platform/gdpr_software_0_login.png" alt="" class="img-fluid drop-shadow mb-3">
            <h6>2 - Policies and Cookies</h6>
            <p>Create the policies and cookies for your platform. You will need them when we create a project.</p>
                        <img src="https://res.cloudinary.com/getcomplied/image/fetch/https://www.getcomplied.com/assets/images/screens_platform/gdpr_software_4_platforms.png" alt="" class="img-fluid drop-shadow mb-3">
            <h6>3 - Create a project</h6>
            <p>Create a project, get your snippet code and put it on your website.</p>
                        <img src="https://res.cloudinary.com/getcomplied/image/fetch/https://www.getcomplied.com/assets/images/screens_platform/gdpr_software_1_project.png" alt="" class="img-fluid drop-shadow mb-3">
            <h6>4 - Add Snippet</h6>
            <p>After creating the project you only need to add the snippet to your site.</p>
            <p>Install the code before <code>&lt;/body&gt;</code></p>
                        <img src="https://res.cloudinary.com/getcomplied/image/fetch/https://www.getcomplied.com/assets/images/screens_platform/gdpr_software_6_snippet.png" alt="" class="img-fluid drop-shadow mb-3">
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="configure"></a>
      <section id="configure">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Configure</h4>
            <p>For each project you can configured and customize the settings. When editing a project you can customize:</p>
            <ul class="list-group">
              <li class="list-group-item"><i class="fal fa-cog"></i> Project Information
                <div class="text-secondary">Choose a unique name for your project. A simple name to identify it.</div>
              </li>
              <li class="list-group-item"><i class="fal fa-building"></i> Business Information
                <div class="text-secondary">Add conrrespondant legal info about this project. </div>
              </li>
              <li class="list-group-item"><i class="fal fa-envelope"></i> DPO Information
                <div class="text-secondary">This section is mandatory per the GDPR. Add the DPO information so that the users can reach it.</div>
              </li>
              <li class="list-group-item"><i class="fal fa-globe"></i> Languages
                <div class="text-secondary">Choose the default and the active languages for the project.</div>
              </li>
              <li class="list-group-item"><i class="fal fa-magic"></i> Themes
                <div class="text-secondary">You can customize the Logo (add the url of the image of your logo) and the Header background color (the color is in rgb format, ex: "#cccccc" ). </div>
              </li>
              <li class="list-group-item"><i class="fal fa-file-alt"></i> What policies to use
                <div class="text-secondary">After creating the policies you can select which ones to use in the project.</div>
              </li>
              <li class="list-group-item"><i class="fal fa-window-restore"></i> What cookies to use
                <div class="text-secondary">After creating the cookies you can select which ones to use in the cookies.</div>
              </li>
              <li class="list-group-item"><i class="fal fa-cube"></i> What platforms to use
                <div class="text-secondary">After creating the platforms you can select which ones to use in the project.</div>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="websdk"></a>
      <div class="row">
        <div class="col">
          <h1 class="text-blue font-weight-normal">Web SDK</h1>
        </div>
      </div>
      <a name="modal"></a>
      <section id="popup">
        <div class="row">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Showing the Popup</h4>
            <p>GetComplied Popup will prompt automatically if it's a new user or if there is any new document/cookie.</p>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <p>Ways to open it by click:</p>
          </div>
        </div>
        <div class="row ">
          <div class="col">
            <h6>HTML</h6>
           <code>&lt;gpdr-prompt-caller&gt;Comply&lt;/gpdr-prompt-caller&gt;</code>
          </div>
        </div>
        <div class="row mt-4 mb-4">
          <div class="col">
            <h6>JAVASCRIPT</h6>
            <code>yourButton.addEventListener('click', function(){getComplied.command('show')})</code>
            <p>
              <small class="mt-3">
                NOTE: JAVASCRIPT code must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <a name="lang"></a>
      <section id="lang">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Language</h4>
            <p>Default language can be set on your project settings. It can be overriten by using <br/> <b>getComplied.lang = 'en'</b> when the popup is closed. Next time that is openned, it will change to the chosen language.</p>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <a name="container"></a>
      <section id="cont">
        <div class="row">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Inside Container</h4>
            <p>GeComplied can be inside of a html tag on your website instead of being a popup. <br> When this is applied, it will be always visible.
              <br> It will no longer listen to certain commands or execute some callbacks.</p>
            <p><small class="font-weight-bold">Affected commands: show <br>
            Affected callbacks: onopen, onclose</small></p>
          </div>
        </div>
        <div class="card mb-5">
          <div class="card-body bg-grey o-hidden">
             <div class="row ">
          <div class="col">
            <h6>HTML</h6>
            <code>&lt;gpdr-prompt-container&gt;&lt;/gpdr-prompt-container&gt;</code>
          </div>
        </div>
        <div class="row mt-4 ">
          <div class="col">
            <h6>JAVASCRIPT</h6>
            <code>getComplied.container = document.getElementById('yourElementId')</code>
          </div>
        </div>
            <p>
              <small class="mt-3">
                NOTE: JAVASCRIPT code must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <a name="index"></a>
      <section id="index">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Z-Index</h4>
            <p>Default z-index value is 10000. It can be set by using getComplied.zIndex = 999.</p>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <section id="anim">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Animation</h4>
            <p>Default value is true. It can be set by using <code>getComplied.animate = true</code>.</p>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <a name="events"></a>
      <section id="events">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Events</h4>
            <p>Commands are used to comunicate with the popup via javascript.</p>
            <div>
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th scope="col">Command</th>
                    <th scope="col">Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      <div><code>getComplied.command('show')</code></div>
                    </th>
                    <td>
                      <div>Open Modal</div>
                      <div class="mt-2">
                        <div class="btn btn-primary">Privacy Settings</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>getComplied.command('hide')</code></div>
                    </th>
                    <td>Close Modal</td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>getComplied.command('send', 'view', 123)</code></div>
                    </th>
                    <td>
                      <div>Opent a specifiq resource by ID</div>
                      <div class="mt-2">
                        <div class="btn btn-primary">Terms & Conditions</div>
                      </div>

                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>getComplied.command('send', 'index', 4)</code></div>
                    </th>
                    <td>
                      <div>Opent a specifiq resource by Index</div>
                      <div class="mt-2">
                        <div class="btn btn-primary">Open in the 4th Policy</div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="querystring"></a>
      <section id="querystring">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Query String</h4>
            <p>You can communicate with the modal via query string. This is ideal to validate <b>legacy data</b>. Example you can use a query string to pass the email that way Get Compiled knows exactly what user is using the platform. <i>Ex: You can send a newsletter to your customers to let them know that you changed your terms and conditions, send the to the homepage with the query string passing the email.</i></p>
            <div>
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th scope="col">Query String</th>
                    <th scope="col">Scope</th>
                    <th scope="col">Description</th>
                    <th scope="col">Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      <div><code>gc-email</code></div>
                    </th>
                    <td>
                      USER
                    </td>
                    <td>
                      <div>Pass the users email to GetComplied</div>
                    </td>
                    <td>
                      ?gc-email=user@email.com
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>                  
                  <tr>
                    <th scope="row">
                      <div><code>gc-name</code></div>
                    </th>
                    <td>
                      USER
                    </td>
                    <td>
                      <div>Pass the users name to GetComplied</div>
                    </td>
                    <td>
                      ?gc-name=firstlastname
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>gc-open</code></div>
                    </th>
                    <td>
                      Modal
                    </td>
                    <td>
                      <div>Force the modal to open</div>
                    </td>
                    <td>
                      ?gc-open=1
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>gc-lang</code></div>
                    </th>
                    <td>
                      Modal
                    </td>
                    <td>
                      <div>Force a language to open</div>
                    </td>
                    <td>
                      ?gc-lang=pt-PT
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>gc-index</code></div>
                    </th>
                    <td>
                      Modal
                    </td>
                    <td>
                      <div>Choose what resource to be open</div>
                    </td>
                    <td>
                      ?gc-index=1
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <div><code>gc-view</code></div>
                    </th>
                    <td>
                      Modal
                    </td>
                    <td>
                      <div>Open a specifiq resource by ID</div>
                    </td>
                    <td>
                      ?gc-view=4
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>
                  
                </tbody>
              </table>
            </div>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="debug"></a>
      <section id="debug">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Debug Console</h4>
            <p>You can open the debug console with the following technique:</i></p>
            <div>
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th scope="col">Query String</th>
                    <th scope="col">Scope</th>
                    <th scope="col">Description</th>
                    <th scope="col">Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      <div><code>gc-debug</code></div>
                    </th>
                    <td>
                      MODAL
                    </td>
                    <td>
                      <div>Open Console</div>
                    </td>
                    <td>
                      ?gc-debug=1
                      <div class="mt-2">
                        <div class="btn btn-primary btn-sm">View Example</div>
                      </div>
                    </td>
                  </tr>                  
                 
                  
                </tbody>
              </table>
            </div>
            <p>
              <small class="mt-3">
                NOTE: It must be put after your snippet code.
              </small>
            </p>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="develop"></a>
      <section id="develop">
        <div class="row">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Want to integrate with a CMS, ERP or CRM?</h4>
            <p>A custom GetComplied integration requires you to either be or hire a developer.</p>
          </div>
        </div>
        <div class="row mb-4 text-center">
          <div class="col">
            <div class="card">
              <div class="card-body bg-grey o-hidden">
                <div>
                  <div class="row my-3 align-items-center justify-content-center">
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/magento.com"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/wordpress.com"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/shopify.com"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/drupal.org"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/joomla.org"></div>
                  </div>
                </div>
                <div><a href="http://eepurl.com/dj0H_T" target="_blank">Gdpr Plugins For Cms <i class="fal fa-angle-right"></i></a></div>
                <div>
                  <p>Manage all your projects gdpr privacy policies and gdpr cookies in one platform.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <div class="card-body bg-grey o-hidden">
                <div>
                  <div class="row my-3 align-items-center justify-content-center">
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/salesforce.com" alt="Salesforce gdpr compliance Extension"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/microsoft.com" alt="Microsoft gdpr compliance Plugin"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/zoho.com" alt="Zoho gdpr compliance Extension"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/hubspot.com" alt="Zoho gdpr compliance Extension"></div>
                    <div class="col-2"><img class="img-fluid" src="https://logo.clearbit.com/freshdesk.com" alt="Zoho gdpr compliance Extension"></div>
                  </div>
                </div>
                <div><a href="https://s.codepen.io/igcorreia/debug/MVeMBq/yokZEQPqXYeA#" target="_blank">Gdpr Plugin For Crm <i class="fal fa-angle-right"></i></a></div>
                <div>
                  <p>Manage all your customers <br> privacy in one platform.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <a name="help"></a>
      <section id="help">
        <div class="row">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">We're here to help!</h4>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col">
            <div><a href="https://www.getcomplied.com" target="_blank">Support <i class="fal fa-angle-right"></i></a></div>
            <div>
              <p>We're always happy to help with code or any questions you have.</p>
            </div>
          </div>
          <div class="col">
            <div><a href="https://www.getcomplied.com" target="_blank">Mailing List <i class="fal fa-angle-right"></i></a></div>
            <div>
              <p>Join our mailing list to be notified of API changes and stay up to date.</p>
            </div>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <section id="footer">
        <div class="row">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">
              Quick links
            </h4>
          </div>
        </div>
        <div class="row mb-5">
          <div class="col">
            <div class="card">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <a class="text-blue" href="www.getcomplied.com">
                    <div class="row no-gutters">
                      <div class="col-auto"><i class="far fa-arrow-circle-right"></i></div>
                      <div class="col">
                        <div class="ml-2 font-weight-bold">Visit Website</div>
                      </div>
                    </div>
                  </a>
                </li>
                <li class="list-group-item">
                  <a class="text-blue" href="www.getcomplied.com">
                    <div class="row no-gutters">
                      <div class="col-auto"><i class="far fa-arrow-circle-right"></i></div>
                      <div class="col">
                        <div class="ml-2 font-weight-bold">Create an account</div>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <hr class="mb-5">
      <section id="contact">
        <div class="row mb-4">
          <div class="col">
            <h4 class="text-blue font-weight-normal mb-3">Questions?</h4>
            <p>We're always happy to help with code or other questions you might have! <a href="https://getcomplied.com" target="_blank">Contact support</a> or <a href="https://getcomplied.com" target="_blank">connect with our sales team</a>.</p>

          </div>
        </div>
      </section>
    </div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/igcorreia/docs-MVeMBq */
html,
body {
  height: 100%;
  overflow: hidden;
  background: #f5f7f9;
}
.sidebar {
  bottom: 0;
  background: #f5f7f9;
  flex: 0;
  display: flex;
  z-index: 5;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  width: calc((100% - 994px) / 2 + 226px);
  min-width: 252px;
  padding-left: calc((100% - 994px) / 2);
}
.sidebar:before {
  left: 0;
  width: 100%;
  height: 600px;
  background-image: linear-gradient(81deg, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0.16) 84%, rgba(255, 255, 255, 0.17) 0, rgba(255, 255, 255, 0.57));
}
.sidebar:after,
#sidebar:before {
  content: '';
  position: absolute;
  top: 0;
}
.docs {
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.docs,
.sidebar {
  position: absolute;
  top: 0;
}
.content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 1050px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  outline: none;
}
.o-hidden {
  overflow: hidden;
}
.o-auto {
  overflow-y: scroll;
}
.vh-100 {
  height: 100vh;
}
.content {
  position: relative;
  padding-top: 33px;
  padding-left: 32px;
  margin: 0 25px 0 0;
  border-top: 1px solid rgba(120, 134, 156, 0.08);
}
.content,
header#main-header {
  margin-left: calc((100% - 994px) / 2 + 226px);
  width: 770px;
}
.content {
  overflow-x: visible!important;
}
a.logo {
  width: 200px;
  height: 90px;
  background-color: transparent;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: default;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateX(-35px);
  transform: translateX(-35px);
}
.text-blue {
  color: #1d335c;
}
.CodeMirror {
  width: 100%;
  height: auto;
  border: 1px solid #eee;
  resize: vertical;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.theme-hover-background-from-border-color:hover {
  background: 0 0!important;
}
.theme-border-radius {
  border-radius: 4px!important;
}
.theme-controls-color {
  color: #6772e4!important;
}
.theme-controls-background {
  background: #f6f9fc;
  margin: 0 0 6px!important;
}
.theme-hover-color-controls:hover,
.theme-hover-color-controls:hover .theme-logo-color {
  color: #32325d!important;
}
.theme-controls-color-edited,
.theme-controls-color-edited:hover,
.theme-logo-color {
  color: #6772e4!important;
}
.theme-run-button,
.theme-run-button:hover {
  background: #12b47d;
  border-color: transparent!important;
  color: #fff!important;
  text-shadow: 0 1px 0 transparent!important!important;
}
.theme-evaluation-state-color {
  color: #12b47d!important;
}
.CodeMirror,
.source-editor .prerender,
.source-viewer .prerender {
  font-size: 13px;
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  line-height: 1.5;
  background: 0 0!important;
}
.CodeMirror pre {
  padding: 0!important;
}
.CodeMirror-gutters {
  border: 0;
  background-color: transparent!important;
}
.CodeMirror-linenumber {
  padding: 0;
  margin-left: -17px !important;
}
.CodeMirror-linenumbers {
  width: 35px!important;
}
.CodeMirror-lines {
  padding: 12px!important;
}
.inside-gutter .CodeMirror-linenumbers {
  width: inherit!important;
}
.inside-gutter .CodeMirror-linenumber {
  margin-left: 0!important;
}
.inside-gutter .CodeMirror {
  border-style: solid;
  border-width: 0;
  border-radius: 4px 4px 0 0!important;
}
.inside-gutter .CodeMirror-focused .CodeMirror-lines,
.inside-gutter .CodeMirror-lines {
  border: 0;
  border-radius: 0!important;
}
.source-editor .prerender,
.source-viewer .prerender {
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  padding: 12px;
  margin-bottom: 0;
  white-space: pre;
  overflow-x: hidden;
  color: #414770;
  background-color: #fff!important;
}
.outside-gutter .source-editor .prerender,
.outside-gutter .source-viewer .prerender {
  margin-left: 36px!important;
}
.embedded-notebook .source-editor .CodeMirror-lines,
.embedded-notebook .source-editor .CodeMirror-scroll,
.embedded-notebook .source-editor .prerender,
.embedded-notebook .source-viewer .prerender {
  min-height: 102px!important;
}
.embedded-notebook .inside-gutter .source-editor .gutter,
.embedded-notebook .inside-gutter .source-editor .prerender,
.embedded-notebook .inside-gutter .source-viewer .gutter,
.embedded-notebook .inside-gutter .source-viewer .prerender {
  border-color: transparent;
  border-style: solid!important;
}
.embedded-notebook .inside-gutter .source-editor .gutter,
.embedded-notebook .inside-gutter .source-viewer .gutter {
  border-radius: 4px 0 0 0;
  background-color: #f2feef;
  border-width: 0;
  width: 36px!important;
}
.embedded-notebook .inside-gutter .source-editor .prerender,
.embedded-notebook .inside-gutter .source-viewer .prerender {
  margin-left: 36px;
  border-radius: 0 4px 0 0;
  border-width: 0!important;
}
.monospace {
  font-family: 'Source Code Pro', monospace !important;
}
.proportional {
  font-family: fira-sans, sans-serif !important;
}
.source-cell-wrapper {
  border-radius: 4px!important;
}
.inside-gutter.source-cell-wrapper,
.source-cell {
  box-shadow: none;
  margin: inherit!important;
}
.inside-gutter .source-cell {
  margin-bottom: 0;
  box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.1) !important;
}
.source-cell {
  border-radius: 4px;
  margin: 2px 5px 6px!important;
}
.embedded-notebook .object-description {
  border-radius: 4px;
  box-shadow: none;
  margin: 2px 5px 6px 32px;
  width: calc(63%);
  box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.1) !important;
}
.object-description {
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  color: #414770;
  font-size: 13px;
  background: #fff!important;
}
.type-boolean {
  color: #6772e4!important;
}
.type-metadata {
  color: #149570;
  background: #f2feef;
  border: 1px solid #ddf7e3!important;
}
.type-null {
  color: #91a2b0!important;
}
.type-number {
  color: #fa7459!important;
}
.type-property {
  color: #414770!important;
}
.type-string {
  color: #149570!important;
}
.type-system {
  color: #414770!important;
}
.type-undefined {
  color: #91a2b0!important;
}
.icon-boolean,
.icon-function {
  fill: #6772e4!important;
}
.icon-inner {
  fill: #fff!important;
}
.icon-null {
  fill: #91a2b0!important;
}
.icon-number {
  fill: #fa7459!important;
}
.icon-object {
  fill: #3196d3!important;
}
.icon-string {
  fill: #149570!important;
}
.icon-undefined {
  fill: #91a2b0!important;
}
mark {
  background: orange;
  color: black;
  margin: 0;
  padding: 0;
}
.drop-shadow {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.07), 0 7px 17px 0 rgba(0, 0, 0, 0.1);
}
.lh-0 {
  line-height: 0;
}
.bg-grey {
  background: #f5f7f9;
}
.logo-wrapper {
  height: 90px;
}
.sidebar-wrapper {
  height: calc(100vh - 90px);
  overflow-y: scroll;
}


/*Downloaded from https://www.codeseek.co/igcorreia/docs-MVeMBq */
$("document").ready(function() {
  CodeMirror.fromTextArea(document.getElementById("ta"), {
    lineNumbers: true,
    mode: "text/javascript",
    styleActiveLine: true,
    matchBrackets: true,
    readOnly: "nocursor"
  });
  CodeMirror.fromTextArea(document.getElementById("html"), {
    lineNumbers: false,
    mode: "text/html",
    styleActiveLine: false,
    matchBrackets: true,
    readOnly: "nocursor"
  });
  CodeMirror.fromTextArea(document.getElementById("javascript"), {
    lineNumbers: false,
    mode: "text/javascript",
    styleActiveLine: true,
    matchBrackets: true,
    readOnly: "nocursor"
  });
  CodeMirror.fromTextArea(document.getElementById("htmlContainer"), {
    lineNumbers: false,
    mode: "text/html",
    styleActiveLine: false,
    matchBrackets: true,
    readOnly: "nocursor"
  });
  CodeMirror.fromTextArea(document.getElementById("javascriptContainer"), {
    lineNumbers: false,
    mode: "text/javascript",
    styleActiveLine: true,
    matchBrackets: true,
    readOnly: "nocursor"
  });

  var results = [];
  var keyword;

  var mark = function() {
    results = [];
    // Read the keyword
    keyword = $("input[name='keyword']").val();

    // the new keyword inside the context
    $(".content").unmark({
      done: function() {
        $(".content").mark(keyword, maskoptions);
      }
    });
  };

  maskoptions = {
    each: function(node) {
      // node is the marked DOM element
      results.push(node);
    },
    done: function(counter) {
      //console.log(results.length);
      $(".alert").remove();
      $('input[name="keyword"]')
        .parent()
        .parent()
        .parent()
        .after(
        '<div class="alert alert-warning alert-dismissible fade show" role="alert"><div>' +
        results.length +
        ' results found.</div>'+
        //'<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>' +
        ' </div>'
      );
        console.log(keyword);
      if(keyword == ''){
         $(".alert").remove();
      }
    },
    debug: true,
    log: window.console
  };

  $("input[name='keyword']").on("input", mark);
  $(".alert").alert();
});

Comments