### Initializing UI Components and Timers with jQuery Source: https://github.com/v03413/bepusdt/blob/main/static/views/usdt.trc20.html This jQuery document ready block initializes various client-side functionalities. It generates a QR code for the payment address, sets up clipboard copy actions for USDT amount and address, and starts the payment countdown (`clock`) and status check (`checkStatus`) functions with initial delays. It depends on jQuery, `jquery.qrcode.js`, and `clipboard.js`. ```JavaScript $(function () { $('#qrcode').qrcode({ text: "{{.address}}", width: 230, height: 230, foreground: "#000000", background: "#ffffff", typeNumber: -1 }); (new ClipboardJS('#usdt')).on('success', function (e) { return layer.msg('金额复制成功'); }); (new ClipboardJS('#address')).on('success', function (e) { layer.msg('地址复制成功'); }); setTimeout(clock, 1000); setTimeout(checkStatus, 2000); }); ``` -------------------------------- ### Implementing Payment Countdown in JavaScript Source: https://github.com/v03413/bepusdt/blob/main/static/views/usdt.trc20.html This JavaScript function manages a real-time countdown for the payment expiration. It calculates remaining time, updates the UI elements (.hours, .minutes, .seconds), and alerts the user if the payment times out. It depends on `expire` and `startTime` variables for initial setup. ```JavaScript let expire = {{.expire}}; let startTime = Date.now(); // 支付时间倒计时 function clock() { let now = Date.now(); let elapsed = Math.floor((now - startTime) / 1000); // 计算已过去的秒数 let seconds = expire - elapsed; // 计算剩余秒数 let minute = Math.floor(seconds / 60); let hour = Math.floor(minute / 60); if (seconds <= 0) { return layer.alert("支付超时，请重新发起支付！", {icon: 5}); } $('.hours').text(hour.toString().padStart(2, '0')); $('.minutes').text(minute.toString().padStart(2, '0')); $('.seconds').text((seconds % 60).toString().padStart(2, '0')); setTimeout(clock, 1000); } ``` -------------------------------- ### Polling Payment Status with jQuery AJAX Source: https://github.com/v03413/bepusdt/blob/main/static/views/usdt.trc20.html This JavaScript function periodically checks the payment status with the server using an AJAX GET request. It handles three statuses: waiting for payment (status 1, continues polling), payment success (status 2, redirects to `return_url`), and payment timeout (status 3, displays an alert). It requires jQuery for AJAX functionality. ```JavaScript function checkStatus() { $.ajax({ type: "GET", dataType: "json", url: "/pay/check-status/{{.trade_id}}", success: function (data) { if (data.status === 1) { // 等待支付 return setTimeout(checkStatus, 5000); } if (data.status === 2) { // 支付成功 layer.msg('支付成功，正在跳转中...', {icon: 16, shade: 0.01, time: 20000}); return window.location.href = data.return_url; } if (data.status === 3) { return layer.alert("支付超时，请重新发起支付！", {icon: 5, title: "❌ 支付超时"}); } } }); } ``` -------------------------------- ### Setting Up Mouse and Resize Event Listeners (JavaScript) Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This snippet registers event listeners for mouse movement and window resizing. It calls `onDocumentMouseMove` when the mouse moves and `onWindowResize` when the window is resized, enabling interactive camera control and responsive rendering. ```JavaScript window.addEventListener('mousemove', onDocumentMouseMove, false); window.addEventListener('resize', onWindowResize, false); ``` -------------------------------- ### Initializing Three.js Scene with Dynamic Background Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This JavaScript code initializes a Three.js scene to create a dynamic background. It first checks for WebGL support, then creates a canvas element with a linear gradient background. It sets up the camera, scene, and WebGL renderer, and loads a base64 encoded image as a texture. Variables for mouse interaction and animation timing are also defined, preparing the scene for rendering and user input. ```JavaScript if (!Detector.webgl) Detector.addGetWebGLMessage(); var canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = window.innerHeight; var context = canvas.getContext('2d'); var gradient = context.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, "#1e4877"); gradient.addColorStop(0.5, "#4584b4"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')'; var container; var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [], sprite, size, x, y, z; var mouseX = 0, mouseY = 0; var start_time = new Date().getTime(); var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000); camera.position.z = 6000; scene = new THREE.Scene(); geometry = new THREE.Geometry(); var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURQAAANje4Nbc3tfd3+rt7ufq7OTo6ufq7Ons7ujs7ff4+fn6+tfc3/7+/vj5+fb4+Pb3+Pr6+/////////////v7/P////////////n6+v////////7+/vLz9P39/f///////////////////9bc3vb4+PDy8/7///3+/u7w8f////////////7+//39/f7+//////T19tbb3tbc3vb4+P///+bp697j5f////n5+vDy8/P09e/x8u7x8vHy8////////+/x8ebq6////+Xo6u3v8PT29tbc3vf4+f///+rt7vL09e/x8vv8/Ozu7+3w8djd4P///+Lm6Pj5+f////////39/f39/dzh4////9HY2v39/dXb3v7//9fd3/n5+tjd4P///9fd3/X29////9fc3+vt7s7V2NXb3vP09f////n5+vP09ejs7ebp69Xb3ens7uLm6Nbc3tjd4OLm6Nfc39bc3tTa3ens7fDy8+ns7dnf4fb3+Njd4PP09d7i5fz8/P39/dne4eHl5+Xp6v39/t7j5dzg49je4OXo6tfd3/////7+/vr6+8/W2efq6/7+/t7j5d3h487V2Ozu79bc3tbc39vg4vf4+Pb3+Pv7/P///+fq7Ozv8Pb3+ODk5uPn6f////7+/t7i5PT19u7w8c7V2PX29/r6++bp6+fq7Ort7tfd3+/x8vX299bb3uHl5+nr7fP19dTa3fb3+O/x8vv7++Dk5v39/ePn6f///9Pa3Nne4dXb3vP19fP09dTa3ebq693i5M/V2P///9bc3tfc3+fq7Njd4Pv8/Nfd39/j5dTa3eLm6OXo6f7+/uns7dLY2/P09dbb3tLY293i5OTo6fT19s/V2MzT1+3v8PP09dvg4uHl5+Hl5tHX2uHl59bb3trf4t7j5dbc39bb3uvu7/Dy8+fp6+fq7Pn6+uTo6ufq7Ort7vb3+Njd4OPn6fb3+O7w8fb3+Nzh4+vu7+/x8uDk5uTo6u7x8vz9/fz9/fv8/Pf4+fn6+vX29+2SCnQAAAD9dFJOUwADDQsDBgcBAgQNEBDf+gsIE7DSz/TIwMUW1czj1ue5uL6qshMn5djvzJy1vOprd5P2GhYjerh+pxrG0eHB6sKu3L59xOgsIh6Xy8vR973YXm63ONuPYWZ6tuZLenNZL1WhY/qLL+PWHu2l69rXqH/DsTM9gkZphd+JyCvSUIKkWFNBpp1Fj/UlmDmAT0Hi3FyKn9zQdUuF1+Pu8aHwyq2Q9oTrt7DRr+WF1LnfqN6Q7PLyjMQ0M3Lc5Kzq4nCWjymK2cKHlZ6w9PrYmdbN+Dv3pZ7wm5XRqrrLTX1q9cKubM3n4rHEVbXq79t3kl50udyiQL3PeGM0SGzDzsvCcCtbAA' ``` -------------------------------- ### Styling Responsive Layout and Animations with CSS Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This CSS block defines the visual appearance and responsiveness of a web page. It includes general resets, styling for a content container with hover effects, link styles, and an `@keyframes` animation for an image element. Media queries are used to adjust layout for different screen sizes, ensuring adaptability across devices. ```CSS * { margin: 0; padding: 0; } .tp-content { width: 80%; max-width: 650px; background: rgba(0, 0, 0, .1); border-radius: 10px; box-shadow: -2px -2px 2px rgba(255, 255, 255, 1), -2px -2px 12px rgba(255, 255, 255, 0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0, 0, 0, 0.15); position: fixed; left: 0; top: 30%; right: 0; margin: 0 auto; padding: 15px; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; } .tp-content:hover { box-shadow: -2px -2px 4px rgba(255, 255, 255, 1), -2px -2px 14px rgba(255, 255, 255, 0.7), inset 2px 2px 6px rgba(255, 255, 255, 0.3), 2px 2px 10px rgba(0, 0, 0, 0.25); } .tp-content a { width: 70%; background: rgba(0, 68, 255, 0.1); color: #fff; font-size: 16px; line-height: 30px; text-align: center; text-decoration: none; margin: 15px 2%; border: 1px solid rgba(0, 0, 0, .4); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .tp-content a:hover { transition: all .3s; border-radius: 0; border-color: rgba(0, 0, 0, .9); background: rgba(144, 0, 255, .4); } .tp-content a img { width: 25px; height: 25px; margin-right: 6px; transform-origin: 50% 0; animation: yaolingdang 3s infinite ease; } @media screen and (max-width: 1200px) { .tp-content a { width: 40%; margin: 15px 5%; } } @media screen and (max-width: 980px) { .tp-content a { width: 40%; } } @media screen and (max-width: 650px) { .tp-content a { width: 80%; } } .copyright { width: 100%; position: fixed; bottom: 0; width: 100%; text-align: center; font-size: 12px; color: #fff; line-height: 20px; } @keyframes yaolingdang { 5%, 25%, 45% { transform: rotate(8deg); } 0%, 10%, 30%, 50% { transform: rotate(-8deg); } 15%, 35%, 55% { transform: rotate(4deg); } 20%, 40%, 60% { transform: rotate(-4deg); } 65%, 100% { transform: rotate(0deg); } } ``` -------------------------------- ### Adjusting Camera and Renderer on Window Resize (JavaScript) Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This function ensures the 3D scene remains responsive to window size changes. It updates the camera's aspect ratio, recalculates its projection matrix, and resizes the renderer to match the new window dimensions. ```JavaScript function onWindowResize(event) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } ``` -------------------------------- ### Initializing THREE.js Scene with Shader Material - JavaScript Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This snippet configures texture filtering, defines fog properties, and creates a custom shader material for a THREE.js scene. It then generates and merges a large number of plane geometries to form a continuous background, adds these merged meshes to the scene, and initializes the WebGL renderer. Prerequisites include the THREE.js library, a pre-existing 'texture' object, 'scene', 'geometry', and 'container' variables, and HTML elements with IDs 'vs' and 'fs' containing shader code. The snippet uses older THREE.js API calls like 'THREE.MeshShaderMaterial', 'new THREE.Plane()', 'GeometryUtils.merge()', and 'scene.addObject()'. ```JavaScript texture.magFilter = THREE.LinearMipMapLinearFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; var fog = new THREE.Fog(0x4584b4, -100, 3000); material = new THREE.MeshShaderMaterial({ uniforms: { "map": { type: "t", value: 2, texture: texture }, "fogColor": { type: "c", value: fog.color }, "fogNear": { type: "f", value: fog.near }, "fogFar": { type: "f", value: fog.far } }, vertexShader: document.getElementById('vs').textContent, fragmentShader: document.getElementById('fs').textContent, depthTest: false }); var plane = new THREE.Mesh(new THREE.Plane(64, 64)); for (i = 0; i < 8000; i++) { plane.position.x = Math.random() * 1000 - 500; plane.position.y = -Math.random() * Math.random() * 200 - 15; plane.position.z = i; plane.rotation.z = Math.random() * Math.PI; plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5; GeometryUtils.merge(geometry, plane) } mesh = new THREE.Mesh(geometry, material); scene.addObject(mesh); mesh = new THREE.Mesh(geometry, material); mesh.position.z = -8000; scene.addObject(mesh); renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); ``` -------------------------------- ### Rendering 3D Scene and Updating Camera Position (JavaScript) Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This function performs the core rendering operations. It calculates a dynamic `position` for camera movement, smoothly adjusts the camera's X and Y positions based on mouse input, and sets its Z position for a continuous scrolling effect. Finally, it updates the camera's target and renders the scene using the `renderer`. ```JavaScript function render() { position = ((new Date().getTime() - start_time) * 0.03) % 8000; camera.position.x += (mouseX - camera.target.position.x) * 0.01; camera.position.y += (-mouseY - camera.target.position.y) * 0.01; camera.position.z = -position + 8000; camera.target.position.x = camera.position.x; camera.target.position.y = camera.position.y; camera.target.position.z = camera.position.z - 1000; renderer.render(scene, camera); } ``` -------------------------------- ### Creating USDT Payment Order (API) Source: https://github.com/v03413/bepusdt/blob/main/README.md This API endpoint allows merchants to create a new USDT or TRX payment order. It requires details such as the merchant's order ID, payment amount, signature, and callback URLs. The response provides a local transaction ID, the actual payment amount in USDT/TRX, the receiving address, and a payment URL for the checkout counter. ```HTTP POST /api/v1/order/create-transaction ``` ```JSON { "address": "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t", "trade_type": "usdt.trc20", "order_id": "787240927112940881", "amount": 28.88, "signature":"123456abcd", "notify_url": "https://example.com/callback", "redirect_url": "https://example.com/callback" } ``` ```JSON { "status_code": 200, "message": "success", "data": { "trade_id": "b3d2477c-d945-41da-96b7-f925bbd1b415", "order_id": "787240927112940881", "amount": "28.88", "actual_amount": "10", "token": "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t", "expiration_time": 1200, "payment_url": "https://example.com//pay/checkout-counter/b3d2477c-d945-41da-96b7-f925bbd1b415" }, "request_id": "" } ``` -------------------------------- ### Main Animation Loop (JavaScript) Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This function serves as the main animation loop, utilizing `requestAnimationFrame` for efficient and smooth rendering. It continuously calls itself to create a loop and then invokes the `render` function to draw the scene. ```JavaScript function animate() { requestAnimationFrame(animate); render(); } ``` -------------------------------- ### Basic Vertex Shader for UV Mapping in GLSL Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This GLSL vertex shader is responsible for passing texture coordinates (UVs) to the fragment shader and transforming the vertex position. It assigns the input `uv` attribute to the `vUv` varying, which will be interpolated across the primitive, and calculates the final `gl_Position` using the standard model-view-projection matrices. ```GLSL varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ``` -------------------------------- ### Receiving Payment Callback Notification (JSON) Source: https://github.com/v03413/bepusdt/blob/main/README.md This JSON structure represents the callback notification sent by the Bepusdt system to the merchant's specified `notify_url` when an order's status changes. It includes comprehensive transaction details, the payment status (1: waiting, 2: success, 3: timeout), and a signature for verifying the authenticity of the notification. ```JSON { "trade_id": "b3d2477c-d945-41da-96b7-f925bbd1b415", "order_id": "787240927112940881", "amount": 28.88, "actual_amount": 10, "token": "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t", "block_transaction_id": "12ef6267b42e43959795cf31808d0cc72b3d0a48953ed19c61d4b6665a341d10", "signature": "123456abcd", "status": 2 } ``` -------------------------------- ### Handling Mouse Movement for Camera Control (JavaScript) Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This function updates `mouseX` and `mouseY` variables based on the mouse cursor's position relative to the window center. These values are then used to control the camera's target position, creating a subtle parallax effect. ```JavaScript function onDocumentMouseMove(event) { mouseX = (event.clientX - windowHalfX) * 0.25; mouseY = (event.clientY - windowHalfY) * 0.15; } ``` -------------------------------- ### Fog Effect Fragment Shader in GLSL Source: https://github.com/v03413/bepusdt/blob/main/static/views/index.html This GLSL fragment shader applies a depth-based fog effect to the rendered scene. It samples a texture using the interpolated `vUv` coordinates, calculates a fog factor based on the fragment's depth relative to `fogNear` and `fogFar` uniforms, and then mixes the texture color with a uniform `fogColor`. It also modifies the alpha channel based on depth for a fading effect. ```GLSL uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep(fogNear, fogFar, depth); gl_FragColor = texture2D(map, vUv); gl_FragColor.w *= pow(gl_FragCoord.z, 20.0); gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w), fogFactor); } ``` -------------------------------- ### Cancelling USDT Payment Order (API) Source: https://github.com/v03413/bepusdt/blob/main/README.md This API endpoint allows the merchant system to cancel an existing order. Upon successful cancellation, the Bepusdt system will stop monitoring the order and release any occupied funds. It requires the unique transaction ID (`trade_id`) and a valid signature for authentication. ```HTTP POST /api/v1/order/cancel-transaction ``` ```JSON { "trade_id": "0TJV0br98YbNTQe7nQ", "signature":"123456abcd" } ``` ```JSON { "data": { "trade_id": "0TJV0br98YbNTQe7nQ" }, "message": "success", "request_id": "", "status_code": 200 } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.