Skip to content

Commit 006e3fd

Browse files
Aditya4478Aditya4478
authored
version2commit
1 parent 2a91a8e commit 006e3fd

4 files changed

Lines changed: 285 additions & 140 deletions

File tree

‎done.mp3‎

15 KB
Binary file not shown.

‎mn.css‎

Lines changed: 102 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,105 @@
1-
hr.style-three {
2-
height: 30px;
3-
border-style: solid;
4-
border-color: rgb(0, 255, 30);
5-
border-width: 6px 0 0 0;
6-
border-radius: 20px;
7-
}
1+
/* Colour changing effect */
2+
.shadow:hover:after{
3+
content: ' ';
4+
position: absolute;
5+
top: -2px;
6+
left: -2px;
7+
background: linear-gradient(45deg,#000000,#0000ff,#00ff00,#ffff00,#ff0000,#000000,#0000ff,#00ff00,#ffff00,#ff0000);
8+
background-size: 500%;
9+
width: calc(100% + 4px);
10+
height: calc(100% + 4px);
11+
z-index: -1;
12+
animation: animate 20s linear infinite;
13+
filter: blur(20px);
14+
}
15+
/* animation frame of above effect */
16+
@keyframes animate{
17+
0%{
18+
background-position: 0 0;
19+
}
20+
50%{
21+
background-position: 200% 0;
22+
}
23+
100%{
24+
background-position: 0 0;
25+
}
26+
}
827

9-
hr.style-three:before {
10-
display: block;
11-
content: "";
12-
height: 30px;
13-
margin-top: -31px;
14-
border-style: solid;
15-
border-color: black;
16-
border-width: 0px 0 5px 0;
17-
border-radius: 20px;
18-
}
28+
/* 1st Horizontal line */
29+
hr.style-one {
30+
margin: auto;
31+
width: 90%;
32+
height: 30px;
33+
border-style: solid;
34+
border-color: rgb(0, 255, 30);
35+
border-width: 6px 0 0 0;
36+
border-radius: 20px;
37+
}
38+
hr.style-one:before {
39+
display: block;
40+
content: "";
41+
height: 30px;
42+
margin-top: -31px;
43+
border-style: solid;
44+
border-color: black;
45+
border-width: 0px 0 5px 0;
46+
border-radius: 20px;
47+
}
1948

20-
hr.style-four {
21-
height: 30px;
22-
border-style: solid;
23-
border-color: rgb(0, 255, 30);
24-
border-width: 0 0 6px 0;
25-
border-radius: 20px;
26-
}
49+
/* 2nd & 3rd Horizontal line (middle)*/
50+
hr.style-two-three {
51+
background-color: rgb(0, 255, 30);
52+
height: 10px;
53+
border-radius: 35px;
54+
}
2755

28-
hr.style-four:before {
29-
display: block;
30-
content: "";
31-
height: 30px;
32-
margin-top: -31px;
33-
border-style: solid;
34-
border-color: black;
35-
border-width: 10px 0 0 0;
36-
border-radius: 20px;
37-
}
56+
/* 4th Horizontal line (last)*/
57+
hr.style-four {
58+
margin: auto auto 20px auto;
59+
width: 90%;
60+
height: 30px;
61+
border-style: solid;
62+
border-color: rgb(0, 255, 30);
63+
border-width: 0 0 6px 0;
64+
border-radius: 20px;
65+
}
66+
hr.style-four:before {
67+
68+
display: block;
69+
content: "";
70+
height: 30px;
71+
margin-top: -31px;
72+
border-style: solid;
73+
border-color: black;
74+
border-width: 10px 0 0 0;
75+
border-radius: 20px;
76+
}
77+
78+
/* formatting for table & textbox */
79+
textarea{
80+
width: 100%;
81+
height: 15vh;
82+
padding-left: 12px;
83+
padding-top: 10px;
84+
}
85+
table, th, td{
86+
border: 1px solid;
87+
88+
}
89+
90+
/* animation frame for disappearing table content. Called onclick. So animation frame calling part is handled by javascript */
91+
@keyframes myAnimation{
92+
0%{
93+
opacity: 1;
94+
transform: rotateX(90deg);
95+
}
96+
50%{
97+
opacity: 0.5;
98+
transform: rotateX(0deg);
99+
}
100+
100%{
101+
display: none;
102+
opacity: 0;
103+
transform: rotateX(90deg);
104+
}
105+
}

‎mn.html‎

Lines changed: 107 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,127 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="utf-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
<title>Magical Notes</title>
8-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
9-
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" />
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11+
crossorigin="anonymous"
12+
/>
1013
<link rel="stylesheet" href="mn.css" />
11-
</head>
14+
</head>
1215

13-
<body>
14-
<nav class="navbar navbar-expand-lg bg-primary">
15-
<div class="container-fluid">
16-
<a class="navbar-brand" href="#"><b>Notes</b></a>
17-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
18-
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
19-
aria-label="Toggle navigation">
20-
<span class="navbar-toggler-icon"></span>
21-
</button>
22-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
23-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
24-
<li class="nav-item">
25-
<a class="nav-link active" aria-current="page" href="https://tecke-adi.blogspot.com/">Home</a>
26-
</li>
27-
</ul>
28-
<form class="d-flex" role="search">
29-
<input class="form-control me-2" id="searchTxt" type="search" placeholder="Enter Keywords.."
30-
aria-label="Search" />
31-
<button class="btn btn-outline-success" type="submit">
32-
Search
33-
</button>
34-
</form>
35-
</div>
16+
<body>
17+
<!-- Navbar -->
18+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
19+
<div class="container-fluid">
20+
<a class="navbar-brand" href="#">Adi's ToDo List</a>
21+
<button
22+
class="navbar-toggler"
23+
type="button"
24+
data-bs-toggle="collapse"
25+
data-bs-target="#navbarSupportedContent"
26+
aria-controls="navbarSupportedContent"
27+
aria-expanded="false"
28+
aria-label="Toggle navigation"
29+
>
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
34+
<li class="nav-item">
35+
<a class="nav-link active" aria-current="page" href="#">Home</a>
36+
</li>
37+
<li class="nav-item">
38+
<a
39+
class="nav-link active"
40+
href="https://www.linkedin.com/in/aditya-bathani/" target="_blank"
41+
>LinkedIn</a
42+
>
43+
</li>
44+
<li class="nav-item">
45+
<a
46+
class="nav-link active"
47+
href="https://github.com/Aditya4478/Aditya4478" target="_blank"
48+
>GitHub</a
49+
>
50+
</li>
51+
</ul>
52+
<form class="d-flex" role="search">
53+
<input
54+
class="form-control me-2"
55+
style="width: 110%"
56+
id="searchInput"
57+
type="search"
58+
placeholder="Enter Keywords to search.."
59+
aria-label="Search"
60+
onkeyup="searchFun()"
61+
/>
62+
</form>
3663
</div>
64+
</div>
3765
</nav>
3866
<br />
3967
<h1 align="Center"><i>Welcome to Magic Notes</i>&#128516; !!</h1>
40-
<hr class="style-three" />
68+
<hr class="style-one" />
4169
<div class="container my-3">
42-
<div class="card">
43-
<div class="card-body">
44-
<h5 class="card-title">
45-
Jote Down Your Ideas Quickly &#128526;&#8986;
46-
</h5>
47-
<div class="form-floating">
48-
<textarea class="form-control" placeholder="Leave a comment here" id="addTxt"
49-
style="height: 100px"></textarea>
50-
<label for="floatingTextarea2">
51-
&#128466; Type like its very hot &#128293; &#128293;
52-
</label>
53-
<br />
54-
</div>
55-
<button class="btn btn-primary" id="addBtn">Add</button>
56-
</div>
70+
<div class="card">
71+
<div class="card-body shadow">
72+
<h5 class="card-title">
73+
Jote Down Your Ideas Quickly &#128526;&#8986;
74+
</h5>
75+
<div class="form-floating">
76+
<textarea
77+
style="font-family: cursive"
78+
placeholder="🗎 Type like its very hot 🔥 🔥"
79+
id="addTxt"
80+
style="height: 100px"
81+
></textarea>
82+
<br />
83+
</div>
84+
<button class="btn btn-primary" id="addBtn">Add</button>
5785
</div>
86+
</div>
87+
<hr class="style-two-three" />
88+
<h4><b>Your Notes</b></h4>
5889

59-
<hr style="
60-
background-color: rgb(0, 255, 30);
61-
height: 10px;
62-
border-radius: 35px;
63-
" />
64-
65-
<h4><b>Your Notes</b></h4>
66-
67-
<div id="notes" class="row container-fluid"></div>
90+
<div id="notes" class="row container-fluid">
91+
<table
92+
class="table"
93+
id="myTable"
94+
style="table-layout: fixed; word-wrap: break-word"
95+
>
96+
<thead>
97+
<tr align="center">
98+
<th scope="col" width="11%">Sr. No.</th>
99+
<th scope="col">Your Note</th>
100+
<th scope="col" width="11%">Actions</th>
101+
</tr>
102+
</thead>
103+
<tbody id="notes1"></tbody>
104+
</table>
105+
</div>
68106

69-
<hr style="
70-
background-color: rgb(0, 255, 30);
71-
height: 10px;
72-
border-radius: 35px;
73-
" />
107+
<hr class="style-two-three" />
74108

75-
<div align="center">
76-
<b>&#9888; Save your Notes as &#128466; in your device -->
77-
<button type="submit" id="subBtn" onclick="save_func()">Export Now !!</button>
78-
</div>
109+
<div align="center" style="margin-bottom: -25px">
110+
<b>&#9888; Save your Notes as &#128466; in your device --></b>
111+
<button type="submit" id="subBtn" onclick="save_func()">
112+
Export Now !!
113+
</button>
114+
<audio id="audio" src="done.mp3"></audio>
115+
</div>
79116
</div>
80117
<hr class="style-four" />
81118

82119
<script src="mn.js"></script>
83-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
84-
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
85-
crossorigin="anonymous"></script>
86-
<script>
87-
88-
</script>
89-
</body>
90-
91-
</html>
120+
<script
121+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
122+
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
123+
crossorigin="anonymous"
124+
></script>
125+
<script></script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)