-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (116 loc) · 5.67 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dilshad Hussain">
<meta name="username" content="ShadBalti">
<title>Simple Image Editor</title>
<!-- Add Bootstrap CSS via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Link your custom style.css for additional styling -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Allow users to select a theme -->
<select id="theme-selector" class="form-control">
<option value="theme-light">Light Theme</option>
<option value="theme-dark">Dark Theme</option>
</select>
</head>
<body>
<div class="container">
<h1 class="mt-4">Simple Image Editor</h1>
<!-- Add a new button for Undo -->
<button id="undo" class="btn btn-secondary">Undo</button>
<!-- Add a new button for Redo -->
<button id="redo" class="btn btn-secondary">Redo</button>
<div class="row mt-4">
<div class="col-md-6">
<input type="file" id="image-input" accept="image/*" class="form-control">
<input type="text" id="image-url" placeholder="Enter image URL" class="form-control mt-2">
<button id="load-image" class="btn btn-primary mt-2">Load Image</button>
<div id="image-container" class="mt-4">
<img id="edited-image" src="" alt="Edited Image" class="img-fluid">
</div>
<!-- Add a button to download the edited image -->
<button id="download" class="btn btn-primary mt-2">Download Image</button>
<!-- Add a button to share the edited image -->
<button id="share" class="btn btn-primary mt-2">Share Image</button>
</div>
<div class="col-md-6">
<div id="controls">
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" min="0" max="200" value="100" class="form-control">
<br>
<label for="opacity">Opacity:</label>
<input type="range" id="opacity" min="0" max="100" value="100" class="form-control">
<br>
<label for="blur">Blur:</label>
<input type="range" id="blur" min="0" max="10" value="0" class="form-control">
<br>
<label for="contrast">Contrast:</label>
<input type="range" id="contrast" min="0" max="200" value="100" class="form-control">
<br>
<button id="invert" class="btn btn-secondary">Invert Colors</button>
<button id="rotate" class="btn btn-secondary">Rotate 90°</button>
<button id="resize-plus" class="btn btn-secondary">Resize +</button>
<button id="resize-minus" class="btn btn-secondary">Resize -</button>
</div>
</div>
</div>
</div>
</div>
<footer id="owner-section" class="py-4">
<div class="container mx-auto">
<div class="row">
<div class="col-md-6">
<img src="image/owner-min.jpg" alt="Owner's Image" class="img-fluid rounded-circle">
</div>
<div class="col-md-6">
<h4>Dilshad Hussain</h4>
<p>Contact Information:</p>
<p><i class="bi bi-telephone"></i> Phone: 03408452974</p>
<p><i class="bi bi-envelope"></i> Email: [email protected]</p>
<p>Physical Address: Barah Khaplu, Skardu, Pakistan</p>
<p id="clock"></p> <!-- Dynamic clock -->
<div class="social-feed mt-3">
<!-- Social media feed (use appropriate embed code or widget) -->
<!-- Example Twitter embed code -->
<a class="twitter-timeline" data-height="200" href="https://twitter.com/ShadBalti" data-tweet-limit="3">Tweets by ShadBalti</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-md-6">
<h5>About Us</h5>
<p>I'm Dilshad Hussain, a web developer. I love coding and creating websites that work beautifully. </p>
</div>
</div>
</div>
</footer>
<!-- Add Bootstrap JS via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Include your JavaScript code here -->
<script src= "main.js">
</script>
<script>
// Your JavaScript code goes here
const themeSelector = document.getElementById("theme-selector");
const body = document.body;
themeSelector.addEventListener("change", () => {
const selectedTheme = themeSelector.value;
body.className = selectedTheme;
});
</script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "jh4f1ktu9s");
</script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> </script>
</body>
</html>