mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Wip
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"dist/main.css": "/dist/main.f22cec93.css",
|
"dist/main.css": "/dist/main.def4cf18.css",
|
||||||
"dist/main.js": "/dist/main.c89a204f.js",
|
"dist/main.js": "/dist/main.c89a204f.js",
|
||||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||||
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
|
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
|
||||||
|
|||||||
@@ -495,10 +495,13 @@
|
|||||||
.cursor {
|
.cursor {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 1.2em;
|
height: 1em;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
margin-left: 2px;
|
margin-left: 4px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
top: -1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animation for code typing */
|
/* Animation for code typing */
|
||||||
@@ -588,13 +591,6 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cursor {
|
|
||||||
animation: blink 1s infinite;
|
|
||||||
display: inline-block;
|
|
||||||
width: 2px;
|
|
||||||
height: 1.2em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -737,6 +733,7 @@ class PaymentController extends Controller
|
|||||||
after: `
|
after: `
|
||||||
return back();
|
return back();
|
||||||
}
|
}
|
||||||
|
|
||||||
return redirect()->route('payment.success');
|
return redirect()->route('payment.success');
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
@@ -762,6 +759,7 @@ class PaymentController extends AbstractController
|
|||||||
after: `
|
after: `
|
||||||
return $this->redirectToRoute('payment_form');
|
return $this->redirectToRoute('payment_form');
|
||||||
}
|
}
|
||||||
|
|
||||||
return $this->redirectToRoute('payment_success');
|
return $this->redirectToRoute('payment_success');
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
@@ -812,6 +810,7 @@ class OrderController extends Controller
|
|||||||
after: `
|
after: `
|
||||||
// Send to processing queue
|
// Send to processing queue
|
||||||
ProcessOrderJob::dispatch($order);
|
ProcessOrderJob::dispatch($order);
|
||||||
|
|
||||||
return redirect()->route('orders.show', $order);
|
return redirect()->route('orders.show', $order);
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
@@ -840,6 +839,7 @@ class OrderController extends AbstractController
|
|||||||
after: `
|
after: `
|
||||||
// Dispatch order processing
|
// Dispatch order processing
|
||||||
$this->messageBus->dispatch(new ProcessOrder($order->getId()));
|
$this->messageBus->dispatch(new ProcessOrder($order->getId()));
|
||||||
|
|
||||||
return $this->redirectToRoute('app_order_show', [
|
return $this->redirectToRoute('app_order_show', [
|
||||||
'id' => $order->getId()
|
'id' => $order->getId()
|
||||||
]);
|
]);
|
||||||
@@ -891,6 +891,7 @@ class AccountController extends Controller
|
|||||||
`,
|
`,
|
||||||
after: `
|
after: `
|
||||||
}
|
}
|
||||||
|
|
||||||
return view('account.dashboard', compact('user'));
|
return view('account.dashboard', compact('user'));
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
@@ -915,6 +916,7 @@ class AccountController extends AbstractController
|
|||||||
`,
|
`,
|
||||||
after: `
|
after: `
|
||||||
}
|
}
|
||||||
|
|
||||||
return $this->render('account/dashboard.html.twig', [
|
return $this->render('account/dashboard.html.twig', [
|
||||||
'user' => $user
|
'user' => $user
|
||||||
]);
|
]);
|
||||||
@@ -943,6 +945,26 @@ async function checkStatus() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const indentMap = {
|
||||||
|
js: {
|
||||||
|
success: " ",
|
||||||
|
error: " ", // You can adjust these values as desired
|
||||||
|
info: " ",
|
||||||
|
warning: " "
|
||||||
|
},
|
||||||
|
laravel: {
|
||||||
|
success: " ",
|
||||||
|
error: " ", // For error, we use an extra level (8 spaces vs. 12 spaces)
|
||||||
|
info: " ",
|
||||||
|
warning: " "
|
||||||
|
},
|
||||||
|
symfony: {
|
||||||
|
success: " ",
|
||||||
|
error: " ", // Similarly, error notifications get extra indentation
|
||||||
|
info: " ",
|
||||||
|
warning: " "
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Helper function to safely escape special characters in code
|
* Helper function to safely escape special characters in code
|
||||||
@@ -1147,16 +1169,6 @@ async function checkStatus() {
|
|||||||
return lines.join("\n");
|
return lines.join("\n");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Generate the complete code example
|
|
||||||
*/
|
|
||||||
function generateCompleteExample(framework) {
|
|
||||||
const template = contextTemplates[state.type][framework];
|
|
||||||
const indent = framework === "js" ? " " : " ";
|
|
||||||
const flashCode = generateFlashCode(framework, indent);
|
|
||||||
return `${template.code.before}\n${flashCode}\n${template.code.after}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update code display with animation
|
* Update code display with animation
|
||||||
*/
|
*/
|
||||||
@@ -1167,7 +1179,8 @@ async function checkStatus() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const template = contextTemplates[state.type][currentTab];
|
const template = contextTemplates[state.type][currentTab];
|
||||||
const indent = currentTab === "js" ? " " : " ";
|
const defaultIndent = currentTab === "js" ? " " : " ";
|
||||||
|
const indent = (indentMap[currentTab] && indentMap[currentTab][state.type]) || defaultIndent;
|
||||||
const flashCode = generateFlashCode(currentTab, indent);
|
const flashCode = generateFlashCode(currentTab, indent);
|
||||||
if (animate) {
|
if (animate) {
|
||||||
panel.innerHTML = `
|
panel.innerHTML = `
|
||||||
@@ -1180,10 +1193,9 @@ async function checkStatus() {
|
|||||||
}
|
}
|
||||||
const typingContainer = document.createElement("div");
|
const typingContainer = document.createElement("div");
|
||||||
typingContainer.className = "typing-container border-l-4 border-green-500 bg-green-50/20";
|
typingContainer.className = "typing-container border-l-4 border-green-500 bg-green-50/20";
|
||||||
typingContainer.style.marginTop = "-20px";
|
|
||||||
typingContainer.style.fontFamily = "monospace";
|
typingContainer.style.fontFamily = "monospace";
|
||||||
typingContainer.style.position = "relative";
|
typingContainer.style.position = "relative";
|
||||||
typingContainer.style.minHeight = "50px";
|
typingContainer.style.top = "-10px";
|
||||||
panel.querySelector("pre").appendChild(typingContainer);
|
panel.querySelector("pre").appendChild(typingContainer);
|
||||||
const afterContainer = document.createElement("pre");
|
const afterContainer = document.createElement("pre");
|
||||||
afterContainer.className = `language-${currentTab === "js" ? "javascript" : "php"}`;
|
afterContainer.className = `language-${currentTab === "js" ? "javascript" : "php"}`;
|
||||||
@@ -1214,24 +1226,20 @@ async function checkStatus() {
|
|||||||
function typeCode(code, container) {
|
function typeCode(code, container) {
|
||||||
const cursor = document.createElement("span");
|
const cursor = document.createElement("span");
|
||||||
cursor.className = "cursor";
|
cursor.className = "cursor";
|
||||||
cursor.innerHTML = "|";
|
|
||||||
cursor.style.display = "inline-block";
|
|
||||||
cursor.style.width = "2px";
|
|
||||||
cursor.style.backgroundColor = "#4F46E5";
|
|
||||||
cursor.style.color = "transparent";
|
|
||||||
cursor.style.marginLeft = "1px";
|
|
||||||
cursor.style.animation = "blink 1s infinite";
|
|
||||||
container.appendChild(cursor);
|
container.appendChild(cursor);
|
||||||
|
|
||||||
let i = 0;
|
let i = 0;
|
||||||
let currentLine = document.createElement("div");
|
let currentLine = document.createElement("div");
|
||||||
currentLine.style.minHeight = "1.2em";
|
currentLine.style.minHeight = "1.2em";
|
||||||
container.insertBefore(currentLine, cursor);
|
container.insertBefore(currentLine, cursor);
|
||||||
|
|
||||||
const charsPerMinute = 5000;
|
const charsPerMinute = 5000;
|
||||||
const baseDelay = 60000 / charsPerMinute;
|
const baseDelay = 60000 / charsPerMinute;
|
||||||
|
|
||||||
function typeNextChar() {
|
function typeNextChar() {
|
||||||
if (i < code.length) {
|
if (i < code.length) {
|
||||||
const char = code.charAt(i);
|
const char = code.charAt(i);
|
||||||
|
|
||||||
if (char === "\n") {
|
if (char === "\n") {
|
||||||
currentLine = document.createElement("div");
|
currentLine = document.createElement("div");
|
||||||
currentLine.style.minHeight = "1.2em";
|
currentLine.style.minHeight = "1.2em";
|
||||||
@@ -1252,8 +1260,10 @@ async function checkStatus() {
|
|||||||
charSpan.textContent = char;
|
charSpan.textContent = char;
|
||||||
currentLine.appendChild(charSpan);
|
currentLine.appendChild(charSpan);
|
||||||
}
|
}
|
||||||
|
|
||||||
i++;
|
i++;
|
||||||
let delay = baseDelay;
|
let delay = baseDelay;
|
||||||
|
|
||||||
if ([".", ",", ";", ")", "}", ">", "!"].includes(char)) {
|
if ([".", ",", ";", ")", "}", ">", "!"].includes(char)) {
|
||||||
delay *= 2.5;
|
delay *= 2.5;
|
||||||
} else if (char === "\n") {
|
} else if (char === "\n") {
|
||||||
@@ -1261,9 +1271,11 @@ async function checkStatus() {
|
|||||||
} else {
|
} else {
|
||||||
delay *= (0.7 + Math.random() * 0.6);
|
delay *= (0.7 + Math.random() * 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Math.random() < 0.05) {
|
if (Math.random() < 0.05) {
|
||||||
delay += Math.random() * 500;
|
delay += Math.random() * 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(typeNextChar, delay);
|
setTimeout(typeNextChar, delay);
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -1275,119 +1287,6 @@ async function checkStatus() {
|
|||||||
setTimeout(typeNextChar, 150);
|
setTimeout(typeNextChar, 150);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Create and play a typing animation for the flash code section
|
|
||||||
*/
|
|
||||||
function animateFlashCode(framework) {
|
|
||||||
const template = contextTemplates[state.type][framework];
|
|
||||||
const panel = document.getElementById(`${framework}-code-panel`);
|
|
||||||
if (!panel) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const codeElement = panel.querySelector("code");
|
|
||||||
if (!codeElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const flashCode = generateFlashCode(framework, framework === "js" ? " " : " ");
|
|
||||||
const fullText = codeElement.textContent;
|
|
||||||
const startIndex = fullText.indexOf(flashCode);
|
|
||||||
if (startIndex === -1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const range = document.createRange();
|
|
||||||
const selection = window.getSelection();
|
|
||||||
selection.removeAllRanges();
|
|
||||||
try {
|
|
||||||
const textNodes = getTextNodesIn(codeElement);
|
|
||||||
let currentPos = 0;
|
|
||||||
let startNode, startOffset, endNode, endOffset;
|
|
||||||
for (let node of textNodes) {
|
|
||||||
const nodeTextLength = node.textContent.length;
|
|
||||||
if (currentPos <= startIndex && currentPos + nodeTextLength > startIndex) {
|
|
||||||
startNode = node;
|
|
||||||
startOffset = startIndex - currentPos;
|
|
||||||
}
|
|
||||||
if (currentPos <= startIndex + flashCode.length &&
|
|
||||||
currentPos + nodeTextLength >= startIndex + flashCode.length) {
|
|
||||||
endNode = node;
|
|
||||||
endOffset = startIndex + flashCode.length - currentPos;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
currentPos += nodeTextLength;
|
|
||||||
}
|
|
||||||
if (startNode && endNode) {
|
|
||||||
range.setStart(startNode, startOffset);
|
|
||||||
range.setEnd(endNode, endOffset);
|
|
||||||
const highlightSpan = document.createElement("span");
|
|
||||||
highlightSpan.className = "animated-line";
|
|
||||||
highlightSpan.style.animation = "highlight-line 2s ease-in-out";
|
|
||||||
range.surroundContents(highlightSpan);
|
|
||||||
simulateTyping(highlightSpan, flashCode);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Animation error:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get all text nodes within an element
|
|
||||||
*/
|
|
||||||
function getTextNodesIn(element) {
|
|
||||||
const textNodes = [];
|
|
||||||
const walk = document.createTreeWalker(
|
|
||||||
element,
|
|
||||||
NodeFilter.SHOW_TEXT,
|
|
||||||
null,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
let node;
|
|
||||||
while (node = walk.nextNode()) {
|
|
||||||
textNodes.push(node);
|
|
||||||
}
|
|
||||||
return textNodes;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Simulate typing effect within an element
|
|
||||||
*/
|
|
||||||
function simulateTyping(element, text) {
|
|
||||||
if (!element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const cursor = document.createElement("span");
|
|
||||||
cursor.className = "cursor";
|
|
||||||
element.appendChild(cursor);
|
|
||||||
const originalContent = element.innerHTML;
|
|
||||||
element.innerHTML = "";
|
|
||||||
element.appendChild(cursor);
|
|
||||||
let i = 0;
|
|
||||||
const typingSpeed = 600;
|
|
||||||
|
|
||||||
function typeCharacter() {
|
|
||||||
if (i < text.length) {
|
|
||||||
const char = document.createTextNode(text.charAt(i));
|
|
||||||
element.insertBefore(char, cursor);
|
|
||||||
i++;
|
|
||||||
let delay = typingSpeed;
|
|
||||||
const currentChar = text.charAt(i - 1);
|
|
||||||
if ([";", ".", ":", ",", ")", "}"].includes(currentChar)) {
|
|
||||||
delay = typingSpeed * 3;
|
|
||||||
} else if (currentChar === "\n") {
|
|
||||||
delay = typingSpeed * 5;
|
|
||||||
} else if (Math.random() < 0.1) {
|
|
||||||
delay = typingSpeed * (1 + Math.random());
|
|
||||||
}
|
|
||||||
setTimeout(typeCharacter, delay);
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
cursor.remove();
|
|
||||||
}, 50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(typeCharacter, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates the message and title based on the notification type
|
* Updates the message and title based on the notification type
|
||||||
*/
|
*/
|
||||||
|
|||||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
"entrypoints": {
|
"entrypoints": {
|
||||||
"main": {
|
"main": {
|
||||||
"css": [
|
"css": [
|
||||||
"/dist/main.f22cec93.css"
|
"/dist/main.def4cf18.css"
|
||||||
],
|
],
|
||||||
"js": [
|
"js": [
|
||||||
"/dist/main.c89a204f.js"
|
"/dist/main.c89a204f.js"
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user