Skip to content

Commit

Permalink
duplicated link removal
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nehakumarigupta
Nehakumarigupta committed Nov 9, 2024
1 parent 837562c commit b17b66a
Showing 1 changed file with 105 additions and 97 deletions.
202 changes: 105 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,33 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Canvas Tool</title>
<meta name="description" content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">
<meta name="keywords" content="canvas editor, drawing tool, image editor, interactive editor, digital canvas, online drawing, image editing features, paint tool, art editor, graphic design tool, photo editing, vector editor, HTML5 canvas, JavaScript drawing, online sketch, freehand drawing, digital art tool, custom brushes, canvas manipulation, web-based editor, graphics editor, color palette, shape editor, text overlay, photo effects, pixel art, raster editor, online image editor, creative tools, visual editor">
<meta name="description"
content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://github.com/vishanurag/Canvas-Editor">
<meta property="og:title" content="Canvas Editor - Interactive Drawing & Editing Tool">
<meta property="og:description" content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">
<meta property="og:image" content="resources/favicon.ico">
<meta property="og:description"
content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">
<meta property="og:image" content="resources/favicon.ico">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://github.com/vishanurag/Canvas-Editor">
<meta property="twitter:title" content="Canvas Editor - Interactive Drawing & Editing Tool">
<meta property="twitter:description" content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">
<meta property="twitter:image" content="resources/favicon.ico">

<meta property="twitter:description"
content="Canvas Editor is an intuitive, interactive tool for drawing, editing, and enhancing digital images directly on a canvas. Supports a wide range of brushes, colors, and editing features.">
<meta property="twitter:image" content="resources/favicon.ico">

<!-- Additional SEO Tags -->
<meta name="keywords" content="canvas editor, drawing tool, image editor, interactive editor, digital canvas, online drawing, image editing features">
<meta name="keywords"
content="canvas editor, drawing tool, image editor, interactive editor, digital canvas, online drawing, image editing features">
<meta name="author" content="Vishanurag">
<link rel="canonical" href="https://github.com/vishanurag/Canvas-Editor">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="icon" href="resources/favicon.ico" type="image/ico">

<div class="visitor-counter">
<div>Visitor</div>
<div class="website-counter"></div>
Expand Down Expand Up @@ -159,7 +162,7 @@
padding: 0;
background-color: #f0f0f0;
display: flex;
overflow-x: hidden;
overflow-x: hidden;
}

.sidebar {
Expand Down Expand Up @@ -189,7 +192,7 @@
background-color: #911da1;
}

.canvas{
.canvas {
padding-right: 50px;
padding-left: 10px;
}
Expand All @@ -209,6 +212,7 @@
align-items: center;
padding-bottom: 50px;
}

.navbar h1 {
color: rgb(126, 36, 36);
margin: 0px;
Expand All @@ -221,7 +225,7 @@
gap: 20px;
margin: auto;
align-items: center;

}

.nav-links a {
Expand Down Expand Up @@ -330,7 +334,7 @@
gap: 20px;
max-width: 900px;
margin: 0 auto;

}

.newsletter-section input {
Expand All @@ -348,7 +352,7 @@
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;

}

.newsletter-section button:hover {
Expand Down Expand Up @@ -395,7 +399,8 @@
cursor: pointer;
color: #5c2872;
}
.profile{

.profile {
font-size: 2rem;
padding-right: 1rem;
}
Expand Down Expand Up @@ -440,12 +445,12 @@
<div class="circle"></div>
<div class="circle"></div>
<div class="sidebar">

<button id="tools-btn">Tools 🔧</button>
<button id="settings-btn">Settings ⚙️</button>
<button id="help-btn">Help ❓</button>


</div>
<div class="main-content">
<nav class="navbar">
Expand All @@ -466,61 +471,64 @@ <h1 class="canvas">Canvas Editor</h1>

<a href="login.html">Login</a>

<!-- Profile Icon -->

<a href="./profile.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 35px; height: 35px; border-radius: 50%; margin-top: -1px; align-items: center;">
<!-- Profile Icon -->

<a href="./profile.html" class="profile-link"
style="display: flex; align-items: center; text-decoration: none;">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon"
style="width: 35px; height: 35px; border-radius: 50%; margin-top: -1px; align-items: center;">
</a>
</li>

<style>
/* Override the existing hover styles */
.navbar-nav .nav-item .profile-link:hover {
background-color: transparent !important;
/* Remove background color */
border-radius: 0 !important;
/* Reset border radius */
transform: none !important;
/* Prevent scaling */
}

/* Override the existing hover styles */
.navbar-nav .nav-item .profile-link:hover {
background-color: transparent !important; /* Remove background color */
border-radius: 0 !important; /* Reset border radius */
transform: none !important; /* Prevent scaling */
}


.profile-icon {

border-radius: 50%;
position: relative;
margin-left: 20px;
Margin-top: 100px;

}
.profile-icon {

.dropdown-menu {
border-radius: 50%;
position: relative;
margin-left: 20px;
Margin-top: 100px;

display: none;
position: absolute;
top: 35px; /* Adjust based on the height of your navbar */
right: 0;
background-color: white;
color: black;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 1;
}

}
.dropdown-menu {

.dropdown-menu a {
display: none;
position: absolute;
top: 35px;
/* Adjust based on the height of your navbar */
right: 0;
background-color: white;
color: black;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 1;

display: block;
padding: 10px 15px;
text-decoration: none;
}

}
.dropdown-menu a {

.dropdown-menu a:hover {
display: block;
padding: 10px 15px;
text-decoration: none;

background-color: #f1f1f1;
}

}
.dropdown-menu a:hover {

background-color: #f1f1f1;

}
</style>

<script>
Expand All @@ -531,7 +539,7 @@ <h1 class="canvas">Canvas Editor</h1>
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
window.onclick = function (event) {
if (!event.target.matches('.profile-icon img')) {
const menu = document.getElementById('profileMenu');
if (menu.style.display === 'block') {
Expand All @@ -542,9 +550,9 @@ <h1 class="canvas">Canvas Editor</h1>

</script>








</div>
Expand Down Expand Up @@ -883,48 +891,48 @@ <h3>Subscribe to our Newsletter</h3>
}
}

// Save the current state to history
// Save the current state to history
function saveState() {
history.push(canvas.toDataURL());
}
history.push(canvas.toDataURL());
}

// Undo function
// Undo function
function undo() {
if (history.length > 0) {
redoStack.push(history.pop());
restoreState(history[history.length - 1]);
}
}

// Redo function
function redo() {
if (redoStack.length > 0) {
const redoState = redoStack.pop();
history.push(redoState); // Move redo state back to history
restoreState(redoState); // Restore the redo state
}
}

// Restore the canvas state
function restoreState(dataUrl) {
if (dataUrl) {
const img = new Image();
img.src = dataUrl;
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas if no history
}
}
if (history.length > 0) {
redoStack.push(history.pop());
restoreState(history[history.length - 1]);
}
}

// Redo function
function redo() {
if (redoStack.length > 0) {
const redoState = redoStack.pop();
history.push(redoState); // Move redo state back to history
restoreState(redoState); // Restore the redo state
}
}

// Restore the canvas state
function restoreState(dataUrl) {
if (dataUrl) {
const img = new Image();
img.src = dataUrl;
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas if no history
}
}

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
document.getElementById('undoButton').addEventListener('click', undo);
document.getElementById('redoButton').addEventListener('click', redo);
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
document.getElementById('undoButton').addEventListener('click', undo);
document.getElementById('redoButton').addEventListener('click', redo);


window.embeddedChatbotConfig = {
Expand Down Expand Up @@ -1211,4 +1219,4 @@ <h2>How likely are you to recommend the Creative Canvas Tool to others?</h2>
</script>
</body>

</html>
</html>

0 comments on commit b17b66a

Please sign in to comment.