<!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/index.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/card.js') }}"></script> -->
    <script defer src="{{ url_for('static', filename='script/side_panel.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>Prompt Sanctuary</strong></h1>
    <p>Welcome to the Prompt Sanctuary, Explore the functionalities of our platform:</p>

    <!-- card begun -->
    <div class="content-container">
        <div class="main__cards cards">
            <div class="cards__inner">
                <!-- left -->
                <div class="cards__card card" tabindex="3">
                    <h2 class="card__heading">Prompt generator (basic)</h2>
                    <p class="card__price">features:</p>
                    <ul role="list" class="card__bullets flow">
                        <li>create prompts tailored to your needs</li>
                        <li>craft high-quality, engaging, and uniquely tailored prompts</li>
                        <li>random option for a fun and surprising prompt</li>
                    </ul>
                    <a onclick="window.location.href='{{ url_for('main.generate') }}';" class="card__cta cta" tabindex="7">click to begin</a>
                </div>
                <!-- left end -->

                <!-- right -->
                <div class="cards__card card" tabindex="5">
                    <h2 class="card__heading">Prompt generator (advance)</h2>
                    <p class="card__price">features:</p>
                    <ul role="list" class="card__bullets flow">
                        <li>help Regenerate your prompt</li>
                        <li>craft high-quality prompt based on multiple parameters</li>
                        <li>Tweaking your prompt to make it more suited to your needs</li>
                    </ul>
                    <a onclick="window.location.href='{{ url_for('main.advance') }}';" class="card__cta cta" tabindex="9">click to begin</a>
                </div>
                <!-- right end -->
            </div>
            <div class="overlay cards__inner"></div>
        </div>
    </div>
    <!-- card 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>
