Any Tools Create use Prompt
Use this prompt for Any Tool using DeepSeek Ai.
Create a modern look design "zip to ppt Converter" with free resource, all function are proper working, and add all possible thing which is important for user point of view, modern design, professional, user friendly and add before and after ''zip to ppt Converter'' feature.
All Codes HtmlPeople Also Visit This Tool: zip To PPT Converter
zip To PPT Converter Html Code Free
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free ZIP to PPT Converter | Modern File Conversion</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--primary-color: #4a90e2;
--secondary-color: #50e3c2;
--background: #f8f9fa;
--text-color: #2d3436;
}
body {
background-color: var(--background);
color: var(--text-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header Styles */
.hero-section {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-radius: 15px;
margin: 20px 0;
}
/* File Upload Section */
.upload-section {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin: 40px 0;
text-align: center;
}
.drag-drop-zone {
border: 2px dashed var(--primary-color);
border-radius: 8px;
padding: 40px;
margin: 20px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.drag-drop-zone:hover {
background: rgba(74, 144, 226, 0.05);
}
.convert-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 12px 35px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s ease;
}
.convert-btn:hover {
transform: translateY(-2px);
}
/* Features Section */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 50px 0;
}
.feature-card {
background: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* Conversion Steps */
.conversion-process {
display: flex;
justify-content: space-between;
margin: 50px 0;
gap: 30px;
}
.before-conversion,
.after-conversion {
flex: 1;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* Progress Bar */
.progress-bar {
width: 100%;
height: 8px;
background: #eee;
border-radius: 4px;
margin: 20px 0;
}
.progress {
height: 100%;
background: var(--secondary-color);
border-radius: 4px;
transition: width 0.3s ease;
}
/* Loading Animation */
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid var(--primary-color);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Download Button */
.download-btn {
background: var(--secondary-color);
color: white;
border: none;
padding: 12px 35px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s ease;
display: none;
}
.download-btn:hover {
transform: translateY(-2px);
}
/* Share Buttons */
.share-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin: 20px 0;
}
.share-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: transform 0.3s ease;
}
.share-btn:hover {
transform: translateY(-2px);
}
/* User Rating System */
.rating {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.rating i {
color: #ffd700;
cursor: pointer;
}
/* Responsive Design */
@media (max-width: 768px) {
.conversion-process {
flex-direction: column;
}
.features {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header class="hero-section">
<h1>Convert ZIP to PowerPoint Instantly</h1>
<p>Free Online Converter - Secure & Fast Processing</p>
</header>
<main>
<section class="upload-section">
<h2>Upload Your ZIP File</h2>
<div class="drag-drop-zone" id="dropZone">
<i class="fas fa-file-archive fa-3x" style="color: var(--primary-color); margin: 20px 0;"></i>
<p>Drag & Drop ZIP File Here</p>
<p>or</p>
<input type="file" id="fileInput" hidden accept=".zip">
<button onclick="document.getElementById('fileInput').click()" class="convert-btn">
Browse Files
</button>
</div>
<div class="progress-bar">
<div class="progress" id="progressBar"></div>
</div>
<div class="loader" id="loader"></div>
<div id="statusMessage"></div>
<button class="download-btn" id="downloadBtn">
<i class="fas fa-download"></i> Download PPT
</button>
</section>
<section class="conversion-process">
<div class="before-conversion">
<h3><i class="fas fa-file-archive"></i> Before Conversion</h3>
<ul>
<li>Supported Formats: .zip, .rar, .7z</li>
<li>Max File Size: 2GB</li>
<li>Secure Processing</li>
<li>Preview Files Before Conversion</li>
</ul>
</div>
<div class="after-conversion">
<h3><i class="fas fa-file-powerpoint"></i> After Conversion</h3>
<ul>
<li>Output Formats: .pptx, .ppt, .pdf</li>
<li>Editable Slides</li>
<li>High Quality</li>
<li>Instant Download</li>
</ul>
</div>
</section>
<!-- Share Buttons -->
<div class="share-buttons">
<button class="share-btn" onclick="shareOnFacebook()">
<i class="fab fa-facebook"></i> Share on Facebook
</button>
<button class="share-btn" onclick="shareOnTwitter()">
<i class="fab fa-twitter"></i> Share on Twitter
</button>
</div>
<!-- User Rating System -->
<div class="rating">
<h3>Rate Us:</h3>
<i class="fas fa-star" onclick="rate(1)"></i>
<i class="fas fa-star" onclick="rate(2)"></i>
<i class="fas fa-star" onclick="rate(3)"></i>
<i class="fas fa-star" onclick="rate(4)"></i>
<i class="fas fa-star" onclick="rate(5)"></i>
</div>
</main>
</div>
<script>
// File Upload Handling
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
const statusMessage = document.getElementById('statusMessage');
const loader = document.getElementById('loader');
const downloadBtn = document.getElementById('downloadBtn');
// Drag & Drop Handling
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.style.backgroundColor = 'rgba(74, 144, 226, 0.1)';
});
dropZone.addEventListener('dragleave', () => {
dropZone.style.backgroundColor = 'transparent';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', (e) => {
handleFiles(e.target.files);
});
function handleFiles(files) {
if (files.length > 0) {
const file = files[0];
if (file.name.endsWith('.zip') || file.name.endsWith('.rar') || file.name.endsWith('.7z')) {
simulateConversion(file);
} else {
statusMessage.innerHTML = 'Please upload a valid file (ZIP, RAR, 7Z)';
}
}
}
function simulateConversion(file) {
statusMessage.innerHTML = `Processing: ${file.name}`;
progressBar.style.width = '0%';
loader.style.display = 'block';
// Simulate conversion progress
let width = 0;
const interval = setInterval(() => {
width += 10;
progressBar.style.width = width + '%';
if (width >= 100) {
clearInterval(interval);
conversionComplete();
}
}, 200);
}
function conversionComplete() {
loader.style.display = 'none';
statusMessage.innerHTML = 'Conversion complete!';
downloadBtn.style.display = 'block';
}
// Auto-Download Functionality
downloadBtn.addEventListener('click', () => {
// Create a dummy PPT file for download
const dummyContent = "This is a dummy PPT file content.";
const blob = new Blob([dummyContent], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
const url = URL.createObjectURL(blob);
// Create a temporary link to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = 'converted-presentation.pptx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
// Share Buttons
function shareOnFacebook() {
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '_blank');
}
function shareOnTwitter() {
window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href), '_blank');
}
// User Rating System
function rate(rating) {
alert(`Thank you for rating us ${rating} stars!`);
}
</script>
</body>
</html>