Spaces:
Running
Running
File size: 6,564 Bytes
90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 90eb196 cf94c12 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Infographic Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background-color: #f0f2f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
}
.header {
background: linear-gradient(135deg, #4a90e2, #9013fe);
color: white;
padding: 60px 0;
text-align: center;
}
.header h1 {
font-size: 3rem;
font-weight: bold;
}
.header p {
font-size: 1.2rem;
margin-top: 10px;
}
.main-content {
margin-top: -50px;
}
.card {
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
#generate-btn {
background: linear-gradient(135deg, #4a90e2, #9013fe);
border: none;
}
#generate-btn:hover {
background: linear-gradient(135deg, #3b78c4, #7d0fcf);
}
#download-btn {
background: #28a745;
border: none;
}
#download-btn:hover {
background: #218838;
}
#output-frame {
width: 100%;
height: 600px;
border: none;
border-radius: 15px;
}
#loading-icon {
display: none;
text-align: center;
margin-top: 20px;
}
#loading-icon i {
font-size: 2rem;
color: #4a90e2;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<header class="header">
<div class="container">
<h1><i class="fas fa-chart-bar me-2"></i>Infographic Generator</h1>
<p><i class="fas fa-lightbulb me-2"></i>Provide a single sentence describing the infographic you want to generate.</p>
</div>
</header>
<div class="container main-content">
<div class="row">
<!-- Input Section -->
<div class="col-md-4 mb-4">
<div class="card p-4">
<h3 class="mb-3">
<i class="fas fa-pencil-alt me-2"></i>Describe Your Infographic
</h3>
<textarea id="description" class="form-control mb-3" rows="10" placeholder="E.g., 'An infographic showing the benefits of renewable energy'"></textarea>
<button id="generate-btn" class="btn btn-primary btn-lg w-100">
<i class="fas fa-magic me-2"></i>Generate Infographic
</button>
</div>
</div>
<!-- Output Section -->
<div class="col-md-8 mb-4">
<div class="card p-4">
<h3 class="mb-3">
<i class="fas fa-image me-2"></i>Generated Infographic
</h3>
<div id="loading-icon">
<i class="fas fa-spinner"></i>
<p>Generating infographic, please wait...</p>
</div>
<iframe id="output-frame"></iframe>
<button id="download-btn" class="btn btn-success btn-lg w-100 mt-3">
<i class="fas fa-download me-2"></i>Download as Image
</button>
</div>
</div>
</div>
</div>
<!-- Include Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/yourkit.js" crossorigin="anonymous"></script>
<!-- html2canvas for screenshot functionality -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
$(document).ready(function() {
// Generate infographic
$('#generate-btn').click(function() {
var description = $('#description').val();
$('#loading-icon').show(); // Show loading icon
$('#output-frame').hide(); // Hide the iframe while loading
$.ajax({
url: '/generate',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ description: description }),
success: function(response) {
$('#output-frame').contents().find('body').html(response.html);
$('#loading-icon').hide(); // Hide loading icon
$('#output-frame').show(); // Show the iframe
},
error: function(xhr, status, error) {
$('#output-frame').contents().find('body').html('<div class="alert alert-danger">An error occurred: ' + error + '</div>');
$('#loading-icon').hide(); // Hide loading icon
$('#output-frame').show(); // Show the iframe
}
});
});
// Download infographic as an image
$('#download-btn').click(function() {
const iframe = document.getElementById('output-frame');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
html2canvas(iframeDocument.body).then(function(canvas) {
const link = document.createElement('a');
link.download = 'infographic.png';
link.href = canvas.toDataURL();
link.click();
}).catch(function(error) {
alert('An error occurred while capturing the infographic: ' + error);
});
});
});
</script>
</body>
</html>
|