TI84 Calculator Code - v0 by Vercel

ok this is my plugins code

<?php /** * Plugin Name: TI-84 Plus CE Calculator * Plugin URI: https://yourwebsite.com/ * Description: Embeds the TI-84 Plus CE HTML5 Emulator * Version: 1.0 * Author: Your Name * Author URI: https://yourwebsite.com/ * License: MIT */ // Exit if accessed directly if (!defined('ABSPATH')) { exit; } class TI84_Calculator_Simple { public function __construct() { // Register shortcode add_shortcode('ti84_calculator', array($this, 'ti84_calculator_shortcode')); } /** * Render the calculator via shortcode */ public function ti84_calculator_shortcode($atts) { // Start output buffering ob_start(); ?>

    <!-- TI-84 Plus CE Calculator -->
    <div style="display: flex; flex-direction: column; align-items: center; margin: 20px auto; max-width: 100%;">
      <!-- Calculator container -->
      <div id="calculatorDiv" style="outline: none !important; margin-left: auto; margin-right: auto;"></div>
      
      <!-- Controls -->
      <div style="padding: 10px; max-width: 300px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 10px;">
        <a id="ti84_popup_button" href="javascript:void(0);" style="display: inline-block; padding: 8px 16px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; cursor: pointer; text-align: center;">Open in a separate window</a>
        <p style="font-size: 11px; line-height: normal; color: #666; margin-top: 10px;">
          Copyright disclaimer: The files for the emulator itself are not hosted on this website. 
          They are downloaded from <a href="https://mn.testnav.com/client/index.html#login?username=LGN265231722&password=L5E4J8P8" target="_blank">testnav.com</a>, 
          where you can already use it for free.
        </p>
      </div>
    </div>

    <!-- TI Calculator Required CSS -->
    <link rel="stylesheet" type="text/css" href="https://mn.testnav.com/client/public/stylesheets/tn.css"/>

    <!-- TI Calculator Required Script -->
    <script src="https://mn.testnav.com/client/texasinstruments/js/ELG-min.js"></script>

    <!-- Initialize Calculator -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Proxy the XMLHttpRequest.open to remove the hash from URLs
        XMLHttpRequest.prototype.open = new Proxy(XMLHttpRequest.prototype.open, {
          apply: function (target, thisArg, args) {
            if (typeof args[1] === "string") {
              args[1] = args[1].replace(/#.*$/, "");
            }
            Reflect.apply(target, thisArg, args);
          },
        });
        
        // Initialize calculator
        var ti84 = new TI84PCE({
          ROMLocation: 'https://mn.testnav.com/client/texasinstruments/bin/No_AppsCE.h84statej#.h84statej',
          FaceplateLocation: 'https://mn.testnav.com/client/texasinstruments/images/TI84CE_touch.svg#.svg'
        });
        
        // Setup popup functionality
        var popupButton = document.getElementById('ti84_popup_button');
        var calculatorDiv = document.getElementById('calculatorDiv');
        
        popupButton.addEventListener('click', function() {
          var width = window.getComputedStyle(calculatorDiv)["width"].replace("px", "");
          var height = window.getComputedStyle(calculatorDiv)["height"].replace("px", "");
          
          // Create a minimal HTML page with just the calculator
          var popupContent = `
            <!DOCTYPE html>
            <html>
            <head>
              <title>TI-84 Plus CE Calculator</title>
              <link rel="stylesheet" href="https://mn.testnav.com/client/public/stylesheets/tn.css">
              <style>
                body { margin: 0; padding: 0; }
                .calculatorDiv { outline: none !important; }
              </style>
              <script src="https://mn.testnav.com/client/texasinstruments/js/ELG-min.js"><\/script>
            </head>
            <body>
              <div id="calculatorDiv"></div>
              <script>
                // Remove hash from URLs in XMLHttpRequest
                XMLHttpRequest.prototype.open = new Proxy(XMLHttpRequest.prototype.open, {
                  apply: function (target, thisArg, args) {
                    if (typeof args[1] === "string") {
                      args[1] = args[1].replace(/#.*$/, "");
                    }
                    Reflect.apply(target, thisArg, args);
                  },
                });
                
                // Initialize calculator
                document.addEventListener('DOMContentLoaded', function() {
                  new TI84PCE({
                    ROMLocation: 'https://mn.testnav.com/client/texasinstruments/bin/No_AppsCE.h84statej#.h84statej',
                    FaceplateLocation: 'https://mn.testnav.com/client/texasinstruments/images/TI84CE_touch.svg#.svg'
                  });
                });
              <\/script>
            </body>
            </html>
          `;
          
          // Create a blob URL for the popup content
          var blob = new Blob([popupContent], {type: 'text/html'});
          var blobUrl = URL.createObjectURL(blob);
          
          // Open popup window
          window.open(blobUrl, 'TI84Calculator', `height=${height}, width=${width}`);
        });
      });
    </script>
    <?php
    // Return the buffered content
    return ob_get_clean();
}

}

// Initialize the plugin new TI84_Calculator_Simple();

adn this is wht it looks like i want you to just remove the open in seperate window button as well as the content right below it the only calcualotr rmeains

Show full message

image.png

76d ago

analyze this site https://ti84calc.com/ you can see he has maed this
so i want to make such thing as well so when i ran on top and pekple use my emebed code on their site not only it works it gains me authority as well for taht i made an embed.html in root and added this code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Embed TI-84 Calculator</title> <style> .embed-container { max-width: 800px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

    .embed-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 25px;
        border: 1px solid #e9ecef;
    }
    
    .embed-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .embed-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin: 0;
    }
    
    .copy-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .copy-btn:hover {
        background: #218838;
        transform: translateY(-1px);
    }
    
    .copy-btn.copied {
        background: #007bff;
    }
    
    .code-block {
        background: #2d3748;
        color: #e2e8f0;
        padding: 15px;
        border-radius: 6px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.4;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        border: 1px solid #4a5568;
    }
    
    .code-block:hover {
        background: #1a202c;
    }
    
    @media (max-width: 768px) {
        .embed-container {
            padding: 15px;
        }
        
        .embed-section {
            padding: 20px;
        }
        
        .embed-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .code-block {
            font-size: 12px;
        }
    }
</style>

</head> <body> <div class="embed-container">  <div class="embed-section"> <div class="embed-header"> <h3 class="embed-title">Standard Embed (600x800)</h3> <button class="copy-btn" onclick="copyCode('standard')">Copy</button> </div> <div class="code-block" id="standard-code"><iframe src="https://deeppink-echidna-633970.hostingersite.com/embed.html" width="600" height="800" frameborder="0" title="TI-84 Plus CE Calculator"></iframe></div> </div>

    <!-- Responsive Embed Section -->
    <div class="embed-section">
        <div class="embed-header">
            <h3 class="embed-title">Responsive Embed</h3>
            <button class="copy-btn" onclick="copyCode('responsive')">Copy</button>
        </div>
        <div class="code-block" id="responsive-code">&lt;div style="position: relative; padding-bottom: 133.33%; height: 0; overflow: hidden;"&gt;
&lt;iframe src="https://deeppink-echidna-633970.hostingersite.com/embed.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        frameborder="0" 
        title="TI-84 Plus CE Calculator"&gt;
&lt;/iframe&gt;

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

<script>
    function copyCode(type) {
        const codeElement = document.getElementById(type + '-code');
        const button = event.target;
        
        // Create a temporary textarea to copy the text
        const textarea = document.createElement('textarea');
        textarea.value = codeElement.textContent;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        // Update button text and style
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.classList.add('copied');
        
        // Reset button after 2 seconds
        setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove('copied');
        }, 2000);
    }
</script>

</body> </html>

then i simply went to my site page when i wanna show the embed useed the html widgted eithe rond efault wordpress html widget or the elementor and added the there as well now it shows like this now i copied the code the iframe one whihc is meant byother users to u kno copy and embed on their sites and to make sure it works i try to use this

on a dumy page and it shows me this isnt here a whole calcuator shoudl appear like we just made above ?

Show full message

image.png

Screenshot of ti84calc.com/

76d ago

i mad both these files you just gave me and added them in public _ thml but still the calcalotr is not being emebd ? it is showng us the home page

76d ago

calculator-ti30xa.php

WorkingWorking...

Working...

ok this is my plugins code

    <!-- TI-84 Plus CE Calculator -->
    <div style="display: flex; flex-direction: column; align-items: center; margin: 20px auto; max-width: 100%;">
      <!-- Calculator container -->
      <div id="calculatorDiv" style="outline: none !important; margin-left: auto; margin-right: auto;"></div>
      
      <!-- Controls -->
      <div style="padding: 10px; max-width: 300px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 10px;">
        <a id="ti84_popup_button" href="javascript:void(0);" style="display: inline-block; padding: 8px 16px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; cursor: pointer; text-align: center;">Open in a separate window</a>
        <p style="font-size: 11px; line-height: normal; color: #666; margin-top: 10px;">
          Copyright disclaimer: The files for the emulator itself are not hosted on this website. 
          They are downloaded from <a href="https://mn.testnav.com/client/index.html#login?username=LGN265231722&password=L5E4J8P8" target="_blank">testnav.com</a>, 
          where you can already use it for free.
        </p>
      </div>
    </div>

    <!-- TI Calculator Required CSS -->
    <link rel="stylesheet" type="text/css" href="https://mn.testnav.com/client/public/stylesheets/tn.css"/>

    <!-- TI Calculator Required Script -->
    <script src="https://mn.testnav.com/client/texasinstruments/js/ELG-min.js"></script>

    <!-- Initialize Calculator -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Proxy the XMLHttpRequest.open to remove the hash from URLs
        XMLHttpRequest.prototype.open = new Proxy(XMLHttpRequest.prototype.open, {
          apply: function (target, thisArg, args) {
            if (typeof args[1] === "string") {
              args[1] = args[1].replace(/#.*$/, "");
            }
            Reflect.apply(target, thisArg, args);
          },
        });
        
        // Initialize calculator
        var ti84 = new TI84PCE({
          ROMLocation: 'https://mn.testnav.com/client/texasinstruments/bin/No_AppsCE.h84statej#.h84statej',
          FaceplateLocation: 'https://mn.testnav.com/client/texasinstruments/images/TI84CE_touch.svg#.svg'
        });
        
        // Setup popup functionality
        var popupButton = document.getElementById('ti84_popup_button');
        var calculatorDiv = document.getElementById('calculatorDiv');
        
        popupButton.addEventListener('click', function() {
          var width = window.getComputedStyle(calculatorDiv)["width"].replace("px", "");
          var height = window.getComputedStyle(calculatorDiv)["height"].replace("px", "");
          
          // Create a minimal HTML page with just the calculator
          var popupContent = `
            <!DOCTYPE html>
            <html>
            <head>
              <title>TI-84 Plus CE Calculator</title>
              <link rel="stylesheet" href="https://mn.testnav.com/client/public/stylesheets/tn.css">
              <style>
                body { margin: 0; padding: 0; }
                .calculatorDiv { outline: none !important; }
              </style>
              <script src="https://mn.testnav.com/client/texasinstruments/js/ELG-min.js"><\/script>
            </head>
            <body>
              <div id="calculatorDiv"></div>
              <script>
                // Remove hash from URLs in XMLHttpRequest
                XMLHttpRequest.prototype.open = new Proxy(XMLHttpRequest.prototype.open, {
                  apply: function (target, thisArg, args) {
                    if (typeof args[1] === "string") {
                      args[1] = args[1].replace(/#.*$/, "");
                    }
                    Reflect.apply(target, thisArg, args);
                  },
                });
                
                // Initialize calculator
                document.addEventListener('DOMContentLoaded', function() {
                  new TI84PCE({
                    ROMLocation: 'https://mn.testnav.com/client/texasinstruments/bin/No_AppsCE.h84statej#.h84statej',
                    FaceplateLocation: 'https://mn.testnav.com/client/texasinstruments/images/TI84CE_touch.svg#.svg'
                  });
                });
              <\/script>
            </body>
            </html>
          `;
          
          // Create a blob URL for the popup content
          var blob = new Blob([popupContent], {type: 'text/html'});
          var blobUrl = URL.createObjectURL(blob);
          
          // Open popup window
          window.open(blobUrl, 'TI84Calculator', `height=${height}, width=${width}`);
        });
      });
    </script>
    <?php
    // Return the buffered content
    return ob_get_clean();
}

}

// Initialize the plugin new TI84_Calculator_Simple();

adn this is wht it looks like i want you to just remove the open in seperate window button as well as the content right below it the only calcualotr rmeains

    .embed-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 25px;
        border: 1px solid #e9ecef;
    }
    
    .embed-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .embed-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin: 0;
    }
    
    .copy-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .copy-btn:hover {
        background: #218838;
        transform: translateY(-1px);
    }
    
    .copy-btn.copied {
        background: #007bff;
    }
    
    .code-block {
        background: #2d3748;
        color: #e2e8f0;
        padding: 15px;
        border-radius: 6px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.4;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        border: 1px solid #4a5568;
    }
    
    .code-block:hover {
        background: #1a202c;
    }
    
    @media (max-width: 768px) {
        .embed-container {
            padding: 15px;
        }
        
        .embed-section {
            padding: 20px;
        }
        
        .embed-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .code-block {
            font-size: 12px;
        }
    }
</style>

    <!-- Responsive Embed Section -->
    <div class="embed-section">
        <div class="embed-header">
            <h3 class="embed-title">Responsive Embed</h3>
            <button class="copy-btn" onclick="copyCode('responsive')">Copy</button>
        </div>
        <div class="code-block" id="responsive-code">&lt;div style="position: relative; padding-bottom: 133.33%; height: 0; overflow: hidden;"&gt;
&lt;iframe src="https://deeppink-echidna-633970.hostingersite.com/embed.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        frameborder="0" 
        title="TI-84 Plus CE Calculator"&gt;
&lt;/iframe&gt;

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

<script>
    function copyCode(type) {
        const codeElement = document.getElementById(type + '-code');
        const button = event.target;
        
        // Create a temporary textarea to copy the text
        const textarea = document.createElement('textarea');
        textarea.value = codeElement.textContent;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        
        // Update button text and style
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.classList.add('copied');
        
        // Reset button after 2 seconds
        setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove('copied');
        }, 2000);
    }
</script>

</body> </html>

on a dumy page and it shows me this isnt here a whole calcuator shoudl appear like we just made above ?

Show full message

image.png

Screenshot of ti84calc.com/

76d ago

i mad both these files you just gave me and added them in public _ thml but still the calcalotr is not being emebd ? it is showng us the home page

76d ago

calculator-ti30xa.php

WorkingWorking...

Working...

calculator-ti30xa.php

calculator-ti30xs.php

ti30xs-plugin-addition.php

ti84-calculator-elementor-safe.php