<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Sanctuary</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='icon/favicon.ico') }}">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style/feedback.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/side.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/generator.css') }}">

    <!-- JavaScript -->
    <script defer src="{{ url_for('static', filename='script/feedback.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/generator.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/side_panel.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/save.js') }}"></script>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">
    <meta name="keywords" content="prompt sanctuary, prompt generator, Community Prompt, advanced prompting, prompt refinement, prompt generation, writing prompts, creative writing, prompt ideas, writing inspiration, writing exercises, writing generator, story prompts, fiction prompts, writing tools, writing community, writing resources, idea generator, story ideas, writing challenges, writing help, narrative prompts, plot inspiration, storytelling aids, writer's block solutions, creative story ideas, plot development tools, character creation prompts, dialogue prompts, writing prompt app, daily writing prompts, inspiration for writers, story starter, creative writing exercises, fictional writing prompts, writing prompt generator online, flash fiction prompts, novel writing prompts, writing practice, creative brainstorming, storytelling generator, prompting, prompt, llm, llama, gemini, openai, chatgpt">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sanctuary01.pythonanywhere.com/">
    <meta property="og:title" content="Prompt Sanctuary">
    <meta property="og:description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://sanctuary01.pythonanywhere.com/">
    <meta property="twitter:title" content="Prompt Sanctuary">
    <meta property="twitter:description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">
</head>

<body>
    <div id="particles-js"></div>

    <!-- Side Panel -->
    <div class="side-panel" id="sidePanel">
        <!-- logo -->
        <div id="toggleButton" onclick="toggleSidePanel()" class="image-logo">
            <img id="preview-logo" alt="Image Preview" src="{{ url_for('static', filename='icon/sanctuary.png') }}">
        </div>
        <!-- logo end -->

        <!-- primary -->
        <div class="side-list" id="side-list">
            <ul id="side-top">
                <li onclick="window.location.href='{{ url_for('main.home') }}';"><strong>Home</strong></li>
                <li onclick="window.location.href='{{ url_for('main.mylib') }}';"><strong>Saved Prompts</strong></li>
                <li onclick="window.location.href='{{ url_for('main.trying') }}';"><strong>Prompt Trial</strong></li>
            </ul>
        </div>
        <!-- primary end -->

        <!-- secondary -->
        <div class="side-list" id="side-list">
            <ul id="side-middle">
                <li onclick="window.location.href='{{ url_for('main.library') }}';"><strong>Community Prompt</strong></li>
                <li onclick="window.location.href='{{ url_for('main.generate') }}';"><strong>Basic Prompt</strong></li>
                <li onclick="window.location.href='{{ url_for('main.advance') }}';"><strong>Advance Prompt</strong></li>
            </ul>
        </div>
        <!-- secondary end -->

        <!-- logout and Feedback -->
        <div class="side-list" id="bottom-list">
            <ul id="side-bottom">
                <li onclick="window.location.href='{{ url_for('main.logout') }}';"><strong>Logout</strong></li>
                <li class="feedback-button" onclick="openFeedbackPopup()"><strong>Feedback</strong></li>
            </ul>
        </div>
        <!-- logout and Feedback end -->
    </div>
    <!-- side panel ended -->

    <!-- feedback panel -->
    <div id="feedback-popup" class="popup hidden">
        <div class="popup-content">
            <button id="close-popup" class="close-button" aria-label="Close feedback popup">
                ✖️
            </button>
            <h2 class="popup-title">Share your feedback</h2>
            <form id="feedback-form">
                <textarea class="feedback-textarea" name="feedback" placeholder="Enter your feedback here" required></textarea>
                <div class="button-container">
                    <button type="submit" class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <!-- feedback panel ended -->

    <h1 class="center" id="toggleButton" onclick="toggleSidePanel()"><strong>Prompt generator (basic)</strong></h1>

    <!-- main -->
    <div class="master">
        <!-- welcome -->
        <div class="welcome">
            <p>Here, you have the flexibility to <strong>create a customized prompt</strong> tailored to your specific requirements. Alternatively, you can opt to use the <strong>random feature</strong>, which will generate a prompt for you—ensuring not only variety but also an element of <strong>surprise and enjoyment</strong> in the process. Whether you have a <strong>specific idea</strong> in mind or are seeking <strong>inspiration</strong>, the Prompt Generator is designed to accommodate both your <strong>structured and spontaneous</strong> prompt needs.</p>
        </div>
        <!-- welcome end -->

        <!-- tools -->
        <div class="prompting">
            <!-- text prompt-->
            <div class="container">
                <p>generate text prompt</p>
                <!-- input -->
                <div class="left-section">
                    <form id="text-prompt-form">
                        <label for="user_input">Input:</label>
                        <div class="input">
                            <input type="text" name="user_input" id="user_input_text" placeholder="write a python code" required>
                            <input type="submit" value="Generate">
                        </div>
                    </form>
                </div>
                <!-- input end -->

                <!-- random -->
                <div class="right-section">
                    <form id="random-text-prompt-form">
                        <input type="submit" value="random">
                    </form>
                </div>
                <!-- random end -->
            </div>
            <!-- text prompt end -->

            <!-- Combined image prompt and image to prompt -->
            <div class="container">
                <!-- Generate from option -->
                <p>Generate Image prompt:</p>
                <div class="left-section">
                    <div class="input-radio">
                        <input type="radio" id="text-input-option" name="prompt-option" value="text" checked onclick="togglePromptInput('text')">
                        <label for="text-input-option">Text</label>
                        <input type="radio" id="image-upload-option" name="prompt-option" value="image" onclick="togglePromptInput('image')">
                        <label for="image-upload-option">File</label>
                        <input type="radio" id="random-option" name="prompt-option" value="random" onclick="togglePromptInput('random')">
                        <label for="random-option">Random</label>
                    </div>

                    <!-- Text input section -->
                    <form id="image-prompt-form">
                        <label>
                            <input type="text" name="user_input" id="user_input_image" placeholder="whale on the desert" required>
                        </label>
                    </form>
                    
                    <!-- Image upload section -->
                    <form id="image-upload-form" enctype="multipart/form-data" style="display: none;">
                        <label>
                            <input type="file" name="image" accept="image/*" required>
                        </label>
                    </form>
                </div>
                <!-- Generate from option end -->

                <!-- Generate button -->
                <div class="right-section">
                        <button id="generate-button" onclick="generatePrompt()">Generate</button>
                </div>
                <!-- Generate button end -->
            </div>
            <!-- Combined image prompt and image to prompt end -->

        </div>
        <!-- tools end -->
    </div>
    <!-- main end -->

    <!-- preview -->
    <div class="image-preview">
        {% if not image_selected %}
            <img id="preview-image" alt="Image Preview" src="{{ url_for('static', filename='icon/favicon.ico') }}">
        {% else %}
            <img id="preview-image" alt="Image Preview">
        {% endif %}
    </div>
    <!-- preview end -->

    <!-- loading -->
    <div class="loading" id="loading">
        <div class="spinner"></div>
        <h1>Generating...</h1>
    </div>
    <!-- loading end -->

    <!-- result -->
    <div class="result" id="resultSection" style="display: none;">
        <h2>Generated Prompt:</h2>
        <p id="response"></p>
        <button onclick="copyToClipboard()">Copy</button>
        <button onclick="promptForTitle()">Save</button>
    </div>
    <!-- result end -->

    <!-- footer -->
    <footer>
        <p>prompt sanctuary by <a href="https://1999azzar.github.io/1999AZZAR/" target="_blank">azzar budiyanto</a></p>
    </footer>
    <!-- footer end -->
</body>
</html>
