From bf322d9e06aac07ef736653880322fb3ae303772 Mon Sep 17 00:00:00 2001 From: karthik Date: Sat, 1 Jul 2023 21:01:14 +0530 Subject: [PATCH] Pomodoro page --- Pomodro_page/reward.css | 247 +++++++++++++++++++++++++++++++++++---- Pomodro_page/reward.html | 47 ++++---- 2 files changed, 250 insertions(+), 44 deletions(-) diff --git a/Pomodro_page/reward.css b/Pomodro_page/reward.css index fc4f5813..7363fcb1 100644 --- a/Pomodro_page/reward.css +++ b/Pomodro_page/reward.css @@ -17,35 +17,161 @@ ol { color: rgb(0, 0, 0); } +.nav { + height: 70px; + background-color: #2980b9 !important; + box-shadow: 0 3px 15px rgba(51, 49, 49, 0.4); + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 20px; + position: sticky; + z-index: 99; + top: 0; + font-family: sans-serif; + user-select: none; +} + +.navbar-logo { + display: flex; + align-items: center; + text-transform: uppercase; + font-size: 20px; + letter-spacing: 1px; + padding-left: 18px; +} + +.navbar-logo img { + width: 60px; + background-color: antiquewhite; + border-radius: 10%; +} + +.navbar-logo span { + font-weight: bold; + color: white; + margin-left: 10px; +} +.navbar-logo a:hover { + text-decoration: none; +} +.nav ul li { + display: inline-block; + padding: auto 20px; +} +.nav-menu { + margin-bottom: 0; + padding-left: 0; +} + +.about { + margin-left: 80px; + margin-right: 80px; +} + +.nav ul li a { + color: white !important; + display: block; + padding: 0 15px; + line-height: 70px; + font-size: 17px; + background-color: #2980b9 !important; + transition: 0.3s; + letter-spacing: 1px; + margin: 0; +} + +.nav ul li a.active:hover { + color: black ; + text-decoration: underline; + text-decoration-color: black; +} + +.dropdown:hover > a { + color: black; + text-decoration: underline; + text-decoration-color: black; +} + +.nav ul ul { + position: absolute !important; + top: 85px; + border-top: 3.5px solid #8ad0ff; + background-color: none; + opacity: 0; + visibility: hidden; + padding-left: 0; +} + +.nav ul li:hover > ul { + top: 70px; + opacity: 1; + visibility: visible; + transition: 0.3s linear; + list-style: none; +} + +.nav ul ul li { + width: 310px; + display: list-item; + position: relative; + border: 1px solid #8ad0ff; + border-top: none; +} + +a.dropdown-item{ + margin: 0 !important; +} + +.nav ul ul li a { + line-height: 25px; + padding: 10px 15px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); +} + +/* Google Translate */ +#google_translate_element select { + background-color: #f6edfd; + color: black; + border: none; + border-radius: 3px; + padding: 6px 8px; + cursor: pointer; +} + .pomodoro-timer { display: flex; - justify-content: center; + margin: 2rem; align-items: center; + justify-content: center; } .timer { display: flex; flex-direction: column; align-items: center; - border-radius: 10px; + border-radius: 0.2cm; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 10px; - background-color: white; - height: 3rem; + background-color: #0077b6; + height: 3.5rem; } .time-left { display: flex; align-items: center; - font-size: 22px; + justify-content: center; + font-size: 1.4rem; font-weight: bold; - margin-bottom: 25px; + margin-bottom: 10px; + color: white; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .inline-text { - text-align: center; - margin: 0 10px; - font-family: 'Roboto', sans-serif; + margin-top: 2rem; + margin-left: 2rem; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .inline-image { @@ -54,7 +180,7 @@ ol { } .pomodoro-text { - margin-top: 5rem; + margin-top: 2rem; margin-left: 2rem; } @@ -62,23 +188,38 @@ button { font-size: 16px; font-weight: bold; color: white; - background-color: #2980b9; + background-color: #023e8a; border: none; border-radius: 5px; padding: 10px 30px; margin: 5px; - margin-right: 10; + margin-right: 10px; cursor: pointer; + position: relative; + overflow: hidden; } -.start { - border-radius: 10px; +.start,.reset{ + border-radius: 0.2cm; + font-size: 1.4rem; } -.reset { - border-radius: 10px; +.start::after, +.reset::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + background: linear-gradient(to right, #03045e, transparent); + transition: width 0.3s; } +.start:hover::after, +.reset:hover::after { + width: 100%; +} p a button { font-size: 16px; font-weight: bold; @@ -106,7 +247,8 @@ div p a { } .list-paragraph { - font-family: 'Montserrat', sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 1.4rem; } button:hover { @@ -114,10 +256,6 @@ button:hover { color: black; } -button:active { - background-color: #b71c1c; -} - .navbar-logo img { width: 60px; background-color: antiquewhite; @@ -125,9 +263,70 @@ button:active { object-fit: cover; } - - footer img { width: 128px; border-radius: 50%; -} \ No newline at end of file +} +.pomodoro{ + font-family: cursive; +} +.pomodoro_container{ + margin: 2rem; + background-color: #faedcd; + border-radius: 0.4cm; + padding: 1rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.pomodoro_container p{ + font-size: 1.5rem; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + + +.header { + background-color: #2980b9; + color: #fff; + text-align: center; + padding: 50px; +} + +.header h1 { + font-size: 50px; + margin: 0; +} + +.header p { + font-size: 24px; + margin: 0; + padding-top: 10px; +} + +.content { + margin: 50px; + text-align: justify; + font-size: 20px; + line-height: 1.5; + color: #2980b9; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +.content img { + background-color: antiquewhite; + margin-right: 20px; +} + +footer .logo { + border-radius: 50%; +} + +footer img{ + position: absolute; + left: 56rem; + height:7rem; + width: 7rem; +} + + diff --git a/Pomodro_page/reward.html b/Pomodro_page/reward.html index 40298d50..4fbd2526 100644 --- a/Pomodro_page/reward.html +++ b/Pomodro_page/reward.html @@ -19,14 +19,16 @@ - + + + + - + @@ -78,8 +80,15 @@ -
-

Pomodoro Feature

+
+

What is Pomodoro?

+

+ The Pomodoro Technique is a time management method.The main idea behind the Pomodoro Technique is to break + work into manageable intervals, allowing you to maintain focus and avoid burnout.By using the Pomodoro + Technique, you can improve your productivity and manage your time more effectively. The structured + intervals help you work with greater concentration while the breaks provide opportunities for rest and + rejuvenation. +

@@ -89,16 +98,16 @@

Pomodoro Feature

- +
+

How to use the Pomodoro Feature

+
- - - +

This is an excellent feature that can help users integrate spiritual learning into their daily routine and promote a healthier work-life balance.

-

+

  1. Set a timer for 25 minutes and work on your task.

    @@ -106,21 +115,19 @@

    This is an excellent feature that can help users integrate spiritual learnin

  2. After 25 minutes, take a 5-minute break. An alert will be there to read a Bhagavad Gita shloka with explanation.

    -
    3. -
  3. -

    After 4 breaks, take a 30-minute break.

    -
    4. -
  4. -

    Repeat the process until you complete all the tasks.

    -
    5. -

+ +
  • +

    After 4 breaks, take a 30-minute break.

    +
    • +
  • +

    Repeat the process until you complete all the tasks.

    +
    • +

    Good Luck!

    - -