Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>picture crrd</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| /* Общие стили (остаются без изменений) */ | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: linear-gradient(135deg, #000000, #111111); | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Playfair Display', serif; | |
| font-weight: 700; | |
| } | |
| .navbar { | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 15px 30px; | |
| text-align: center; | |
| font-size: 24px; | |
| font-weight: 600; | |
| position: sticky; | |
| top: 0; | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .navbar a { | |
| color: #007bff; | |
| text-decoration: none; | |
| font-size: 16px; | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .navbar a:hover { | |
| color: #0056b3; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| padding: 30px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn { | |
| background: #007bff; | |
| color: white; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| font-weight: 500; | |
| transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; | |
| } | |
| .btn:hover { | |
| background: #0056b3; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .card { | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 25px; | |
| margin: 20px 0; | |
| background: rgba(255, 255, 255, 0.05); | |
| transition: box-shadow 0.3s ease, transform 0.3s ease; | |
| } | |
| .card:hover { | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transform: translateY(-5px); | |
| } | |
| .card input, | |
| .card textarea, | |
| .card select { | |
| width: 100%; | |
| padding: 12px; | |
| margin: 10px 0; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| font-size: 16px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transition: border-color 0.3s ease; | |
| } | |
| .card input:focus, | |
| .card textarea:focus, | |
| .card select:focus { | |
| border-color: #007bff; | |
| outline: none; | |
| } | |
| .card-preview { | |
| text-align: center; | |
| margin-top: 20px; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .card-preview img, | |
| .card-preview audio, | |
| .card-preview video { | |
| max-width: 100%; | |
| border-radius: 10px; | |
| } | |
| .card-preview a { | |
| color: #007bff; | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .card-preview a:hover { | |
| text-decoration: underline; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| /* Анимации */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes glow { | |
| 0% { | |
| box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(0, 123, 255, 0.8); | |
| } | |
| 100% { | |
| box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| .glow { | |
| animation: glow 2s infinite; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 20px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| margin-top: 40px; | |
| font-size: 14px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .footer a { | |
| color: #007bff; | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Tools Section */ | |
| .tools { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .tools .btn { | |
| flex: 1; | |
| margin: 0 5px; | |
| } | |
| /* Параллакс-эффект */ | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| position: relative; | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 600; | |
| text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| .parallax::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .parallax h1 { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* History Section */ | |
| .history-item { | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .history-item img, | |
| .history-item video { | |
| max-width: 100%; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script> | |
| </head> | |
| <body> | |
| <!-- Navbar с ссылкой --> | |
| <div class="navbar"> | |
| <span>picture crrd</span> | |
| <a href="https://felguk-picture-crrrd.static.hf.space/index.html#" target="_blank">Visit Project</a> | |
| </div> | |
| <!-- Параллакс-секция --> | |
| <div class="parallax" style="background-image: url('https://source.unsplash.com/1600x900/?nature,water');"> | |
| <h1>Create Stunning Cards</h1> | |
| </div> | |
| <!-- Welcome Section --> | |
| <div id="welcome" class="container fade-in"> | |
| <h1>Welcome to picture crrd</h1> | |
| <p>Create stunning picture cards with ease. Customize text, colors, media, and more!</p> | |
| </div> | |
| <!-- Tools Section --> | |
| <div class="container tools"> | |
| <button class="btn glow" onclick="showTool('cardMaker')">Card Maker <i class="fas fa-paint-brush"></i></button> | |
| <button class="btn glow" onclick="showTool('imageVideoToCard')">Image/Video to Card <i class="fas fa-image"></i></button> | |
| <button class="btn glow" onclick="showTool('history')">History <i class="fas fa-history"></i></button> | |
| </div> | |
| <!-- Card Maker Section --> | |
| <div id="cardMaker" class="container hidden fade-in"> | |
| <h1>Card Maker</h1> | |
| <div class="card"> | |
| <input type="text" id="cardMakerText" placeholder="Enter card text"> | |
| <input type="color" id="cardMakerColor" value="#ffffff"> | |
| <input type="file" id="cardMakerMedia" accept="image/*,video/*"> | |
| <select id="cardMakerFont"> | |
| <option value="Arial, sans-serif">Arial</option> | |
| <option value="'Poppins', sans-serif">Poppins</option> | |
| <option value="'Playfair Display', serif">Playfair Display</option> | |
| <option value="'Courier New', monospace">Courier New</option> | |
| </select> | |
| <button class="btn" onclick="previewCardMaker()">Preview Card <i class="fas fa-eye"></i></button> | |
| <button class="btn" onclick="saveCardToHistory('cardMakerPreview')">Save to History <i class="fas fa-save"></i></button> | |
| <button class="btn" onclick="clearPreview('cardMakerPreview')">Delete this Card <i class="fas fa-trash"></i></button> | |
| <button class="btn" onclick="downloadCardMakerImage()">Download Image <i class="fas fa-download"></i></button> | |
| <button class="btn" onclick="downloadCardMakerPDF()">Download PDF <i class="fas fa-file-pdf"></i></button> | |
| <!-- Кнопки для записи видео --> | |
| <button class="btn" id="startRecordingCard" onclick="startRecording('cardMakerPreview')">Start Recording <i class="fas fa-circle"></i></button> | |
| <button class="btn" id="stopRecordingCard" onclick="stopRecording('cardMakerPreview')" disabled>Stop Recording <i class="fas fa-stop"></i></button> | |
| <button class="btn" id="downloadRecordedVideoCard" onclick="downloadRecordedVideo('cardMakerPreview')" disabled>Download MP4 <i class="fas fa-download"></i></button> | |
| </div> | |
| <div class="card-preview" id="cardMakerPreview"></div> | |
| </div> | |
| <!-- Image/Video to Card Section --> | |
| <div id="imageVideoToCard" class="container hidden fade-in"> | |
| <h1>Image/Video to Card</h1> | |
| <div class="card"> | |
| <input type="file" id="mediaUpload" accept="image/*,video/*" onchange="handleMediaUpload(event)"> | |
| <div class="card-preview" id="mediaPreview"></div> | |
| <input type="text" id="generatedText" placeholder="Generated Text" readonly> | |
| <input type="text" id="generatedLink" placeholder="Generated Link" readonly> | |
| <input type="color" id="generatedColor" value="#ffffff"> | |
| <select id="generatedFont"> | |
| <option value="Arial, sans-serif">Arial</option> | |
| <option value="'Poppins', sans-serif">Poppins</option> | |
| <option value="'Playfair Display', serif">Playfair Display</option> | |
| <option value="'Courier New', monospace">Courier New</option> | |
| </select> | |
| <button class="btn" onclick="generateCardFromMedia()">Generate Card <i class="fas fa-magic"></i></button> | |
| <button class="btn" onclick="saveCardToHistory('generatedCardPreview')">Save to History <i class="fas fa-save"></i></button> | |
| <button class="btn" onclick="clearPreview('generatedCardPreview')">Delete this Card <i class="fas fa-trash"></i></button> | |
| <button class="btn" onclick="downloadGeneratedImage()">Download Image <i class="fas fa-download"></i></button> | |
| <button class="btn" onclick="downloadGeneratedPDF()">Download PDF <i class="fas fa-file-pdf"></i></button> | |
| <!-- Кнопки для записи видео --> | |
| <button class="btn" id="startRecordingMedia" onclick="startRecording('generatedCardPreview')">Start Recording <i class="fas fa-circle"></i></button> | |
| <button class="btn" id="stopRecordingMedia" onclick="stopRecording('generatedCardPreview')" disabled>Stop Recording <i class="fas fa-stop"></i></button> | |
| <button class="btn" id="downloadRecordedVideoMedia" onclick="downloadRecordedVideo('generatedCardPreview')" disabled>Download MP4 <i class="fas fa-download"></i></button> | |
| </div> | |
| <div class="card-preview" id="generatedCardPreview"></div> | |
| </div> | |
| <!-- History Section --> | |
| <div id="history" class="container hidden fade-in"> | |
| <h1>History</h1> | |
| <div id="historyList"></div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>Made with ❤️ by <a href="#" target="_blank">Alex Felguk</a></p> | |
| </div> | |
| <script> | |
| // Массив для хранения истории карточек | |
| let history = []; | |
| // Переменные для записи видео | |
| let recorder; | |
| let recordedChunks = []; | |
| let recordedVideoUrl; | |
| // Функция для переключения между инструментами | |
| function showTool(toolId) { | |
| // Скрыть все инструменты | |
| document.querySelectorAll('.container').forEach(container => { | |
| if (container.id !== 'welcome' && container.id !== 'tools') { | |
| container.classList.add('hidden'); | |
| } | |
| }); | |
| // Показать выбранный инструмент | |
| if (toolId) { | |
| document.getElementById(toolId).classList.remove('hidden'); | |
| } | |
| // Если открыта история, обновить её | |
| if (toolId === 'history') { | |
| updateHistory(); | |
| } | |
| } | |
| // Начать запись карточки | |
| async function startRecording(previewId) { | |
| const previewElement = document.getElementById(previewId); | |
| const canvas = await html2canvas(previewElement); | |
| const stream = canvas.captureStream(25); // 25 FPS | |
| recorder = new RecordRTC(stream, { | |
| type: 'video', | |
| mimeType: 'video/webm', | |
| }); | |
| recorder.startRecording(); | |
| document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true; | |
| document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false; | |
| document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true; | |
| } | |
| // Остановить запись | |
| function stopRecording(previewId) { | |
| recorder.stopRecording(() => { | |
| const blob = recorder.getBlob(); | |
| recordedVideoUrl = URL.createObjectURL(blob); | |
| document.getElementById(`startRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false; | |
| document.getElementById(`stopRecording${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = true; | |
| document.getElementById(`downloadRecordedVideo${previewId === 'cardMakerPreview' ? 'Card' : 'Media'}`).disabled = false; | |
| }); | |
| } | |
| // Скачать записанное видео | |
| function downloadRecordedVideo(previewId) { | |
| const link = document.createElement('a'); | |
| link.href = recordedVideoUrl; | |
| link.download = 'recorded-card.mp4'; | |
| link.click(); | |
| } | |
| // Сохранить карточку в историю | |
| function saveCardToHistory(previewId) { | |
| const cardPreview = document.getElementById(previewId).innerHTML; | |
| if (cardPreview) { | |
| history.push(cardPreview); | |
| updateHistory(); | |
| alert('Card saved to history!'); | |
| } else { | |
| alert('No card to save!'); | |
| } | |
| } | |
| // Очистить предпросмотр карточки | |
| function clearPreview(previewId) { | |
| document.getElementById(previewId).innerHTML = ''; | |
| alert('Card preview cleared!'); | |
| } | |
| // Обновить историю | |
| function updateHistory() { | |
| const historyList = document.getElementById('historyList'); | |
| historyList.innerHTML = ''; // Очистить список | |
| history.forEach((card, index) => { | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'history-item'; | |
| historyItem.innerHTML = ` | |
| <h3>Card #${index + 1}</h3> | |
| ${card} | |
| `; | |
| historyList.appendChild(historyItem); | |
| }); | |
| } | |
| // Preview Card Maker | |
| function previewCardMaker() { | |
| const cardText = document.getElementById('cardMakerText').value; | |
| const cardColor = document.getElementById('cardMakerColor').value; | |
| const cardMedia = document.getElementById('cardMakerMedia').files[0]; | |
| const cardFont = document.getElementById('cardMakerFont').value; | |
| let previewHTML = ` | |
| <div style="background: ${cardColor}; padding: 20px; border-radius: 10px; font-family: ${cardFont}; text-align: center;"> | |
| <p>${cardText}</p> | |
| `; | |
| if (cardMedia) { | |
| if (cardMedia.type.startsWith('image')) { | |
| previewHTML += `<img src="${URL.createObjectURL(cardMedia)}" alt="Media" style="max-width: 100%; border-radius: 10px;">`; | |
| } else if (cardMedia.type.startsWith('video')) { | |
| previewHTML += `<video controls src="${URL.createObjectURL(cardMedia)}" style="max-width: 100%; border-radius: 10px;"></video>`; | |
| } | |
| } | |
| previewHTML += `</div>`; | |
| document.getElementById('cardMakerPreview').innerHTML = previewHTML; | |
| } | |
| // Download Card Maker as Image | |
| function downloadCardMakerImage() { | |
| const cardMakerPreview = document.getElementById('cardMakerPreview'); | |
| html2canvas(cardMakerPreview).then(canvas => { | |
| const link = document.createElement('a'); | |
| link.download = 'card-maker.png'; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| }); | |
| } | |
| // Download Card Maker as PDF | |
| function downloadCardMakerPDF() { | |
| const cardMakerPreview = document.getElementById('cardMakerPreview'); | |
| html2canvas(cardMakerPreview).then(canvas => { | |
| const imgData = canvas.toDataURL('image/png'); | |
| const pdf = new jspdf.jsPDF(); | |
| const imgWidth = pdf.internal.pageSize.getWidth(); | |
| const imgHeight = (canvas.height * imgWidth) / canvas.width; | |
| pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); | |
| pdf.save('card-maker.pdf'); | |
| }); | |
| } | |
| // Handle Media Upload | |
| function handleMediaUpload(event) { | |
| const file = event.target.files[0]; | |
| const preview = document.getElementById('mediaPreview'); | |
| if (file) { | |
| if (file.type.startsWith('image')) { | |
| preview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 100%; border-radius: 10px;">`; | |
| } else if (file.type.startsWith('video')) { | |
| preview.innerHTML = `<video controls src="${URL.createObjectURL(file)}" style="max-width: 100%; border-radius: 10px;"></video>`; | |
| } | |
| } | |
| } | |
| // Generate Card from Media | |
| function generateCardFromMedia() { | |
| const generatedText = "Generated Text Based on Media"; // Замените на реальную логику генерации текста | |
| const generatedLink = "https://example.com"; // Замените на реальную логику генерации ссылки | |
| const generatedColor = document.getElementById('generatedColor').value; | |
| const generatedFont = document.getElementById('generatedFont').value; | |
| document.getElementById('generatedText').value = generatedText; | |
| document.getElementById('generatedLink').value = generatedLink; | |
| const previewHTML = ` | |
| <div style="background: ${generatedColor}; padding: 20px; border-radius: 10px; font-family: ${generatedFont}; text-align: center;"> | |
| <p>${generatedText}</p> | |
| <p><a href="${generatedLink}" target="_blank">${generatedLink}</a></p> | |
| ${document.getElementById('mediaPreview').innerHTML} | |
| </div> | |
| `; | |
| document.getElementById('generatedCardPreview').innerHTML = previewHTML; | |
| } | |
| // Download Generated Image | |
| function downloadGeneratedImage() { | |
| const generatedCardPreview = document.getElementById('generatedCardPreview'); | |
| html2canvas(generatedCardPreview).then(canvas => { | |
| const link = document.createElement('a'); | |
| link.download = 'generated-card.png'; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| }); | |
| } | |
| // Download Generated PDF | |
| function downloadGeneratedPDF() { | |
| const generatedCardPreview = document.getElementById('generatedCardPreview'); | |
| html2canvas(generatedCardPreview).then(canvas => { | |
| const imgData = canvas.toDataURL('image/png'); | |
| const pdf = new jspdf.jsPDF(); | |
| const imgWidth = pdf.internal.pageSize.getWidth(); | |
| const imgHeight = (canvas.height * imgWidth) / canvas.width; | |
| pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); | |
| pdf.save('generated-card.pdf'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |