文件操作 - calculator.html

文件: /storage/v12552/steemteam/public_html/tools/calculator.html

编辑文件内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Area Rug Calculator</title>
  <link rel="icon" type="image/png" href="./icon.png">
  <link rel="apple-touch-icon" href="./icon.png">
  <meta name="msapplication-TileImage" content="./icon.png">
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-5J0ETWV3PV"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

gtag('config', 'G-5J0ETWV3PV');
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(180deg, #FFD966, #E59800);
    }
    .calculator-container {
      width: 90%;
      margin: 1rem auto;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 300px;
    }
    .header {
      text-align: center;
      width: 100%;
      margin-bottom: 0.5rem;
    }
    .logo {
      max-width: 120px;
      height: auto;
      margin-bottom: 0.25rem;
    }
    h2 {
      font-size: 1.5rem;
      color: #000000;
      text-transform: uppercase;
      margin: 0;
      font-weight: 500;
    }
    .description {
      font-size: 0.9rem;
      color: #FFFFFF;
      margin: 0;
    }
    .main-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .card {
      background-color: #FFD966;
      border-radius: 15px;
      padding: 1.5rem;
      width: 400px;
      max-width: 400px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      margin-bottom: 1rem;
      animation: fadeIn 0.5s ease-in;
      box-sizing: border-box;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .placeholder {
      font-size: 1.2rem;
      color: #333333;
      text-align: center;
      margin: 1rem 0;
    }
    label { font-size: 1rem; color: #000000; margin-bottom: 0.5rem; display: block; }
    input[type="number"] {
      width: 100%;
      max-width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      background-color: #FFFFFF;
      color: #000000;
      min-height: 48px;
      margin-bottom: 0.5rem;
      box-sizing: border-box;
      inputmode="decimal";
    }
    .radio-group {
      display: flex;
      justify-content: space-around;
      margin-bottom: 0.5rem;
    }
    .radio-group label {
      background-color: #78BE20;
      padding: 0.5rem 1rem;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.2s;
      color: #FFFFFF;
      font-family: 'Montserrat', Arial, sans-serif;
    }
    .radio-group label:hover { transform: scale(1.05); }
    input[type="radio"] { display: none; }
    input[type="radio"]:checked + span {
      font-weight: bold;
      color: #000000;
    }
    .calculate-button {
      width: 100%;
      max-width: 100%;
      padding: 1rem;
      background-color: #78BE20;
      color: #FFFFFF;
      border: none;
      border-radius: 10px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: transform 0.2s, background-color 0.3s;
      margin-top: 0.5rem;
      box-sizing: border-box;
    }
    .calculate-button:hover {
      background-color: #5A8F1A;
      transform: scale(1.05);
    }
    #result {
      font-size: 1.2rem;
      color: #333333;
      text-align: center;
      margin: 1rem 0;
      word-wrap: break-word;
      font-weight: bold;
    }
    .footer {
      width: 100%;
      text-align: center;
      margin-top: 1rem;
      color: #FFFFFF;
    }
    @media (min-width: 701px) {
      .main-content {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
      }
      .main-content .card:first-child {
        margin-right: 1rem;
      }
    }
    @media (max-width: 700px) {
      .main-content { align-items: center; }
      .card { width: 400px; max-width: 400px; }
    }
    #shapeCard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      box-sizing: border-box;
    }
    .shape-button {
      width: 100%;
      padding: 0.25rem;
      background-color: #78BE20;
      color: #FFFFFF;
      border: 2px solid transparent;
      border-radius: 10px;
      font-size: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 70px;
      position: relative;
      cursor: pointer;
      transition: transform 0.2s;
      box-sizing: border-box;
    }
    .shape-button:hover {
      transform: scale(1.05);
    }
    .shape-button.selected {
      border: 4px solid #FFD966;
      color: #000000;
      padding: 0.23rem;
    }
    .shape-button.selected span {
      font-weight: bold;
    }
    .shape-button span {
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: normal;
    }
    .shape-button img {
      width: 60px;
      height: 60px;
      margin-bottom: 0.1rem;
      display: block;
      position: relative;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="calculator-container">
    <div class="header">
      <img class="logo" src="./logo.png" alt="Stanley Steemer Logo">
      <h2>SQUARE FOOTAGE CALCULATOR</h2>
      <p class="description">Calculate your rug's square footage with ease.</p>
    </div>
    <div class="main-content">
      <div class="card">
        <label>Rug Shape:</label>
        <div id="shapeCard">
          <button class="shape-button" onclick="toggleInputs('square', true)">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23FFD966'/%3E%3C/svg%3E" alt="Square Rug">
            <span>Square</span>
          </button>
          <button class="shape-button" onclick="toggleInputs('rectangle', true)">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect width='100' height='60' fill='%23FFD966'/%3E%3C/svg%3E" alt="Rectangle Rug">
            <span>Rectangle</span>
          </button>
          <button class="shape-button" onclick="toggleInputs('round', true)">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FFD966'/%3E%3C/svg%3E" alt="Round Rug">
            <span>Round</span>
          </button>
          <button class="shape-button" onclick="toggleInputs('oval', true)">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cellipse cx='50' cy='30' rx='50' ry='30' fill='%23FFD966'/%3E%3C/svg%3E" alt="Oval Rug">
            <span>Oval</span>
          </button>
        </div>
        <div class="radio-group">
          <label><input type="radio" name="unit" value="feet" checked onchange="updateLabels()"><span>Feet</span></label>
          <label><input type="radio" name="unit" value="inches" onchange="updateLabels()"><span>Inches</span></label>
        </div>
      </div>
      <div class="card" id="input-card">
        <p id="result" style="display: none;"></p>
        <p class="placeholder">Ready to calculate your rug's square footage? Please select a shape and enter your dimensions!</p>
        <label for="side" id="side-label" style="display: none;">Side Length (<span id="sideUnit">feet</span>):</label>
        <input type="number" id="side" step="0.1" min="0" placeholder="e.g., 6.5" autocomplete="off" inputmode="decimal" style="display: none;">
        <label for="length" id="length-label" style="display: none;">Length (<span id="lengthUnit">feet</span>):</label>
        <input type="number" id="length" step="0.1" min="0" placeholder="e.g., 8" autocomplete="off" inputmode="decimal" style="display: none;">
        <label for="width" id="width-label" style="display: none;">Width (<span id="widthUnit">feet</span>):</label>
        <input type="number" id="width" step="0.1" min="0" placeholder="e.g., 5" autocomplete="off" inputmode="decimal" style="display: none;">
        <label for="diameter" id="diameter-label" style="display: none;">Diameter (<span id="diameterUnit">feet</span>):</label>
        <input type="number" id="diameter" step="0.1" min="0" placeholder="e.g., 7" autocomplete="off" inputmode="decimal" style="display: none;">
        <label for="diameter1" id="diameter1-label" style="display: none;">Longer Diameter (<span id="diameter1Unit">feet</span>):</label>
        <input type="number" id="diameter1" step="0.1" min="0" placeholder="e.g., 9" autocomplete="off" inputmode="decimal" style="display: none;">
        <label for="diameter2" id="diameter2-label" style="display: none;">Shorter Diameter (<span id="diameter2Unit">feet</span>):</label>
        <input type="number" id="diameter2" step="0.1" min="0" placeholder="e.g., 6" autocomplete="off" inputmode="decimal" style="display: none;">
        <button class="calculate-button" onclick="calculateSquareFootage()">Calculate</button>
      </div>
    </div>
    <div class="footer">
      <p>Stanley Steemer • 1-800-STEEMER® • stanleysteemer.com</p>
    </div>
  </div>

// Minimal setup on load to update labels
    window.onload = function() {
      console.log('Window loaded');
      updateLabels();
    };

// Function to detect if the device is mobile, including Omnissa Browser and Samsung tablets
    function isMobileDevice() {
      return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Tablet|Galaxy Tab|Omnissa|Workspace ONE/i.test(navigator.userAgent);
    }

function toggleInputs(shape, isUserClick) {
      console.log('Toggling shape:', shape, 'Is User Click:', isUserClick);
      const inputCard = document.getElementById('input-card');
      const placeholder = inputCard.querySelector('.placeholder');
      const sideLabel = document.getElementById('side-label');
      const lengthLabel = document.getElementById('length-label');
      const widthLabel = document.getElementById('width-label');
      const diameterLabel = document.getElementById('diameter-label');
      const diameter1Label = document.getElementById('diameter1-label');
      const diameter2Label = document.getElementById('diameter2-label');
      const sideInput = document.getElementById('side');
      const lengthInput = document.getElementById('length');
      const widthInput = document.getElementById('width');
      const diameterInput = document.getElementById('diameter');
      const diameter1Input = document.getElementById('diameter1');
      const diameter2Input = document.getElementById('diameter2');
      const result = document.getElementById('result');
      const buttons = document.querySelectorAll('#shapeCard .shape-button');

placeholder.style.display = 'none';
      sideLabel.style.display = 'none';
      lengthLabel.style.display = 'none';
      widthLabel.style.display = 'none';
      diameterLabel.style.display = 'none';
      diameter1Label.style.display = 'none';
      diameter2Label.style.display = 'none';
      sideInput.style.display = 'none';
      lengthInput.style.display = 'none';
      widthInput.style.display = 'none';
      diameterInput.style.display = 'none';
      diameter1Input.style.display = 'none';
      diameter2Input.style.display = 'none';
      result.style.display = 'none';

if (shape === 'square') {
        placeholder.style.display = 'block';
        sideLabel.style.display = 'block';
        sideInput.style.display = 'block';
        if (!isMobileDevice()) {
          sideInput.focus(); // Focus on Side Length input only on non-mobile devices
        }
      } else if (shape === 'rectangle') {
        placeholder.style.display = 'block';
        lengthLabel.style.display = 'block';
        widthLabel.style.display = 'block';
        lengthInput.style.display = 'block';
        widthInput.style.display = 'block';
        if (!isMobileDevice()) {
          lengthInput.focus(); // Focus on Length input only on non-mobile devices
        }
      } else if (shape === 'round') {
        placeholder.style.display = 'block';
        diameterLabel.style.display = 'block';
        diameterInput.style.display = 'block';
        if (!isMobileDevice()) {
          diameterInput.focus(); // Focus on Diameter input only on non-mobile devices
        }
      } else if (shape === 'oval') {
        placeholder.style.display = 'block';
        diameter1Label.style.display = 'block';
        diameter2Label.style.display = 'block';
        diameter1Input.style.display = 'block';
        diameter2Input.style.display = 'block';
        if (!isMobileDevice()) {
          diameter1Input.focus(); // Focus on Longer Diameter input only on non-mobile devices
        }
      }

buttons.forEach(button => button.classList.remove('selected'));
      const selectedButton = document.querySelector(`#shapeCard .shape-button[onclick="toggleInputs('${shape}', true)"]`);
      if (selectedButton) selectedButton.classList.add('selected');

// Only scroll on user click in portrait mode
      if (shape && isUserClick && window.innerWidth <= 700) {
        inputCard.scrollIntoView({ behavior: 'smooth' });
      }

if (shape) resetForm();
    }

function updateLabels() {
      console.log('Updating labels');
      const unit = document.querySelector('input[name="unit"]:checked')?.value;
      if (unit) {
        const unitText = unit === 'feet' ? 'feet' : 'inches';
        document.getElementById('sideUnit').textContent = unitText;
        document.getElementById('lengthUnit').textContent = unitText;
        document.getElementById('widthUnit').textContent = unitText;
        document.getElementById('diameterUnit').textContent = unitText;
        document.getElementById('diameter1Unit').textContent = unitText;
        document.getElementById('diameter2Unit').textContent = unitText;
      }
    }

function resetForm() {
      console.log('Resetting form');
      document.getElementById('side').value = '';
      document.getElementById('length').value = '';
      document.getElementById('width').value = '';
      document.getElementById('diameter').value = '';
      document.getElementById('diameter1').value = '';
      document.getElementById('diameter2').value = '';
      document.getElementById('result').style.display = 'none';
      document.querySelector('#input-card .placeholder').style.display = 'block';
    }

function customRound(value) {
      return Math.round(value);
    }

function calculateSquareFootage() {
      console.log('calculateSquareFootage called');
      const shape = document.querySelector('#shapeCard .shape-button.selected')?.getAttribute('onclick')?.match(/'(\w+)'/)[1];
      const unit = document.querySelector('input[name="unit"]:checked')?.value;
      console.log('Shape:', shape, 'Unit:', unit);

if (!shape || !unit) {
        console.warn('Calculation failed: shape or unit undefined');
        return showError('Please select a shape and unit');
      }

let area;
      if (shape === 'square') {
        const side = parseFloat(document.getElementById('side').value);
        if (isNaN(side) || side <= 0) return showError('Invalid side length');
        area = unit === 'inches' ? (side / 12) ** 2 : side ** 2;
      } else if (shape === 'rectangle') {
        const length = parseFloat(document.getElementById('length').value);
        const width = parseFloat(document.getElementById('width').value);
        if (isNaN(length) || isNaN(width) || length <= 0 || width <= 0) return showError('Invalid dimensions');
        area = unit === 'inches' ? (length / 12) * (width / 12) : length * width;
      } else if (shape === 'round') {
        const diameter = parseFloat(document.getElementById('diameter').value);
        if (isNaN(diameter) || diameter <= 0) return showError('Invalid diameter');
        area = unit === 'inches' ? Math.PI * ((diameter / 12) / 2) ** 2 : Math.PI * (diameter / 2) ** 2;
      } else if (shape === 'oval') {
        const d1 = parseFloat(document.getElementById('diameter1').value);
        const d2 = parseFloat(document.getElementById('diameter2').value);
        if (isNaN(d1) || isNaN(d2) || d1 <= 0 || d2 <= 0) return showError('Invalid diameters');
        area = unit === 'inches' ? Math.PI * (d1 / 12) * (d2 / 12) / 4 : Math.PI * d1 * d2 / 4;
      }

const roundedArea = customRound(area);
      const result = document.getElementById('result');
      result.style.display = 'block';
      document.querySelector('#input-card .placeholder').style.display = 'none';
      result.innerText = `Square Footage: ${roundedArea} sq ft`;
    }

function showError(message) {
      const result = document.getElementById('result');
      result.style.display = 'block';
      document.querySelector('#input-card .placeholder').style.display = 'none';
      result.innerText = message;
    }

document.querySelectorAll('input[type="number"]').forEach(input => {
      input.addEventListener('click', function() {
        this.select();
      });
    });

// Google Tag Manager (CMG-Orlando)
    (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-MZWQG9Z');
    // End Google Tag Manager

// Google Tag Manager (internal)
    (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-K8K7MM');
    // End Google Tag Manager

// Global site tag (gtag.js) - Google Marketing Platform
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'DC-9789967');

// Event snippet for Remarketing
    gtag('event', 'conversion', {
      'allow_custom_scripts': true,
      'send_to': 'DC-9870257/pagev0/remar0+standard'
    });

// Global site tag (gtag.js) - Google Analytics (internal)
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-66347904-1');

// Global site tag (gtag.js) - Google Marketing Platform (duplicate)
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'DC-9789967');

// jQuery for GA URL tracking
    jQuery( document ).ready( function() {
      var $buttons = jQuery( '.fusion-button[data-ga-url]' );
      jQuery.each( $buttons, function( index, element ) {
        jQuery( element ).attr( 'onclick', 'return gtag_report_conversion(\'' +  jQuery( element ).data( 'ga-url' ) + '\');' );
      } );
    });
  </script>
</body>
</html>

文件操作 - calculator.html

文件: /storage/v12552/steemteam/public_html/tools/calculator.html

编辑文件内容

修改文件时间

删除文件