mirror of
https://github.com/shadoll/sLogos.git
synced 2026-08-28 19:43:17 +00:00
Refactor Home and Preview pages for improved data handling and UI components
- Updated Home.svelte to streamline app data initialization and reactivity. - Removed unnecessary intervals and checks for app data updates. - Enhanced data binding for logos, view modes, and themes. - Simplified the structure of the Header and Footer components. - Introduced CardList and CardSquare components for better logo display. - Improved routing with a NotFound page for unmatched routes. - Added a RouteHeader component for search functionality and theme switching. - Enhanced styling for better user experience across components.
This commit is contained in:
+146
-165
@@ -1,189 +1,170 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Grid from "../components/Grid.svelte";
|
||||
import List from "../components/List.svelte";
|
||||
import Header from "../components/Header.svelte";
|
||||
import Footer from "../components/Footer.svelte";
|
||||
import { onMount } from 'svelte';
|
||||
import Header from '../components/Header.svelte';
|
||||
import List from '../components/List.svelte';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
|
||||
let appData = {};
|
||||
let initialized = false;
|
||||
let logos = [];
|
||||
let allLogos = [];
|
||||
let viewMode = "grid";
|
||||
let theme = "system";
|
||||
let searchQuery = "";
|
||||
let compactMode = false;
|
||||
let tagDropdownOpen = false;
|
||||
let selectedTags = [];
|
||||
let allTags = [];
|
||||
let setTheme = () => {};
|
||||
|
||||
function getAppData() {
|
||||
if (typeof window !== "undefined" && window.appData) {
|
||||
console.log("Home: Using app data with",
|
||||
window.appData.logos ? window.appData.logos.length : 0, "logos",
|
||||
"displayLogos:", window.appData.displayLogos ? window.appData.displayLogos.length : 0);
|
||||
onMount(() => {
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
logos = window.appData.displayLogos || [];
|
||||
allLogos = window.appData.logos || [];
|
||||
viewMode = window.appData.viewMode || "grid";
|
||||
theme = window.appData.theme || "system";
|
||||
searchQuery = window.appData.searchQuery || "";
|
||||
compactMode = window.appData.compactMode || false;
|
||||
tagDropdownOpen = window.appData.tagDropdownOpen || false;
|
||||
selectedTags = window.appData.selectedTags || [];
|
||||
allTags = window.appData.allTags || [];
|
||||
|
||||
// Create a fresh copy to trigger reactivity
|
||||
appData = {
|
||||
...window.appData,
|
||||
logos: [...(window.appData.logos || [])],
|
||||
displayLogos: [...(window.appData.displayLogos || [])],
|
||||
filteredLogos: [...(window.appData.filteredLogos || [])]
|
||||
};
|
||||
if (window.appData.setTheme && typeof window.appData.setTheme === 'function') {
|
||||
console.log("Home: Found window.appData.setTheme function");
|
||||
setTheme = window.appData.setTheme;
|
||||
} else {
|
||||
console.warn("Home: window.appData.setTheme not found or not a function");
|
||||
}
|
||||
|
||||
initialized = true;
|
||||
} else {
|
||||
console.log("Home: window.appData not available yet");
|
||||
// Set up reactivity with window.appData
|
||||
const interval = setInterval(() => {
|
||||
if (window.appData) {
|
||||
logos = window.appData.displayLogos || logos;
|
||||
allLogos = window.appData.logos || allLogos;
|
||||
viewMode = window.appData.viewMode || viewMode;
|
||||
theme = window.appData.theme || theme;
|
||||
searchQuery = window.appData.searchQuery || searchQuery;
|
||||
compactMode = window.appData.compactMode || compactMode;
|
||||
|
||||
if (typeof window.appData.tagDropdownOpen === 'boolean') {
|
||||
tagDropdownOpen = window.appData.tagDropdownOpen;
|
||||
}
|
||||
|
||||
if (window.appData.selectedTags) {
|
||||
selectedTags = [...window.appData.selectedTags];
|
||||
}
|
||||
|
||||
if (window.appData.allTags) {
|
||||
allTags = [...window.appData.allTags];
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
});
|
||||
|
||||
function setSearchQuery(query) {
|
||||
searchQuery = query;
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.setSearchQuery) {
|
||||
window.appData.setSearchQuery(query);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
getAppData();
|
||||
|
||||
if (!initialized) {
|
||||
console.log("Home: Setting up retry interval for logos data");
|
||||
const interval = setInterval(() => {
|
||||
if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
|
||||
console.log("Home: Data now available:",
|
||||
window.appData.logos.length, "logos");
|
||||
getAppData();
|
||||
initialized = true;
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
console.log("Home: Waiting for logo data, current status:",
|
||||
window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
|
||||
}
|
||||
}, 200); // Increased interval for better logging
|
||||
function onCopy(path) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.onCopy) {
|
||||
window.appData.onCopy(path);
|
||||
}
|
||||
}
|
||||
|
||||
let logoCheckInterval;
|
||||
let lastViewMode = '';
|
||||
let lastCompactMode = false;
|
||||
let lastSearchQuery = '';
|
||||
let lastSelectedTags = [];
|
||||
let lastTagDropdownOpen = false;
|
||||
let lastDisplayLogosCount = 0;
|
||||
|
||||
// Set up the interval for watching changes
|
||||
logoCheckInterval = setInterval(() => {
|
||||
if (window.appData) {
|
||||
// Check for logo updates
|
||||
if (window.appData.logos &&
|
||||
window.appData.logos.length > 0 &&
|
||||
(!appData.logos || appData.logos.length === 0)) {
|
||||
console.log("Home: Detected logos update in window.appData:", window.appData.logos.length);
|
||||
getAppData();
|
||||
initialized = true;
|
||||
}
|
||||
|
||||
// Check for view mode changes
|
||||
if (window.appData.viewMode !== lastViewMode) {
|
||||
console.log("Home: Detected viewMode change:",
|
||||
lastViewMode, "→", window.appData.viewMode);
|
||||
lastViewMode = window.appData.viewMode;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for compact mode changes
|
||||
if (window.appData.compactMode !== lastCompactMode) {
|
||||
console.log("Home: Detected compactMode change:",
|
||||
lastCompactMode, "→", window.appData.compactMode);
|
||||
lastCompactMode = window.appData.compactMode;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for search query changes
|
||||
if (window.appData.searchQuery !== lastSearchQuery) {
|
||||
console.log("Home: Detected searchQuery change:",
|
||||
lastSearchQuery, "→", window.appData.searchQuery);
|
||||
lastSearchQuery = window.appData.searchQuery;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for display logos count changes
|
||||
if (window.appData.displayLogos &&
|
||||
window.appData.displayLogos.length !== lastDisplayLogosCount) {
|
||||
console.log("Home: Detected displayLogos count change:",
|
||||
lastDisplayLogosCount, "→", window.appData.displayLogos.length);
|
||||
lastDisplayLogosCount = window.appData.displayLogos.length;
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for tag selection changes
|
||||
const currentSelectedTags = window.appData.selectedTags || [];
|
||||
if (JSON.stringify(currentSelectedTags) !== JSON.stringify(lastSelectedTags)) {
|
||||
console.log("Home: Detected selectedTags change, now:",
|
||||
currentSelectedTags.length, "tags");
|
||||
lastSelectedTags = [...currentSelectedTags];
|
||||
getAppData();
|
||||
}
|
||||
|
||||
// Check for tag dropdown state changes
|
||||
if (window.appData.tagDropdownOpen !== lastTagDropdownOpen) {
|
||||
console.log("Home: Detected tagDropdownOpen change:",
|
||||
lastTagDropdownOpen, "→", window.appData.tagDropdownOpen);
|
||||
lastTagDropdownOpen = window.appData.tagDropdownOpen;
|
||||
getAppData();
|
||||
}
|
||||
function onDownload(path, name) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.onDownload) {
|
||||
window.appData.onDownload(path, name);
|
||||
}
|
||||
}, 100); // Faster interval for UI responsiveness
|
||||
}
|
||||
|
||||
return () => clearInterval(logoCheckInterval);
|
||||
});
|
||||
function setGridView() {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.setGridView) {
|
||||
window.appData.setGridView();
|
||||
}
|
||||
}
|
||||
|
||||
function setListView() {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.setListView) {
|
||||
window.appData.setListView();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDropdown() {
|
||||
tagDropdownOpen = !tagDropdownOpen;
|
||||
console.log("Home: Toggle dropdown to:", tagDropdownOpen);
|
||||
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.toggleDropdown) {
|
||||
window.appData.toggleDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
function addTag(tag) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.addTag) {
|
||||
window.appData.addTag(tag);
|
||||
}
|
||||
}
|
||||
|
||||
function removeTag(tag) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.removeTag) {
|
||||
window.appData.removeTag(tag);
|
||||
}
|
||||
}
|
||||
|
||||
function setCompactMode(value) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.setCompactMode) {
|
||||
window.appData.setCompactMode(value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if initialized}
|
||||
<div class="container">
|
||||
<Header
|
||||
logos={appData.logos || []}
|
||||
displayLogos={appData.displayLogos || []}
|
||||
theme={appData.theme || "light"}
|
||||
setTheme={appData.setTheme || ((t) => {})}
|
||||
viewMode={appData.viewMode || "grid"}
|
||||
setGridView={appData.setGridView || (() => {})}
|
||||
setListView={appData.setListView || (() => {})}
|
||||
searchQuery={appData.searchQuery || ""}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
allTags={appData.allTags || []}
|
||||
selectedTags={appData.selectedTags || []}
|
||||
tagDropdownOpen={appData.tagDropdownOpen || false}
|
||||
toggleDropdown={appData.toggleDropdown || (() => {})}
|
||||
addTag={appData.addTag || (() => {})}
|
||||
removeTag={appData.removeTag || (() => {})}
|
||||
getTagObj={appData.getTagObj || ((t) => ({text: t}))}
|
||||
compactMode={appData.compactMode || false}
|
||||
setCompactMode={appData.setCompactMode || ((val) => {})}
|
||||
{searchQuery}
|
||||
{setSearchQuery}
|
||||
{viewMode}
|
||||
{theme}
|
||||
{setTheme}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
logos={allLogos}
|
||||
displayLogos={logos}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
allTags={allTags}
|
||||
selectedTags={selectedTags}
|
||||
tagDropdownOpen={tagDropdownOpen}
|
||||
{compactMode}
|
||||
{setCompactMode}
|
||||
getTagObj={(tag) => (window.appData?.getTagObj ? window.appData.getTagObj(tag) : {text: tag})}
|
||||
/>
|
||||
|
||||
<main class="logos-container">
|
||||
{#if appData.viewMode === "grid"}
|
||||
<Grid
|
||||
logos={appData.displayLogos || []}
|
||||
allLogos={appData.logos || []}
|
||||
onCopy={appData.onCopy || ((p) => {})}
|
||||
onDownload={appData.onDownload || ((p, n) => {})}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
theme={appData.effectiveTheme || "light"}
|
||||
/>
|
||||
{:else}
|
||||
<List
|
||||
logos={appData.displayLogos || []}
|
||||
allLogos={appData.logos || []}
|
||||
onCopy={appData.onCopy || ((p) => {})}
|
||||
onDownload={appData.onDownload || ((p, n) => {})}
|
||||
setSearchQuery={appData.setSearchQuery || ((q) => {})}
|
||||
/>
|
||||
{/if}
|
||||
<main>
|
||||
<List
|
||||
logos={logos}
|
||||
{theme}
|
||||
{viewMode}
|
||||
{onCopy}
|
||||
{onDownload}
|
||||
{setSearchQuery}
|
||||
{allLogos}
|
||||
{setTheme}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
{:else}
|
||||
<div class="loading">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logos-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
main {
|
||||
padding: 0 1rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
import { push } from 'svelte-spa-router';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<div class="not-found">
|
||||
<h1>404: Page Not Found</h1>
|
||||
<p>The page you're looking for doesn't exist.</p>
|
||||
<button on:click={() => push('/')}>Return to Home</button>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.not-found {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
</style>
|
||||
+77
-162
@@ -1,201 +1,116 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push, pop } from 'svelte-spa-router';
|
||||
import PreviewComponent from '../components/Preview.svelte';
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { push } from 'svelte-spa-router';
|
||||
|
||||
// Get preview ID from URL parameter
|
||||
// Get logo name from URL parameter
|
||||
export let params = {};
|
||||
|
||||
let logo = null;
|
||||
let theme = 'light'; // Default theme
|
||||
let allLogos = [];
|
||||
let showPreview = false;
|
||||
let theme = "system";
|
||||
let logos = [];
|
||||
let setTheme = () => {}; // Default no-op function
|
||||
|
||||
// Download handler
|
||||
function onDownload(path, name) {
|
||||
const a = document.createElement('a');
|
||||
a.href = path;
|
||||
a.download = name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
onMount(() => {
|
||||
if (typeof window !== 'undefined' && window.appData) {
|
||||
logos = window.appData.logos || [];
|
||||
theme = window.appData.theme || "system";
|
||||
|
||||
// Go back to previous page
|
||||
function goBack() {
|
||||
pop();
|
||||
}
|
||||
|
||||
// Set theme based on user preference or system
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
|
||||
theme = savedTheme;
|
||||
} else {
|
||||
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark-theme');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark-theme');
|
||||
}
|
||||
}
|
||||
|
||||
// Find logo by ID in URL
|
||||
function findLogoByUrlId(id) {
|
||||
if (!id || !allLogos.length) return null;
|
||||
|
||||
const decodedId = decodeURIComponent(id);
|
||||
console.log("Preview page: Looking for logo with ID:", decodedId);
|
||||
|
||||
// Try to match by name
|
||||
const foundLogo = allLogos.find(logo => {
|
||||
const urlFriendlyName = logo.name.replace(/\s+/g, '-').toLowerCase();
|
||||
return urlFriendlyName === decodedId;
|
||||
});
|
||||
|
||||
console.log("Preview page: Found logo:", foundLogo ? foundLogo.name : "none");
|
||||
return foundLogo;
|
||||
}
|
||||
|
||||
// Handle close event from Preview component - navigate back to home
|
||||
function handleClose() {
|
||||
push('/');
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
console.log("Preview page: onMount with params:", params);
|
||||
// Initialize theme
|
||||
initTheme();
|
||||
|
||||
// Ensure page starts at the top
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
// First try to get logos from window.appData if available
|
||||
if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
|
||||
console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
|
||||
allLogos = window.appData.logos;
|
||||
} else {
|
||||
// Fetch logos data directly if not available in window.appData
|
||||
try {
|
||||
console.log("Preview page: Fetching logos data directly");
|
||||
const timestamp = new Date().getTime(); // Cache busting
|
||||
const response = await fetch(`/data/logos.json?t=${timestamp}`, {
|
||||
cache: "no-cache",
|
||||
headers: {
|
||||
"Cache-Control": "no-cache",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to fetch logos data');
|
||||
|
||||
allLogos = await response.json();
|
||||
console.log("Preview page: Loaded", allLogos.length, "logos directly");
|
||||
} catch (error) {
|
||||
console.error('Preview page: Error loading logos:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Find the logo to display based on URL
|
||||
if (params.id && allLogos.length > 0) {
|
||||
logo = findLogoByUrlId(params.id);
|
||||
|
||||
// Set document title
|
||||
if (logo) {
|
||||
document.title = `${logo.name} - Logo Gallery`;
|
||||
showPreview = true;
|
||||
console.log("Preview page: Set up logo for display:", logo.name);
|
||||
// Check if setTheme exists in window.appData
|
||||
if (window.appData.setTheme && typeof window.appData.setTheme === 'function') {
|
||||
console.log("PreviewPage: Found window.appData.setTheme function");
|
||||
setTheme = window.appData.setTheme;
|
||||
} else {
|
||||
console.error("Preview page: Logo not found for ID:", params.id);
|
||||
console.warn("PreviewPage: window.appData.setTheme not found or not a function");
|
||||
}
|
||||
|
||||
// Find the logo based on the URL parameter
|
||||
const logoName = params.logoName.replace(/-/g, ' ');
|
||||
logo = logos.find(l =>
|
||||
l.name.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase() ||
|
||||
l.name.toLowerCase() === logoName.toLowerCase()
|
||||
);
|
||||
|
||||
if (!logo) {
|
||||
console.error("Logo not found:", params.logoName);
|
||||
push('/', { replace: true });
|
||||
}
|
||||
} else {
|
||||
console.log("Preview page: No params.id or no logos loaded:",
|
||||
params.id, allLogos.length);
|
||||
}
|
||||
|
||||
if (!logo && params.id) {
|
||||
console.error("Preview page: Logo not found: " + params.id);
|
||||
// Redirect to home if logo not found
|
||||
push('/');
|
||||
}
|
||||
// Back button event listener
|
||||
const handlePopState = () => {
|
||||
const hash = window.location.hash;
|
||||
if (!hash.includes('/preview/')) {
|
||||
push('/', { replace: true });
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
return () => {
|
||||
window.removeEventListener('popstate', handlePopState);
|
||||
};
|
||||
});
|
||||
|
||||
function onDownload(path, name) {
|
||||
if (typeof window !== 'undefined' && window.appData && window.appData.onDownload) {
|
||||
window.appData.onDownload(path, name);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if logo}
|
||||
<header class="back-button-container">
|
||||
<button class="back-button" on:click={goBack}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||||
<div class="preview-route">
|
||||
<div class="back-button-container">
|
||||
<button class="back-button" on:click={() => push('/', { replace: true })}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0l7 7m-7-7l7-7"/>
|
||||
</svg>
|
||||
Back to Gallery
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="preview-content">
|
||||
<PreviewComponent
|
||||
show={true}
|
||||
{logo}
|
||||
{theme}
|
||||
{onDownload}
|
||||
on:close={handleClose}
|
||||
/>
|
||||
</main>
|
||||
<div class="preview-container">
|
||||
<PreviewComponent logo={logo} {theme} {onDownload} show={true} {setTheme} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
{:else}
|
||||
<div class="loading-container">
|
||||
<p>Loading logo...</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Page level styles applied to body in global.css */
|
||||
.preview-route {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.back-button-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 2500;
|
||||
padding: 1rem 2rem;
|
||||
background: var(--color-card);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1rem;
|
||||
background: var(--color-card, #fff);
|
||||
color: var(--color-text, #222);
|
||||
border: 1px solid var(--color-border, #ddd);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: background 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text, #222);
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Footer styles now come from the Footer component */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user