commit 4139167c2166d76bfab3f36cb3da618dff5e103b
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 21:52:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b9b6746
--- /dev/null
+++ b/body.html
@@ -0,0 +1,36 @@
+<header>
+ <h1>Golden Ratio Logo Analyzer</h1>
+ <p>Upload your logo to check if it adheres to the golden ratio (1.618).</p>
+</header>
+
+<main>
+ <section id="upload-section">
+ <label for="logo-upload" class="upload-label">
+ <span>Upload Logo (JPG, PNG, SVG)</span>
+ <input type="file" id="logo-upload" accept=".jpg,.jpeg,.png,.svg">
+ </label>
+ </section>
+
+ <section id="analysis-section" class="hidden">
+ <div class="canvas-container">
+ <canvas id="logo-canvas"></canvas>
+ <div id="overlay"></div>
+ </div>
+
+ <div class="controls">
+ <button id="draw-box-btn">Draw Bounding Box</button>
+ <button id="clear-box-btn" class="hidden">Clear Box</button>
+ <button id="analyze-btn">Analyze</button>
+ </div>
+
+ <div id="result" class="hidden">
+ <h2>Analysis Result</h2>
+ <p>Golden Ratio: <span id="ratio-value"></span></p>
+ <p id="pass-fail"></p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Created with ❤️ for perfect design</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0de7d7f
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://goldenratio.scroll.pub
+metaTags
+editButton /edit.html
+title Golden Ratio Logo Analyzer
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b1127d4
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "5a35d08c-de46-4ef6-b478-0160795d325d",
+ "object": "chat.completion",
+ "created": 1735509131,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ngoldenratio.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://goldenratio.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Golden Ratio Logo Analyzer\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Golden Ratio Logo Analyzer</h1>\n <p>Upload your logo to check if it adheres to the golden ratio (1.618).</p>\n</header>\n\n<main>\n <section id=\"upload-section\">\n <label for=\"logo-upload\" class=\"upload-label\">\n <span>Upload Logo (JPG, PNG, SVG)</span>\n <input type=\"file\" id=\"logo-upload\" accept=\".jpg,.jpeg,.png,.svg\">\n </label>\n </section>\n\n <section id=\"analysis-section\" class=\"hidden\">\n <div class=\"canvas-container\">\n <canvas id=\"logo-canvas\"></canvas>\n <div id=\"overlay\"></div>\n </div>\n\n <div class=\"controls\">\n <button id=\"draw-box-btn\">Draw Bounding Box</button>\n <button id=\"clear-box-btn\" class=\"hidden\">Clear Box</button>\n <button id=\"analyze-btn\">Analyze</button>\n </div>\n\n <div id=\"result\" class=\"hidden\">\n <h2>Analysis Result</h2>\n <p>Golden Ratio: <span id=\"ratio-value\"></span></p>\n <p id=\"pass-fail\"></p>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created with ❤️ for perfect design</p>\n</footer>\n---style.css---\n:root {\n --gold: #d4af37;\n --dark: #1a1a1a;\n --light: #f5f5f5;\n --success: #4caf50;\n --error: #f44336;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--dark);\n background: var(--light);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n background: var(--dark);\n color: var(--light);\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n}\n\n#upload-section {\n text-align: center;\n margin: 2rem 0;\n}\n\n.upload-label {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--gold);\n color: var(--dark);\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.upload-label:hover {\n background: darken(var(--gold), 10%);\n}\n\n#logo-upload {\n display: none;\n}\n\n#analysis-section {\n display: none;\n}\n\n.canvas-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n border: 2px solid var(--dark);\n border-radius: 4px;\n overflow: hidden;\n}\n\ncanvas {\n display: block;\n width: 100%;\n height: auto;\n}\n\n#overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.controls {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin: 1rem 0;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n background: var(--dark);\n color: var(--light);\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: var(--gold);\n color: var(--dark);\n}\n\n#result {\n text-align: center;\n margin: 2rem 0;\n}\n\n#ratio-value {\n font-weight: bold;\n color: var(--gold);\n}\n\n#pass-fail {\n font-size: 1.2rem;\n font-weight: bold;\n margin-top: 0.5rem;\n}\n\n.pass {\n color: var(--success);\n}\n\n.fail {\n color: var(--error);\n}\n\nfooter {\n background: var(--dark);\n color: var(--light);\n text-align: center;\n padding: 1rem;\n}\n\n@media (max-width: 768px) {\n header h1 {\n font-size: 2rem;\n }\n\n .controls {\n flex-direction: column;\n align-items: center;\n }\n}\n---script.js---\nconst logoUpload = document.getElementById('logo-upload');\nconst canvas = document.getElementById('logo-canvas');\nconst ctx = canvas.getContext('2d');\nconst overlay = document.getElementById('overlay');\nconst drawBoxBtn = document.getElementById('draw-box-btn');\nconst clearBoxBtn = document.getElementById('clear-box-btn');\nconst analyzeBtn = document.getElementById('analyze-btn');\nconst resultSection = document.getElementById('result');\nconst ratioValue = document.getElementById('ratio-value');\nconst passFail = document.getElementById('pass-fail');\n\nlet isDrawing = false;\nlet startX, startY, endX, endY;\n\nlogoUpload.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.src = event.target.result;\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n document.getElementById('analysis-section').classList.remove('hidden');\n };\n };\n reader.readAsDataURL(file);\n }\n});\n\ndrawBoxBtn.addEventListener('click', () => {\n isDrawing = true;\n canvas.style.cursor = 'crosshair';\n clearBoxBtn.classList.remove('hidden');\n});\n\nclearBoxBtn.addEventListener('click', () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n const img = new Image();\n img.src = canvas.toDataURL();\n img.onload = () => {\n ctx.drawImage(img, 0, 0);\n };\n clearBoxBtn.classList.add('hidden');\n});\n\ncanvas.addEventListener('mousedown', (e) => {\n if (isDrawing) {\n startX = e.offsetX;\n startY = e.offsetY;\n }\n});\n\ncanvas.addEventListener('mouseup', (e) => {\n if (isDrawing) {\n endX = e.offsetX;\n endY = e.offsetY;\n drawBox();\n isDrawing = false;\n canvas.style.cursor = 'default';\n }\n});\n\nfunction drawBox() {\n ctx.strokeStyle = '#FF0000';\n ctx.lineWidth = 2;\n ctx.strokeRect(startX, startY, endX - startX, endY - startY);\n}\n\nanalyzeBtn.addEventListener('click', () => {\n const width = Math.abs(endX - startX);\n const height = Math.abs(endY - startY);\n const ratio = width / height;\n const goldenRatio = 1.618;\n const margin = 0.01;\n\n ratioValue.textContent = ratio.toFixed(3);\n resultSection.classList.remove('hidden');\n\n if (Math.abs(ratio - goldenRatio) <= margin) {\n passFail.textContent = 'PASS';\n passFail.classList.remove('fail');\n passFail.classList.add('pass');\n } else {\n passFail.textContent = 'FAIL';\n passFail.classList.remove('pass');\n passFail.classList.add('fail');\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 490,
+ "completion_tokens": 1769,
+ "total_tokens": 2259,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 490
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..dbd72d1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# goldenratio.scroll.pub
+Website generated by DeepSeek from prompt: **Prompt:** "Create a tool with the following specifications: 1. **Purpose**: To analyze logos and check if their dimensions, spacings, or key element proportions adhere to the golden ratio (1.618). 2. **Features**: - **File Upload**: Allow users to upload a logo image (JPG, PNG, or SVG). - **Measurement Input**: Let users input measurements (width, height, element spacing) or draw bounding boxes directly on the logo. - **Golden Ratio Calculation**: Automatically calculate the proportions of uploaded logos or manually inputted measurements to see if they approximate 1.618 (±0.01 margin). - **Pass/Fail Indicator**: Clearly display whether the logo passes or fails the golden ratio test. 3. **Tech Stack**: - Next.js for rendering and routing. - React for UI interactions. - Canvas or SVG libraries (e.g., `fabric.js` or `react-konva`) for drawing and measuring elements on the uploaded logo. 5. **Bonus**: - Add visual overlays (e.g., golden ratio spirals or grids) on the uploaded image. - Save analysis results for users to download as a PDF or CSV.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ff7d87d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,91 @@
+const logoUpload = document.getElementById('logo-upload');
+const canvas = document.getElementById('logo-canvas');
+const ctx = canvas.getContext('2d');
+const overlay = document.getElementById('overlay');
+const drawBoxBtn = document.getElementById('draw-box-btn');
+const clearBoxBtn = document.getElementById('clear-box-btn');
+const analyzeBtn = document.getElementById('analyze-btn');
+const resultSection = document.getElementById('result');
+const ratioValue = document.getElementById('ratio-value');
+const passFail = document.getElementById('pass-fail');
+
+let isDrawing = false;
+let startX, startY, endX, endY;
+
+logoUpload.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const img = new Image();
+ img.src = event.target.result;
+ img.onload = () => {
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ document.getElementById('analysis-section').classList.remove('hidden');
+ };
+ };
+ reader.readAsDataURL(file);
+ }
+});
+
+drawBoxBtn.addEventListener('click', () => {
+ isDrawing = true;
+ canvas.style.cursor = 'crosshair';
+ clearBoxBtn.classList.remove('hidden');
+});
+
+clearBoxBtn.addEventListener('click', () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ const img = new Image();
+ img.src = canvas.toDataURL();
+ img.onload = () => {
+ ctx.drawImage(img, 0, 0);
+ };
+ clearBoxBtn.classList.add('hidden');
+});
+
+canvas.addEventListener('mousedown', (e) => {
+ if (isDrawing) {
+ startX = e.offsetX;
+ startY = e.offsetY;
+ }
+});
+
+canvas.addEventListener('mouseup', (e) => {
+ if (isDrawing) {
+ endX = e.offsetX;
+ endY = e.offsetY;
+ drawBox();
+ isDrawing = false;
+ canvas.style.cursor = 'default';
+ }
+});
+
+function drawBox() {
+ ctx.strokeStyle = '#FF0000';
+ ctx.lineWidth = 2;
+ ctx.strokeRect(startX, startY, endX - startX, endY - startY);
+}
+
+analyzeBtn.addEventListener('click', () => {
+ const width = Math.abs(endX - startX);
+ const height = Math.abs(endY - startY);
+ const ratio = width / height;
+ const goldenRatio = 1.618;
+ const margin = 0.01;
+
+ ratioValue.textContent = ratio.toFixed(3);
+ resultSection.classList.remove('hidden');
+
+ if (Math.abs(ratio - goldenRatio) <= margin) {
+ passFail.textContent = 'PASS';
+ passFail.classList.remove('fail');
+ passFail.classList.add('pass');
+ } else {
+ passFail.textContent = 'FAIL';
+ passFail.classList.remove('pass');
+ passFail.classList.add('fail');
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..75f700a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,159 @@
+:root {
+ --gold: #d4af37;
+ --dark: #1a1a1a;
+ --light: #f5f5f5;
+ --success: #4caf50;
+ --error: #f44336;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background: var(--light);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ background: var(--dark);
+ color: var(--light);
+ padding: 2rem;
+ text-align: center;
+}
+
+header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+main {
+ flex: 1;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+#upload-section {
+ text-align: center;
+ margin: 2rem 0;
+}
+
+.upload-label {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--gold);
+ color: var(--dark);
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+.upload-label:hover {
+ background: darken(var(--gold), 10%);
+}
+
+#logo-upload {
+ display: none;
+}
+
+#analysis-section {
+ display: none;
+}
+
+.canvas-container {
+ position: relative;
+ width: 100%;
+ max-width: 600px;
+ margin: 0 auto;
+ border: 2px solid var(--dark);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+ width: 100%;
+ height: auto;
+}
+
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin: 1rem 0;
+}
+
+button {
+ padding: 0.5rem 1rem;
+ background: var(--dark);
+ color: var(--light);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background: var(--gold);
+ color: var(--dark);
+}
+
+#result {
+ text-align: center;
+ margin: 2rem 0;
+}
+
+#ratio-value {
+ font-weight: bold;
+ color: var(--gold);
+}
+
+#pass-fail {
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-top: 0.5rem;
+}
+
+.pass {
+ color: var(--success);
+}
+
+.fail {
+ color: var(--error);
+}
+
+footer {
+ background: var(--dark);
+ color: var(--light);
+ text-align: center;
+ padding: 1rem;
+}
+
+@media (max-width: 768px) {
+ header h1 {
+ font-size: 2rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ align-items: center;
+ }
+}
\ No newline at end of file