Spaces:
Running
Running
Add 1 files
Browse files- index.html +253 -253
index.html
CHANGED
|
@@ -168,7 +168,7 @@
|
|
| 168 |
</div>
|
| 169 |
</div>
|
| 170 |
<div class="hidden md:ml-4 md:flex md:items-center md:space-x-4">
|
| 171 |
-
<
|
| 172 |
<button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Sign in</button>
|
| 173 |
<button class="px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition">Get Started</button>
|
| 174 |
</div>
|
|
@@ -588,288 +588,288 @@
|
|
| 588 |
<i class="fas fa-star text-yellow-400"></i>
|
| 589 |
<i class="fas fa-star text-yellow-400"></i>
|
| 590 |
<i class="fas fa-star text-yellow-400"></i>
|
|
|
|
| 591 |
</div>
|
| 592 |
-
|
| 593 |
-
|
| 594 |
-
|
| 595 |
-
|
| 596 |
-
|
| 597 |
-
|
| 598 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 599 |
</div>
|
| 600 |
-
<div class="
|
| 601 |
-
<
|
| 602 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 603 |
</div>
|
| 604 |
</div>
|
| 605 |
-
|
| 606 |
-
|
| 607 |
-
|
| 608 |
-
|
| 609 |
-
|
| 610 |
-
|
| 611 |
-
|
| 612 |
-
|
| 613 |
-
|
| 614 |
-
|
| 615 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 616 |
</div>
|
| 617 |
</div>
|
| 618 |
-
|
| 619 |
-
|
| 620 |
-
|
| 621 |
-
|
| 622 |
-
|
| 623 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 624 |
</div>
|
| 625 |
-
<div class="
|
| 626 |
-
<div class="
|
| 627 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 628 |
</div>
|
| 629 |
</div>
|
| 630 |
-
<div class="mt-4">
|
| 631 |
-
<p class="text-gray-600">
|
| 632 |
-
"As a non-designer, REDAIGC has been invaluable for creating professional-looking assets for my startup. The logo generator alone saved us thousands in design fees."
|
| 633 |
-
</p>
|
| 634 |
-
</div>
|
| 635 |
-
<div class="mt-4 flex">
|
| 636 |
-
<i class="fas fa-star text-yellow-400"></i>
|
| 637 |
-
<i class="fas fa-star text-yellow-400"></i>
|
| 638 |
-
<i class="fas fa-star text-yellow-400"></i>
|
| 639 |
-
<i class="fas fa-star text-yellow-400"></i>
|
| 640 |
-
<i class="fas fa-star-half-alt text-yellow-400"></i>
|
| 641 |
-
</div>
|
| 642 |
</div>
|
| 643 |
</div>
|
| 644 |
</div>
|
| 645 |
-
|
| 646 |
-
|
| 647 |
-
|
| 648 |
-
|
| 649 |
-
|
| 650 |
-
|
| 651 |
-
|
| 652 |
-
|
| 653 |
-
|
| 654 |
-
|
| 655 |
-
|
| 656 |
-
|
| 657 |
-
Join thousands of creators using REDAIGC to bring their ideas to life.
|
| 658 |
</p>
|
| 659 |
-
|
| 660 |
-
|
| 661 |
-
|
| 662 |
-
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
|
| 663 |
-
Get Started for Free
|
| 664 |
</a>
|
| 665 |
-
|
| 666 |
-
|
| 667 |
-
|
| 668 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 669 |
</a>
|
| 670 |
</div>
|
| 671 |
</div>
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
|
| 675 |
-
|
| 676 |
-
|
| 677 |
-
|
| 678 |
-
|
| 679 |
-
|
| 680 |
-
|
| 681 |
-
<div class="col-span-2">
|
| 682 |
-
<div class="flex items-center">
|
| 683 |
-
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">R</div>
|
| 684 |
-
<span class="ml-2 text-xl font-bold text-white">REDAIGC</span>
|
| 685 |
</div>
|
| 686 |
-
|
| 687 |
-
|
| 688 |
-
|
| 689 |
-
|
| 690 |
-
|
| 691 |
-
<
|
| 692 |
-
|
| 693 |
-
|
| 694 |
-
|
| 695 |
-
|
| 696 |
-
|
| 697 |
-
|
| 698 |
-
</
|
| 699 |
-
<
|
| 700 |
-
<
|
| 701 |
-
|
|
|
|
|
|
|
|
|
|
| 702 |
</div>
|
| 703 |
</div>
|
| 704 |
|
| 705 |
-
<div>
|
| 706 |
-
<
|
| 707 |
-
|
| 708 |
-
|
| 709 |
-
|
| 710 |
-
<
|
| 711 |
-
<
|
| 712 |
-
|
|
|
|
|
|
|
| 713 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 714 |
|
| 715 |
-
|
| 716 |
-
|
| 717 |
-
<ul class="mt-4 space-y-2">
|
| 718 |
-
<li><a href="#" class="text-sm hover:text-white">Documentation</a></li>
|
| 719 |
-
<li><a href="#" class="text-sm hover:text-white">Tutorials</a></li>
|
| 720 |
-
<li><a href="#" class="text-sm hover:text-white">Blog</a></li>
|
| 721 |
-
<li><a href="#" class="text-sm hover:text-white">Community</a></li>
|
| 722 |
-
</ul>
|
| 723 |
-
</div>
|
| 724 |
|
| 725 |
-
|
| 726 |
-
|
| 727 |
-
|
| 728 |
-
|
| 729 |
-
|
| 730 |
-
|
| 731 |
-
|
| 732 |
-
|
| 733 |
-
|
| 734 |
-
|
| 735 |
-
|
| 736 |
-
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
|
| 737 |
-
<p class="text-sm text-gray-400">
|
| 738 |
-
© 2025 METAFILM.Ai All rights reserved.
|
| 739 |
-
</p>
|
| 740 |
-
<div class="mt-4 md:mt-0 flex space-x-6">
|
| 741 |
-
<a href="https://redaigc.com" class="text-sm text-gray-400 hover:text-white">REDAIGC.com</a>
|
| 742 |
-
<a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
|
| 743 |
-
<a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
|
| 744 |
-
<a href="#" class="text-sm text-gray-400 hover:text-white">Cookie Policy</a>
|
| 745 |
-
</div>
|
| 746 |
-
</div>
|
| 747 |
-
</div>
|
| 748 |
-
</footer>
|
| 749 |
-
|
| 750 |
-
<script>
|
| 751 |
-
// AI Generator functionality
|
| 752 |
-
document.addEventListener('DOMContentLoaded', function() {
|
| 753 |
-
const generateBtn = document.getElementById('generate-btn');
|
| 754 |
-
const promptInput = document.getElementById('prompt');
|
| 755 |
-
const placeholder = document.getElementById('placeholder');
|
| 756 |
-
const loading = document.getElementById('loading');
|
| 757 |
-
const generatedImage = document.getElementById('generated-image');
|
| 758 |
-
const variations = document.getElementById('variations');
|
| 759 |
-
const downloadBtn = document.getElementById('download-btn');
|
| 760 |
-
const refreshBtn = document.getElementById('refresh-btn');
|
| 761 |
-
const styleOptions = document.querySelectorAll('.style-option');
|
| 762 |
-
const aspectOptions = document.querySelectorAll('.aspect-option');
|
| 763 |
-
|
| 764 |
-
let selectedStyle = 'realistic';
|
| 765 |
-
let selectedAspect = '1:1';
|
| 766 |
-
|
| 767 |
-
// Style selection
|
| 768 |
-
styleOptions.forEach(option => {
|
| 769 |
-
option.addEventListener('click', function(e) {
|
| 770 |
-
e.preventDefault();
|
| 771 |
-
styleOptions.forEach(opt => {
|
| 772 |
-
opt.classList.remove('bg-indigo-100', 'text-indigo-700');
|
| 773 |
-
opt.classList.add('bg-white', 'hover:bg-gray-50');
|
| 774 |
});
|
| 775 |
-
this.classList.add('bg-indigo-100', 'text-indigo-700');
|
| 776 |
-
this.classList.remove('bg-white', 'hover:bg-gray-50');
|
| 777 |
-
selectedStyle = this.dataset.style;
|
| 778 |
});
|
| 779 |
-
|
| 780 |
-
|
| 781 |
-
|
| 782 |
-
|
| 783 |
-
|
| 784 |
-
|
| 785 |
-
|
| 786 |
-
|
| 787 |
-
|
|
|
|
|
|
|
|
|
|
| 788 |
});
|
| 789 |
-
this.classList.add('bg-indigo-100', 'text-indigo-700');
|
| 790 |
-
this.classList.remove('bg-white', 'hover:bg-gray-50');
|
| 791 |
-
selectedAspect = this.dataset.ratio;
|
| 792 |
});
|
| 793 |
-
});
|
| 794 |
-
|
| 795 |
-
// Generate image
|
| 796 |
-
generateBtn.addEventListener('click', function() {
|
| 797 |
-
const prompt = promptInput.value.trim();
|
| 798 |
-
|
| 799 |
-
if (!prompt) {
|
| 800 |
-
alert('Please enter a description for your design');
|
| 801 |
-
return;
|
| 802 |
-
}
|
| 803 |
-
|
| 804 |
-
// Show loading state
|
| 805 |
-
placeholder.classList.add('hidden');
|
| 806 |
-
loading.classList.remove('hidden');
|
| 807 |
-
generatedImage.classList.remove('show');
|
| 808 |
-
generatedImage.classList.add('hidden');
|
| 809 |
-
variations.classList.add('hidden');
|
| 810 |
-
downloadBtn.classList.add('hidden');
|
| 811 |
-
refreshBtn.classList.add('hidden');
|
| 812 |
|
| 813 |
-
//
|
| 814 |
-
|
| 815 |
-
|
| 816 |
-
loading.classList.add('hidden');
|
| 817 |
-
|
| 818 |
-
// Show generated image (using placeholder from unsplash)
|
| 819 |
-
const imageUrl = `https://source.unsplash.com/random/600x400/?${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 820 |
-
generatedImage.src = imageUrl;
|
| 821 |
-
generatedImage.classList.remove('hidden');
|
| 822 |
-
setTimeout(() => {
|
| 823 |
-
generatedImage.classList.add('show');
|
| 824 |
-
}, 50);
|
| 825 |
|
| 826 |
-
|
| 827 |
-
|
| 828 |
-
|
| 829 |
-
|
| 830 |
|
| 831 |
-
//
|
| 832 |
-
|
| 833 |
-
|
| 834 |
-
|
| 835 |
-
|
| 836 |
-
|
| 837 |
-
|
| 838 |
-
|
| 839 |
-
// Download image
|
| 840 |
-
downloadBtn.addEventListener('click', function() {
|
| 841 |
-
if (generatedImage.src) {
|
| 842 |
-
const link = document.createElement('a');
|
| 843 |
-
link.href = generatedImage.src;
|
| 844 |
-
link.download = `redaigc-design-${Date.now()}.jpg`;
|
| 845 |
-
document.body.appendChild(link);
|
| 846 |
-
link.click();
|
| 847 |
-
document.body.removeChild(link);
|
| 848 |
-
}
|
| 849 |
-
});
|
| 850 |
-
|
| 851 |
-
// Refresh image
|
| 852 |
-
refreshBtn.addEventListener('click', function() {
|
| 853 |
-
if (generatedImage.src) {
|
| 854 |
-
const prompt = promptInput.value.trim();
|
| 855 |
-
generatedImage.src = `https://source.unsplash.com/random/600x400/?sig=${Math.floor(Math.random() * 1000)},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 856 |
|
| 857 |
-
//
|
| 858 |
-
|
| 859 |
-
|
| 860 |
-
|
| 861 |
-
|
| 862 |
-
|
| 863 |
-
|
| 864 |
-
|
| 865 |
-
|
| 866 |
-
|
| 867 |
-
|
| 868 |
-
|
| 869 |
-
|
| 870 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 871 |
});
|
| 872 |
-
|
| 873 |
-
</
|
| 874 |
-
</
|
| 875 |
-
</html>
|
|
|
|
| 168 |
</div>
|
| 169 |
</div>
|
| 170 |
<div class="hidden md:ml-4 md:flex md:items-center md:space-x-4">
|
| 171 |
+
<a href="chinese.html" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">中文版</a>
|
| 172 |
<button class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-indigo-600">Sign in</button>
|
| 173 |
<button class="px-4 py-2 rounded-md text-sm font-medium text-white gradient-bg hover:opacity-90 transition">Get Started</button>
|
| 174 |
</div>
|
|
|
|
| 588 |
<i class="fas fa-star text-yellow-400"></i>
|
| 589 |
<i class="fas fa-star text-yellow-400"></i>
|
| 590 |
<i class="fas fa-star text-yellow-400"></i>
|
| 591 |
+
</div>
|
| 592 |
</div>
|
| 593 |
+
|
| 594 |
+
<!-- Testimonial 2 -->
|
| 595 |
+
<div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6">
|
| 596 |
+
<div class="flex items-center">
|
| 597 |
+
<div class="flex-shrink-0">
|
| 598 |
+
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
| 599 |
+
</div>
|
| 600 |
+
<div class="ml-4">
|
| 601 |
+
<div class="text-lg font-medium text-gray-900">Michael Chen</div>
|
| 602 |
+
<div class="text-indigo-600">Marketing Director</div>
|
| 603 |
+
</div>
|
| 604 |
</div>
|
| 605 |
+
<div class="mt-4">
|
| 606 |
+
<p class="text-gray-600">
|
| 607 |
+
"Our social media engagement has doubled since we started using REDAIGC for our content creation. The ability to generate on-brand visuals so quickly is a game-changer."
|
| 608 |
+
</p>
|
| 609 |
+
</div>
|
| 610 |
+
<div class="mt-4 flex">
|
| 611 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 612 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 613 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 614 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 615 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 616 |
</div>
|
| 617 |
</div>
|
| 618 |
+
|
| 619 |
+
<!-- Testimonial 3 -->
|
| 620 |
+
<div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6">
|
| 621 |
+
<div class="flex items-center">
|
| 622 |
+
<div class="flex-shrink-0">
|
| 623 |
+
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
| 624 |
+
</div>
|
| 625 |
+
<div class="ml-4">
|
| 626 |
+
<div class="text-lg font-medium text-gray-900">David Wilson</div>
|
| 627 |
+
<div class="text-indigo-600">Startup Founder</div>
|
| 628 |
+
</div>
|
| 629 |
+
</div>
|
| 630 |
+
<div class="mt-4">
|
| 631 |
+
<p class="text-gray-600">
|
| 632 |
+
"As a non-designer, REDAIGC has been invaluable for creating professional-looking assets for my startup. The logo generator alone saved us thousands in design fees."
|
| 633 |
+
</p>
|
| 634 |
+
</div>
|
| 635 |
+
<div class="mt-4 flex">
|
| 636 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 637 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 638 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 639 |
+
<i class="fas fa-star text-yellow-400"></i>
|
| 640 |
+
<i class="fas fa-star-half-alt text-yellow-400"></i>
|
| 641 |
+
</div>
|
| 642 |
</div>
|
| 643 |
</div>
|
| 644 |
+
</div>
|
| 645 |
+
</div>
|
| 646 |
+
|
| 647 |
+
<!-- CTA Section -->
|
| 648 |
+
<div class="bg-white">
|
| 649 |
+
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
| 650 |
+
<div class="gradient-bg rounded-2xl px-6 py-16 sm:p-16">
|
| 651 |
+
<div class="max-w-xl mx-auto lg:max-w-none lg:flex lg:items-center lg:justify-between">
|
| 652 |
+
<div>
|
| 653 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-white">
|
| 654 |
+
Ready to unleash your creativity?
|
| 655 |
+
</h2>
|
| 656 |
+
<p class="mt-4 text-lg text-indigo-100">
|
| 657 |
+
Join thousands of creators using REDAIGC to bring their ideas to life.
|
| 658 |
+
</p>
|
| 659 |
</div>
|
| 660 |
+
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
| 661 |
+
<div class="inline-flex rounded-md shadow">
|
| 662 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
|
| 663 |
+
Get Started for Free
|
| 664 |
+
</a>
|
| 665 |
+
</div>
|
| 666 |
+
<div class="ml-3 inline-flex rounded-md shadow">
|
| 667 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
|
| 668 |
+
See Pricing
|
| 669 |
+
</a>
|
| 670 |
+
</div>
|
| 671 |
</div>
|
| 672 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 673 |
</div>
|
| 674 |
</div>
|
| 675 |
</div>
|
| 676 |
+
|
| 677 |
+
<!-- Footer -->
|
| 678 |
+
<footer class="bg-gray-900 text-gray-300">
|
| 679 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
| 680 |
+
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
|
| 681 |
+
<div class="col-span-2">
|
| 682 |
+
<div class="flex items-center">
|
| 683 |
+
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">R</div>
|
| 684 |
+
<span class="ml-2 text-xl font-bold text-white">REDAIGC</span>
|
| 685 |
+
</div>
|
| 686 |
+
<p class="mt-4 text-sm">
|
| 687 |
+
The most powerful AI design platform for creators, marketers, and businesses.
|
|
|
|
| 688 |
</p>
|
| 689 |
+
<div class="mt-4 flex space-x-6">
|
| 690 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 691 |
+
<i class="fab fa-twitter"></i>
|
|
|
|
|
|
|
| 692 |
</a>
|
| 693 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 694 |
+
<i class="fab fa-instagram"></i>
|
| 695 |
+
</a>
|
| 696 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 697 |
+
<i class="fab fa-discord"></i>
|
| 698 |
+
</a>
|
| 699 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 700 |
+
<i class="fab fa-youtube"></i>
|
| 701 |
</a>
|
| 702 |
</div>
|
| 703 |
</div>
|
| 704 |
+
|
| 705 |
+
<div>
|
| 706 |
+
<h3 class="text-sm font-semibold text-white tracking-wider uppercase">Product</h3>
|
| 707 |
+
<ul class="mt-4 space-y-2">
|
| 708 |
+
<li><a href="#" class="text-sm hover:text-white">Features</a></li>
|
| 709 |
+
<li><a href="#" class="text-sm hover:text-white">Templates</a></li>
|
| 710 |
+
<li><a href="#" class="text-sm hover:text-white">Pricing</a></li>
|
| 711 |
+
<li><a href="#" class="text-sm hover:text-white">API</a></li>
|
| 712 |
+
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 713 |
</div>
|
| 714 |
+
|
| 715 |
+
<div>
|
| 716 |
+
<h3 class="text-sm font-semibold text-white tracking-wider uppercase">Resources</h3>
|
| 717 |
+
<ul class="mt-4 space-y-2">
|
| 718 |
+
<li><a href="#" class="text-sm hover:text-white">Documentation</a></li>
|
| 719 |
+
<li><a href="#" class="text-sm hover:text-white">Tutorials</a></li>
|
| 720 |
+
<li><a href="#" class="text-sm hover:text-white">Blog</a></li>
|
| 721 |
+
<li><a href="#" class="text-sm hover:text-white">Community</a></li>
|
| 722 |
+
</ul>
|
| 723 |
+
</div>
|
| 724 |
+
|
| 725 |
+
<div>
|
| 726 |
+
<h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
|
| 727 |
+
<ul class="mt-4 space-y-2">
|
| 728 |
+
<li><a href="#" class="text-sm hover:text-white">About</a></li>
|
| 729 |
+
<li><a href="#" class="text-sm hover:text-white">Careers</a></li>
|
| 730 |
+
<li><a href="#" class="text-sm hover:text-white">Privacy</a></li>
|
| 731 |
+
<li><a href="#" class="text-sm hover:text-white">Terms</a></li>
|
| 732 |
+
</ul>
|
| 733 |
</div>
|
| 734 |
</div>
|
| 735 |
|
| 736 |
+
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
|
| 737 |
+
<p class="text-sm text-gray-400">
|
| 738 |
+
© 2025 METAFILM.Ai All rights reserved.
|
| 739 |
+
</p>
|
| 740 |
+
<div class="mt-4 md:mt-0 flex space-x-6">
|
| 741 |
+
<a href="https://redaigc.com" class="text-sm text-gray-400 hover:text-white">REDAIGC.com</a>
|
| 742 |
+
<a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
|
| 743 |
+
<a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
|
| 744 |
+
<a href="#" class="text-sm text-gray-400 hover:text-white">Cookie Policy</a>
|
| 745 |
+
</div>
|
| 746 |
</div>
|
| 747 |
+
</div>
|
| 748 |
+
</footer>
|
| 749 |
+
|
| 750 |
+
<script>
|
| 751 |
+
// AI Generator functionality
|
| 752 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 753 |
+
const generateBtn = document.getElementById('generate-btn');
|
| 754 |
+
const promptInput = document.getElementById('prompt');
|
| 755 |
+
const placeholder = document.getElementById('placeholder');
|
| 756 |
+
const loading = document.getElementById('loading');
|
| 757 |
+
const generatedImage = document.getElementById('generated-image');
|
| 758 |
+
const variations = document.getElementById('variations');
|
| 759 |
+
const downloadBtn = document.getElementById('download-btn');
|
| 760 |
+
const refreshBtn = document.getElementById('refresh-btn');
|
| 761 |
+
const styleOptions = document.querySelectorAll('.style-option');
|
| 762 |
+
const aspectOptions = document.querySelectorAll('.aspect-option');
|
| 763 |
|
| 764 |
+
let selectedStyle = 'realistic';
|
| 765 |
+
let selectedAspect = '1:1';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 766 |
|
| 767 |
+
// Style selection
|
| 768 |
+
styleOptions.forEach(option => {
|
| 769 |
+
option.addEventListener('click', function(e) {
|
| 770 |
+
e.preventDefault();
|
| 771 |
+
styleOptions.forEach(opt => {
|
| 772 |
+
opt.classList.remove('bg-indigo-100', 'text-indigo-700');
|
| 773 |
+
opt.classList.add('bg-white', 'hover:bg-gray-50');
|
| 774 |
+
});
|
| 775 |
+
this.classList.add('bg-indigo-100', 'text-indigo-700');
|
| 776 |
+
this.classList.remove('bg-white', 'hover:bg-gray-50');
|
| 777 |
+
selectedStyle = this.dataset.style;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 778 |
});
|
|
|
|
|
|
|
|
|
|
| 779 |
});
|
| 780 |
+
|
| 781 |
+
// Aspect ratio selection
|
| 782 |
+
aspectOptions.forEach(option => {
|
| 783 |
+
option.addEventListener('click', function(e) {
|
| 784 |
+
e.preventDefault();
|
| 785 |
+
aspectOptions.forEach(opt => {
|
| 786 |
+
opt.classList.remove('bg-indigo-100', 'text-indigo-700');
|
| 787 |
+
opt.classList.add('bg-white', 'hover:bg-gray-50');
|
| 788 |
+
});
|
| 789 |
+
this.classList.add('bg-indigo-100', 'text-indigo-700');
|
| 790 |
+
this.classList.remove('bg-white', 'hover:bg-gray-50');
|
| 791 |
+
selectedAspect = this.dataset.ratio;
|
| 792 |
});
|
|
|
|
|
|
|
|
|
|
| 793 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 794 |
|
| 795 |
+
// Generate image
|
| 796 |
+
generateBtn.addEventListener('click', function() {
|
| 797 |
+
const prompt = promptInput.value.trim();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 798 |
|
| 799 |
+
if (!prompt) {
|
| 800 |
+
alert('Please enter a description for your design');
|
| 801 |
+
return;
|
| 802 |
+
}
|
| 803 |
|
| 804 |
+
// Show loading state
|
| 805 |
+
placeholder.classList.add('hidden');
|
| 806 |
+
loading.classList.remove('hidden');
|
| 807 |
+
generatedImage.classList.remove('show');
|
| 808 |
+
generatedImage.classList.add('hidden');
|
| 809 |
+
variations.classList.add('hidden');
|
| 810 |
+
downloadBtn.classList.add('hidden');
|
| 811 |
+
refreshBtn.classList.add('hidden');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 812 |
|
| 813 |
+
// Simulate API call with timeout
|
| 814 |
+
setTimeout(() => {
|
| 815 |
+
// Hide loading
|
| 816 |
+
loading.classList.add('hidden');
|
| 817 |
+
|
| 818 |
+
// Show generated image (using placeholder from unsplash)
|
| 819 |
+
const imageUrl = `https://source.unsplash.com/random/600x400/?${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 820 |
+
generatedImage.src = imageUrl;
|
| 821 |
+
generatedImage.classList.remove('hidden');
|
| 822 |
+
setTimeout(() => {
|
| 823 |
+
generatedImage.classList.add('show');
|
| 824 |
+
}, 50);
|
| 825 |
+
|
| 826 |
+
// Show variations and buttons
|
| 827 |
+
variations.classList.remove('hidden');
|
| 828 |
+
downloadBtn.classList.remove('hidden');
|
| 829 |
+
refreshBtn.classList.remove('hidden');
|
| 830 |
+
|
| 831 |
+
// Set variation images
|
| 832 |
+
const variationImages = variations.querySelectorAll('img');
|
| 833 |
+
variationImages.forEach((img, index) => {
|
| 834 |
+
img.src = `https://source.unsplash.com/random/300x200/?sig=${index + 1},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 835 |
+
});
|
| 836 |
+
}, 3000);
|
| 837 |
+
});
|
| 838 |
+
|
| 839 |
+
// Download image
|
| 840 |
+
downloadBtn.addEventListener('click', function() {
|
| 841 |
+
if (generatedImage.src) {
|
| 842 |
+
const link = document.createElement('a');
|
| 843 |
+
link.href = generatedImage.src;
|
| 844 |
+
link.download = `redaigc-design-${Date.now()}.jpg`;
|
| 845 |
+
document.body.appendChild(link);
|
| 846 |
+
link.click();
|
| 847 |
+
document.body.removeChild(link);
|
| 848 |
+
}
|
| 849 |
+
});
|
| 850 |
+
|
| 851 |
+
// Refresh image
|
| 852 |
+
refreshBtn.addEventListener('click', function() {
|
| 853 |
+
if (generatedImage.src) {
|
| 854 |
+
const prompt = promptInput.value.trim();
|
| 855 |
+
generatedImage.src = `https://source.unsplash.com/random/600x400/?sig=${Math.floor(Math.random() * 1000)},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 856 |
+
|
| 857 |
+
// Refresh variations too
|
| 858 |
+
const variationImages = variations.querySelectorAll('img');
|
| 859 |
+
variationImages.forEach((img, index) => {
|
| 860 |
+
img.src = `https://source.unsplash.com/random/300x200/?sig=${index + 1 + Math.floor(Math.random() * 1000)},${encodeURIComponent(prompt.split(' ').join(',') + ',' + selectedStyle)}`;
|
| 861 |
+
});
|
| 862 |
+
}
|
| 863 |
+
});
|
| 864 |
+
|
| 865 |
+
// Variation selection
|
| 866 |
+
variations.addEventListener('click', function(e) {
|
| 867 |
+
if (e.target.tagName === 'IMG' && e.target.closest('.variation-btn')) {
|
| 868 |
+
const mainImageSrc = e.target.src.replace('300x200', '600x400');
|
| 869 |
+
generatedImage.src = mainImageSrc;
|
| 870 |
+
}
|
| 871 |
+
});
|
| 872 |
});
|
| 873 |
+
</script>
|
| 874 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GuangyuanSD/redaigc-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 875 |
+
</html>
|
|
|