| Current File : /home/kelaby89/www/software/gram-grid-planner/gram-grid-planner.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gram Grid Planner</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<a href="http://sixpack.studio/" target="_blank">
<img src="assets/logo-image2.png" alt="App Logo" class="app-logo">
</a>
<h1>Gram Grid Planner</h1>
</header>
<div id="appContainer">
<div class="button-container">
<div id="imageCounter">
<span id="imageCount">0</span>
<div>Images in Grid</div>
</div>
<label for="imageUpload" class="button">Choose Images</label>
<input type="file" id="imageUpload" multiple accept="image/*" style="display: none;">
<button id="gridSizeButton">Grid Size</button>
<input type="range" id="gridSizeSlider" min="100" max="400" value="200">
<button id="saveGridButton">Save Grid</button>
<input type="file" id="loadGridInput" style="display: none;">
<button id="loadGridButton">Load Grid</button>
<button id="removeSelectedButton">Remove Selected</button>
<button id="themeToggleButton">Light Mode</button>
<button id="aboutButton">About</button>
<button id="helpButton">Help</button>
</div>
<div class="grid-container" id="gridContainer"></div>
</div>
<div id="helpModal" class="modal">
<h2>How to Use Gram Grid Planner</h2>
<p>1. <strong>Choose Images:</strong> Click "Choose Images" to upload photos from your computer.</p>
<p>2. <strong>Arrange Images:</strong> Drag and drop images within the grid to rearrange them and visualize your Instagram feed.</p>
<p>3. <strong>Grid Size:</strong> Use the "Grid Size" button and slider to adjust the size of the images in the grid.</p>
<p>4. <strong>Save Grid:</strong> Click "Save Grid" to download the current layout as a JSON file.</p>
<p>5. <strong>Load Grid:</strong> Click "Load Grid" to upload a previously saved JSON file and restore the grid layout.</p>
<p>6. <strong>Remove Selected:</strong> Select images you want to remove and click "Remove Selected."</p>
<p>7. <strong>Light/Dark Mode:</strong> Toggle between light mode and dark mode using the "Light Mode" button.</p>
<button id="closeHelpButton">Close</button>
</div>
<div id="aboutModal" class="modal">
<h2>About Gram Grid Planner</h2>
<p>Gram Grid Planner is an intuitive tool designed to help you plan and organize your Instagram feed with ease. Whether you're a social media influencer, a business owner, or just someone who loves curating a beautiful profile, this tool is for you.</p>
<p>Developed with simplicity and functionality in mind, Gram Grid Planner offers a seamless experience for managing your Instagram grid layout, ensuring your feed looks cohesive and aesthetically pleasing.</p>
<p>This software is brought to you free to use by <a href="http://sixpack.studio/" target="_blank">Six Pack Studios</a>.</p>
<button id="closeAboutButton">Close</button>
</div>
<script src="script.js"></script>
</body>
</html>