diff --git a/_layouts/default.html b/_layouts/default.html
index 25c76c2..6ff84d7 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -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;
+ }
+ }
{% include head-custom.html %}
@@ -1462,13 +1829,6 @@
+
+
+
{{ content }}
@@ -1580,6 +1976,31 @@
+
diff --git a/script.js b/script.js
index 34eeb3e..19ceb98 100644
--- a/script.js
+++ b/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 = `