<!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/generator.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/side.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 (advance)</strong></h1>

    <!-- main -->
    <div class="master">
        <!-- welcome -->
        <div class="welcome">
            <p>Here, you have the flexibility to <strong>create a custom but specialized prompt</strong> tailored to your specific requirements.</p>
        </div>
        <!-- welcome end -->

        <!-- tools -->
        <div class="prompting">
            <!-- text prompt -->
            <div class="container">
                <p>Generate Text Prompt</p>
                <div class="left-section">
                    <form id="a-text-prompt-form" onsubmit="submitForm('a-text-prompt-form', '/advance/generate'); return false;">
                        <!-- parameter 0 -->
                        <label for="parameter0">Use case:</label>
                        <div class="input">
                            <input type="text" name="parameter0" id="parameter0" placeholder="write a README file" required maxlength="300">
                        </div>
                        <!-- parameter 0 end -->

                        <!-- parameter 1 -->
                        <label for="parameter1">Prompt type:</label>
                        <div class="input">
                            <select name="parameter1" id="parameter1">
                                <option value="simple">Simple</option>
                                <option value="standard">Standard</option>
                                <option value="detailed">Detailed</option>
                                <option value="step-by-step">Step by Step</option>
                            </select>
                        </div>                    
                        <!-- parameter 1 end -->

                        <!-- parameter 2 -->
                        <label for="parameter2">Harm content:</label>
                        <div class="input">
                            <select name="parameter2" id="parameter2">
                                <option value="unspecified">unspecified</option>
                                <option value="none">Block none</option>
                                <option value="few">Block few</option>
                                <option value="some">Block some</option>
                                <option value="most">Block most</option>
                            </select>
                        </div>
                        <!-- parameter 2 end -->

                        <!-- parameter 3 -->
                        <label for="parameter3">Knowledge base:</label>
                        <div class="input">
                            <input type="text" name="parameter3" id="parameter3" placeholder="Enter the Knowledge base if any" maxlength="1000">
                        </div>
                        <!-- parameter 3 end -->

                        <input type="submit" value="Generate">
                    </form>
                </div>
            </div>
            <!-- text prompt end -->

            <!-- image prompt -->
            <div class="container">
                <p>Generate Image Prompt</p>
                <div class="left-section">
                    <form id="a-image-prompt-form" enctype="multipart/form-data" onsubmit="submitForm('a-image-prompt-form', '/advance/igenerate'); return false;">
                        <!-- parameter 0 -->
                        <label for="parameter0">input:</label>
                        <div class="input">
                            <input type="text" name="parameter0" id="parameter0" placeholder="cat on the sky" required maxlength="300">
                        </div>
                        <!-- parameter 0 end-->

                        <!-- parameter 1 -->
                        <label for="parameter1">Primary mood:</label>
                        <div class="input">
                            <select name="parameter1" id="parameter1">
                                <optgroup label="Positive Moods">
                                    <option value="happy">Happy</option>
                                    <option value="joyful">Joyful</option>
                                    <option value="excited">Excited</option>
                                    <option value="cheerful">Cheerful</option>
                                    <option value="content">Content</option>
                                </optgroup>
                                <optgroup label="Negative Moods">
                                    <option value="angry">Angry</option>
                                    <option value="disgust">Disgust</option>
                                    <option value="fear">Fear</option>
                                    <option value="sad">Sad</option>
                                    <option value="depressed">Depressed</option>
                                </optgroup>
                                <optgroup label="Neutral Moods">
                                    <option value="neutral">Neutral</option>
                                    <option value="calm">Calm</option>
                                    <option value="relaxed">Relaxed</option>
                                    <option value="serene">Serene</option>
                                    <option value="tranquil">Tranquil</option>
                                </optgroup>
                                <optgroup label="Other Moods">
                                    <option value="surprised">Surprised</option>
                                    <option value="curious">Curious</option>
                                    <option value="mysterious">Mysterious</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="eerie">Eerie</option>
                                    <option value="random">Random</option>
                                </optgroup>
                            </select>
                        </div>                                              
                        <!-- parameter 1 end -->

                        <!-- parameter 2 -->
                        <label for="parameter2">primary style:</label>
                        <div class="input">
                            <select name="parameter2" id="parameter2">
                                <optgroup label="Styles">
                                    <option value="3d-model">3D Model</option>
                                    <option value="abstract">Abstract</option>
                                    <option value="analog-film">Analog Film</option>
                                    <option value="anime">Anime</option>
                                    <option value="cartoon">Cartoon</option>
                                    <option value="chalk-art">Chalk Art</option>
                                    <option value="comic-book">Comic Book</option>
                                    <option value="digital-art">Digital Art</option>
                                    <option value="disney-style">Disney</option>
                                    <option value="fantasy-art">Fantasy Art</option>
                                    <option value="glitch-art">Glitch Art</option>
                                    <option value="graffiti">Graffiti</option>
                                </optgroup>
                                <optgroup label="Genres">
                                    <option value="cinematic">Cinematic</option>
                                    <option value="cyberpunk">Cyberpunk</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="pop-art">Pop Art</option>
                                    <option value="steampunk">Steampunk</option>
                                </optgroup>
                                <optgroup label="Techniques">
                                    <option value="cubism">Cubism</option>
                                    <option value="decoupage">Decoupage</option>
                                    <option value="enhance">Enhance</option>
                                    <option value="expressionistic">Expressionistic</option>
                                    <option value="hyperrealistic">Hyperrealistic</option>
                                    <option value="impressionistic">Impressionistic</option>
                                    <option value="isometric">Isometric</option>
                                    <option value="line-art">Line Art</option>
                                    <option value="low-poly">Low Poly</option>
                                    <option value="minimalist">Minimalist</option>
                                    <option value="modeling-compound">Modeling Compound</option>
                                    <option value="origami">Origami</option>
                                    <option value="paper-cut">Paper Cut</option>
                                    <option value="photographic">Photographic</option>
                                    <option value="pixel-art">Pixel Art</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="tile-texture">Tile Texture</option>
                                    <option value="vaporwave">Vaporwave</option>
                                    <option value="watercolor">Watercolor</option>
                                </optgroup>
                            </select>
                        </div>  
                        <!--parameter 2 end -->

                        <!-- parameter 3-->
                        <label for="parameter3">secondary style:</label>
                        <div class="input">
                            <select name="parameter3" id="parameter3">
                                <optgroup label="Styles">
                                    <option value="3d-model">3D Model</option>
                                    <option value="abstract">Abstract</option>
                                    <option value="analog-film">Analog Film</option>
                                    <option value="anime">Anime</option>
                                    <option value="cartoon">Cartoon</option>
                                    <option value="chalk-art">Chalk Art</option>
                                    <option value="comic-book">Comic Book</option>
                                    <option value="digital-art">Digital Art</option>
                                    <option value="disney-style">Disney</option>
                                    <option value="fantasy-art">Fantasy Art</option>
                                    <option value="glitch-art">Glitch Art</option>
                                    <option value="graffiti">Graffiti</option>
                                </optgroup>
                                <optgroup label="Genres">
                                    <option value="cinematic">Cinematic</option>
                                    <option value="cyberpunk">Cyberpunk</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="pop-art">Pop Art</option>
                                    <option value="steampunk">Steampunk</option>
                                </optgroup>
                                <optgroup label="Techniques">
                                    <option value="cubism">Cubism</option>
                                    <option value="decoupage">Decoupage</option>
                                    <option value="enhance">Enhance</option>
                                    <option value="expressionistic">Expressionistic</option>
                                    <option value="hyperrealistic">Hyperrealistic</option>
                                    <option value="impressionistic">Impressionistic</option>
                                    <option value="isometric">Isometric</option>
                                    <option value="line-art">Line Art</option>
                                    <option value="low-poly">Low Poly</option>
                                    <option value="minimalist">Minimalist</option>
                                    <option value="modeling-compound">Modeling Compound</option>
                                    <option value="origami">Origami</option>
                                    <option value="paper-cut">Paper Cut</option>
                                    <option value="photographic">Photographic</option>
                                    <option value="pixel-art">Pixel Art</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="tile-texture">Tile Texture</option>
                                    <option value="vaporwave">Vaporwave</option>
                                    <option value="watercolor">Watercolor</option>
                                </optgroup>
                            </select>
                        </div>  
                        <!-- parameter 3 end -->

                        <input type="submit" value="Generate">
                    </form>
                </div>
            </div>
            <!-- image prompt end -->

            <!-- image to prompt -->
            <div class="container">
                <p>reverse image prompt</p>
                <div class="left-section">
                    <form id="a-reverse-image-form" enctype="multipart/form-data" onsubmit="submitForm('a-reverse-image-form', '/advance/image'); return false;">
                        <!-- parameter 0 -->
                        <label for="image">Upload Image:</label>
                        <div class="input">
                            <input type="file" name="image" accept="image/*" required>
                        </div>
                        <!-- parameter 0 end -->

                        <!-- parameter 1 -->
                        <label for="parameter1">Primary mood:</label>
                        <div class="input">
                            <select name="parameter1" id="parameter1">
                                <option value="original">Original</option>
                                <optgroup label="Positive Moods">
                                    <option value="happy">Happy</option>
                                    <option value="joyful">Joyful</option>
                                    <option value="excited">Excited</option>
                                    <option value="cheerful">Cheerful</option>
                                    <option value="content">Content</option>
                                </optgroup>
                                <optgroup label="Negative Moods">
                                    <option value="angry">Angry</option>
                                    <option value="disgust">Disgust</option>
                                    <option value="fear">Fear</option>
                                    <option value="sad">Sad</option>
                                    <option value="depressed">Depressed</option>
                                </optgroup>
                                <optgroup label="Neutral Moods">
                                    <option value="neutral">Neutral</option>
                                    <option value="calm">Calm</option>
                                    <option value="relaxed">Relaxed</option>
                                    <option value="serene">Serene</option>
                                    <option value="tranquil">Tranquil</option>
                                </optgroup>
                                <optgroup label="Other Moods">
                                    <option value="surprised">Surprised</option>
                                    <option value="curious">Curious</option>
                                    <option value="mysterious">Mysterious</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="eerie">Eerie</option>
                                    <option value="random">Random</option>
                                </optgroup>
                            </select>
                        </div>                        
                        <!-- parameter 1 end -->

                        <!-- parameter 2 -->
                        <label for="parameter2">primary style:</label>
                        <div class="input">
                            <select name="parameter2" id="parameter2">
                                <option value="original">Original</option>
                                <optgroup label="Styles">
                                    <option value="3d-model">3D Model</option>
                                    <option value="abstract">Abstract</option>
                                    <option value="analog-film">Analog Film</option>
                                    <option value="anime">Anime</option>
                                    <option value="cartoon">Cartoon</option>
                                    <option value="chalk-art">Chalk Art</option>
                                    <option value="comic-book">Comic Book</option>
                                    <option value="digital-art">Digital Art</option>
                                    <option value="disney-style">Disney</option>
                                    <option value="fantasy-art">Fantasy Art</option>
                                    <option value="glitch-art">Glitch Art</option>
                                    <option value="graffiti">Graffiti</option>
                                </optgroup>
                                <optgroup label="Genres">
                                    <option value="cinematic">Cinematic</option>
                                    <option value="cyberpunk">Cyberpunk</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="pop-art">Pop Art</option>
                                    <option value="steampunk">Steampunk</option>
                                </optgroup>
                                <optgroup label="Techniques">
                                    <option value="cubism">Cubism</option>
                                    <option value="decoupage">Decoupage</option>
                                    <option value="enhance">Enhance</option>
                                    <option value="expressionistic">Expressionistic</option>
                                    <option value="hyperrealistic">Hyperrealistic</option>
                                    <option value="impressionistic">Impressionistic</option>
                                    <option value="isometric">Isometric</option>
                                    <option value="line-art">Line Art</option>
                                    <option value="low-poly">Low Poly</option>
                                    <option value="minimalist">Minimalist</option>
                                    <option value="modeling-compound">Modeling Compound</option>
                                    <option value="origami">Origami</option>
                                    <option value="paper-cut">Paper Cut</option>
                                    <option value="photographic">Photographic</option>
                                    <option value="pixel-art">Pixel Art</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="tile-texture">Tile Texture</option>
                                    <option value="vaporwave">Vaporwave</option>
                                    <option value="watercolor">Watercolor</option>
                                </optgroup>
                            </select>
                        </div>   
                        <!-- parameter 2 end -->

                        <!-- parameter 3 -->
                        <label for="parameter3">Secondary style:</label>
                        <div class="input">
                            <select name="parameter3" id="parameter3">
                                <option value="original">Original</option>
                                <optgroup label="Styles">
                                    <option value="3d-model">3D Model</option>
                                    <option value="abstract">Abstract</option>
                                    <option value="analog-film">Analog Film</option>
                                    <option value="anime">Anime</option>
                                    <option value="cartoon">Cartoon</option>
                                    <option value="chalk-art">Chalk Art</option>
                                    <option value="comic-book">Comic Book</option>
                                    <option value="digital-art">Digital Art</option>
                                    <option value="disney-style">Disney</option>
                                    <option value="fantasy-art">Fantasy Art</option>
                                    <option value="glitch-art">Glitch Art</option>
                                    <option value="graffiti">Graffiti</option>
                                </optgroup>
                                <optgroup label="Genres">
                                    <option value="cinematic">Cinematic</option>
                                    <option value="cyberpunk">Cyberpunk</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="pop-art">Pop Art</option>
                                    <option value="steampunk">Steampunk</option>
                                </optgroup>
                                <optgroup label="Techniques">
                                    <option value="cubism">Cubism</option>
                                    <option value="decoupage">Decoupage</option>
                                    <option value="enhance">Enhance</option>
                                    <option value="expressionistic">Expressionistic</option>
                                    <option value="hyperrealistic">Hyperrealistic</option>
                                    <option value="impressionistic">Impressionistic</option>
                                    <option value="isometric">Isometric</option>
                                    <option value="line-art">Line Art</option>
                                    <option value="low-poly">Low Poly</option>
                                    <option value="minimalist">Minimalist</option>
                                    <option value="modeling-compound">Modeling Compound</option>
                                    <option value="origami">Origami</option>
                                    <option value="paper-cut">Paper Cut</option>
                                    <option value="photographic">Photographic</option>
                                    <option value="pixel-art">Pixel Art</option>
                                    <option value="surreal">Surreal</option>
                                    <option value="tile-texture">Tile Texture</option>
                                    <option value="vaporwave">Vaporwave</option>
                                    <option value="watercolor">Watercolor</option>
                                </optgroup>
                            </select>
                        </div>                        
                        <!-- parameter 3 end -->
                        <input type="submit" value="Generate">
                    </form>
                </div>
            </div>
            <!-- image to prompt end-->
        </div>
        <!-- tools end -->
    </div>
    <!-- main end -->

    <!-- preview -->
    {% if not result %}
    <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>
    {% endif %}
    <!-- 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>
