@extends('frontend.main_master')

CSS Text Gradient Generator
<!-- footerplace -->


</div>
</div>
<footer class="footer col-12 footer-black  footer-white "style="padding:0;">
  <div class="mt-5 footer"style="padding:0;">
    <div class="container1">
      <div class="row">
        <!--<div class="col-lg-5 col-xs-12 about-company">-->
        <!--  <h2>Heading</h2>-->
        <!--  <p class="pr-5 text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis-->
        <!--    quam tristique convallis </p>-->
        <!--  <p><a href="#"><i class="fa fa-facebook-square mr-1"></i></a><a href="#"><i-->
        <!--        class="fa fa-linkedin-square"></i></a></p>-->
        <!--</div>-->
        <div class="col-lg-12 col-xs-12 links">
          <h4 class="mt-lg-0 mt-sm-3">Links</h4>
          <ul class="m-0 p-0">
            <li>- <a href="#">About Us</a></li><BR>
            <li>- <a href="#">Contact Us</a></li>

          </ul>
        </div>

        <!--  <div class="col-lg-4 col-xs-12 location">-->
        <!--    <h4 class="mt-lg-0 mt-sm-4">Location</h4>-->
        <!--    <p>22, Lorem ipsum dolor, consectetur adipiscing</p>-->
        <!--    <p class="mb-0"><i class="fa fa-phone mr-3"></i>(541) 754-3010</p>-->
        <!--    <p><i class="fa fa-envelope-o mr-3"></i>info@hsdf.com</p>-->
        <!--  </div>-->
        <!--</div>-->
        <div class="col-lg-12 col-xs-12 links " style="text-align:center;">
          <p class=""><small class="text-black-50">Copyright © 2024 by <a href="/">FreeAiToolsOnline.com</a> All Rights
              Reserved.</small></p>

        </div>
      </div>
    </div>
  </div>
</footer>
</div>
</div>
<!-- Default Statcounter code for Free Ai Tools Online
https://freeaitoolsonline.com/ -->
<script type="text/javascript">
  var sc_project = 12996827;
  var sc_invisible = 1;
  var sc_security = "922759b1";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
  <div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12996827/0/922759b1/1/" alt="Web Analytics Made Easy - Statcounter" referrerPolicy="no-referrer-when-downgrade"></a></div>
</noscript>
<!-- End of Statcounter Code -->




  <!--   Core JS Files   -->
  <script src="../Frontend/assets/js/core/jquery.min.js"></script>
  <script src="../Frontend/assets/js/paper-dashboard.min.js?v=2.0.1" type="text/javascript"></script>
  <script src="../Frontend/assets/demo/demo.js"></script>
<script>
          document.addEventListener('DOMContentLoaded', function() {
            function updateNavbarBrand() {
                var navbarBrand = document.querySelector('.navbar-brand');
                if (window.innerWidth <= 768) { // Bootstrap's breakpoint for mobile
                    navbarBrand.textContent = 'FreeAiToolsOnline.com';
                } else {
                    navbarBrand.textContent = 'Tools';
                }
            }

            // Initial check
            updateNavbarBrand();

            // Check on window resize
            window.addEventListener('resize', updateNavbarBrand);
        });

  $(document).ready(function() {
    // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
    demo.initChartsPages();
  });
  
  function copyURL() {
    var url = window.location.href;
    navigator.clipboard.writeText(url);
    // Change button text
    var shareButton = document.getElementById('shareButton');
    shareButton.innerHTML = 'Link Copied!';
    // Reset button text after 2 seconds
    setTimeout(function() {
      shareButton.innerHTML = 'Share';
    }, 2000);
  }

  // Add click event listener to the share button
  document.getElementById('shareButton').addEventListener('click', copyURL);


  $(document).ready(function() {
    // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
    demo.initChartsPages();
  });
</script>
</body>

</html>
@section('content')

<style>
  .cursor {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  #code-preview {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    font-family: monospace;
    white-space: pre-wrap;
  }
</style>
</head>

<body>
  <div class="container">
    <div class="card" style="padding:10px;">
      <div class="row">
        <div class="col-9">
          <h3>CSS Cursors</h3>
        </div>
        <div class="col-3 text-right">
          <button id="shareButton" style="padding:5px;font-size:12px;width:auto;right:0;" class="btn  btn-primary m-0  share-btn">
            Share
          </button>
        </div>
      </div>
      <p>
        Style code
      </p>
      <div id="code-preview" style="display:flex;justify-content:left;align-items:center;">

        <!-- Preview code will be updated here -->
        ~~ Click on a box below to get CSS code ~~
      </div>
      <div class="row" id="cursor-container">
        <!-- Cursor items will be added here dynamically -->
      </div>
    </div>
  </div>




  <script>
    const cursors = [
      'auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait',
      'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop',
      'not-allowed', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize',
      's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize',
      'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out',
      'grab', 'grabbing'
    ];

    const container = document.getElementById('cursor-container');
    const codePreview = document.getElementById('code-preview');

    cursors.forEach(cursor => {
      const cursorDiv = document.createElement('div');
      cursorDiv.classList.add('col-md-3', 'col-sm-6');
      cursorDiv.innerHTML = `
      <div onclick="loadCursor('${cursor}')" class="cursor" style="cursor:${cursor};">${cursor}</div>
    `;
      container.appendChild(cursorDiv);
    });

    function loadCursor(cursorType) {
      codePreview.innerText = `
      .cursor {
        cursor: ${cursorType};
      }
    `;
    }
  </script>

  <!-- footerplace -->


</div>
</div>
<footer class="footer col-12 footer-black  footer-white "style="padding:0;">
  <div class="mt-5 footer"style="padding:0;">
    <div class="container1">
      <div class="row">
        <!--<div class="col-lg-5 col-xs-12 about-company">-->
        <!--  <h2>Heading</h2>-->
        <!--  <p class="pr-5 text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis-->
        <!--    quam tristique convallis </p>-->
        <!--  <p><a href="#"><i class="fa fa-facebook-square mr-1"></i></a><a href="#"><i-->
        <!--        class="fa fa-linkedin-square"></i></a></p>-->
        <!--</div>-->
        <div class="col-lg-12 col-xs-12 links">
          <h4 class="mt-lg-0 mt-sm-3">Links</h4>
          <ul class="m-0 p-0">
            <li>- <a href="#">About Us</a></li><BR>
            <li>- <a href="#">Contact Us</a></li>

          </ul>
        </div>

        <!--  <div class="col-lg-4 col-xs-12 location">-->
        <!--    <h4 class="mt-lg-0 mt-sm-4">Location</h4>-->
        <!--    <p>22, Lorem ipsum dolor, consectetur adipiscing</p>-->
        <!--    <p class="mb-0"><i class="fa fa-phone mr-3"></i>(541) 754-3010</p>-->
        <!--    <p><i class="fa fa-envelope-o mr-3"></i>info@hsdf.com</p>-->
        <!--  </div>-->
        <!--</div>-->
        <div class="col-lg-12 col-xs-12 links " style="text-align:center;">
          <p class=""><small class="text-black-50">Copyright © 2024 by <a href="/">FreeAiToolsOnline.com</a> All Rights
              Reserved.</small></p>

        </div>
      </div>
    </div>
  </div>
</footer>
</div>
</div>
<!-- Default Statcounter code for Free Ai Tools Online
https://freeaitoolsonline.com/ -->
<script type="text/javascript">
  var sc_project = 12996827;
  var sc_invisible = 1;
  var sc_security = "922759b1";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
  <div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12996827/0/922759b1/1/" alt="Web Analytics Made Easy - Statcounter" referrerPolicy="no-referrer-when-downgrade"></a></div>
</noscript>
<!-- End of Statcounter Code -->




  <!--   Core JS Files   -->
  <script src="../Frontend/assets/js/core/jquery.min.js"></script>
  <script src="../Frontend/assets/js/paper-dashboard.min.js?v=2.0.1" type="text/javascript"></script>
  <script src="../Frontend/assets/demo/demo.js"></script>
<script>
          document.addEventListener('DOMContentLoaded', function() {
            function updateNavbarBrand() {
                var navbarBrand = document.querySelector('.navbar-brand');
                if (window.innerWidth <= 768) { // Bootstrap's breakpoint for mobile
                    navbarBrand.textContent = 'FreeAiToolsOnline.com';
                } else {
                    navbarBrand.textContent = 'Tools';
                }
            }

            // Initial check
            updateNavbarBrand();

            // Check on window resize
            window.addEventListener('resize', updateNavbarBrand);
        });

  $(document).ready(function() {
    // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
    demo.initChartsPages();
  });
  
  function copyURL() {
    var url = window.location.href;
    navigator.clipboard.writeText(url);
    // Change button text
    var shareButton = document.getElementById('shareButton');
    shareButton.innerHTML = 'Link Copied!';
    // Reset button text after 2 seconds
    setTimeout(function() {
      shareButton.innerHTML = 'Share';
    }, 2000);
  }

  // Add click event listener to the share button
  document.getElementById('shareButton').addEventListener('click', copyURL);


  $(document).ready(function() {
    // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
    demo.initChartsPages();
  });
</script>
</body>

</html>