init
This commit is contained in:
f
parent
e5726360a8
commit
778737f28a
|
|
@ -371,7 +371,13 @@
|
|||
}
|
||||
|
||||
.star-count {
|
||||
display: none;
|
||||
display: flex;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.star-count svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -516,6 +522,177 @@
|
|||
height: calc(100vh - 140px);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-content-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--bg-color-light);
|
||||
padding: 8px 35px;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
z-index: 10;
|
||||
margin: -20px -20px 20px -20px;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header {
|
||||
background-color: var(--bg-color-dark);
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.main-content-header .header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.main-content-header .header-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-light);
|
||||
opacity: 0.8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header .header-description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.main-content-header .platform-selectors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--text-color-light);
|
||||
opacity: 0.9;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header .platform-selectors {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-color-light);
|
||||
min-width: 120px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header .dev-mode-toggle {
|
||||
background-color: var(--bg-color-dark);
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-toggle:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-color-light);
|
||||
white-space: nowrap;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header .dev-mode-label {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.main-content-header .switch {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content-header {
|
||||
padding: 12px;
|
||||
margin: -16px -16px 16px -16px;
|
||||
}
|
||||
|
||||
.main-content-header .header-content {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.main-content-header .header-description {
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.main-content-header .platform-selectors {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.main-content-header .custom-select,
|
||||
.main-content-header .custom-input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.main-content-header .custom-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Show custom inputs on new line when visible */
|
||||
.main-content-header .custom-input:not([style*="display: none"]) {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-header .custom-select {
|
||||
padding: 2px 24px 2px 4px;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
background-position: right 4px center;
|
||||
background-size: 12px;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.main-content-header .custom-select:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.main-content-header .custom-input {
|
||||
padding: 2px 4px;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
border-bottom: 1px dashed var(--accent-color);
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
min-width: 100px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content-header .custom-input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.prompts-grid {
|
||||
|
|
@ -1091,14 +1268,20 @@
|
|||
.dev-mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-color-light);
|
||||
min-width: 120px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dev-mode-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--accent-color);
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
color: var(--text-color-light);
|
||||
white-space: nowrap;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.switch {
|
||||
|
|
@ -1172,19 +1355,55 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dev-mode-label {
|
||||
color: var(--text-color-light);
|
||||
margin-left: 8px;
|
||||
font-size: 0.9rem;
|
||||
.main-content-header .dev-mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-color-light);
|
||||
min-width: 160px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dark-mode .dev-mode-label {
|
||||
.dark-mode .main-content-header .dev-mode-toggle {
|
||||
background-color: var(--bg-color-dark);
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-toggle:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-color-light);
|
||||
white-space: nowrap;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.dark-mode .main-content-header .dev-mode-label {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.main-content-header .switch {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dev-mode-label {
|
||||
display: none;
|
||||
.main-content-header .dev-mode-toggle {
|
||||
width: 100%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.main-content-header .dev-mode-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.main-content-header .platform-selectors {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1420,6 +1639,154 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.platform-selectors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-color-light);
|
||||
color: var(--text-color-light);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 120px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.dark-mode .custom-select {
|
||||
background-color: var(--bg-color-dark);
|
||||
color: var(--text-color-dark);
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.custom-select:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.custom-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bg-color-light);
|
||||
color: var(--text-color-light);
|
||||
transition: all 0.2s ease;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.dark-mode .custom-input {
|
||||
background-color: var(--bg-color-dark);
|
||||
color: var(--text-color-dark);
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.custom-input:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.custom-input::placeholder {
|
||||
color: #6a737d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dark-mode .custom-input::placeholder {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.platform-selectors {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-select,
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-header .custom-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.main-content-header .custom-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content-header {
|
||||
padding: 12px;
|
||||
margin: -16px -16px 16px -16px;
|
||||
}
|
||||
|
||||
.main-content-header .header-content {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.main-content-header .header-description {
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.main-content-header .platform-selectors {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.main-content-header .custom-select,
|
||||
.main-content-header .custom-input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.main-content-header .custom-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Show custom inputs on new line when visible */
|
||||
.main-content-header .custom-input:not([style*="display: none"]) {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% include head-custom.html %}
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6945602608405209" crossorigin="anonymous"></script>
|
||||
|
|
@ -1462,13 +1829,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="dev-mode-toggle">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="devModeToggle">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<span class="dev-mode-label">Dev Prompts</span>
|
||||
</div>
|
||||
<a href="https://github.com/f/awesome-chatgpt-prompts/stargazers" target="_blank" class="star-count">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||||
|
|
@ -1504,6 +1864,42 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="main-content-header">
|
||||
<div class="header-content">
|
||||
<div class="platform-selectors">
|
||||
Reply in <select id="languageSelect" class="custom-select">
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="tr">Turkish</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
<input type="text" id="customLanguage" class="custom-input" placeholder="language..." style="display: none;">
|
||||
using <select id="toneSelect" class="custom-select">
|
||||
<option value="developer">developer</option>
|
||||
<option value="professional">professional</option>
|
||||
<option value="casual">casual</option>
|
||||
<option value="friendly">friendly</option>
|
||||
<option value="formal">formal</option>
|
||||
<option value="technical">technical</option>
|
||||
<option value="creative">creative</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
<input type="text" id="customTone" class="custom-input" placeholder="tone..." style="display: none;">
|
||||
tone, for <select id="audienceSelect" class="custom-select">
|
||||
<option value="everyone">everyone</option>
|
||||
<option value="developers">developers</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-lg markdown-body">
|
||||
{{ content }}
|
||||
|
||||
|
|
@ -1580,6 +1976,31 @@
|
|||
</footer>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script>
|
||||
// Initialize audience selector
|
||||
const audienceSelect = document.getElementById('audienceSelect');
|
||||
|
||||
// Set initial state based on URL params or default
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialAudience = urlParams.get('audience') || 'everyone';
|
||||
audienceSelect.value = initialAudience;
|
||||
document.body.classList.toggle('dev-mode', initialAudience === 'developers');
|
||||
|
||||
// Handle audience changes
|
||||
audienceSelect.addEventListener('change', (e) => {
|
||||
const isDevMode = e.target.value === 'developers';
|
||||
document.body.classList.toggle('dev-mode', isDevMode);
|
||||
|
||||
// Update URL params
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
params.set('audience', e.target.value);
|
||||
const newUrl = `${window.location.pathname}?${params.toString()}`;
|
||||
window.history.pushState({}, '', newUrl);
|
||||
|
||||
// Trigger prompt filtering
|
||||
filterPrompts();
|
||||
});
|
||||
</script>
|
||||
<style>video { max-width: 100% !important; }</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
|
||||
|
|
|
|||
154
script.js
154
script.js
|
|
@ -104,39 +104,34 @@ function updatePromptPreview(promptText, form) {
|
|||
|
||||
// Initialize everything after DOM loads
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Initialize dev mode
|
||||
const devModeToggle = document.getElementById("devModeToggle");
|
||||
const initialDevMode = localStorage.getItem("dev-mode") === "true";
|
||||
devModeToggle.checked = initialDevMode;
|
||||
|
||||
// Initialize chat button icons
|
||||
updateChatButtonIcons(initialDevMode);
|
||||
|
||||
// Handle dev mode toggle
|
||||
devModeToggle.addEventListener("change", (e) => {
|
||||
const newDevMode = e.target.checked;
|
||||
localStorage.setItem("dev-mode", newDevMode);
|
||||
// Toggle dev-mode class on body element
|
||||
document.body.classList.toggle("dev-mode", newDevMode);
|
||||
// Initialize audience selector and dev mode
|
||||
const audienceSelect = document.getElementById('audienceSelect');
|
||||
const initialAudience = localStorage.getItem('audience') || 'everyone';
|
||||
audienceSelect.value = initialAudience;
|
||||
document.body.classList.toggle('dev-mode', initialAudience === 'developers');
|
||||
|
||||
// Handle audience changes
|
||||
audienceSelect.addEventListener('change', (e) => {
|
||||
const isDevMode = e.target.value === 'developers';
|
||||
document.body.classList.toggle('dev-mode', isDevMode);
|
||||
localStorage.setItem('audience', e.target.value);
|
||||
|
||||
// Update chat button icons
|
||||
updateChatButtonIcons(newDevMode);
|
||||
updateChatButtonIcons(isDevMode);
|
||||
|
||||
// Check if we should show Copilot suggestion
|
||||
if (newDevMode) {
|
||||
if (isDevMode) {
|
||||
const currentPlatform = document.querySelector(".platform-tag.active");
|
||||
const shouldNotShow =
|
||||
localStorage.getItem("copilot-suggestion-hidden") === "true";
|
||||
const shouldNotShow = localStorage.getItem("copilot-suggestion-hidden") === "true";
|
||||
|
||||
if (
|
||||
currentPlatform &&
|
||||
currentPlatform.dataset.platform !== "github-copilot" &&
|
||||
!shouldNotShow
|
||||
) {
|
||||
if (currentPlatform &&
|
||||
currentPlatform.dataset.platform !== "github-copilot" &&
|
||||
!shouldNotShow) {
|
||||
showCopilotSuggestion();
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger prompt filtering
|
||||
filterPrompts();
|
||||
});
|
||||
|
||||
|
|
@ -179,10 +174,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
// Initialize search functionality
|
||||
initializeSearch();
|
||||
|
||||
// Initialize chat button icons on page load
|
||||
const isDevMode = localStorage.getItem("dev-mode") === "true";
|
||||
document.body.classList.toggle("dev-mode", isDevMode);
|
||||
updateChatButtonIcons(isDevMode);
|
||||
// Initialize language and tone selectors
|
||||
initializeLanguageAndTone();
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
|
|
@ -198,7 +191,7 @@ async function initializeSearch() {
|
|||
const searchInput = document.getElementById("searchInput");
|
||||
const searchResults = document.getElementById("searchResults");
|
||||
const promptCount = document.getElementById("promptCount");
|
||||
const isDevMode = document.getElementById("devModeToggle").checked;
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
|
||||
// Update prompt count
|
||||
const totalPrompts = isDevMode
|
||||
|
|
@ -214,6 +207,7 @@ async function initializeSearch() {
|
|||
|
||||
searchInput.addEventListener("input", (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
|
||||
const filteredPrompts = prompts.filter((prompt) => {
|
||||
const matchesSearch =
|
||||
|
|
@ -286,7 +280,7 @@ function parseCSV(csv) {
|
|||
function displaySearchResults(results) {
|
||||
const searchResults = document.getElementById("searchResults");
|
||||
const searchInput = document.getElementById("searchInput");
|
||||
const isDevMode = document.getElementById("devModeToggle").checked;
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
|
||||
// Filter results based on dev mode
|
||||
if (isDevMode) {
|
||||
|
|
@ -401,7 +395,7 @@ function displaySearchResults(results) {
|
|||
|
||||
// Function to filter prompts based on dev mode
|
||||
function filterPrompts() {
|
||||
const isDevMode = document.getElementById("devModeToggle").checked;
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
const searchInput = document.getElementById("searchInput");
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
|
||||
|
|
@ -496,7 +490,7 @@ function createPromptCards() {
|
|||
.then((response) => response.text())
|
||||
.then((csvText) => {
|
||||
const prompts = parseCSV(csvText);
|
||||
const isDevMode = document.getElementById("devModeToggle").checked;
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
|
||||
const promptElements = document.querySelectorAll(
|
||||
"h2[id^=act] + p + blockquote"
|
||||
|
|
@ -757,7 +751,7 @@ function showModal(title, content) {
|
|||
|
||||
// Update chat button text with platform name and handle visibility
|
||||
const platform = document.querySelector(".platform-tag.active");
|
||||
const isDevMode = document.getElementById("devModeToggle").checked;
|
||||
const isDevMode = document.getElementById("audienceSelect").value === "developers";
|
||||
|
||||
if (platform) {
|
||||
const shouldHideChat = ["gemini", "llama"].includes(
|
||||
|
|
@ -811,7 +805,7 @@ function showModal(title, content) {
|
|||
// Add copy functionality
|
||||
modalCopyButton.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(modalContent.textContent);
|
||||
copyPrompt(modalCopyButton, modalContent.textContent);
|
||||
modalCopyButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
|
|
@ -883,7 +877,7 @@ document.querySelectorAll(".chat-button, .modal-chat-button").forEach((btn) => {
|
|||
|
||||
// Function to open prompt in selected AI chat platform
|
||||
function openInChat(button, encodedPrompt) {
|
||||
const promptText = decodeURIComponent(encodedPrompt);
|
||||
const promptText = buildPrompt(encodedPrompt);
|
||||
const platform = document.querySelector(".platform-tag.active");
|
||||
|
||||
if (!platform) return;
|
||||
|
|
@ -914,8 +908,7 @@ function openInChat(button, encodedPrompt) {
|
|||
window.open(url, "_blank");
|
||||
}
|
||||
|
||||
// Existing copy function
|
||||
async function copyPrompt(button, encodedPrompt) {
|
||||
function buildPrompt(encodedPrompt) {
|
||||
let promptText = decodeURIComponent(encodedPrompt);
|
||||
|
||||
// If there's a modal open, use the current state of variables
|
||||
|
|
@ -938,8 +931,31 @@ async function copyPrompt(button, encodedPrompt) {
|
|||
}
|
||||
}
|
||||
|
||||
// Clean up newlines and normalize whitespace
|
||||
promptText = promptText.replace(/\s+/g, ' ').trim();
|
||||
|
||||
// Get language, tone and audience preferences
|
||||
const languageSelect = document.getElementById('languageSelect');
|
||||
const customLanguage = document.getElementById('customLanguage');
|
||||
const toneSelect = document.getElementById('toneSelect');
|
||||
const customTone = document.getElementById('customTone');
|
||||
const audienceSelect = document.getElementById('audienceSelect');
|
||||
|
||||
const language = languageSelect.value === 'custom' ? customLanguage.value : languageSelect.value;
|
||||
const tone = toneSelect.value === 'custom' ? customTone.value : toneSelect.value;
|
||||
const audience = audienceSelect.value;
|
||||
|
||||
// Append preferences as a new line
|
||||
promptText += `\n\nReply in ${language} using ${tone} tone for ${audience}`;
|
||||
|
||||
return promptText;
|
||||
}
|
||||
|
||||
// Existing copy function
|
||||
async function copyPrompt(button, encodedPrompt) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(updatePromptPreview(promptText));
|
||||
const promptText = buildPrompt(encodedPrompt);
|
||||
await navigator.clipboard.writeText(promptText);
|
||||
const originalHTML = button.innerHTML;
|
||||
button.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -1019,3 +1035,67 @@ function updateChatButtonIcons(isDevMode) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Language and Tone Selection
|
||||
function initializeLanguageAndTone() {
|
||||
const languageSelect = document.getElementById('languageSelect');
|
||||
const customLanguage = document.getElementById('customLanguage');
|
||||
const toneSelect = document.getElementById('toneSelect');
|
||||
const customTone = document.getElementById('customTone');
|
||||
|
||||
// Load saved preferences
|
||||
const savedLanguage = localStorage.getItem('selected-language');
|
||||
const savedCustomLanguage = localStorage.getItem('custom-language');
|
||||
const savedTone = localStorage.getItem('selected-tone');
|
||||
const savedCustomTone = localStorage.getItem('custom-tone');
|
||||
|
||||
if (savedLanguage) {
|
||||
languageSelect.value = savedLanguage;
|
||||
if (savedLanguage === 'custom' && savedCustomLanguage) {
|
||||
customLanguage.value = savedCustomLanguage;
|
||||
customLanguage.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
if (savedTone) {
|
||||
toneSelect.value = savedTone;
|
||||
if (savedTone === 'custom' && savedCustomTone) {
|
||||
customTone.value = savedCustomTone;
|
||||
customTone.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
// Language select handler
|
||||
languageSelect.addEventListener('change', (e) => {
|
||||
const isCustom = e.target.value === 'custom';
|
||||
customLanguage.style.display = isCustom ? 'inline-block' : 'none';
|
||||
localStorage.setItem('selected-language', e.target.value);
|
||||
|
||||
if (!isCustom) {
|
||||
customLanguage.value = '';
|
||||
localStorage.removeItem('custom-language');
|
||||
}
|
||||
});
|
||||
|
||||
// Custom language input handler
|
||||
customLanguage.addEventListener('input', (e) => {
|
||||
localStorage.setItem('custom-language', e.target.value);
|
||||
});
|
||||
|
||||
// Tone select handler
|
||||
toneSelect.addEventListener('change', (e) => {
|
||||
const isCustom = e.target.value === 'custom';
|
||||
customTone.style.display = isCustom ? 'inline-block' : 'none';
|
||||
localStorage.setItem('selected-tone', e.target.value);
|
||||
|
||||
if (!isCustom) {
|
||||
customTone.value = '';
|
||||
localStorage.removeItem('custom-tone');
|
||||
}
|
||||
});
|
||||
|
||||
// Custom tone input handler
|
||||
customTone.addEventListener('input', (e) => {
|
||||
localStorage.setItem('custom-tone', e.target.value);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue