{"id":230,"date":"2026-06-02T11:53:22","date_gmt":"2026-06-02T11:53:22","guid":{"rendered":"https:\/\/vikassrivastava.in\/academy\/?page_id=230"},"modified":"2026-06-03T08:23:29","modified_gmt":"2026-06-03T08:23:29","slug":"image-prompt-studio","status":"publish","type":"page","link":"https:\/\/vikassrivastava.in\/academy\/image-prompt-studio\/","title":{"rendered":"Image Prompt Studio"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nPromptPix Library<\/title>\r\n\r\n<style>\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nhtml,\r\nbody{\r\n width:100%;\r\n min-height:100%;\r\n font-family:Arial, Helvetica, sans-serif;\r\n background:#000000 !important;\r\n color:#ffffff;\r\n}\r\n\r\n.promptpix-wrapper{\r\n width:100%;\r\n min-height:100vh;\r\n background:\r\n radial-gradient(circle at top left,rgba(0,255,255,0.25),transparent 30%),\r\n radial-gradient(circle at top right,rgba(255,0,255,0.22),transparent 30%),\r\n linear-gradient(135deg,#000000,#050510,#070714);\r\n}\r\n\r\n\/* NEW HEADER STYLE *\/\r\n.promptpix-header{\r\n width:100%;\r\n padding:22px 4% 18px;\r\n background:#070719;\r\n position:sticky;\r\n top:0;\r\n z-index:999;\r\n border-bottom:1px solid rgba(255,255,255,0.12);\r\n}\r\n\r\n.logo{\r\n width:100%;\r\n text-align:center;\r\n font-size:46px;\r\n line-height:1.1;\r\n font-weight:900;\r\n margin-bottom:22px;\r\n background:linear-gradient(90deg,#00f5ff,#3c7cff,#ff00f7,#ffe600);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n}\r\n\r\n.nav-menu{\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:14px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.nav-menu a{\r\n color:#ffffff;\r\n text-decoration:none;\r\n font-size:16px;\r\n font-weight:900;\r\n cursor:pointer;\r\n padding:12px 20px;\r\n border-radius:50px;\r\n border:1px solid rgba(255,255,255,0.18);\r\n box-shadow:0 8px 18px rgba(0,0,0,0.28);\r\n transition:0.3s;\r\n}\r\n\r\n.nav-menu a:nth-child(1){\r\n background:linear-gradient(135deg,#00c6ff,#0072ff);\r\n}\r\n\r\n.nav-menu a:nth-child(2){\r\n background:linear-gradient(135deg,#ff9a00,#ff3d00);\r\n}\r\n\r\n.nav-menu a:nth-child(3){\r\n background:linear-gradient(135deg,#8e2de2,#4a00e0);\r\n}\r\n\r\n.nav-menu a:nth-child(4){\r\n background:linear-gradient(135deg,#00f260,#0575e6);\r\n}\r\n\r\n.nav-menu a:nth-child(5){\r\n background:linear-gradient(135deg,#f7971e,#ffd200);\r\n color:#111;\r\n}\r\n\r\n.nav-menu a:nth-child(6){\r\n background:linear-gradient(135deg,#ff00cc,#333399);\r\n}\r\n\r\n.nav-menu a:nth-child(7){\r\n background:linear-gradient(135deg,#00f5ff,#00b09b);\r\n color:#071018;\r\n}\r\n\r\n.nav-menu a:hover,\r\n.nav-menu a.active{\r\n transform:translateY(-3px);\r\n box-shadow:0 0 22px rgba(0,245,255,0.45);\r\n}\r\n\r\n.mobile-menu-btn{\r\n display:none;\r\n font-size:30px;\r\n cursor:pointer;\r\n text-align:center;\r\n margin-top:10px;\r\n}\r\n\r\n\/* Common Section *\/\r\n.content-section{\r\n display:none;\r\n padding:55px 5%;\r\n}\r\n\r\n.content-section.active-section{\r\n display:block;\r\n}\r\n\r\n.section-title{\r\n text-align:center;\r\n margin-bottom:35px;\r\n}\r\n\r\n\/* UPDATED: ALL SCREEN TITLES IN NEON COLOR *\/\r\n.section-title h2{\r\n font-size:42px;\r\n margin-bottom:10px;\r\n font-weight:950;\r\n background:linear-gradient(90deg,#00f5ff,#38f8ff,#7c7cff,#ff00f7,#ff5fd7,#ffe600);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n color:transparent;\r\n text-shadow:\r\n 0 0 10px rgba(0,245,255,0.70),\r\n 0 0 20px rgba(255,0,247,0.55),\r\n 0 0 35px rgba(255,230,0,0.35);\r\n}\r\n\r\n.section-title p{\r\n color:#dcdcec;\r\n font-size:18px;\r\n max-width:900px;\r\n margin:auto;\r\n}\r\n\r\n\/* Home *\/\r\n.hero{\r\n display:grid;\r\n grid-template-columns:1.1fr 0.9fr;\r\n gap:35px;\r\n align-items:center;\r\n}\r\n\r\n.hero-badge{\r\n display:inline-block;\r\n padding:8px 18px;\r\n border-radius:40px;\r\n background:rgba(0,245,255,0.12);\r\n border:1px solid rgba(0,245,255,0.4);\r\n color:#00f5ff;\r\n font-weight:800;\r\n margin-bottom:18px;\r\n}\r\n\r\n\/* UPDATED: HOME SCREEN TEXT IN CLEAR NEON COLOR *\/\r\n.hero h1{\r\n font-size:54px;\r\n line-height:1.1;\r\n margin-bottom:20px;\r\n font-weight:900;\r\n}\r\n\r\n.hero h1 .home-neon-text{\r\n display:inline-block;\r\n background:linear-gradient(90deg,#00f5ff,#38f8ff,#7c7cff,#ff00f7,#ff5fd7,#ffe600);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n color:transparent;\r\n text-shadow:\r\n 0 0 10px rgba(0,245,255,0.70),\r\n 0 0 20px rgba(255,0,247,0.55),\r\n 0 0 35px rgba(255,230,0,0.35);\r\n}\r\n\r\n.hero h1 span{\r\n background:linear-gradient(90deg,#00f5ff,#ff00f7,#ffe600);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n}\r\n\r\n.hero p{\r\n font-size:18px;\r\n color:#d6d6e6;\r\n margin-bottom:25px;\r\n}\r\n\r\n.btn{\r\n padding:13px 22px;\r\n border-radius:40px;\r\n border:none;\r\n cursor:pointer;\r\n font-weight:900;\r\n font-size:15px;\r\n text-decoration:none;\r\n display:inline-block;\r\n margin:5px;\r\n}\r\n\r\n.btn-primary{\r\n background:linear-gradient(90deg,#00f5ff,#ff00f7);\r\n color:#fff;\r\n}\r\n\r\n.btn-secondary{\r\n background:rgba(255,255,255,0.1);\r\n color:#fff;\r\n border:1px solid rgba(255,255,255,0.25);\r\n}\r\n\r\n.btn-danger{\r\n background:#ff274f;\r\n color:#fff;\r\n}\r\n\r\n.hero-card{\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.12);\r\n border-radius:26px;\r\n padding:22px;\r\n}\r\n\r\n.hero-card-inner{\r\n min-height:380px;\r\n border-radius:22px;\r\n background:\r\n linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.15)),\r\n url('https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=900&q=80');\r\n background-size:cover;\r\n background-position:center;\r\n display:flex;\r\n align-items:flex-end;\r\n padding:24px;\r\n}\r\n\r\n.hero-card-inner h3{\r\n font-size:28px;\r\n}\r\n\r\n\/* Stats *\/\r\n.stats-grid{\r\n margin-top:28px;\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:16px;\r\n}\r\n\r\n.stat-card{\r\n height:145px;\r\n border-radius:22px;\r\n background:rgba(255,255,255,0.09);\r\n border:1px solid rgba(255,255,255,0.15);\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n text-align:center;\r\n}\r\n\r\n.stat-card h3{\r\n font-size:36px;\r\n color:#00f5ff;\r\n line-height:1.1;\r\n}\r\n\r\n.stat-card p{\r\n font-size:17px;\r\n font-weight:800;\r\n margin-top:8px;\r\n}\r\n\r\n\/* Category *\/\r\n.category-grid{\r\n display:grid;\r\n grid-template-columns:repeat(5,1fr);\r\n gap:18px;\r\n}\r\n\r\n.category-card{\r\n min-height:150px;\r\n border-radius:22px;\r\n padding:20px;\r\n background:linear-gradient(135deg,rgba(0,245,255,0.18),rgba(255,0,247,0.15));\r\n border:1px solid rgba(255,255,255,0.15);\r\n cursor:pointer;\r\n transition:0.3s;\r\n}\r\n\r\n.category-card:hover{\r\n transform:translateY(-6px);\r\n box-shadow:0 0 25px rgba(0,245,255,0.25);\r\n}\r\n\r\n.category-icon{\r\n font-size:34px;\r\n margin-bottom:10px;\r\n}\r\n\r\n.category-card h3{\r\n font-size:18px;\r\n margin-bottom:6px;\r\n}\r\n\r\n.category-card p{\r\n font-size:13px;\r\n color:#ddd;\r\n}\r\n\r\n\/* Toolbar *\/\r\n.library-toolbar{\r\n display:grid;\r\n grid-template-columns:1.5fr 1fr 1fr 1fr;\r\n gap:20px;\r\n margin-bottom:32px;\r\n}\r\n\r\n.library-toolbar input,\r\n.library-toolbar select,\r\n.generator-box input,\r\n.generator-box select,\r\n.generator-box textarea,\r\n.submit-form input,\r\n.submit-form select,\r\n.submit-form textarea,\r\n.own-toolbar input{\r\n width:100%;\r\n padding:20px 20px;\r\n min-height:64px;\r\n border-radius:16px;\r\n border:1px solid rgba(255,255,255,0.35);\r\n background:rgba(255,255,255,0.11);\r\n color:#ffffff;\r\n font-size:17px;\r\n font-weight:800;\r\n outline:none;\r\n}\r\n\r\n.library-toolbar input::placeholder,\r\n.own-toolbar input::placeholder,\r\n.generator-box input::placeholder,\r\n.generator-box textarea::placeholder,\r\n.submit-form input::placeholder,\r\n.submit-form textarea::placeholder{\r\n color:rgba(255,255,255,0.78);\r\n opacity:1;\r\n}\r\n\r\n.library-toolbar select{\r\n color:#ffffff !important;\r\n background:\r\n linear-gradient(135deg,rgba(0,245,255,0.12),rgba(255,0,247,0.12)),\r\n rgba(255,255,255,0.12);\r\n appearance:auto;\r\n}\r\n\r\n.library-toolbar select option,\r\nselect option{\r\n color:#111;\r\n background:#ffffff;\r\n font-size:16px;\r\n font-weight:700;\r\n}\r\n\r\n\/* Prompt Cards *\/\r\n.prompt-count{\r\n margin-bottom:18px;\r\n font-size:18px;\r\n font-weight:800;\r\n color:#00f5ff;\r\n}\r\n\r\n.prompt-grid{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:18px;\r\n}\r\n\r\n.prompt-card{\r\n background:#f8f4ea;\r\n color:#111;\r\n border-radius:20px;\r\n padding:18px;\r\n min-height:270px;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:space-between;\r\n box-shadow:0 12px 30px rgba(0,0,0,0.3);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n.prompt-card:before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n height:6px;\r\n width:100%;\r\n background:linear-gradient(90deg,#00f5ff,#ff00f7,#ffe600);\r\n}\r\n\r\n.prompt-card h3{\r\n font-size:19px;\r\n margin-top:8px;\r\n margin-bottom:8px;\r\n}\r\n\r\n.prompt-card p{\r\n font-size:14px;\r\n color:#333;\r\n}\r\n\r\n.prompt-meta{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:6px;\r\n margin:12px 0;\r\n}\r\n\r\n.prompt-meta span{\r\n background:#111;\r\n color:#fff;\r\n padding:5px 9px;\r\n border-radius:30px;\r\n font-size:11px;\r\n font-weight:800;\r\n}\r\n\r\n.prompt-actions{\r\n display:flex;\r\n gap:7px;\r\n flex-wrap:wrap;\r\n margin-top:12px;\r\n}\r\n\r\n.small-btn{\r\n padding:9px 11px;\r\n border-radius:10px;\r\n border:none;\r\n cursor:pointer;\r\n font-size:12px;\r\n font-weight:900;\r\n}\r\n\r\n.copy-btn{\r\n background:#111;\r\n color:#fff;\r\n}\r\n\r\n.detail-btn{\r\n background:linear-gradient(90deg,#00cfff,#ff00d4);\r\n color:#fff;\r\n}\r\n\r\n.remix-btn{\r\n background:#ffe600;\r\n color:#111;\r\n}\r\n\r\n.delete-btn{\r\n background:#ff274f;\r\n color:#fff;\r\n}\r\n\r\n.load-more-wrap{\r\n text-align:center;\r\n margin-top:30px;\r\n}\r\n\r\n\/* Generator *\/\r\n.generator-box{\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.14);\r\n border-radius:26px;\r\n padding:28px;\r\n}\r\n\r\n.generator-form{\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:16px;\r\n}\r\n\r\n.upload-box{\r\n grid-column:1\/-1;\r\n border:2px dashed rgba(0,245,255,0.55);\r\n border-radius:20px;\r\n padding:24px;\r\n text-align:center;\r\n background:rgba(0,245,255,0.07);\r\n}\r\n\r\n.preview-image{\r\n display:none;\r\n margin-top:16px;\r\n max-width:220px;\r\n border-radius:16px;\r\n}\r\n\r\n.generator-form textarea{\r\n grid-column:1\/-1;\r\n min-height:110px;\r\n}\r\n\r\n.full-width{\r\n grid-column:1\/-1;\r\n}\r\n\r\n.generated-output{\r\n margin-top:25px;\r\n background:#f8f4ea;\r\n color:#111;\r\n border-radius:22px;\r\n padding:22px;\r\n display:none;\r\n}\r\n\r\n.generated-output textarea{\r\n width:100%;\r\n min-height:230px;\r\n padding:15px;\r\n border-radius:14px;\r\n border:1px solid #ccc;\r\n font-size:15px;\r\n}\r\n\r\n\/* Learn *\/\r\n.structure-grid{\r\n display:grid;\r\n grid-template-columns:repeat(2,1fr);\r\n gap:22px;\r\n}\r\n\r\n.structure-card{\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.14);\r\n border-radius:24px;\r\n padding:26px;\r\n}\r\n\r\n.structure-card h3{\r\n color:#00f5ff;\r\n margin-bottom:14px;\r\n}\r\n\r\n.structure-card li{\r\n margin-left:20px;\r\n margin-bottom:8px;\r\n color:#ddd;\r\n}\r\n\r\n\/* Submit *\/\r\n.submit-form{\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.14);\r\n border-radius:26px;\r\n padding:28px;\r\n display:grid;\r\n grid-template-columns:repeat(2,1fr);\r\n gap:16px;\r\n}\r\n\r\n.submit-form textarea{\r\n grid-column:1\/-1;\r\n min-height:150px;\r\n}\r\n\r\n.submit-note{\r\n grid-column:1\/-1;\r\n background:rgba(0,245,255,0.08);\r\n border:1px solid rgba(0,245,255,0.3);\r\n padding:16px;\r\n border-radius:16px;\r\n color:#dff;\r\n}\r\n\r\n\/* Own Library *\/\r\n.own-toolbar{\r\n display:grid;\r\n grid-template-columns:1fr auto auto;\r\n gap:14px;\r\n margin-bottom:24px;\r\n}\r\n\r\n.empty-library{\r\n text-align:center;\r\n padding:45px;\r\n border-radius:24px;\r\n background:rgba(255,255,255,0.08);\r\n border:1px solid rgba(255,255,255,0.14);\r\n}\r\n\r\n.empty-library h3{\r\n font-size:28px;\r\n margin-bottom:12px;\r\n color:#00f5ff;\r\n}\r\n\r\n\/* Modal *\/\r\n.modal{\r\n display:none;\r\n position:fixed;\r\n inset:0;\r\n background:rgba(0,0,0,0.8);\r\n z-index:9999;\r\n padding:25px;\r\n overflow:auto;\r\n}\r\n\r\n.modal-content{\r\n max-width:900px;\r\n margin:35px auto;\r\n background:#f8f4ea;\r\n color:#111;\r\n border-radius:26px;\r\n padding:28px;\r\n position:relative;\r\n}\r\n\r\n.close-modal{\r\n position:absolute;\r\n top:15px;\r\n right:22px;\r\n font-size:32px;\r\n font-weight:900;\r\n cursor:pointer;\r\n}\r\n\r\n.prompt-text-box{\r\n background:#fff;\r\n border:1px solid #ddd;\r\n border-radius:15px;\r\n padding:18px;\r\n white-space:pre-wrap;\r\n margin-top:10px;\r\n}\r\n\r\n.toast{\r\n position:fixed;\r\n bottom:25px;\r\n right:25px;\r\n background:linear-gradient(90deg,#00f5ff,#ff00f7);\r\n color:#fff;\r\n padding:14px 22px;\r\n border-radius:40px;\r\n display:none;\r\n z-index:99999;\r\n font-weight:900;\r\n}\r\n\r\n.footer{\r\n padding:28px 5%;\r\n text-align:center;\r\n background:#000000;\r\n border-top:1px solid rgba(255,255,255,0.12);\r\n color:#ccc;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:1150px){\r\n .hero{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .category-grid{\r\n grid-template-columns:repeat(3,1fr);\r\n }\r\n\r\n .prompt-grid{\r\n grid-template-columns:repeat(3,1fr);\r\n }\r\n}\r\n\r\n@media(max-width:850px){\r\n .logo{\r\n font-size:34px;\r\n }\r\n\r\n .nav-menu{\r\n display:none;\r\n margin-top:15px;\r\n flex-direction:column;\r\n width:100%;\r\n }\r\n\r\n .nav-menu.active{\r\n display:flex;\r\n }\r\n\r\n .nav-menu a{\r\n width:100%;\r\n text-align:center;\r\n }\r\n\r\n .mobile-menu-btn{\r\n display:block;\r\n }\r\n\r\n .hero h1{\r\n font-size:36px;\r\n }\r\n\r\n .section-title h2{\r\n font-size:32px;\r\n }\r\n\r\n .stats-grid,\r\n .category-grid,\r\n .prompt-grid,\r\n .library-toolbar,\r\n .generator-form,\r\n .structure-grid,\r\n .submit-form,\r\n .own-toolbar{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .upload-box,\r\n .generator-form textarea,\r\n .full-width,\r\n .submit-form textarea,\r\n .submit-note{\r\n grid-column:auto;\r\n }\r\n\r\n .stat-card{\r\n height:120px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"promptpix-wrapper\">\r\n\r\n<header class=\"promptpix-header\">\r\n <div class=\"logo\">PromptPix Library<\/div>\r\n\r\n <nav class=\"nav-menu\" id=\"navMenu\">\r\n <a class=\"menu-link active\" onclick=\"showSection('home',this)\">Home<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('categories',this)\">Categories<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('library',this)\">Prompt Library<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('generator',this)\">Prompt Generator<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('ownLibrary',this)\">Own Library<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('learn',this)\">Learn Prompting<\/a>\r\n <a class=\"menu-link\" onclick=\"showSection('submit',this)\">Submit Prompt<\/a>\r\n <\/nav>\r\n\r\n <div class=\"mobile-menu-btn\" onclick=\"toggleMenu()\">\u2630 Menu<\/div>\r\n<\/header>\r\n\r\n<section class=\"content-section active-section\" id=\"home\">\r\n\r\n <div class=\"hero\">\r\n <div>\r\n <div class=\"hero-badge\">AI Image Prompt Depository<\/div>\r\n\r\n <h1><span class=\"home-neon-text\">Create Stunning AI Images with Ready-to-Use Prompts<\/span><\/h1>\r\n\r\n <p>\r\n Browse, copy, customize, save, and generate powerful prompts for 3D characters,\r\n caricatures, portraits, Facebook ads, YouTube thumbnails, product mockups,\r\n posters, cinematic scenes, neon creatives, and professional profile images.\r\n <\/p>\r\n\r\n <button class=\"btn btn-primary\" onclick=\"showSectionById('library')\">Browse Prompts<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showSectionById('generator')\">Create Prompt<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showSectionById('ownLibrary')\">Own Library<\/button>\r\n\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <h3>1000+<\/h3>\r\n <p>Prompt Ideas<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3>20+<\/h3>\r\n <p>Categories<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3>1 Click<\/h3>\r\n <p>Copy Prompt<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3>Save<\/h3>\r\n <p>Own Library<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-card\">\r\n <div class=\"hero-card-inner\" onclick=\"showSectionById('generator')\" style=\"cursor:pointer;\">\r\n <div>\r\n <h3>Upload Reference Image<\/h3>\r\n <p>or describe your photo idea and generate a structured image prompt instantly.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"categories\">\r\n <div class=\"section-title\">\r\n <h2>Prompt Categories<\/h2>\r\n <p>Click any category to open related prompts.<\/p>\r\n <\/div>\r\n\r\n <div class=\"category-grid\" id=\"categoryGrid\"><\/div>\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"library\">\r\n <div class=\"section-title\">\r\n <h2>AI Image Prompt Library<\/h2>\r\n <p>1000 prompt ideas generated across all major image categories.<\/p>\r\n <\/div>\r\n\r\n <div class=\"library-toolbar\">\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search prompt...\" onkeyup=\"filterPrompts()\">\r\n\r\n <select id=\"categoryFilter\" onchange=\"filterPrompts()\">\r\n <option value=\"\">All Categories<\/option>\r\n <\/select>\r\n\r\n <select id=\"styleFilter\" onchange=\"filterPrompts()\">\r\n <option value=\"\">All Styles<\/option>\r\n <option value=\"3D Render\">3D Render<\/option>\r\n <option value=\"Realistic\">Realistic<\/option>\r\n <option value=\"Cartoon\">Cartoon<\/option>\r\n <option value=\"Cinematic\">Cinematic<\/option>\r\n <option value=\"Neon Futuristic\">Neon Futuristic<\/option>\r\n <option value=\"Minimal Luxury\">Minimal Luxury<\/option>\r\n <option value=\"Anime\">Anime<\/option>\r\n <option value=\"Watercolor\">Watercolor<\/option>\r\n <\/select>\r\n\r\n <select id=\"ratioFilter\" onchange=\"filterPrompts()\">\r\n <option value=\"\">All Ratios<\/option>\r\n <option value=\"1:1\">1:1 Square<\/option>\r\n <option value=\"4:5\">4:5 Vertical<\/option>\r\n <option value=\"9:16\">9:16 Reel<\/option>\r\n <option value=\"16:9\">16:9 Horizontal<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"prompt-count\" id=\"promptCount\"><\/div>\r\n <div class=\"prompt-grid\" id=\"promptGrid\"><\/div>\r\n\r\n <div class=\"load-more-wrap\">\r\n <button class=\"btn btn-primary\" onclick=\"loadMorePrompts()\">Load More Prompts<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"generator\">\r\n <div class=\"section-title\">\r\n <h2>Image Prompt Generator<\/h2>\r\n <p>Upload a reference image or describe your photo idea to create a detailed AI image prompt.<\/p>\r\n <\/div>\r\n\r\n <div class=\"generator-box\">\r\n <div class=\"generator-form\">\r\n\r\n <div class=\"upload-box\">\r\n <h3>Upload Reference Image<\/h3>\r\n <p>Image preview will appear below.<\/p>\r\n <input type=\"file\" id=\"referenceImage\" accept=\"image\/*\" onchange=\"previewReferenceImage(event)\">\r\n <br>\r\n <img id=\"previewImage\" class=\"preview-image\">\r\n <\/div>\r\n\r\n <select id=\"imageType\">\r\n <option value=\"Portrait\">Portrait<\/option>\r\n <option value=\"3D Character\">3D Character<\/option>\r\n <option value=\"Caricature\">Caricature<\/option>\r\n <option value=\"Poster\">Poster<\/option>\r\n <option value=\"Thumbnail\">Thumbnail<\/option>\r\n <option value=\"Product Mockup\">Product Mockup<\/option>\r\n <option value=\"Logo\">Logo<\/option>\r\n <option value=\"Ad Creative\">Ad Creative<\/option>\r\n <\/select>\r\n\r\n <input type=\"text\" id=\"subject\" placeholder=\"Subject: man, woman, product, robot...\">\r\n\r\n <select id=\"style\">\r\n <option value=\"Realistic\">Realistic<\/option>\r\n <option value=\"3D Render\">3D Render<\/option>\r\n <option value=\"Cartoon\">Cartoon<\/option>\r\n <option value=\"Cinematic\">Cinematic<\/option>\r\n <option value=\"Neon Futuristic\">Neon Futuristic<\/option>\r\n <option value=\"Minimal Luxury\">Minimal Luxury<\/option>\r\n <option value=\"Anime\">Anime<\/option>\r\n <option value=\"Watercolor\">Watercolor<\/option>\r\n <\/select>\r\n\r\n <select id=\"mood\">\r\n <option value=\"happy, confident, and friendly\">Happy and Confident<\/option>\r\n <option value=\"serious, professional, and calm\">Serious Professional<\/option>\r\n <option value=\"energetic, bold, and inspiring\">Energetic Bold<\/option>\r\n <option value=\"thoughtful, creative, and approachable\">Thoughtful Creative<\/option>\r\n <\/select>\r\n\r\n <input type=\"text\" id=\"outfit\" placeholder=\"Outfit \/ costume\">\r\n\r\n <select id=\"pose\">\r\n <option value=\"standing confidently with natural body language\">Standing Confidently<\/option>\r\n <option value=\"sitting professionally with a calm expression\">Sitting Professionally<\/option>\r\n <option value=\"pointing towards the camera with excitement\">Pointing Pose<\/option>\r\n <option value=\"thinking pose with one hand on chin\">Thinking Pose<\/option>\r\n <option value=\"presenting with open hand gesture\">Presenting Pose<\/option>\r\n <\/select>\r\n\r\n <select id=\"background\">\r\n <option value=\"clean white studio background\">White Studio<\/option>\r\n <option value=\"modern office background\">Modern Office<\/option>\r\n <option value=\"futuristic neon city background\">Futuristic Neon City<\/option>\r\n <option value=\"abstract gradient background\">Abstract Gradient<\/option>\r\n <option value=\"premium dark luxury background\">Dark Luxury<\/option>\r\n <\/select>\r\n\r\n <select id=\"lighting\">\r\n <option value=\"soft studio lighting with smooth shadows\">Soft Studio Lighting<\/option>\r\n <option value=\"cinematic dramatic lighting\">Cinematic Lighting<\/option>\r\n <option value=\"neon glow lighting\">Neon Glow<\/option>\r\n <option value=\"bright clean product lighting\">Product Lighting<\/option>\r\n <\/select>\r\n\r\n <select id=\"aspectRatio\">\r\n <option value=\"1:1 square aspect ratio\">1:1 Square<\/option>\r\n <option value=\"4:5 vertical aspect ratio\">4:5 Vertical<\/option>\r\n <option value=\"9:16 story\/reel aspect ratio\">9:16 Reel<\/option>\r\n <option value=\"16:9 horizontal aspect ratio\">16:9 Horizontal<\/option>\r\n <\/select>\r\n\r\n <textarea id=\"photoDescription\" placeholder=\"Describe your reference image or image idea...\"><\/textarea>\r\n\r\n <button class=\"btn btn-primary full-width\" onclick=\"generatePrompt()\">Generate Prompt<\/button>\r\n <\/div>\r\n\r\n <div class=\"generated-output\" id=\"generatedOutput\">\r\n <h3>Your Generated Prompt<\/h3>\r\n <textarea id=\"generatedPromptText\"><\/textarea>\r\n <br><br>\r\n <button class=\"btn btn-primary\" onclick=\"copyGeneratedPrompt()\">Copy Generated Prompt<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"saveGeneratedPromptToOwnLibrary()\">Save to Own Library<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"ownLibrary\">\r\n <div class=\"section-title\">\r\n <h2>Own Library<\/h2>\r\n <p>Your submitted and generated prompts will be stored here in this browser.<\/p>\r\n <\/div>\r\n\r\n <div class=\"own-toolbar\">\r\n <input type=\"text\" id=\"ownSearchInput\" placeholder=\"Search your own saved prompts...\" onkeyup=\"renderOwnLibrary()\">\r\n <button class=\"btn btn-primary\" onclick=\"showSectionById('submit')\">Add New Prompt<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"clearOwnLibrary()\">Clear All<\/button>\r\n <\/div>\r\n\r\n <div class=\"prompt-count\" id=\"ownLibraryCount\"><\/div>\r\n <div class=\"prompt-grid\" id=\"ownLibraryGrid\"><\/div>\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"learn\">\r\n <div class=\"section-title\">\r\n <h2>Learn Prompting<\/h2>\r\n <p>Use this structure to write powerful image generation prompts.<\/p>\r\n <\/div>\r\n\r\n <div class=\"structure-grid\">\r\n <div class=\"structure-card\">\r\n <h3>Prompt Structure<\/h3>\r\n <ul>\r\n <li>Image Type: Portrait, 3D, poster, thumbnail, product mockup.<\/li>\r\n <li>Subject: Person, product, object, place, or scene.<\/li>\r\n <li>Appearance: Face, clothes, color, shape, style.<\/li>\r\n <li>Mood: Happy, confident, serious, emotional, energetic.<\/li>\r\n <li>Pose: Standing, sitting, pointing, presenting, thinking.<\/li>\r\n <li>Background: Studio, office, neon, nature, abstract.<\/li>\r\n <li>Lighting: Soft, cinematic, dramatic, neon, product light.<\/li>\r\n <li>Composition: Close-up, half-body, full-body, centered.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"structure-card\">\r\n <h3>Ready Formula<\/h3>\r\n <ul>\r\n <li>Create a [image type] of [subject].<\/li>\r\n <li>The subject should have [expression and personality].<\/li>\r\n <li>Outfit: [clothing and color details].<\/li>\r\n <li>Pose: [body position and hand gesture].<\/li>\r\n <li>Style: [3D \/ realistic \/ cinematic \/ neon].<\/li>\r\n <li>Background: [clean \/ office \/ futuristic \/ abstract].<\/li>\r\n <li>Lighting: [soft \/ dramatic \/ neon].<\/li>\r\n <li>Aspect Ratio: [1:1 \/ 4:5 \/ 9:16 \/ 16:9].<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"content-section\" id=\"submit\">\r\n <div class=\"section-title\">\r\n <h2>Submit Prompt<\/h2>\r\n <p>User-submitted prompts will be saved directly in the Own Library tab.<\/p>\r\n <\/div>\r\n\r\n <div class=\"submit-form\">\r\n\r\n <div class=\"submit-note\">\r\n After submission, the prompt will automatically appear in <strong>Own Library<\/strong>. \r\n It is saved in the user's browser using Local Storage.\r\n <\/div>\r\n\r\n <input type=\"text\" id=\"submitTitle\" placeholder=\"Prompt Title\">\r\n\r\n <select id=\"submitCategory\">\r\n <option value=\"\">Prompt Category<\/option>\r\n <option>3D Character<\/option>\r\n <option>Caricature<\/option>\r\n <option>Portrait<\/option>\r\n <option>Facebook Ads<\/option>\r\n <option>YouTube Thumbnail<\/option>\r\n <option>Product Mockup<\/option>\r\n <option>Logo Design<\/option>\r\n <option>Poster Design<\/option>\r\n <option>Cinematic Scene<\/option>\r\n <option>Fantasy Art<\/option>\r\n <option>Business Branding<\/option>\r\n <option>Social Media Post<\/option>\r\n <option>Festival Creative<\/option>\r\n <option>Educational Image<\/option>\r\n <option>AI Webinar Image<\/option>\r\n <option>Professional Profile<\/option>\r\n <option>Cartoon Character<\/option>\r\n <option>Realistic Photography<\/option>\r\n <option>Minimalist Design<\/option>\r\n <option>Neon Style<\/option>\r\n <\/select>\r\n\r\n <input type=\"text\" id=\"submitStyle\" placeholder=\"Style: 3D Render, Realistic, Neon, Cartoon...\">\r\n <input type=\"text\" id=\"submitBestUse\" placeholder=\"Best Use Case: Ads, Thumbnail, Profile...\">\r\n\r\n <select id=\"submitRatio\">\r\n <option value=\"\">Aspect Ratio<\/option>\r\n <option>1:1<\/option>\r\n <option>4:5<\/option>\r\n <option>9:16<\/option>\r\n <option>16:9<\/option>\r\n <\/select>\r\n\r\n <input type=\"text\" id=\"submitTags\" placeholder=\"Tags: AI, avatar, webinar, product...\">\r\n\r\n <textarea id=\"submitPromptText\" placeholder=\"Full Detailed Prompt\"><\/textarea>\r\n <textarea id=\"submitNegativePrompt\" placeholder=\"Negative Prompt\"><\/textarea>\r\n\r\n <button class=\"btn btn-primary full-width\" onclick=\"submitUserPrompt()\">Save Prompt to Own Library<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer class=\"footer\">\r\n <p>\u00a9 2026 PromptPix Library | AI Image Prompt Depository | By Vikas Srivastava<\/p>\r\n<\/footer>\r\n\r\n<\/div>\r\n\r\n<div class=\"modal\" id=\"promptModal\">\r\n <div class=\"modal-content\">\r\n <span class=\"close-modal\" onclick=\"closeModal()\">\u00d7<\/span>\r\n <h2 id=\"modalTitle\"><\/h2>\r\n <div class=\"prompt-meta\" id=\"modalMeta\"><\/div>\r\n\r\n <h3>Full Prompt<\/h3>\r\n <div class=\"prompt-text-box\" id=\"modalPrompt\"><\/div>\r\n\r\n <br>\r\n <h3>Negative Prompt<\/h3>\r\n <div class=\"prompt-text-box\" id=\"modalNegative\"><\/div>\r\n\r\n <br>\r\n <button class=\"btn btn-primary\" onclick=\"copyModalPrompt()\">Copy Full Prompt<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"toast\" id=\"toast\">Prompt copied successfully!<\/div>\r\n\r\n<script>\r\nconst categories = [\r\n {icon:\"\ud83e\uddd1\u200d\ud83c\udfa8\", title:\"3D Character\", text:\"3D avatars, mascots, human characters.\"},\r\n {icon:\"\ud83d\ude01\", title:\"Caricature\", text:\"Oversized head funny cartoon portraits.\"},\r\n {icon:\"\ud83d\udcf8\", title:\"Portrait\", text:\"Professional and realistic profile photos.\"},\r\n {icon:\"\ud83d\udce2\", title:\"Facebook Ads\", text:\"Ad creatives, webinar posters, offer images.\"},\r\n {icon:\"\u25b6\ufe0f\", title:\"YouTube Thumbnail\", text:\"Clickable thumbnails and video covers.\"},\r\n {icon:\"\ud83d\udce6\", title:\"Product Mockup\", text:\"Product boxes, packaging and ecommerce visuals.\"},\r\n {icon:\"\u2728\", title:\"Logo Design\", text:\"Minimal logos and brand marks.\"},\r\n {icon:\"\ud83d\uddbc\ufe0f\", title:\"Poster Design\", text:\"Event, webinar and promotional posters.\"},\r\n {icon:\"\ud83c\udfac\", title:\"Cinematic Scene\", text:\"Movie style dramatic scenes.\"},\r\n {icon:\"\ud83e\uddda\", title:\"Fantasy Art\", text:\"Magical, fantasy and dream visuals.\"},\r\n {icon:\"\ud83d\udcbc\", title:\"Business Branding\", text:\"Corporate and personal branding visuals.\"},\r\n {icon:\"\ud83d\udcf1\", title:\"Social Media Post\", text:\"LinkedIn, Instagram and Facebook creatives.\"},\r\n {icon:\"\ud83c\udf89\", title:\"Festival Creative\", text:\"Festival and celebration images.\"},\r\n {icon:\"\ud83c\udf93\", title:\"Educational Image\", text:\"Training, course and learning visuals.\"},\r\n {icon:\"\ud83e\udd16\", title:\"AI Webinar Image\", text:\"AI webinar and productivity creatives.\"},\r\n {icon:\"\ud83d\udc54\", title:\"Professional Profile\", text:\"LinkedIn and career profile photos.\"},\r\n {icon:\"\ud83d\udc2d\", title:\"Cartoon Character\", text:\"Animated characters and mascots.\"},\r\n {icon:\"\ud83c\udf0d\", title:\"Realistic Photography\", text:\"Real camera style photo prompts.\"},\r\n {icon:\"\u26aa\", title:\"Minimalist Design\", text:\"Clean and premium minimal visuals.\"},\r\n {icon:\"\ud83c\udf08\", title:\"Neon Style\", text:\"Dark glow futuristic neon images.\"}\r\n];\r\n\r\nconst styles = [\r\n \"3D Render\",\r\n \"Realistic\",\r\n \"Cartoon\",\r\n \"Cinematic\",\r\n \"Neon Futuristic\",\r\n \"Minimal Luxury\",\r\n \"Anime\",\r\n \"Watercolor\"\r\n];\r\n\r\nconst ratios = [\"1:1\",\"4:5\",\"9:16\",\"16:9\"];\r\n\r\nconst subjects = [\r\n \"confident business professional\",\r\n \"cheerful young creator\",\r\n \"AI robot assistant\",\r\n \"teacher explaining technology\",\r\n \"student learning with laptop\",\r\n \"office employee using AI tools\",\r\n \"digital product box\",\r\n \"modern mobile app screen\",\r\n \"corporate trainer\",\r\n \"startup founder\"\r\n];\r\n\r\nconst moods = [\r\n \"happy and confident\",\r\n \"serious and professional\",\r\n \"energetic and bold\",\r\n \"thoughtful and creative\",\r\n \"inspiring and positive\",\r\n \"focused and productive\",\r\n \"premium and elegant\",\r\n \"futuristic and powerful\"\r\n];\r\n\r\nconst backgrounds = [\r\n \"clean white studio background\",\r\n \"modern office background\",\r\n \"futuristic neon city background\",\r\n \"abstract gradient background\",\r\n \"premium dark luxury background\",\r\n \"classroom background\",\r\n \"digital hologram background\",\r\n \"minimal light background\"\r\n];\r\n\r\nlet allPrompts = [];\r\nlet filteredPrompts = [];\r\nlet visibleCount = 24;\r\nlet activeModalPrompt = \"\";\r\n\r\nfunction create1000Prompts(){\r\n allPrompts = [];\r\n\r\n for(let i = 1; i <= 1000; i++){\r\n const category = categories[(i - 1) % categories.length].title;\r\n const style = styles[(i - 1) % styles.length];\r\n const ratio = ratios[(i - 1) % ratios.length];\r\n const subject = subjects[(i - 1) % subjects.length];\r\n const mood = moods[(i - 1) % moods.length];\r\n const background = backgrounds[(i - 1) % backgrounds.length];\r\n\r\n let title = `${category} Prompt ${i}`;\r\n\r\n const promptText = `Create a highly detailed ${style} image for ${category}.\r\n\r\nMain Subject:\r\nA ${subject} with a ${mood} expression and strong visual personality.\r\n\r\nPhoto \/ Reference Direction:\r\nUse the uploaded reference image or described idea as the main inspiration. Preserve the key face shape, outfit idea, body language, and visual mood from the reference, but improve the quality, lighting, clarity, and composition.\r\n\r\nAppearance:\r\nThe subject should look natural, polished, attractive, and visually clear. Add professional details, sharp face structure, clean styling, expressive eyes, and realistic or stylized finishing based on the selected style.\r\n\r\nOutfit:\r\nUse suitable clothing according to the purpose of the image. For business visuals, use smart formal wear. For creative visuals, use stylish modern clothing. For product or poster visuals, keep the design premium and brand-friendly.\r\n\r\nPose:\r\nUse a natural and engaging pose such as standing confidently, smiling, presenting, thinking, pointing, or interacting with AI tools depending on the image purpose.\r\n\r\nStyle and Rendering:\r\n${style} style, high-quality output, sharp details, smooth textures, clean finishing, premium look, realistic lighting, and professional composition.\r\n\r\nBackground:\r\n${background}. Keep the background clean, attractive, and relevant to ${category}.\r\n\r\nLighting:\r\nUse soft cinematic lighting, smooth shadows, clear highlights, and professional color balance.\r\n\r\nComposition:\r\nWell-balanced layout, clear focus on the subject, enough empty space for text if required, ${ratio} aspect ratio.\r\n\r\nBest Use:\r\nSuitable for ${category}, social media, ads, thumbnails, profile images, branding, webinar creatives, course graphics, and website visuals.`;\r\n\r\n const negativePrompt = `Blurry image, distorted face, extra fingers, bad anatomy, poor lighting, duplicate body parts, watermark, unreadable text, messy background, low quality, overexposed, underexposed, bad hands.`;\r\n\r\n allPrompts.push({\r\n id:i,\r\n title:title,\r\n category:category,\r\n style:style,\r\n ratio:ratio,\r\n best:`${category}, Branding, Social Media`,\r\n short:`Ready-made ${style} prompt for ${category} in ${ratio} format.`,\r\n prompt:promptText,\r\n negative:negativePrompt\r\n });\r\n }\r\n\r\n filteredPrompts = [...allPrompts];\r\n}\r\n\r\nfunction renderCategories(){\r\n const grid = document.getElementById(\"categoryGrid\");\r\n grid.innerHTML = categories.map(cat => `\r\n <div class=\"category-card\" onclick=\"openCategory('${cat.title}')\">\r\n <div class=\"category-icon\">${cat.icon}<\/div>\r\n <h3>${cat.title}<\/h3>\r\n <p>${cat.text}<\/p>\r\n <\/div>\r\n `).join(\"\");\r\n}\r\n\r\nfunction renderCategoryOptions(){\r\n const select = document.getElementById(\"categoryFilter\");\r\n categories.forEach(cat => {\r\n const opt = document.createElement(\"option\");\r\n opt.value = cat.title;\r\n opt.textContent = cat.title;\r\n select.appendChild(opt);\r\n });\r\n}\r\n\r\nfunction renderPrompts(){\r\n const grid = document.getElementById(\"promptGrid\");\r\n const countBox = document.getElementById(\"promptCount\");\r\n\r\n countBox.innerHTML = `Showing ${Math.min(visibleCount, filteredPrompts.length)} of ${filteredPrompts.length} prompts`;\r\n\r\n const data = filteredPrompts.slice(0, visibleCount);\r\n\r\n if(data.length === 0){\r\n grid.innerHTML = `<p style=\"grid-column:1\/-1;text-align:center;\">No prompt found.<\/p>`;\r\n return;\r\n }\r\n\r\n grid.innerHTML = data.map((item) => `\r\n <div class=\"prompt-card\">\r\n <div>\r\n <h3>${item.title}<\/h3>\r\n <p>${item.short}<\/p>\r\n\r\n <div class=\"prompt-meta\">\r\n <span>${item.category}<\/span>\r\n <span>${item.style}<\/span>\r\n <span>${item.ratio}<\/span>\r\n <\/div>\r\n\r\n <p><strong>Best For:<\/strong> ${item.best}<\/p>\r\n <\/div>\r\n\r\n <div class=\"prompt-actions\">\r\n <button class=\"small-btn copy-btn\" onclick=\"copyPrompt(${item.id})\">Copy<\/button>\r\n <button class=\"small-btn detail-btn\" onclick=\"openPromptModal(${item.id})\">Details<\/button>\r\n <button class=\"small-btn remix-btn\" onclick=\"remixPrompt(${item.id})\">Remix<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join(\"\");\r\n}\r\n\r\nfunction filterPrompts(){\r\n const search = document.getElementById(\"searchInput\").value.toLowerCase();\r\n const category = document.getElementById(\"categoryFilter\").value;\r\n const style = document.getElementById(\"styleFilter\").value;\r\n const ratio = document.getElementById(\"ratioFilter\").value;\r\n\r\n filteredPrompts = allPrompts.filter(item => {\r\n const matchSearch =\r\n item.title.toLowerCase().includes(search) ||\r\n item.prompt.toLowerCase().includes(search) ||\r\n item.category.toLowerCase().includes(search);\r\n\r\n const matchCategory = category === \"\" || item.category === category;\r\n const matchStyle = style === \"\" || item.style === style;\r\n const matchRatio = ratio === \"\" || item.ratio === ratio;\r\n\r\n return matchSearch && matchCategory && matchStyle && matchRatio;\r\n });\r\n\r\n visibleCount = 24;\r\n renderPrompts();\r\n}\r\n\r\nfunction openCategory(category){\r\n showSectionById(\"library\");\r\n document.getElementById(\"categoryFilter\").value = category;\r\n filterPrompts();\r\n}\r\n\r\nfunction loadMorePrompts(){\r\n visibleCount += 24;\r\n renderPrompts();\r\n}\r\n\r\nfunction showSection(sectionId, el){\r\n document.querySelectorAll(\".content-section\").forEach(sec => {\r\n sec.classList.remove(\"active-section\");\r\n });\r\n\r\n document.getElementById(sectionId).classList.add(\"active-section\");\r\n\r\n document.querySelectorAll(\".menu-link\").forEach(link => {\r\n link.classList.remove(\"active\");\r\n });\r\n\r\n if(el){\r\n el.classList.add(\"active\");\r\n }\r\n\r\n if(sectionId === \"ownLibrary\"){\r\n renderOwnLibrary();\r\n }\r\n\r\n document.getElementById(\"navMenu\").classList.remove(\"active\");\r\n window.scrollTo({top:0,behavior:\"smooth\"});\r\n}\r\n\r\nfunction showSectionById(sectionId){\r\n document.querySelectorAll(\".content-section\").forEach(sec => {\r\n sec.classList.remove(\"active-section\");\r\n });\r\n\r\n document.getElementById(sectionId).classList.add(\"active-section\");\r\n\r\n document.querySelectorAll(\".menu-link\").forEach(link => {\r\n link.classList.remove(\"active\");\r\n });\r\n\r\n const map = {\r\n home:0,\r\n categories:1,\r\n library:2,\r\n generator:3,\r\n ownLibrary:4,\r\n learn:5,\r\n submit:6\r\n };\r\n\r\n if(typeof map[sectionId] !== \"undefined\"){\r\n document.querySelectorAll(\".menu-link\")[map[sectionId]].classList.add(\"active\");\r\n }\r\n\r\n if(sectionId === \"ownLibrary\"){\r\n renderOwnLibrary();\r\n }\r\n\r\n window.scrollTo({top:0,behavior:\"smooth\"});\r\n}\r\n\r\nfunction toggleMenu(){\r\n document.getElementById(\"navMenu\").classList.toggle(\"active\");\r\n}\r\n\r\nfunction findPromptById(id){\r\n return allPrompts.find(p => p.id === id);\r\n}\r\n\r\nfunction copyPrompt(id){\r\n const item = findPromptById(id);\r\n copyText(item.prompt);\r\n}\r\n\r\nfunction openPromptModal(id){\r\n const item = findPromptById(id);\r\n activeModalPrompt = item.prompt;\r\n\r\n document.getElementById(\"modalTitle\").innerText = item.title;\r\n\r\n document.getElementById(\"modalMeta\").innerHTML = `\r\n <span>${item.category}<\/span>\r\n <span>${item.style}<\/span>\r\n <span>${item.ratio}<\/span>\r\n <span>${item.best}<\/span>\r\n `;\r\n\r\n document.getElementById(\"modalPrompt\").innerText = item.prompt;\r\n document.getElementById(\"modalNegative\").innerText = item.negative;\r\n document.getElementById(\"promptModal\").style.display = \"block\";\r\n}\r\n\r\nfunction closeModal(){\r\n document.getElementById(\"promptModal\").style.display = \"none\";\r\n}\r\n\r\nfunction copyModalPrompt(){\r\n copyText(activeModalPrompt);\r\n}\r\n\r\nfunction remixPrompt(id){\r\n const item = findPromptById(id);\r\n showSectionById(\"generator\");\r\n\r\n document.getElementById(\"photoDescription\").value = item.prompt;\r\n document.getElementById(\"imageType\").value = \"Portrait\";\r\n document.getElementById(\"style\").value = item.style;\r\n generatePrompt();\r\n}\r\n\r\nfunction copyText(text){\r\n navigator.clipboard.writeText(text).then(() => {\r\n showToast(\"Prompt copied successfully!\");\r\n });\r\n}\r\n\r\nfunction showToast(message){\r\n const toast = document.getElementById(\"toast\");\r\n toast.innerText = message;\r\n toast.style.display = \"block\";\r\n\r\n setTimeout(() => {\r\n toast.style.display = \"none\";\r\n }, 2200);\r\n}\r\n\r\nfunction previewReferenceImage(event){\r\n const file = event.target.files[0];\r\n const preview = document.getElementById(\"previewImage\");\r\n\r\n if(file){\r\n const reader = new FileReader();\r\n reader.onload = function(e){\r\n preview.src = e.target.result;\r\n preview.style.display = \"inline-block\";\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n}\r\n\r\nfunction generatePrompt(){\r\n const imageType = document.getElementById(\"imageType\").value;\r\n const subject = document.getElementById(\"subject\").value || \"main subject from the reference image\";\r\n const style = document.getElementById(\"style\").value;\r\n const mood = document.getElementById(\"mood\").value;\r\n const outfit = document.getElementById(\"outfit\").value || \"suitable outfit matching the image purpose\";\r\n const pose = document.getElementById(\"pose\").value;\r\n const background = document.getElementById(\"background\").value;\r\n const lighting = document.getElementById(\"lighting\").value;\r\n const aspectRatio = document.getElementById(\"aspectRatio\").value;\r\n const description = document.getElementById(\"photoDescription\").value || \"Use the uploaded reference image as the main inspiration.\";\r\n\r\n const prompt = `Create a highly detailed ${imageType} image of ${subject}.\r\n\r\nReference Image \/ Photo Description:\r\n${description}\r\n\r\nThe subject should look ${mood}. Preserve the important visual details from the reference image such as face shape, expression, outfit idea, body language, and overall mood.\r\n\r\nOutfit:\r\n${outfit}.\r\n\r\nPose:\r\n${pose}.\r\n\r\nStyle and Rendering:\r\n${style} style with high-quality details, sharp focus, smooth finishing, clean textures, professional composition, and premium visual appeal.\r\n\r\nBackground:\r\n${background}.\r\n\r\nLighting:\r\n${lighting}.\r\n\r\nComposition:\r\nClear subject focus, balanced framing, clean layout, professional camera angle, and ${aspectRatio}.\r\n\r\nNegative Prompt:\r\nBlurry image, distorted face, extra fingers, bad anatomy, bad hands, poor lighting, watermark, unreadable text, messy background, duplicate body parts, low quality.`;\r\n\r\n document.getElementById(\"generatedPromptText\").value = prompt;\r\n document.getElementById(\"generatedOutput\").style.display = \"block\";\r\n}\r\n\r\nfunction copyGeneratedPrompt(){\r\n copyText(document.getElementById(\"generatedPromptText\").value);\r\n}\r\n\r\nfunction getOwnLibrary(){\r\n const data = localStorage.getItem(\"promptpixOwnLibrary\");\r\n return data ? JSON.parse(data) : [];\r\n}\r\n\r\nfunction saveOwnLibrary(data){\r\n localStorage.setItem(\"promptpixOwnLibrary\", JSON.stringify(data));\r\n}\r\n\r\nfunction submitUserPrompt(){\r\n const title = document.getElementById(\"submitTitle\").value.trim();\r\n const category = document.getElementById(\"submitCategory\").value.trim();\r\n const style = document.getElementById(\"submitStyle\").value.trim();\r\n const bestUse = document.getElementById(\"submitBestUse\").value.trim();\r\n const ratio = document.getElementById(\"submitRatio\").value.trim();\r\n const tags = document.getElementById(\"submitTags\").value.trim();\r\n const promptText = document.getElementById(\"submitPromptText\").value.trim();\r\n const negativePrompt = document.getElementById(\"submitNegativePrompt\").value.trim();\r\n\r\n if(title === \"\" || promptText === \"\"){\r\n alert(\"Please enter Prompt Title and Full Detailed Prompt.\");\r\n return;\r\n }\r\n\r\n const ownLibrary = getOwnLibrary();\r\n\r\n const newPrompt = {\r\n ownId: Date.now(),\r\n title: title,\r\n category: category || \"User Prompt\",\r\n style: style || \"Custom Style\",\r\n ratio: ratio || \"Custom Ratio\",\r\n best: bestUse || \"Own Use\",\r\n tags: tags || \"Custom\",\r\n prompt: promptText,\r\n negative: negativePrompt || \"Blurry image, distorted face, extra fingers, bad anatomy, poor lighting, watermark, low quality.\",\r\n createdDate: new Date().toLocaleString()\r\n };\r\n\r\n ownLibrary.unshift(newPrompt);\r\n saveOwnLibrary(ownLibrary);\r\n\r\n document.getElementById(\"submitTitle\").value = \"\";\r\n document.getElementById(\"submitCategory\").value = \"\";\r\n document.getElementById(\"submitStyle\").value = \"\";\r\n document.getElementById(\"submitBestUse\").value = \"\";\r\n document.getElementById(\"submitRatio\").value = \"\";\r\n document.getElementById(\"submitTags\").value = \"\";\r\n document.getElementById(\"submitPromptText\").value = \"\";\r\n document.getElementById(\"submitNegativePrompt\").value = \"\";\r\n\r\n showToast(\"Prompt saved in Own Library!\");\r\n showSectionById(\"ownLibrary\");\r\n}\r\n\r\nfunction saveGeneratedPromptToOwnLibrary(){\r\n const generatedText = document.getElementById(\"generatedPromptText\").value.trim();\r\n\r\n if(generatedText === \"\"){\r\n alert(\"Please generate a prompt first.\");\r\n return;\r\n }\r\n\r\n const ownLibrary = getOwnLibrary();\r\n\r\n const newPrompt = {\r\n ownId: Date.now(),\r\n title: \"Generated Image Prompt\",\r\n category: document.getElementById(\"imageType\").value || \"Generated Prompt\",\r\n style: document.getElementById(\"style\").value || \"Custom Style\",\r\n ratio: document.getElementById(\"aspectRatio\").value || \"Custom Ratio\",\r\n best: \"Generated Prompt, Own Use\",\r\n tags: \"Generated, AI Image, Own Library\",\r\n prompt: generatedText,\r\n negative: \"Blurry image, distorted face, extra fingers, bad anatomy, bad hands, poor lighting, watermark, unreadable text, messy background, duplicate body parts, low quality.\",\r\n createdDate: new Date().toLocaleString()\r\n };\r\n\r\n ownLibrary.unshift(newPrompt);\r\n saveOwnLibrary(ownLibrary);\r\n\r\n showToast(\"Generated prompt saved in Own Library!\");\r\n showSectionById(\"ownLibrary\");\r\n}\r\n\r\nfunction renderOwnLibrary(){\r\n const ownLibrary = getOwnLibrary();\r\n const grid = document.getElementById(\"ownLibraryGrid\");\r\n const countBox = document.getElementById(\"ownLibraryCount\");\r\n const searchValue = document.getElementById(\"ownSearchInput\") ? document.getElementById(\"ownSearchInput\").value.toLowerCase() : \"\";\r\n\r\n const filtered = ownLibrary.filter(item => {\r\n return (\r\n item.title.toLowerCase().includes(searchValue) ||\r\n item.category.toLowerCase().includes(searchValue) ||\r\n item.style.toLowerCase().includes(searchValue) ||\r\n item.prompt.toLowerCase().includes(searchValue) ||\r\n item.tags.toLowerCase().includes(searchValue)\r\n );\r\n });\r\n\r\n countBox.innerHTML = `Saved Prompts: ${filtered.length}`;\r\n\r\n if(filtered.length === 0){\r\n grid.innerHTML = `\r\n <div class=\"empty-library\" style=\"grid-column:1\/-1;\">\r\n <h3>No Saved Prompt Found<\/h3>\r\n <p>You can submit your own prompt or save generated prompts here.<\/p>\r\n <br>\r\n <button class=\"btn btn-primary\" onclick=\"showSectionById('submit')\">Submit Your First Prompt<\/button>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n grid.innerHTML = filtered.map(item => `\r\n <div class=\"prompt-card\">\r\n <div>\r\n <h3>${item.title}<\/h3>\r\n <p>${item.prompt.substring(0,120)}...<\/p>\r\n\r\n <div class=\"prompt-meta\">\r\n <span>${item.category}<\/span>\r\n <span>${item.style}<\/span>\r\n <span>${item.ratio}<\/span>\r\n <\/div>\r\n\r\n <p><strong>Best For:<\/strong> ${item.best}<\/p>\r\n <p><strong>Saved:<\/strong> ${item.createdDate}<\/p>\r\n <\/div>\r\n\r\n <div class=\"prompt-actions\">\r\n <button class=\"small-btn copy-btn\" onclick=\"copyOwnPrompt(${item.ownId})\">Copy<\/button>\r\n <button class=\"small-btn detail-btn\" onclick=\"openOwnPromptModal(${item.ownId})\">Details<\/button>\r\n <button class=\"small-btn delete-btn\" onclick=\"deleteOwnPrompt(${item.ownId})\">Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join(\"\");\r\n}\r\n\r\nfunction findOwnPromptById(ownId){\r\n const ownLibrary = getOwnLibrary();\r\n return ownLibrary.find(item => item.ownId === ownId);\r\n}\r\n\r\nfunction copyOwnPrompt(ownId){\r\n const item = findOwnPromptById(ownId);\r\n copyText(item.prompt);\r\n}\r\n\r\nfunction openOwnPromptModal(ownId){\r\n const item = findOwnPromptById(ownId);\r\n activeModalPrompt = item.prompt;\r\n\r\n document.getElementById(\"modalTitle\").innerText = item.title;\r\n\r\n document.getElementById(\"modalMeta\").innerHTML = `\r\n <span>${item.category}<\/span>\r\n <span>${item.style}<\/span>\r\n <span>${item.ratio}<\/span>\r\n <span>${item.best}<\/span>\r\n `;\r\n\r\n document.getElementById(\"modalPrompt\").innerText = item.prompt;\r\n document.getElementById(\"modalNegative\").innerText = item.negative;\r\n document.getElementById(\"promptModal\").style.display = \"block\";\r\n}\r\n\r\nfunction deleteOwnPrompt(ownId){\r\n if(!confirm(\"Do you want to delete this prompt from Own Library?\")){\r\n return;\r\n }\r\n\r\n let ownLibrary = getOwnLibrary();\r\n ownLibrary = ownLibrary.filter(item => item.ownId !== ownId);\r\n saveOwnLibrary(ownLibrary);\r\n\r\n showToast(\"Prompt deleted from Own Library.\");\r\n renderOwnLibrary();\r\n}\r\n\r\nfunction clearOwnLibrary(){\r\n if(!confirm(\"Do you want to delete all prompts from Own Library?\")){\r\n return;\r\n }\r\n\r\n localStorage.removeItem(\"promptpixOwnLibrary\");\r\n showToast(\"Own Library cleared.\");\r\n renderOwnLibrary();\r\n}\r\n\r\nwindow.onclick = function(event){\r\n const modal = document.getElementById(\"promptModal\");\r\n if(event.target === modal){\r\n closeModal();\r\n }\r\n};\r\n\r\ncreate1000Prompts();\r\nrenderCategories();\r\nrenderCategoryOptions();\r\nrenderPrompts();\r\nrenderOwnLibrary();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PromptPix Library PromptPix Library Home Categories Prompt Library Prompt Generator Own Library Learn Prompting Submit Prompt \u2630 Menu AI Image […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-230","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":22,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/230\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/230\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/media?parent=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}