35808-vm/core/templates/core/index.html

{% extends "base.html" %}
{% load static %}

{% block title %}AI-Powered Content Generator{% endblock %}

{% block head %}
<meta name="description" content="Generate SEO-optimized titles, keywords, and YouTube tags using AI.">
<meta property="og:title" content="AI-Powered Content Generator">
<meta property="og:description" content="Generate SEO-optimized titles, keywords, and YouTube tags using AI.">
<style>
    .loader {
        display: none;
        border: 4px solid #f3f3f3;
        border-radius: 50%;
        border-top: 4px solid #3498db;
        width: 40px;
        height: 40px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        margin: 20px auto;
    }

    /* Safari */
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block structured_data %}
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "What is an SEO Content Generator?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "An SEO Content Generator is a tool that uses artificial intelligence to help you create search-engine-optimized content for your website or social media channels. By inputting a topic, you can generate relevant keywords, compelling titles, and other content to improve your search rankings and attract more traffic."
    }
  },{
    "@type": "Question",
    "name": "How do I use the AI generator?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Using the generator is simple. Just choose your desired content type (Website SEO or YouTube SEO), enter a topic or keyword into the input field, and click the 'Generate' button. The tool will then provide you with a list of suggestions that you can copy and use in your content."
    }
  },{
    "@type": "Question",
    "name": "Can I use the generated keywords for free?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Yes, all keywords, titles, and hashtags generated by our tool are completely free to use. There are no hidden fees or subscription costs."
    }
  }]
}
{% endblock %}

{% block content %}
<div class="hero-section">
    <div class="hero-content">
        <h1 class="display-5 fw-bold">AI-Powered Content Generator</h1>
        <div class="col-lg-8 mx-auto">
            <p class="lead mb-4">Choose your content type and enter a topic to generate titles, keywords, and more.</p>

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="website-tab" data-bs-toggle="tab" data-bs-target="#website" type="button" role="tab" aria-controls="website" aria-selected="true">Website SEO</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="youtube-tab" data-bs-toggle="tab" data-bs-target="#youtube" type="button" role="tab" aria-controls="youtube" aria-selected="false">YouTube SEO</button>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="website" role="tabpanel" aria-labelledby="website-tab">
                    <form method="post" action="{% url 'home' %}" class="mt-4 content-form">
                        {% csrf_token %}
                        <input type="hidden" name="form_type" value="website">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'The future of renewable energy'">
                            <button class="btn btn-primary" type="submit">Generate</button>
                        </div>
                    </form>
                    <div class="loader"></div>
                    <div class="results-section mt-4"></div>
                </div>

                <div class="tab-pane fade" id="youtube" role="tabpanel" aria-labelledby="youtube-tab">
                    <form method="post" action="{% url 'home' %}" class="mt-4 content-form">
                        {% csrf_token %}
                        <input type="hidden" name="form_type" value="youtube">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'Unboxing the new iPhone'">
                            <button class="btn btn-primary" type="submit">Generate</button>
                        </div>
                    </form>
                    <div class="loader"></div>
                    <div class="results-section mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Reviews Section -->
<div class="container mt-5">
    <div class="row">
        <div class="col-12 text-center">
            <h2 class="section-title">What Our Users Say</h2>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-4">
            <div class="review-card">
                <p class="review-text">"This tool is a game-changer! I was able to generate a month's worth of content ideas in just a few minutes. Highly recommended!"</p>
                <p class="review-author">- Sarah J.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="review-card">
                <p class="review-text">"I love how easy it is to use. The interface is clean and intuitive, and the results are always top-notch."</p>
                <p class="review-author">- Mark T.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="review-card">
                <p class="review-text">"The best SEO tool I've ever used. It's saved me hours of research and helped me rank my videos higher than ever before."</p>
                <p class="review-author">- Emily R.</p>
            </div>
        </div>
    </div>
</div>

<!-- FAQ Section -->
<div class="container mt-5">
    <div class="row">
        <div class="col-12 text-center">
            <h2 class="section-title">Frequently Asked Questions</h2>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-8 mx-auto">
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            What is an SEO Content Generator?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            An SEO Content Generator is a tool that uses artificial intelligence to help you create search-engine-optimized content for your website or social media channels. By inputting a topic, you can generate relevant keywords, compelling titles, and other content to improve your search rankings and attract more traffic.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            How do I use the AI generator?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Using the generator is simple. Just choose your desired content type (Website SEO or YouTube SEO), enter a topic or keyword into the input field, and click the 'Generate' button. The tool will then provide you with a list of suggestions that you can copy and use in your content.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Can I use the generated keywords for free?
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Yes, all keywords, titles, and hashtags generated by our tool are completely free to use. There are no hidden fees or subscription costs.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- About the Developer Section -->
<div class="container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto text-center">
            <div class="about-card">
                <h2 class="section-title">About the Developer</h2>
                <p class="about-text">This website was created by a passionate developer dedicated to building helpful and easy-to-use tools for content creators. With a background in web development and a passion for SEO, the goal is to empower creators with the resources they need to succeed.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const forms = document.querySelectorAll('.content-form');
    forms.forEach(form => {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const loader = this.nextElementSibling;
            const resultsSection = loader.nextElementSibling;
            const formData = new FormData(this);
            const formType = formData.get('form_type');

            loader.style.display = 'block';
            resultsSection.innerHTML = '';

            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                loader.style.display = 'none';
                if (data.error) {
                    resultsSection.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                    return;
                }

                let resultsHtml = '';
                if (formType === 'website' && data.title && data.keywords) {
                    resultsHtml = `
                        <h2>Your Results for "${data.topic}"</h2>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="result-item">
                                    <h3>Suggested Title</h3>
                                    <div class="input-group">
                                        <p id="generated-title" class="form-control">${data.title}</p>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-title')">Copy</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="result-item">
                                    <h3>SEO Keywords</h3>
                                    <div class="input-group">
                                        <p id="generated-keywords" class="form-control">${data.keywords.join(', ')}</p>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-keywords')">Copy</button>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                } else if (formType === 'youtube' && data.title && data.keywords && data.hashtags) {
                    resultsHtml = `
                        <h2>Your YouTube Results for "${data.topic}"</h2>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="result-item">
                                    <h3>Suggested Title</h3>
                                    <div class="input-group">
                                        <p id="youtube-title" class="form-control">${data.title}</p>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-title')">Copy</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="result-item">
                                    <h3>Keywords</h3>
                                    <div class="input-group">
                                        <p id="youtube-keywords" class="form-control">${data.keywords.join(', ')}</p>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-keywords')">Copy</button>
                                    </div>
                                 </div>
                            </div>
                            <div class="col-md-12">
                                <div class="result-item">
                                    <h3>Hashtags</h3>
                                    <div class="input-group">
                                        <p id="youtube-hashtags" class="form-control">${data.hashtags.join(' ')}</p>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-hashtags')">Copy</button>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                }
                resultsSection.innerHTML = resultsHtml;
            })
            .catch(error => {
                loader.style.display = 'none';
                resultsSection.innerHTML = `<div class="alert alert-danger">An error occurred: ${error}</div>`;
                console.error('Error:', error);
            });
        });
    });
});

function copyToClipboard(elementId) {
    var text = document.getElementById(elementId).innerText;
    navigator.clipboard.writeText(text).then(function() {
        /* success */
        var btn = event.target;
        var originalText = btn.innerText;
        btn.innerText = 'Copied!';
        setTimeout(function(){
            btn.innerText = 'Copy';
        }, 2000);
    }, function(err) {
        /* error */
        alert('Could not copy text: ', err);
    });
}
</script>
{% endblock %}