Manage UniConsent

[Shadok]

Found on https://www.freeformatter.com.

Sorry, i am not skilled enough in js to find a way to get this one.

• Check <div id="uniccmp">

• Manage Options

  <div class="flex flex-col w-full flex-wrap">
  <div class="flex">
      <button
          tabindex="0"
          type="button"
          class="bg-gray-300 text-sm md:text-base hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded outline-none m-2 text-xs"
          style="color: rgb(51, 51, 51); background-color: rgb(226, 232, 240);"
      >
          Manage Options
      </button>
      <button
          tabindex="0"
          type="button"
          class="bg-gray-300 text-sm md:text-base hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded outline-none m-2 text-xs"
          style="color: rgb(255, 255, 255); background-color: rgb(74, 144, 226);"
      >
          Agree and proceed
      </button>
  </div>
  <div class="flex p-1 ml-auto mt-auto">
      <div class="flex p-1">
          <span class="text-xs">
              <a href="https://www.uniconsent.com/?utm_source=widget&amp;utm_medium=v2&amp;utm_campaign=cmpui" alt="GDPR CMP - Cookie Consent Manager" title="GDPR CMP - Cookie Consent Manager">UniConsent</a>
          </span>
      </div>
  </div>

• Choices

  <div class="flex w-full p-4 hidden"><p>Tell us how you want us to handle your data. We'll only use your data for purposes you consent to. Change your mind whenever, we'll adapt to your consent preferences and data requests.</p></div>
  <div class="flex flex-col m-auto w-full items-center justify-center md:flex-row">
  <div class="flex-auto w-full p-2 overflow-scroll overflow-x-hidden h-32 md:h-64">
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1 cursor-pointer font-bold">Purposes</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b bg-gray-200 text-black">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer font-bold text-black">Store and/or access information on a device</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p1" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p1" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Select basic ads</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p2" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p2" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Create a Personalized ads profile</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p3" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p3" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Select Personalized ads</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p4" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p4" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Create a Personalized content profile</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p5" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p5" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Select Personalized content</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p6" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p6" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Measure ad performance</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p7" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p7" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Measure content performance</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p8" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p8" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Apply market research to generate audience insights</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p9" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p9" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Develop and improve products</div>
          <label tabindex="0" aria-pressed="false" for="toogle_p10" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_p10" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1 cursor-pointer font-bold">Special Features</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b">
          <div tabindex="0" role="button" class="flex-1 cursor-pointer">Use precise geolocation data</div>
          <label tabindex="0" aria-pressed="false" for="toogle_sf1" class="flex items-center cursor-pointer">
              <div class="relative">
                  <input id="toogle_sf1" type="checkbox" class="hidden" />
                  <div class="toggle__line w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
                  <div class="toggle__dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
              </div>
          </label>
      </div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1 cursor-pointer font-bold">Special Purposes</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1">Ensure security, prevent fraud, and debug</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1">Technically deliver ads or content</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1 cursor-pointer font-bold">Features</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1">Match and combine offline data sources</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1">Link different devices</div></div>
      <div class="flex items-center justify-center w-full p-2 border-b"><div class="flex-1">Receive and use automatically-sent device characteristics for identification</div></div>
  </div>
  <div class="flex-auto w-full p-2 overflow-scroll overflow-x-hidden h-32 md:h-64 p-4">
      <div class="font-bold mb-2">Store and/or access information on a device</div>
      <div>Cookies, device identifiers, or other information can be stored or accessed on your device for the purposes presented to you.</div>
      <br />
      <div>
          Vendors can:<br />
          <li class="py-2">Store and access information on the device such as cookies and device identifiers presented to a user.</li>
      </div>
  </div>
  </div>

• Save

  <div class="flex h-full align-right py-1">
  <button tabindex="0" type="button" class="bg-gray-300 text-sm md:text-base hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded outline-none m-2" style="color: rgb(51, 51, 51); background-color: rgb(226, 232, 240);">
      Confirm Choices
  </button>
  <button tabindex="0" type="button" class="bg-gray-300 text-sm md:text-base hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded outline-none m-2" style="color: rgb(255, 255, 255); background-color: rgb(74, 144, 226);">
      Agree All &amp; Save
  </button>
  </div>

[MathRobin]

You created so much issues / requests, a huge big "many thanks !!!" I'm starting holidays tomorrow, so I will have time to look to every new issues / PR.

Again, many thanks !

[Shadok]

You're welcome, sorry I wasn't able to implement them. Have a good break :)

[MathRobin]

Sadly I haven't time anymore to maintain. I decided to remove this extension from stores and archieve this repo. Many thanks to having try to help me. Many thanks again :heart: