# InstantToolsPro — tools.css Integration Guide ## `/assets/css/tools.css` — Sabhi Tools Mein Use Karne Ka Tarika --- ## STEP 1 — CSS FILE PLACE KARO File rakho yahan: ``` /assets/css/tools.css ``` --- ## STEP 2 — HAR TOOL PAGE KE `` MEIN ADD KARO Ye line **header.php** mein add karo (ek baar, sab tools mein auto-apply ho jayegi): ```html ``` Ya agar per-tool control chahiye, tab har tool ki PHP file ke `` mein: ```html ``` --- ## STEP 3 — TOOL-SPECIFIC ACCENT COLOR SET KARO Har tool ke `` tag par ek class add karo: ```html ``` --- ## STEP 4 — SCROLL REVEAL JS SNIPPET Ye **ek baar** apne `main.js` ya footer mein add karo. Ye bounce rate reduce karta hai — user scroll karta hai to elements animate hote hain. ```javascript // Scroll Reveal — itp-reveal class wale elements animate hote hain (function() { if (!('IntersectionObserver' in window)) return; var els = document.querySelectorAll('.itp-reveal'); if (!els.length) return; var io = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.add('itp-visible'); io.unobserve(entry.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); els.forEach(function(el) { io.observe(el); }); })(); ``` --- ## STEP 5 — STICKY MOBILE CTA BAR JS SNIPPET Ye bhi `main.js` ya har tool ki script mein add karo: ```javascript // Sticky mobile bar — upload ke baad hide hota hai (function() { function isMobile() { return window.innerWidth < 640; } var stickyBar = document.querySelector('.itp-sticky-bar'); if (!stickyBar) return; function showSticky() { if (!isMobile()) return; document.body.classList.add('itp-sticky-active'); stickyBar.style.display = 'block'; stickyBar.removeAttribute('aria-hidden'); } function hideSticky() { document.body.classList.remove('itp-sticky-active'); stickyBar.style.display = 'none'; stickyBar.setAttribute('aria-hidden', 'true'); } // Sticky CTA clicks file input var stickyCta = stickyBar.querySelector('.itp-sticky-cta'); var fileInput = document.querySelector('input[type="file"]'); if (stickyCta && fileInput) { stickyCta.addEventListener('click', function() { fileInput.click(); }); } // Show on load if mobile if (isMobile()) showSticky(); // Hide after file upload (call hideSticky() from your upload success handler) window.itpHideSticky = hideSticky; window.itpShowSticky = showSticky; })(); ``` Phir apne upload success handler mein call karo: ```javascript // Jab file upload ho jaye: if (window.itpHideSticky) window.itpHideSticky(); // Jab reset ho jaye: if (window.itpShowSticky) window.itpShowSticky(); ``` --- ## STEP 6 — FAQ ACCORDION JS (optional) ```javascript // FAQ accordion document.querySelectorAll('.itp-faq-q').forEach(function(btn) { btn.addEventListener('click', function() { var item = btn.closest('.itp-faq-item'); var isOpen = item.classList.contains('itp-open'); // Close all document.querySelectorAll('.itp-faq-item').forEach(function(el) { el.classList.remove('itp-open'); }); // Open clicked if (!isOpen) item.classList.add('itp-open'); }); }); ``` --- ## TOOL PAGE HTML TEMPLATE (Copy-paste ready) ```php
Warning: include(): open_basedir restriction in effect. File(../header.php) is not within the allowed path(s): (/www/wwwroot/instanttoolspro.com/:/tmp/) in /www/wwwroot/instanttoolspro.com/test.php on line 163

Warning: include(../header.php): Failed to open stream: Operation not permitted in /www/wwwroot/instanttoolspro.com/test.php on line 163

Warning: include(): Failed opening '../header.php' for inclusion (include_path='.:/www/server/php/83/lib/php') in /www/wwwroot/instanttoolspro.com/test.php on line 163
Home › PDF Tools › Tool Name
Free PDF Tool

Tool Name Online — Free & Instant

Short description. No signup needed.

✓ No Sign-up 🔒 100% Secure ⚡ Instant Result
Drop to upload!
Drop your PDF or click to upload

Up to 100 MB · All browsers supported

Upload PDF Now

🔒 Files deleted automatically after 1 hour

1
Upload PDF
→
2
Process
→
3
Download Free
Uploading…
Please wait
Processing…
This may take a few seconds
0%

How to Use This Tool (3 Simple Steps)

1

Upload Your File

Drag & drop your PDF or click to upload. Up to 100 MB supported.

2

Choose Options

Select your settings and preferences for the output.

3

Download Instantly

Click Download and get your processed file in seconds.

4

100% Free & Secure

No signup, no watermark, files auto-deleted after 1 hour.

More Free PDF Tools

View All →

Compress PDF

Reduce file size without quality loss.

Use Tool →

Title About Tool

SEO content here...

Frequently Asked Questions

Answer here.

Warning: include(): open_basedir restriction in effect. File(../footer.php) is not within the allowed path(s): (/www/wwwroot/instanttoolspro.com/:/tmp/) in /www/wwwroot/instanttoolspro.com/test.php on line 378

Warning: include(../footer.php): Failed to open stream: Operation not permitted in /www/wwwroot/instanttoolspro.com/test.php on line 378

Warning: include(): Failed opening '../footer.php' for inclusion (include_path='.:/www/server/php/83/lib/php') in /www/wwwroot/instanttoolspro.com/test.php on line 378
``` --- ## OLD CSS → NEW CLASS MAPPING (Rotate PDF se migration) Agar purana `rpdf-` prefix wala CSS migrate karna ho: | Old Class (rpdf-) | New Class (itp-) | |----------------------------|-------------------------------| | `rpdf-hero` | `itp-hero` | | `rpdf-hero-badge` | `itp-hero-badge` | | `rpdf-hero-sub` | `itp-hero-sub` | | `rpdf-pills` | `itp-pills` | | `rpdf-pill-g` | `itp-pill itp-pill-green` | | `rpdf-pill-b` | `itp-pill itp-pill-blue` | | `rpdf-pill-r` | `itp-pill itp-pill-red` | | `rpdf-upload-zone` | `itp-upload-zone` | | `rpdf-uz-icon` | `itp-uz-icon` | | `rpdf-uz-cta` | `itp-uz-cta` | | `rpdf-uz-hint` | `itp-uz-hint` | | `rpdf-steps-bar` | `itp-steps-bar` | | `rpdf-step-item` | `itp-step-item` | | `rpdf-error.show` | `itp-alert itp-show` | | `rpdf-sec-note` | `itp-sec-note` | | `rpdf-file-bar` | `itp-file-bar` | | `rpdf-file-badge` | `itp-fbadge` | | `rpdf-btn-convert` | `itp-btn itp-btn-primary itp-btn-xl itp-btn-full` | | `rpdf-btn-dl` | `itp-btn itp-btn-download` | | `rpdf-btn-reset` | `itp-btn itp-btn-outline` | | `rpdf-spinner` | `itp-spinner` | | `rpdf-processing.show` | `itp-processing itp-show` | | `rpdf-suc-banner` | `itp-suc-banner` | | `rpdf-result-row` | `itp-result-row` | | `rpdf-rs-card` | `itp-rs-card` | | `rpdf-mobile-sticky` | `itp-sticky-bar` | | `rpdf-sticky-cta` | `itp-sticky-cta` | | `rpdf-fu`, `rpdf-fu2`… | `itp-fu`, `itp-fu2`… | | `rpdf-prog-track` | `itp-prog-track` | | `rpdf-prog-fill` | `itp-prog-fill` | | `rpdf-steps` (how section) | `itp-steps-grid` | | `rpdf-step` | `itp-step-card` | | `rpdf-related` | `itp-related` | | `rpdf-related-grid` | `itp-related-grid` | | `rpdf-rel-card` | `itp-rel-card` | | `rpdf-seo` | `itp-seo` | | `rpdf-bc` | `itp-bc` | --- ## IMPORTANT NOTES 1. **Tool-specific CSS delete mat karo** — sirf itp- wale shared components replace honge. Unique tool UI (page grid, per-card controls etc.) apne prefix se hi rakho. 2. **tools.css ko minify karo** production par: `cleancss -o tools.min.css tools.css` 3. **Cache header set karo** server par tools.css ke liye: ``` Cache-Control: public, max-age=604800, immutable ``` 4. **Scroll reveal** sirf below-fold content par lagao — hero pe mat lagao (woh already visible hai). 5. **Bounce rate ke liye sabse impactful cheezein tools.css mein:** - Shimmer on upload CTA (draws eye immediately) - Blob drift animation on hero (keeps page feeling "alive") - Scroll reveal on how-it-works + related tools (reward for scrolling) - Sticky mobile bar (second chance to convert if user scrolls past upload) - FAQ accordion (user interaction = engagement = lower bounce)