LongdiscoTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex; 
            flex-direction: column;
            align-items: center; /* Center content vertically */
            background-color: #f0f0f0; /* Set background color */
            min-height: 100vh; /* Ensure full viewport height */
        }

        h1 {
            background-color: #4CAF50; /* Header background color */
            color: white; /* Header text color */
            padding: 10px; /* Header padding */
            text-align: center;
        }

        #container {
            display: flex;
            flex: 1;
            justify-content: space-between; /* Space out the elements */
            width: 90%; /* Set the container width */
            background-color: #fff; /* Container background color */
            border-radius: 5px; /* Add border radius */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
            margin-top: 20px; /* Add top margin */
        }

        #leftBox, #rightBox {
            flex: 1;
            padding: 20px; /* Increase padding */
            box-sizing: border-box;
        }
        
        #leftBox textarea, #rightBox textarea {
            width: 100%; /* Full width text areas */
            padding: 10px; /* Padding for text areas */
            border: 1px solid #ccc; /* Add a border */
            border-radius: 5px; /* Add border radius */
        }

        #convertButton {
            margin-top: 10px; /* Add top margin */
            padding: 10px 20px; /* Increase padding */
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #counter {
            margin-top: 10px;
        }

        #htmlBox {
            flex: 1;
            padding: 20px; /* Increase padding */
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }

        #htmlBox h2 {
            margin-top: 0;
            color: #4CAF50; /* Heading color */
        }

        #htmlOutput {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }

        /* Style for the converted text */
        #rightBox #outputBox {
            border: 1px solid #4CAF50; /* Border color for converted text */
            padding: 10px;
            border-radius: 5px;
            background-color: #f0f0f0; /* Background color for converted text */
            color: #333; /* Text color for converted text */
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
        }

    </style>
</head>
<body>
<h1> WS Long Description Tool </h1>
    <div id="container">
        <div id="leftBox">
           <grammarly-editor-plugin clientId="client_7LYtAZtGKRVHfCaESL3J8R" data-v-552086f4>
               <textarea id="inputBox" rows="10" placeholder="Enter text"></textarea>
           </grammarly-editor-plugin>
            <div id="leftCounter" class="counter"></div>
        </div>
        <div id="rightBox">
            <textarea id="outputBox" rows="10" placeholder="Converted text"></textarea>
            <div id="rightCounter" class="counter"></div>
        </div>
        <button id="convertButton" onclick="convertLongDescription()">Convert</button>
    </div>

<div id="htmlBox" style="width: 80%;">
    <h2>Fix Special Characters</h2>
    <div id="htmlOutput"></div>
    <button onclick="convertToHTML()">Click to Fix Special Characters</button>
    <button onclick="copyToClipboard()">Copy HTML</button> <!-- Add the copy button -->
</div>

    <div>
        <h1>Instructions: <a href="https://docs.google.com/document/d/1dvMZ7-vK3PykbRRRWjDSqgFD-uFATRzMAZLkm9Gaxp0/edit#heading=h.x5plgr8op2n5">Phase 4 Review and Revise Product Long Description</a></h1>
        <ol>
            <li><strong>The Long Description will start with the First Link which will contain the Product Title/Name, which will be the first line of the Enter Text Box.</strong></li>
            <li><strong>Followed by the first line of the Product Title, there would be 5 Bullet Pointers encapsulated as below Example:
                <pre>                        
                    &lt;p&gt; &lt;strong&gt;Title&lt;/strong&gt; &lt;/p&gt;
                    &lt;ul&gt;
                    &lt;li&gt;Feature Bullet 1&lt;/li&gt;
                    &lt;li&gt;Feature Bullet 2&lt;/li&gt;
                    &lt;li&gt;Feature Bullet 3&lt;/li&gt;
                    &lt;li&gt;Feature Bullet 4&lt;/li&gt;
                    &lt;li&gt;Feature Bullet 5&lt;/li&gt;
                    &lt;/ul&gt;
                </pre>
            <li><strong> All product-long descriptions need to have at least five bullets.
            <li><strong>If the product has fewer than five bullets
                    First, see if any of the existing bullets can be broken up into separate claims/features
                    If more bullets are still needed, pull info out of the product's short description or label, prioritizing features, claims, and product size
                    Claims are things like “Paraben Free,” “Vegan”, “Organic,” and “Cruelty-Free”
    
            <li><strong><a href="https://drive.google.com/file/d/16AB6UCd5ihPNpo3wC0zolrRuiIGuonOY/view?usp=sharing">The trick for Long Description Video(Old)</a>
            <li><strong><a href="https://drive.google.com/file/d/1g3sg5r3wXkmNhFSejqmtInTzVtX-6tLi/view?usp=sharing">Notes for Long Description</a>
            <li><strong><a href="https://docs.google.com/spreadsheets/d/1nm0R_-snilgPF8V7PUbiHCYo3BKrajBpd8_bFahzB5s/edit#gid=0">Long Description Quick Input Formula Template(Old)</a>
            <li><strong><a href="https://www.awesomescreenshot.com/video/22489102?key=e9f93dc4825d3da467b464db6b818f22">How to Use above Tool? Video</a>
            </strong></li>
            <ul id="bulletList">
                <!-- Bullet points will be added dynamically here -->
            </ul>
        </ol>
    </div>
    <div id="app"></div>
    <script src="./index.mjs" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=client_7LYtAZtGKRVHfCaESL3J8R"></script>
##########################################################################################

    <script>
function convertLongDescription() {
    var inputText = document.getElementById('inputBox').value;
    var outputText = document.getElementById('outputBox');
    var leftCounter = document.getElementById('leftCounter');
    var rightCounter = document.getElementById('rightCounter');

    // Split the input text into lines
    var lines = inputText.split('\n');

    // Use a default title
    var productTitle = "Title";

    // Create the Long Description structure with a blank line after the title
    var longDescription = '<p><strong>' + productTitle + '</strong></p>\n\n<ul>\n';

    // Iterate through all the lines and add them as list items
    for (var i = 0; i < lines.length; i++) {
        // Skip empty lines
        if (lines[i].trim() !== '') {
            // Ensure we don't exceed the number of lines in input
            var bulletPoint = lines[i];

            // Add bullet points with proper formatting
            longDescription += '<li>' + bulletPoint + '</li>\n';
        }
    }

    longDescription += '</ul>';

    outputText.innerHTML = longDescription;

    // Update character counter
    leftCounter.innerText = 'Characters: ' + inputText.length;
    rightCounter.innerText = 'Characters: ' + longDescription.length;
}


        // Function to convert the input into HTML format
function convertToHTML() {
    var inputText = document.getElementById('inputBox').value;
    var htmlOutput = document.getElementById('htmlOutput');

    // Replace special character codes with symbols
    var formattedText = inputText.replace(/&quot;/g, '"');
    formattedText = formattedText.replace(/&amp;/g, '&');
    formattedText = formattedText.replace(/&lt;/g, '<');
    formattedText = formattedText.replace(/&gt;/g, '>');

    // Split the input text into lines
    var lines = formattedText.split('\n');

    // Start with an empty HTML structure for the list
    var htmlDescription = '<ul>\n';

    for (var i = 0; i < lines.length; i++) {
        // Skip empty lines
        if (lines[i].trim() !== '') {
            htmlDescription += '  <li>' + lines[i] + '</li>\n';
        }
    }

    htmlDescription += '</ul>';

    // Set the innerHTML to insert HTML correctly
    htmlOutput.innerHTML = htmlDescription;
}

    </script>
</body>
</html>