This commit is contained in:
Younes ENNAJI
2025-03-13 08:13:26 +00:00
parent 113e609b55
commit 568e3583b9
4 changed files with 44 additions and 145 deletions
+1 -1
View File
@@ -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",
+41 -142
View File
@@ -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
*/ */
+1 -1
View File
@@ -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