Skip to content

Commit bc55fb0

Browse files
DanexCodrDanexCodr
authored
Update index.html
1 parent 0a7c071 commit bc55fb0

1 file changed

Lines changed: 145 additions & 12 deletions

File tree

‎docs/index.html‎

Lines changed: 145 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@
3939
padding: clamp(1.5rem, 5vw, 2rem) 1rem;
4040
text-align: center;
4141
border-bottom: 1px solid var(--border-color);
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
min-height: 40vh;
46+
}
47+
48+
.header-content {
49+
max-width: 800px;
50+
width: 100%;
4251
}
4352

4453
.container {
@@ -64,7 +73,9 @@
6473
}
6574

6675
.btn {
67-
display: inline-block;
76+
display: inline-flex;
77+
align-items: center;
78+
justify-content: center;
6879
background-color: var(--accent-primary);
6980
color: var(--text-primary);
7081
padding: clamp(0.5rem, 3vw, 0.75rem) clamp(1rem, 4vw, 1.5rem);
@@ -78,6 +89,7 @@
7889
font-family: inherit;
7990
font-size: clamp(0.9rem, 3vw, 1rem);
8091
white-space: nowrap;
92+
min-height: 44px;
8193
}
8294

8395
.btn:hover {
@@ -267,18 +279,52 @@
267279
left: -1rem;
268280
}
269281

270-
.command {
282+
.command-container {
283+
position: relative;
271284
background-color: var(--bg-primary);
272285
border-left: 4px solid var(--accent-primary);
273-
padding: clamp(0.5rem, 2vw, 0.75rem);
286+
border-radius: 0 4px 4px 0;
274287
margin: 0.5rem 0;
288+
overflow: hidden;
289+
}
290+
291+
.command {
292+
padding: clamp(0.5rem, 2vw, 0.75rem);
293+
padding-right: 3rem;
275294
font-family: 'Courier New', Courier, monospace;
276-
border-radius: 0 4px 4px 0;
277295
color: var(--text-primary);
278296
font-size: clamp(0.8rem, 3vw, 0.9rem);
279297
overflow-x: auto;
280298
white-space: nowrap;
281299
-webkit-overflow-scrolling: touch;
300+
background-color: var(--bg-primary);
301+
}
302+
303+
.copy-btn {
304+
position: absolute;
305+
right: 0.5rem;
306+
top: 50%;
307+
transform: translateY(-50%);
308+
background: var(--accent-primary);
309+
border: none;
310+
color: white;
311+
padding: 0.4rem 0.8rem;
312+
border-radius: 4px;
313+
cursor: pointer;
314+
font-size: 0.8rem;
315+
font-family: inherit;
316+
transition: all 0.3s ease;
317+
opacity: 0.8;
318+
}
319+
320+
.copy-btn:hover {
321+
opacity: 1;
322+
background: var(--accent-hover);
323+
}
324+
325+
.copy-btn.copied {
326+
background: #27ae60;
327+
opacity: 1;
282328
}
283329

284330
.try-editor {
@@ -332,6 +378,7 @@
332378
flex-wrap: wrap;
333379
justify-content: center;
334380
gap: clamp(0.5rem, 2vw, 1rem);
381+
align-items: center;
335382
}
336383

337384
footer {
@@ -363,6 +410,11 @@
363410

364411
/* Landscape orientation optimizations */
365412
@media (orientation: landscape) and (max-height: 600px) {
413+
header {
414+
min-height: 60vh;
415+
padding: 1rem;
416+
}
417+
366418
section {
367419
padding: 1.5rem 1rem;
368420
}
@@ -392,35 +444,50 @@
392444
.btn {
393445
padding: 0.4rem 0.8rem;
394446
font-size: 0.8rem;
447+
min-height: 40px;
395448
}
396449

397450
.feature-card, .runner-card {
398451
padding: 0.75rem;
399452
}
453+
454+
.copy-btn {
455+
padding: 0.3rem 0.6rem;
456+
font-size: 0.7rem;
457+
}
400458
}
401459

402460
/* Large screens */
403461
@media (min-width: 1200px) {
404462
.container {
405463
padding: 0 2rem;
406464
}
465+
466+
header {
467+
min-height: 50vh;
468+
}
407469
}
408470

409471
/* Print styles */
410472
@media print {
411-
.btn {
473+
.btn, .copy-btn {
412474
display: none;
413475
}
414476

415477
.feature-card:hover {
416478
transform: none;
417479
}
418480
}
481+
482+
/* Smooth scrolling */
483+
html {
484+
scroll-behavior: smooth;
485+
}
419486
</style>
420487
</head>
421488
<body>
422489
<header>
423-
<div class="container">
490+
<div class="header-content">
424491
<h1>Coderive</h1>
425492
<p class="tagline">A modern, expressive programming language with interpreter and compiler capabilities</p>
426493
<div class="cta-buttons">
@@ -558,7 +625,10 @@ <h3>InterpreterRunner</h3>
558625
<li>Built-in debugging support</li>
559626
<li>AST visualization option</li>
560627
</ul>
561-
<div class="command">java -cp coderive.jar cod.runner.InterpreterRunner program.cod</div>
628+
<div class="command-container">
629+
<div class="command">java -cp coderive.jar cod.runner.InterpreterRunner program.cod</div>
630+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
631+
</div>
562632
</div>
563633
<div class="runner-card">
564634
<h3>CompilerRunner</h3>
@@ -568,7 +638,10 @@ <h3>CompilerRunner</h3>
568638
<li>Native assembly output</li>
569639
<li>MTOT optimization</li>
570640
</ul>
571-
<div class="command">java -cp coderive.jar cod.runner.CompilerRunner --native program.cod</div>
641+
<div class="command-container">
642+
<div class="command">java -cp coderive.jar cod.runner.CompilerRunner --native program.cod</div>
643+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
644+
</div>
572645
</div>
573646
<div class="runner-card">
574647
<h3>CommandRunner</h3>
@@ -578,7 +651,10 @@ <h3>CommandRunner</h3>
578651
<li>Flexible output options</li>
579652
<li>All features in one tool</li>
580653
</ul>
581-
<div class="command">java -cp coderive.jar cod.runner.CommandRunner -c program.cod</div>
654+
<div class="command-container">
655+
<div class="command">java -cp coderive.jar cod.runner.CommandRunner -c program.cod</div>
656+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
657+
</div>
582658
</div>
583659
<div class="runner-card">
584660
<h3>CoderiveREPL</h3>
@@ -588,7 +664,10 @@ <h3>CoderiveREPL</h3>
588664
<li>Multi-line input support</li>
589665
<li>State management</li>
590666
</ul>
591-
<div class="command">java -cp coderive.jar cod.runner.CoderiveREPL</div>
667+
<div class="command-container">
668+
<div class="command">java -cp coderive.jar cod.runner.CoderiveREPL</div>
669+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
670+
</div>
592671
</div>
593672
</div>
594673
</div>
@@ -635,9 +714,12 @@ <h2 class="section-title">Getting Started</h2>
635714
<div class="feature-card">
636715
<h3>1. Installation</h3>
637716
<p>Clone the repository and build the project:</p>
638-
<div class="command">git clone https://github.com/DanexCodr/Coderive.git
717+
<div class="command-container">
718+
<div class="command">git clone https://github.com/DanexCodr/Coderive.git
639719
cd Coderive
640720
./gradlew build</div>
721+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
722+
</div>
641723
</div>
642724
<div class="feature-card">
643725
<h3>2. Write Your First Program</h3>
@@ -649,7 +731,10 @@ <h3>2. Write Your First Program</h3>
649731
<div class="feature-card">
650732
<h3>3. Run Your Code</h3>
651733
<p>Execute your program with the interpreter:</p>
652-
<div class="command">java -cp build/libs/coderive.jar cod.runner.InterpreterRunner hello.cod</div>
734+
<div class="command-container">
735+
<div class="command">java -cp build/libs/coderive.jar cod.runner.InterpreterRunner hello.cod</div>
736+
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
737+
</div>
653738
</div>
654739
</div>
655740
</div>
@@ -701,6 +786,54 @@ <h3>3. Run Your Code</h3>
701786
}
702787
lastTouchEnd = now;
703788
}, false);
789+
790+
// Copy to clipboard function
791+
function copyToClipboard(button) {
792+
const commandContainer = button.parentElement;
793+
const commandElement = commandContainer.querySelector('.command');
794+
const textToCopy = commandElement.textContent || commandElement.innerText;
795+
796+
// Create a temporary textarea element
797+
const textarea = document.createElement('textarea');
798+
textarea.value = textToCopy;
799+
textarea.style.position = 'fixed';
800+
textarea.style.opacity = '0';
801+
document.body.appendChild(textarea);
802+
803+
// Select and copy the text
804+
textarea.select();
805+
textarea.setSelectionRange(0, 99999); // For mobile devices
806+
807+
try {
808+
const successful = document.execCommand('copy');
809+
if (successful) {
810+
// Show success feedback
811+
const originalText = button.textContent;
812+
button.textContent = 'Copied!';
813+
button.classList.add('copied');
814+
815+
setTimeout(() => {
816+
button.textContent = originalText;
817+
button.classList.remove('copied');
818+
}, 2000);
819+
}
820+
} catch (err) {
821+
console.error('Failed to copy text: ', err);
822+
}
823+
824+
// Clean up
825+
document.body.removeChild(textarea);
826+
}
827+
828+
// Add click handlers to all copy buttons
829+
document.addEventListener('DOMContentLoaded', function() {
830+
const copyButtons = document.querySelectorAll('.copy-btn');
831+
copyButtons.forEach(button => {
832+
button.addEventListener('click', function() {
833+
copyToClipboard(this);
834+
});
835+
});
836+
});
704837
</script>
705838
</body>
706839
</html>

0 commit comments

Comments
 (0)