â ī¸ IMPORTANT: This application uses browser local storage only. Your work is NOT saved to a server.
While your work will persist across browser sessions on the same device, it is not a cloud backup. Remember to manually save and screenshot your creation when you're done!
Getting Started: Your First Iceberg
Add Entries & Labels: Begin by populating your lists. Use the input fields under the "Entries" or "Labels" tab in the right sidebar to add new text items. After typing, click the "Add Entry" or "Add Label" button, or simply press Enter for quick additions.
Upload Images: Enhance your iceberg visually! Switch to the "Images" tab and use the "Upload Image" input to add your own pictures. These will appear as manageable thumbnails in the sidebar list. The ICEBERG CREATOR automatically optimizes uploaded images through a client-side compression system to ensure efficient performance and maintain visual quality.
Place Items on Iceberg Canvas:
- Text Items (Entries & Labels): Easily drag and drop entries or labels directly from the sidebar onto the main iceberg canvas. Position them to represent different levels of obscurity.
- Images:
- Desktop: drag and drop an image thumbnail from the "Images" tab onto the canvas.
- Mobile: Simply tap an image thumbnail in the "Images" tab. It will automatically appear in the center of the canvas, ready for further customization.
Reposition Items: Achieve the perfect layout! Click and drag (or touch and drag on mobile) any placed text entry, label, or image on the iceberg canvas to move it precisely where you want it.
Editing & Customization Tips
Edit Text:
- Sidebar Items: Click directly on the text of any entry, label, or uploaded image name in the sidebar to modify it. Changes are saved automatically when you click away.
- Category Titles: Personalize your iceberg's tiers! Click the title of any category (e.g., "Level 1: Common Knowledge") above the entry lists to rename it to suit your theme.
Resize Placed Items (Text & Images): Fine-tune your visual elements.
- Activate Item: Click or tap on any placed text entry, label, or image on the canvas to select it. A border will appear, and small green/blue circular handles will show at its corners.
- Resize: Click and drag (or touch and drag on mobile) these circular handles.
- For **images**, dragging changes the width and height, maintaining aspect ratio.
- For **text entries and labels**, dragging changes the font size.
Toggle Label Color: Ensure your labels are always visible. In the "Labels" tab of the sidebar, click the "Toggle Label Color" button to switch the color of all placed labels between white and black. This is especially useful for contrast against different background shades of the iceberg image.
Managing Your Content Efficiently
Remove Items:
- Sidebar Items: To remove an entry, label, or image thumbnail from its list, simply hover over it in the sidebar and click the small à button that appears.
- Placed Items (Text & Images): To remove items already on the canvas, double-click (desktop) or double-tap (mobile) them, or click the red 'x' in the top-right corner of the item.
- Cancelling a Drag from Sidebar: If you drag an item from the sidebar but change your mind before placing it on the canvas, you can drag it to the floating trash icon at the bottom of the screen to cancel the placement.
Search: Find what you're looking for instantly.
- Search Placed Items: Use the search bar located directly above the iceberg canvas. Type your query, and matching text entries and labels on the canvas will be highlighted.
- Search Sidebar Lists: The search bar within the sidebar allows you to filter entries, labels, or image thumbnails by name, helping you manage long lists.
Pagination: For large projects with many entries, labels, or images, the sidebar lists are paginated. Use the "Prev" and "Next" buttons located below each section to easily navigate through different pages of your content.
Undo Last Action: Don't worry about mistakes! Click the "Undo" button located next to the main search bar. This powerful feature allows you to revert your very last action, including adding, moving, resizing, editing text, and even batch clear operations. You can undo multiple steps!
Copy & Paste Images: Duplicate images on your canvas with ease.
- Copy: First, click a placed image on the canvas to select it. Then, click the small clipboard icon (đ) that appears at its bottom-left corner, or use the keyboard shortcut Ctrl + C (Windows/Linux) / Cmd + C (Mac).
- Paste: To paste the copied image onto the canvas, simply press Ctrl + V (Windows/Linux) / Cmd + V (Mac). A new instance of the image will appear, ready for repositioning.
Actions Menu: Batch Operations
The "Actions" menu, accessible via the button in the top bar, provides a suite of powerful batch operations to manage your iceberg efficiently:
- Load Demo Data: Instantly populate your lists and canvas with a pre-made iceberg example. Great for getting started or exploring features. This action is fully undoable.
- Clear Placed Entries: Removes all text entries that have been placed onto the main iceberg canvas. The entries themselves will remain in your sidebar list for later use. This action is fully undoable.
- Clear Placed Labels: Removes all labels that have been placed onto the main iceberg canvas. The labels themselves will remain in your sidebar list. This action is fully undoable.
- Clear Placed Images: Removes all images that have been placed onto the main iceberg canvas. The uploaded images will still be available in your sidebar's "Images" tab. This action is fully undoable.
- Clear Entries List: Empties the entire "Entries" list in the sidebar, removing all entries from both the list and the canvas. This action is fully undoable.
- Clear Labels List: Empties the entire "Labels" list in the sidebar, removing all labels from both the list and the canvas. This action is fully undoable.
- Clear All Lists: A convenient option to empty both the "Entries" and "Labels" lists in the sidebar simultaneously. This action is fully undoable.
- Clear All Uploaded Images: This action removes all uploaded images from both the iceberg canvas AND the "Images" tab in the sidebar, effectively clearing all image data from the application's local storage. This action is fully undoable.
- Clear Everything: The ultimate reset. This option clears all placed items from the canvas, empties all your lists (entries, labels, and images), and also clears your locally saved data from the application's local storage, effectively restoring the application to its initial state. This action requires a confirmation to prevent accidental data loss, but it is fully undoable.
Saving & Loading Your Creation: Important!
The ICEBERG CREATOR is a **client-side application**, meaning all your work is processed and stored directly within your web browser. **No data is ever sent to or stored on a server.** This ensures your privacy and keeps the tool free and fast.
To prevent accidental loss of your work, the application now automatically saves your progress to your browser's local storage. You can also manually control this:
- Automatic Save: Your work is automatically saved to your browser's local storage after most actions (adding, editing, moving, resizing items, or clearing lists). This means if you accidentally close your tab or browser, your work should be restored when you revisit the site on the same device.
- Manual Save: Click the "Save" button in the top control bar to explicitly save your current iceberg state to your browser's local storage. This is useful before closing your browser or if you want to ensure a specific version is saved.
- Manual Load: Click the "Load" button in the top control bar to restore your last saved iceberg from your browser's local storage. This will overwrite your current work, so use it carefully.
Important Note on Local Storage: While local storage provides persistence, it is specific to your browser and device. If you clear your browser's cache, use a different browser, or switch devices, your locally saved work will not be available.
Therefore, for permanent saving and sharing, it is still crucial to manually save your finished iceberg using your operating system's built-in screenshot tool:
- Windows: Utilize the Snipping Tool (search for it in your Start menu) or press the keyboard shortcut Win + Shift + S to select an area to capture.
- Mac: Press Shift + Cmd + 4 to select an area for your screenshot.
Pro Tip for Full Icebergs: To ensure you capture your entire iceberg, especially larger ones, you might need to adjust your browser's zoom level. Use Ctrl + - (Windows/Linux) or Cmd + - (Mac) to zoom out. To quickly reset your zoom to default, press Ctrl + 0 (Windows/Linux) or Cmd + 0 (Mac).
Understanding Browser Cache & Uploaded Images:
When you upload images to the ICEBERG CREATOR, their data is stored within your browser's local storage. However, browsers also maintain a separate **HTTP cache** for all downloaded website resources (images, CSS, and JavaScript files). If you've uploaded a large image, your browser might keep a copy of its data in this cache.
Even after you use the "Clear Everything" button (which clears the application's local storage data), your browser's *HTTP cache* might still retain the visual data of previously displayed images. This can sometimes cause images to briefly reappear or seem to "persist" visually even though the application's internal data for them has been removed. This is a browser-level behavior and is not directly controlled by the application.
To ensure a complete visual reset and clear all traces of previously uploaded images, you may need to manually clear your browser's cache for this specific website. Here's how to generally do it (steps may vary slightly by browser):
- Chrome: Go to Settings > Privacy and security > Clear browsing data. Select "Cached images and files" and choose a time range (e.g., "All time"), then click "Clear data."
- Firefox: Go to Settings > Privacy & Security. Under "Cookies and Site Data," click "Clear Data..." and ensure "Cached Web Content" is checked, then click "Clear."
- Safari (Mac): Go to Safari > Preferences > Advanced. Check "Show Develop menu in menu bar." Then, go to Develop > Empty Caches.
- Mobile Browsers: Steps are similar to desktop. Look for "Clear browsing data," "Site settings," or "Storage" in your browser's settings.
Once captured, you can save the image to your device and share it with others!