1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> 6 <title>BasePaint 3D Voxel Explorer</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="styles.css"> 11</head> 12<body> 13 <div id="top-left-controls" class="hidden" style="position: absolute; top: 12px; left: 16px; z-index: 20; display: flex; gap: 10px;"> 14 <button id="download-btn" title="Take 3D Snapshot" style="width: 32px; height: 32px; padding: 4px; display: flex; align-items: center; justify-content: center; background: var(--header-color); border: 2px solid var(--border-color); color: var(--text-color); border-radius: 2px; cursor: pointer; transition: background 0.2s, color 0.2s;"> 15 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 16 <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path> 17 <circle cx="12" cy="13" r="4"></circle> 18 </svg> 19 </button> 20 21 </div> 22 23 <!-- Floating toggle button --> 24 <button id="toggle-ui-btn" title="Toggle Controls" style="position: absolute; top: 12px; right: 16px; z-index: 20; width: 32px; height: 32px; padding: 4px; display: flex; align-items: center; justify-content: center; background: var(--header-color); border: 2px solid var(--border-color); color: var(--text-color); border-radius: 2px; cursor: pointer; backdrop-filter: blur(10px);"> 25 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 26 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> 27 <line x1="15" y1="3" x2="15" y2="21"></line> 28 </svg> 29 </button> 30 31 <div id="ui-overlay"> 32 <div class="controls"> 33 <header style="background-color: var(--header-color); padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-color);"> 34 <div> 35 <h1 style="margin-bottom: 0; font-size: 1.15rem;">BasePaint <span style="color: var(--accent-color);">3D Explorer</span></h1> 36 <div style="font-size: 0.75rem; opacity: 0.8; display: flex; gap: 12px; margin-top: 8px; align-items: center; color: var(--text-color);"> 37 <!-- Desktop Icons --> 38 <div class="desktop-icon" style="display: flex; align-items: center; gap: 4px;" title="Left Click to Rotate"> 39 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 40 <defs> 41 <clipPath id="left-click-clip"> 42 <rect x="5" y="2" width="7" height="8"></rect> 43 </clipPath> 44 </defs> 45 <rect x="5" y="2" width="14" height="20" rx="7" fill="#eb59d6" clip-path="url(#left-click-clip)" stroke="none"></rect> 46 <rect x="5" y="2" width="14" height="20" rx="7"></rect> 47 <path d="M12 2v8"></path> 48 <path d="M5 10h14"></path> 49 </svg> Rotate 50 </div> 51 <div class="desktop-icon" style="display: flex; align-items: center; gap: 4px;" title="Scroll to Zoom"> 52 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 53 <rect x="5" y="2" width="14" height="20" rx="7"></rect> 54 <rect x="10" y="4" width="4" height="7" rx="2" fill="#eb59d6" stroke="currentColor" stroke-width="1"></rect> 55 </svg> Zoom 56 </div> 57 <div class="desktop-icon" style="display: flex; align-items: center; gap: 4px;" title="Right Click to Pan"> 58 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 59 <defs> 60 <clipPath id="right-click-clip"> 61 <rect x="12" y="2" width="7" height="8"></rect> 62 </clipPath> 63 </defs> 64 <rect x="5" y="2" width="14" height="20" rx="7" fill="#eb59d6" clip-path="url(#right-click-clip)" stroke="none"></rect> 65 <rect x="5" y="2" width="14" height="20" rx="7"></rect> 66 <path d="M12 2v8"></path> 67 <path d="M5 10h14"></path> 68 </svg> Pan 69 </div> 70 71 <!-- Mobile Icons --> 72 <div class="mobile-icon" title="1-Finger Drag to Rotate"> 73 ð Rotate 74 </div> 75 <div class="mobile-icon" title="Pinch to Zoom"> 76 ð¤ Zoom 77 </div> 78 <div class="mobile-icon" title="2-Finger Drag to Pan"> 79 âï¸ Pan 80 </div> 81 </div> 82 </div> 83 </header> 84 85 <div id="controls-body" style="display: flex; flex-direction: column; gap: 14px; padding: 1.2rem 1.2rem 14px 1.2rem; overflow-y: auto; flex-grow: 1;"> 86 <div class="control-group" style="flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px;"> 87 <label style="margin: 0; font-size: 0.95rem; font-weight: bold; white-space: nowrap; pointer-events: none; color: #fde047 !important; transition: none !important;">Canvas Day:</label> 88 <input type="number" id="day-input" placeholder="e.g. 45" min="1" style="flex-grow: 1; padding: 0.5rem; text-align: left;"> 89 </div> 90 91 <!-- Post-generation Tools -->
92 <div id="post-generate-controls" class="hidden" style="display: flex; flex-direction: column; gap: 14px;"> 93 94 <div class="control-group"> 95 <label style="pointer-events: none; color: #fde047 !important; transition: none !important; margin-bottom: 3px;">Depth</label> 96 <input type="range" id="depth-input" min="1" max="1000" value="100"> 97 </div> 98 99 <div class="control-group" style="flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;"> 100 <label for="ghost-canvas-input" style="margin: 0; cursor: pointer;">Ghost Canvas</label> 101 <label class="toggle-switch"> 102 <input type="checkbox" id="ghost-canvas-input"> 103 <span class="toggle-slider"></span> 104 </label> 105 </div> 106 107 <div class="control-group" style="flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;"> 108 <div style="display: flex; align-items: center; gap: 6px;"> 109 <label for="show-hidden-input" style="margin: 0; cursor: pointer;">Hidden Art</label> 110 <svg id="hidden-art-info" style="cursor: pointer; width: 14px; height: 14px; color: #888; transition: color 0.2s;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#888'"> 111 <circle cx="12" cy="12" r="10"></circle> 112 <line x1="12" y1="16" x2="12" y2="12"></line> 113 <line x1="12" y1="8" x2="12.01" y2="8"></line> 114 </svg> 115 </div> 116 <label class="toggle-switch"> 117 <input type="checkbox" id="show-hidden-input"> 118 <span class="toggle-slider"></span> 119 </label> 120 </div> 121 122 <div class="control-group" style="flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;">
123 <label for="show-details-input" style="margin: 0; cursor: pointer;">Artist Details</label> 124 <label class="toggle-switch"> 125 <input type="checkbox" id="show-details-input"> 126 <span class="toggle-slider"></span> 127 </label> 128 </div> 129 130 <div class="control-group" style="flex-direction: column; gap: 5px;"> 131 <div style="display: flex; align-items: center; justify-content: space-between; gap: 10px;"> 132 <label for="heatmap-mode-input" style="margin: 0; cursor: pointer;">Artist Heatmap</label> 133 <label class="toggle-switch"> 134 <input type="checkbox" id="heatmap-mode-input"> 135 <span class="toggle-slider"></span> 136 </label> 137 </div> 138 <div id="heatmap-options" style="display: none; font-size: 0.85rem; margin-top: 8px;"> 139 <select id="heatmap-style-select" style="width: 100%; padding: 4px; border-radius: 2px; border: 2px solid var(--border-color); background: #222; color: white;"> 140 <option value="flat">Flat (2D Grayscale)</option> 141 <option value="shrink">Shrink (3D Structural)</option> 142 <option value="glass">Glass (Ghost Transparency)</option> 143 </select> 144 </div> 145 </div> 146 147 <div class="control-group" style="flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;"> 148 <label for="time-lapse-input" style="margin: 0; cursor: pointer;">Time Lapse</label> 149 <label class="toggle-switch"> 150 <input type="checkbox" id="time-lapse-input"> 151 <span class="toggle-slider"></span> 152 </label> 153 </div> 154 155 <div class="action-buttons hidden" id="actions"> 156 <div id="animation-controls" style="display: none; flex-direction: column; gap: 14px; padding-top: 6px;"> 157 <input type="range" id="anim-slider" min="0" max="100" value="100" style="width: 100%; cursor: pointer;"> 158 159 <div style="display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 0.75rem; width: 100%;"> 160 <div style="display: flex; gap: 5px; align-items: center;"> 161 <label style="margin:0; cursor: pointer;">Speed:</label> 162 <div style="width: 80px;"> 163 <select id="anim-speed-select" class="dropup" style="background: transparent; color: white; border: 1px solid var(--border-color); padding: 2px; outline: none; cursor: pointer;"> 164 <option value="1">1x</option> 165 <option value="5">5x</option> 166 <option value="20" selected>20x</option> 167 <option value="100">100x</option> 168 </select> 169 </div> 170 </div> 171 <button id="anim-play-btn" style="background-color: var(--accent-color); padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: bold; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px;"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Play</button> 172 </div> 173 </div> 174 </div> 175 176 177 </div> 178 </div> 179 180 <div id="controls-footer" style="position: relative; padding: 0 1.2rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0;"> 181 182 <button id="generate-btn">Generate Sculpture</button> 183 <div id="error" class="hidden"></div> 184 </div> 185 </div> 186 </div> 187 188 <!-- The 3D Canvas will be injected here by Three.js --> 189 <div id="canvas-container"></div> 190 191 <!-- Tooltip for pixel interaction --> 192 <div id="tooltip" class="hidden" style="position: absolute; background: rgba(0,0,0,0.85); color: #80fba1; padding: 8px 12px; border: 2px solid rgba(255,255,255,0.2); border-radius: 2px; font-size: 0.85rem; pointer-events: none; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3); text-transform: lowercase; width: max-content; white-space: nowrap;"></div> 193 194 <!-- Floating Stats --> 195 <div id="stats" class="hidden" style="position: absolute; bottom: 6px; left: 8px; z-index: 100; font-family: 'Roboto Mono', monospace; color: rgba(255,255,255,0.5); font-size: 0.65rem; pointer-events: none;"> 196 voxels rendered: <span id="stat-voxels" style="color: rgba(128, 251, 161, 0.7);">0</span> 197 </div> 198 199 <!-- Premium Info Modal --> 200 <div id="info-modal" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 2000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;"> 201 <div style="background: #111; border: 1px solid #333; border-radius: 2px; padding: 24px; max-width: 400px; width: 90%; color: #eee; font-family: 'Roboto Mono', monospace; box-shadow: 0 10px 30px rgba(0,0,0,0.8); transform: translateY(20px); transition: transform 0.3s ease;" id="info-modal-content"> 202 <!-- Heading removed per user request --> 203 <p style="font-size: 0.9rem; line-height: 1.5; color: #ccc; margin: 0 0 20px 0;"> 204 You might've stumbled across a piece of hidden BasePaint history! 205 <br><br> 206 On early canvases, the smart contract didn't strictly enforce official canvas boundaries. Some artists discovered this loophole and secretly painted thous
206ands of pixels outside the official border! 207 <br><br> 208 Because this 3D engine pulls raw data directly from the blockchain, turning on <strong style="color: white;">Hidden Art</strong> bypasses the official cropping and reveals these secret, out-of-bounds drawings that you won't see anywhere else. 209 </p> 210 <button id="close-modal-btn" style="width: 100%; background: #333; border: 1px solid #555; color: white; border-radius: 2px; cursor: pointer; transition: background 0.2s;">Got it</button> 211 </div> 212 </div> 213 214 <!-- Three.js, OrbitControls, and VRButton via CDN --> 215
215<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
215 216
216<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
216 217
217<script src="app.js?v=4"></script>
217 218</body> 219</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.