time and search in google

2024-05-28 10:08:26 +07:00
parent 38d566cc84
commit 8cf421b8c3
10 changed files with 106 additions and 4 deletions
@@ -3,6 +3,7 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
+    padding: 10px;
 }

 .header-text {
@@ -39,3 +40,12 @@
    text-shadow: white 0 0 30px;
    margin: 0 10px;
 }
+
+.time {
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.time:hover {
+    text-shadow: white 0 0 20px;
+}
@@ -2,11 +2,14 @@
    width: 50%;
    height: 20%;
    display: grid;
-    grid-template-columns: auto auto auto auto;
+    grid-template-columns: auto auto auto auto auto auto;
    align-content: center;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(5px);
+    border-radius: 10px;
 }

 .icon {
@@ -10,3 +10,8 @@ body {
    padding: 10px;
    background-color: black;
 }
+
+iframe {
+    width: 50%;
+    height: 50%;
+}
@@ -0,0 +1,21 @@
+.searchblock {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#search-in-google {
+    padding: 10px 50px;
+    font-size: 20px;
+    margin: 10px;
+    border-radius: 30px;
+    border: none;
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(5px);
+    transition: 0.3s;
+}
+
+#search-in-google:hover {
+    box-shadow: white 0 0 20px;
+}
@@ -6,11 +6,13 @@
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/search.css">
    <title>Dashboard</title>
 </head>
 <body>
    <div class="header">
        <h1 class="header-text">Dashboard</h1>
+        <h1 class="time"></h1>
        <div class="user">
            <h2 class="username">Tola Mironcenko</h2>
            <div class="usericon">
@@ -18,12 +20,15 @@
            </div>
        </div>
    </div>
+    <div class="searchblock">
+        <input type="text" name="search-in-google" id="search-in-google" placeholder="Search in Google">
+    </div>
    <div class="icons">
-        <div class="icon">
+        <!-- <div class="icon">
            <a href="https://google.com">
                <img src="img/google-icon.png" alt="google-icon">
            </a>
-        </div>
+        </div> -->
        <div class="icon">
            <a href="https://web.telegram.org/k/">
                <img src="img/telegram-icon.jpeg" alt="telegram-icon">
@@ -39,7 +44,18 @@
                <img src="img/gitea-icon.png" alt="gitea-icon">
            </a>
        </div>
+        <div class="icon">
+            <a href="http://notes.local.com">
+                <img src="img/notes-icon.jpeg" alt="gitea-icon">
+            </a>
+        </div>
+        <div class="icon">
+            <a href="http://money.local.com">
+                <img src="img/money-icon.jpg" alt="gitea-icon">
+            </a>
+        </div>
    </div>
-    <!-- <iframe src="https://google.com" frameborder="0"></iframe> -->
+    <script src="js/time.js"></script>
+    <script src="js/search.js"></script>
 </body>
 </html>
@@ -0,0 +1,9 @@
+const searchinput = document.querySelector('#search-in-google')
+
+searchinput.addEventListener('keydown', (e) => {
+    if (e.keyCode === 13) {
+        e.preventDefault()
+        let searchvalue = searchinput.value
+        window.location.replace(`https://google.com/search?q=${searchvalue}`)
+    }
+})
@@ -0,0 +1,38 @@
+const timeblock = document.querySelector('.time')
+
+let intervalid = true
+
+setInterval(() => {
+    intervalid?timeblock.innerHTML = getTimeNow():timeblock.innerHTML = [getDateNow(), getWeekDayNow()].join('  ')
+}, 1000)
+
+const getTimeNow = () => {
+    let date = new Date()
+    let hours = date.getHours()
+    if (hours < 10) hours = '0'+hours
+    let minutes = date.getMinutes()
+    if (minutes < 10) minutes = '0'+minutes
+    let seconds = date.getSeconds()
+    if (seconds < 10) seconds = '0'+seconds
+    return [hours, minutes, seconds].join(':')
+}
+
+const getDateNow = () => {
+    let date = new Date()
+    let year = date.getFullYear()
+    let month = date.getMonth()
+    if (month < 10) month = '0'+month
+    let day = date.getDate()
+    if (day < 10) day = '0'+day
+    return [day, month, year].join('.')
+}
+
+const getWeekDayNow = () => {
+    let date = new Date()
+    let weekdays = ['monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+    return weekdays[date.getDay()-1]
+}
+
+timeblock.addEventListener('click', () => {
+    intervalid = !intervalid
+})