krishanissingh/Prompt-Generator-App
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Azario - Prompt Generator</title>8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">9 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">10 <link rel="stylesheet" href="/styles/prompts.css">11 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>12 13</head>14 15<body>16 <div class="header-section">17 <header class="navbar">18 <div class="logo">19 <img src="/main/ad.jpeg" alt="Azario Logo">20 </div>21 <div class="navbar-options">22 <div><a href="homepage.html"><i class="fas fa-home"></i> Home</a></div>23 <div><a href="profile.html"><i class="fas fa-user"></i> Profile</a></div>24 <div><a href="aboutus.html"><i class="fas fa-info-circle"></i> About Us</a></div>25 <div><a href="prompt.html"><i class="fas fa-lightbulb"></i> Generate Prompts</a></div>26 </div>27 28 <div class="buttons">29 <button class="register-btn" onclick="window.location.href='index.html'"><i class="fas fa-sign-out-alt"></i>30 Logout</button>31 </div>32 </header>33 </div>34 35 <main class="main-section">36 <div class="search-bar-container">37 <input type="text" id="search-bar" class="search-bar" placeholder="Search...">38 <button class="btn generate-button mt-3 search-button">Search</button>39 </div>40 41 <div class="container-fluid">42 <div>43 <div class="generate-prompts">44 <!-- prompt generator-->45 <div class="col-10 d-flex justify-content-center align-items-center">46 <div class="main-content text-center">47 <textarea id="prompts_textbox" placeholder="Please write your topics here....."></textarea>48 <button class="btn generate-button mt-3" id="generate_prompt_button">Generate Prompt</button>49 </div>50 </div>51 </div>52 53 <!-- AI Output Area -->54 <!-- Prompt Output -->55 <div id="prompt_output" class="mt-4 text-start" style="display: none;">56 <div class="card p-3 bg-dark text-light border-info">57 <h5>Generated Prompt:</h5>58 <p id="generated_prompt_text" class="fst-italic"></p>59 </div>60 </div>61 62 <!-- Similar Story Output -->63 <div id="story_output" class="mt-4 text-start" style="display: none;">64 <div class="card p-3 bg-dark text-light border-secondary">65 <h5>Inspiration (Similar Story):</h5>66 <p id="similar_story_text"></p>67 </div>68 </div>69 </div>70 71 72 <div class="post-response">73 <!-- prompt response box-->74 <div class="col-10 d-flex justify-content-center align-items-center">75 <div class="response-box">76 <textarea id="response_input" placeholder="Write your response here..."></textarea>77 <button class="btn post-button mt-3" id="post_response_button">Post Response</button>78 </div>79 </div>80 </div>81 </div>82 </main>83 84 <div class="message-setion">85 <div class="message-box">86 <h2>Message</h2>87 <p id="message_text">Your message will appear here.</p>88 </div>89 </div>90 91 <script src="/backend/prompts_text.js"></script> <!-- linking js for newpost-->92 93</body>94 95</html>