Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

duplicated link removal #1232

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

duplicated link removal #1232

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 105 additions & 97 deletions index.html
View file
Open in desktop
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>