<!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/library.css') }}">

    <!-- JavaScript -->
    <script defer src="{{ url_for('static', filename='script/feedback.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/side_panel.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/library_copy.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/edit_prompt.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.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 id="toggleButton" onclick="toggleSidePanel()"><strong>Community Prompts</strong></h1>

    <!-- main library -->
    <div class="main">
        <h3>Here are some default prompts:</h3>
            <!-- system prompt list -->
            <div id="imageBoxContainer" class="flex-container">
                <div class="prompt-system"> 
                    {% for prompt in system_prompts %}
                    <div class="prompt-box">
                        <li><h4>{{ prompt[2] }}</h4></li>
                        <p>{{ prompt[3] }}</p>
                        <button class="copy-button" data-clipboard-text="{{ prompt[3] }}">Copy</button>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <!-- system prompt list ended -->
    </div>
    <div class="main">
        {% if shared_prompts %}
        <h3>And here are prompts shared by another user</h3>
            <!-- prompt list -->
            <div id="imageBoxContainer" class="flex-container">
                <div class="prompt-container">
                    {% for prompt in shared_prompts %}
                    <div class="prompt-box">
                        <li><h4>{{ prompt[2] }}</h4></li>
                        <p>{{ prompt[3] }}</p>
                        <button class="copy-button" data-clipboard-text="{{ prompt[3] }}">Copy</button>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <!-- prompt list ended -->
        {% endif %}
    </div>
    <!-- main library ended -->

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