Skip to content

Commit

Permalink
improve pomodoro timer with the new PiP mode.
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitmerchant1990
amitmerchant1990 committed Oct 29, 2024
1 parent c8e7a8a commit f25c35a
Show file tree
Hide file tree
Showing 7 changed files with 363 additions and 213 deletions.
56 changes: 51 additions & 5 deletions pomodoro-timer/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@ body {
}

.nav-tabs {
font-size: 20px;
font-size: 1.4em;
}

.pip-icon {
cursor: pointer;
}

.full-width {
/*width:50% !important;*/
margin-bottom: 10px;
font-size: 20px;
padding: 20px;
border-radius: 10px !important;
Expand All @@ -32,6 +34,50 @@ body {
padding-left: 12px;
color: white;
font-weight: bold;
justify-content: space-between;
align-items: center;
}

.flex-navbar div:nth-child(2) {
margin-right: 10px;
}

.pip {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #7e7d7d;
font-weight: bold;

&::after {
content: "Floating Window is Activated";
}
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
pointer-events: none; /* Makes overlay non-interactive by default */
z-index: 10;
display: none;
}

.navbar-fixed-bottom, .navbar-fixed-top {
z-index: 9;
}

#pipContainer {
display: none;
}

.time {
font-weight: bold;
letter-spacing: 5px;
}

.brand-title,
Expand All @@ -44,7 +90,7 @@ body {
#time,
#time_short,
#time_long {
font-size: 8em;
font-size: 7em;
margin-top: 0;
}

Expand Down Expand Up @@ -95,7 +141,7 @@ footer {
.vertical-center {
min-height: 100%;
/* Fallback for vh unit */
min-height: 100vh;
min-height: 90vh;
/* You might also want to use
'height' property instead.
Expand Down
3 changes: 3 additions & 0 deletions pomodoro-timer/img/icons/pause.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions pomodoro-timer/img/icons/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions pomodoro-timer/img/icons/reset.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions pomodoro-timer/img/navbar/pip.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
148 changes: 87 additions & 61 deletions pomodoro-timer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,24 @@

<body>
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="navbar-header flex-navbar">
<a class="brand-title" href="/">Notepad</a>
<img src="img/icons/right-arrow.svg" />
<span>Pomodoro Timer</span>
<div class="flex-navbar">
<div>
<a class="brand-title" href="/">Notepad</a>
<img src="img/icons/right-arrow.svg" />
<span>Pomodoro Timer</span>
</div>
<div>
<span title="Activate Floating Window" id="pipContainer">
<a id="pip" class="pip-icon">
<span>
<img
src="img/navbar/pip.svg"
alt="Activate Floating Window"
/>
</span>
</a>
</span>
</div>
</div>
</nav>

Expand All @@ -39,76 +53,90 @@
<li><a data-toggle="tab" href="#long">Long break</a></li>
</ul>

<div class="tab-content vertical-center">
<div id="pomodoro" class="tab-pane fade in active">
<div class="container">
<div class="starter-template">
<h1 id="time">25:00</h1>
<div id="mainContainer">
<div class="tab-content vertical-center" id="timerContainer">
<div id="pomodoro" class="tab-pane fade in active">
<div class="container">
<div class="starter-template">
<h1 class="time" id="time">25:00</h1>
</div>
</div>
</div>

<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-medium btn-primary full-width" id="start"><span
class="glyphicon glyphicon-play"></span></button>

<button type="button" id="stop" class="btn btn-medium btn-success full-width"
style="display:none"><span class="glyphicon glyphicon-pause"></span></button>

<button type="button" class="btn btn-medium btn-danger full-width" id="reset"><span
class="glyphicon glyphicon-repeat"></span></button>
<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-medium btn-primary full-width" id="start">
<img src="img/icons/play.svg" alt="Download Icon" />
</button>

<button type="button" id="stop" class="btn btn-medium btn-success full-width"
style="display:none">
<img src="img/icons/pause.svg" alt="Pause Icon" />
</button>

<button type="button" class="btn btn-medium btn-danger full-width" id="reset">
<img src="img/icons/reset.svg" alt="Reset Icon" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="short" class="tab-pane fade in">
<div class="container">
<div class="starter-template">
<h1 id="time_short">05:00</h1>
<div id="short" class="tab-pane fade in">
<div class="container">
<div class="starter-template">
<h1 class="time" id="time_short">05:00</h1>
</div>
</div>
</div>

<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-large btn-primary full-width" id="short_start"><span
class="glyphicon glyphicon-play"></span></button>

<button type="button" class="btn btn-large btn-success full-width" id="short_stop"
style="display:none"><span class="glyphicon glyphicon-pause"></span></button>

<button type="button" class="btn btn-large btn-danger full-width" id="short_reset"><span
class="glyphicon glyphicon-repeat"></span></button>
<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-large btn-primary full-width" id="short_start">
<img src="img/icons/play.svg" alt="Start Icon" />
</button>

<button type="button" class="btn btn-large btn-success full-width" id="short_stop"
style="display:none">
<img src="img/icons/pause.svg" alt="Pause Icon" />
</button>

<button type="button" class="btn btn-large btn-danger full-width" id="short_reset">
<img src="img/icons/reset.svg" alt="Reset Icon" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="long" class="tab-pane fade in">
<div class="container">
<div class="starter-template">
<h1 id="time_long">10:00</h1>
<div id="long" class="tab-pane fade in">
<div class="container">
<div class="starter-template">
<h1 class="time" id="time_long">10:00</h1>
</div>
</div>
</div>

<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-large btn-primary full-width" id="long_start"><span
class="glyphicon glyphicon-play"></span></button>

<button type="button" class="btn btn-large btn-success full-width" id="long_stop"
style="display:none"><span class="glyphicon glyphicon-pause"></span></button>

<button type="button" class="btn btn-large btn-danger full-width" id="long_reset"><span
class="glyphicon glyphicon-repeat"></span></button>
<div class="container">
<div class="starter-template">
<div class="row">
<div class="button-container">
<button type="button" class="btn btn-large btn-primary full-width" id="long_start">
<img src="img/icons/play.svg" alt="Start Icon" />
</button>

<button type="button" class="btn btn-large btn-success full-width" id="long_stop"
style="display:none">
<img src="img/icons/pause.svg" alt="Pause Icon" />
</button>

<button type="button" class="btn btn-large btn-danger full-width" id="long_reset">
<img src="img/icons/reset.svg" alt="Reset Icon" />
</button>
</div>
</div>
</div>
</div>
Expand All @@ -130,7 +158,5 @@ <h1 id="time_long">10:00</h1>
gtag('config', 'UA-43339302-6');
</script>
</body>
<footer>
<p>Made with <span style="color:red;">❤</span> by <a href="https://www.amitmerchant.com" target="_blank">Amit Merchant</a></p>
</footer>
<div class="overlay"></div>
</html>
Loading

0 comments on commit f25c35a

Please sign in to comment.