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

Improved the UI of pomodoro spiritual webpage #1789

Closed
wants to merge 1 commit into from
Closed

Improved the UI of pomodoro spiritual webpage #1789

Show file tree
Hide file tree
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
86 changes: 65 additions & 21 deletions Pomodro_page/reward.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@
}

body {
background-color: #2980b9;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url();
}
p {
color: rgb(0, 0, 0);
color: rgb(41, 50, 93);
}

ol {
Expand All @@ -31,9 +28,13 @@ ol {

.pomodoro-timer {
display: flex;
margin: 2rem;
margin: 0.2rem;
align-items: center;
justify-content: center;
border:4px solid white;
padding:120px;
background-color:rgba(137, 195, 197, 0.34);
border-radius: 10px;
}

.timer {
Expand Down Expand Up @@ -102,22 +103,22 @@ button {
.start,.reset{
border-radius: 0.2cm;
font-size: 1.4rem;
background-color: #023e8a;
background-color: #2a69bd;
color: white;
padding: 10px 30px;
font-weight: bold;
}

.start::after,
.reset::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(to right, #03045e, transparent);
background:#548fee;
transition: width 0.3s;
color:#2980b9
}

.start:hover::after,
Expand Down Expand Up @@ -166,25 +167,37 @@ button:hover {
border-radius: 50%;
object-fit: cover;
}

.navbar{
background: linear-gradient(to right,rgb(246, 235, 220), rgb(243, 227, 252)) ;
}
/* footer img {
width: 128px;
border-radius: 50%;
} */
.pomodoro{
font-family: cursive;
font-family:fantasy;
font-size: 2rem;
color:brown;
}

.container{
margin: 0.2rem;
background-color: #f5d480;
border-radius: 0.4cm;
padding: 1rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.pomodoro_container{
margin: 2rem;
background-color: #faedcd;
margin: 0.2rem;
background-color: #f5d480;
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;
Expand Down Expand Up @@ -280,11 +293,6 @@ button:hover {
font-size: 1.2rem;
}

.container-header{
margin: 100px auto 100px auto;
padding: 150px;
}

/* footer .logo {
border-radius: 50%;
}
Expand All @@ -296,9 +304,25 @@ footer img{
width: 7rem;
}
*/

@media only screen and (max-width: 30000px) {
.container-header{
margin:580px auto 100px auto;
padding: 150px;
}
}
@media only screen and (max-width: 1100px) {
.container-header{
margin:50px auto 100px auto;
padding: 150px;
}
}

/* Common styles for responsiveness */
@media only screen and (max-width: 768px) {
.container-header{
margin:10px auto 100px auto;
padding: 150px;
}
.container-header {
padding: 50px;
}
Expand Down Expand Up @@ -328,6 +352,7 @@ footer img{

/* Styles for smaller screens */
@media only screen and (max-width: 576px) {

.container-header {
margin: 50px auto;
padding: 30px;
Expand Down Expand Up @@ -360,6 +385,7 @@ footer img{

/* Styles for extra small screens */
@media only screen and (max-width: 360px) {

.header h1 {
font-size: 24px;
}
Expand All @@ -381,7 +407,11 @@ footer img{

/* Styles for smaller screens */
@media only screen and (max-width: 320px) {
.header h1 {
.container-header{
margin:20px auto 100px auto;
padding: 150px;
}
.header h1 {
font-size: 20px;
}
.header p {
Expand All @@ -397,3 +427,17 @@ footer img{
margin-left: 0.1rem;
}
}
.pomodoro_feature{
background-color:rgb(229, 160, 110);
border-radius: 10px;
}
.pomodoro_feature_heading{
color:brown;
font-weight: 200;
font-family:fantasy;
}
.list-paragraph{
font-size: 1rem;
color:black;
font-weight: 400;
}
41 changes: 23 additions & 18 deletions Pomodro_page/reward.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,37 +51,35 @@
</div>

<section class="mt-8 py-4 w-full flex flex-col">
<div class="pomodoro_container">
<h1 class="pomodoro">What is Pomodoro?</h1>
<p style="margin-top: 6px;">
<br><br><br>
<div class="pomodoro_container">
<center><h1 class="pomodoro">What is Pomodoro?</h1></center>
<p style="margin-top: 6px; font-size: 20px;">
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.
</p>
</div>
<div class="pomodoro-timer">
<button class="start">Start</button>
<div class="timer" id="app">
<div class="time-left">25:00</div>
</div>
<button class="reset">Reset</button>
</div>
<br><br>
<div class="pomodoro_feature">
<div class="inline-text">
<h1><b>How to use the Pomodoro Feature</b></h1>
<b><center><h1 class="pomodoro_feature_heading">How to use the Pomodoro Feature?</h1></center></b>
</div>
<script src="reward.js"></script>
<div class="pomodoro-text">
<h4>This is an excellent feature that can help users integrate spiritual learning into their daily routine and
promote a healthier work-life balance.</h4>
<br>
<h3 style=" color:#ebdcdc;font-weight: 700;">This is an excellent feature that can help users integrate spiritual learning into their daily routine and
promote a healthier work-life balance.</h3>
<br>
<p>
<ol type="1">
<li>
<p class="list-paragraph">1. Set a timer for 25 minutes and work on your task.</p>
</li>
<li>
<p class="list-paragraph">2. After 25 minutes, take a 5-minute break. An alert will be there to read a Bhagavad
Gita <a href="../shlok_page/motivation.html">shloka</a> with explanation.</p>
&nbsp;&nbsp;&nbsp;&nbsp;Gita<span class="shloka_page_directing"><a href="../shlok_page/motivation.html" style="color:black;font-size:17px;" >shloka</a></span>with explanation.</p>
</li>
<li>
<p class="list-paragraph">3. After 4 breaks, take a 30-minute break.</p>
Expand All @@ -93,17 +91,24 @@ <h4>This is an excellent feature that can help users integrate spiritual learnin
</p>
<br>
<h2 class="text-center mx-auto text-20xl text-blue-500 font-semibold" >Good Luck!</h2>
<br>
</div>
</div>
<br><br>
<div class="pomodoro-timer">
<button class="start">Start</button>
<div class="timer" id="app">
<div class="time-left">25:00</div>
</div>
<button class="reset">Reset</button>
</div>
</section>



</div>

<div id="about" class="container container-header">
<div class="row">
<div class="col-sm-12">
<div class="d-flex flex-column align-items-center bg-light p-5 rounded-lg shadow-md" style="border-radius: 35px; box-shadow: 0 2px 4px rgba(255, 255, 0, 0.5);">
<div class="d-flex flex-column align-items-center bg-light p-5 rounded-lg shadow-md" style="border-radius: 35px; box-shadow: 0 2px 4px rgba(19, 19, 1, 0.5);">
<a class="float-left mr-5"></a>
<div class="header">
<h1 class="text-3xl font-bold">Pomodoro Spiritual Break</h1>
Expand Down
Loading