-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (124 loc) · 6.24 KB
/
index.html
File metadata and controls
138 lines (124 loc) · 6.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to Code Console, your go-to platform for coding resources and tools. Stay tuned as we launch soon!">
<meta name="keywords" content="Code Console, coding resources, programming, blog, blogging, tech, web, web-development, developer tools">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://codeconsole.dev/"> <!-- Main domain -->
<!-- Domain aliases -->
<link rel="alternate" href="https://codeconsole.app/" hreflang="en">
<link rel="alternate" href="https://codeconsole.blog/" hreflang="en">
<link rel="alternate" href="https://codeconsole.cloud/" hreflang="en">
<link rel="alternate" href="https://codeconsole.in/" hreflang="en">
<link rel="alternate" href="https://codeconsole.info/" hreflang="en">
<link rel="alternate" href="https://codeconsole.life/" hreflang="en">
<link rel="alternate" href="https://codeconsole.link/" hreflang="en">
<link rel="alternate" href="https://codeconsole.live/" hreflang="en">
<link rel="alternate" href="https://codeconsole.online/" hreflang="en">
<link rel="alternate" href="https://codeconsole.shop/" hreflang="en">
<link rel="alternate" href="https://codeconsole.site/" hreflang="en">
<link rel="alternate" href="https://codeconsole.space/" hreflang="en">
<link rel="alternate" href="https://codeconsole.store/" hreflang="en">
<link rel="alternate" href="https://codeconsole.tech/" hreflang="en">
<link rel="alternate" href="https://codeconsole.website/" hreflang="en">
<link rel="alternate" href="https://codeconsole.xyz/" hreflang="en">
<title>Welcome to Code Console</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #222224;
padding: 1rem;
box-sizing: border-box;
}
.type-text {
font-family: "Pixelify Sans", serif;
color: #ccc;
font-size: 3.2rem; /* Large font size for larger screens */
white-space: nowrap; /* Prevent wrapping on larger screens */
overflow: hidden;
border-right: 0.2em solid #ccc; /* Thicker caret */
display: inline-block;
padding-right: 0.2em; /* Space for the caret */
position: relative; /* Position relative for caret blinking */
line-height: 1; /* Ensure caret is vertically aligned */
}
/* Underline style for the specific text */
.underline {
text-decoration: underline; /* Underline the text */
color: #90e577; /* Optional: Change color to match other text */
}
/* Mobile responsive adjustments */
@media (max-width: 600px) {
.type-text {
font-size: 2rem; /* Adjusted font size for mobile */
white-space: normal; /* Allow text wrapping */
width: auto; /* Let the width adjust based on content */
}
}
/* Tablet responsive adjustments */
@media (min-width: 601px) and (max-width: 1024px) {
.type-text {
font-size: 2.5rem; /* Adjusted font size for tablets */
white-space: nowrap; /* Keep text in a single line */
padding-right: 0.3em; /* Slightly increase space for caret */
}
}
</style>
</head>
<body>
<div class="type-text" id="typewriter">> </div>
<script>
const text = "Hello, codeconsole.dev is launching soon."; // Main text
const underlinedText = "codeconsole.dev"; // Text to underline
const typeSpeed = 100; // Typing speed in milliseconds
const initialBlinkSpeed = 100; // Initial blinking speed (while typing)
const finalBlinkSpeed = 200; // Final blinking speed (after typing)
let index = 0;
let isBlinking = true;
let blinkInterval; // To store the blinking interval
// Function to start blinking the caret
function startBlinkingCaret(speed) {
const typewriterElement = document.getElementById("typewriter");
clearInterval(blinkInterval); // Clear any existing interval
blinkInterval = setInterval(() => {
typewriterElement.style.borderRightColor = isBlinking ? "transparent" : "#ccc";
isBlinking = !isBlinking; // Toggle blinking state
}, speed); // Use the provided speed for blinking interval
}
function stopBlinkingCaret() {
clearInterval(blinkInterval); // Stop the blinking when typing is done
const typewriterElement = document.getElementById("typewriter");
typewriterElement.style.borderRightColor = "#ccc"; // Ensure caret is visible after typing
}
function typeWriter() {
const typewriterElement = document.getElementById("typewriter");
const textLength = text.length; // Total length of the text
// Start blinking the caret with initial speed before typing starts
startBlinkingCaret(initialBlinkSpeed);
if (index < textLength) {
// Check if we are typing the underlined text
const currentText = text.substring(0, index + 1);
const formattedText = currentText.replace(underlinedText, `<span class='underline'>${underlinedText}</span>`);
typewriterElement.innerHTML = `> ${formattedText}`; // Use innerHTML to render HTML
index++;
setTimeout(typeWriter, typeSpeed); // Repeat function with delay
} else {
// Stop the initial caret blinking
stopBlinkingCaret();
// Start final blinking after a short delay
setTimeout(() => {
startBlinkingCaret(finalBlinkSpeed); // Set final blinking speed to 3 seconds
}, 0); // Optional delay before starting the 3-second blinking
}
}
// Start the typing effect
typeWriter();
</script>
</body>
</html>