Skip to content

Commit

Permalink
day-4 done
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev-Imsaurabh
dev-Imsaurabh committed Nov 11, 2022
1 parent c1dc9d9 commit d42157b
Show file tree
Hide file tree
Showing 7 changed files with 287 additions and 11 deletions.
Binary file added assets/footer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion components/fot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function fot(){
</div>
<img src="/assets/footer_desktime.png" alt="">`
<img src="/assets/footer.png" alt="">`
}

export default fot
179 changes: 179 additions & 0 deletions components/report-comp.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
function report_comp(){
return `<div id="reportcontainer">
<div id="upperpart">
<div id="logo">
<h2>Reports</h2>
</div>
<div>
<p id="date">November 10,2022</p>
<img src="https://img.icons8.com/windows/32/null/calendar.png"/>
<div id="arrow">
<img src="images1/arrow.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/more-than.png"/>
</div>
<div id="choosedate">
<div>Day</div>
<div>Week</div>
<div>Month</div>
</div>
<div id="qus">?</div>
</div>
</div>
<div id="renav">
<div>OVERVIEW</div>
<div>COMPARE BY MEMBERS</div>
<div>COMPARE BY DATE</div>
<div>EXTRA HOURS</div>
<div>PROJECT OVERVIEW</div>
<div>PROJECTS</div>
</div>
<div id="filter">
<div>
<div>Teams</div>
<div>Members</div>
</div>
<div>APPLY FILTER</div>
</div>
<div id="midbox">
<div>
<div>
<p>DESKTIME TIME</p>
<p>102h 40m</p>
</div>
</div>
<div>
<div>
<p>TIME AT WORK</p>
<p>168h 38m</p>
</div>
</div>
<div>
<div>
<p>OFFLINE TIME</p>
<p>6h 9m</p>
</div>
</div>
<div>
<div>
<p>PROJECTS TIME</p>
<p>67h 90m</p>
</div>
</div>
<div>
<div>
<p>EFFECTIVENESS</p>
<p>49.68%</p>
</div>
</div>
<div>
<div>
<p>PRODUCTIVITY</p>
<p>64.01%</p>
</div>
</div>
</div>
<div id="level">
<img src="images1/levels.jpeg" alt="">
</div>
<div id="clientbox">
<div>
<img src="./assets/productive.png" alt="">
<hr>
<p id="productive">VIEW ALL(16)</p>
</div>
<div>
<img src="./assets/unproductive.png" alt="">
<hr>
<p id="unproductive">VIEW ALL(16)</p>
</div>
<div>
<img src="./assets/effect.png" alt="">
<hr>
<p id="effect">VIEW ALL(16)</p>
</div>
<div>
<img src="./assets/desktime.png" alt="">
<hr>
<p id="desktime-card">VIEW ALL(16)</p>
</div>
</div>
<!-- popup boxes -->
<!-- box1 -->
<div id="productive_div" class="modal">
<div id="pContent" class="popup_content">
<div class="span_div">
<h2>Most Productive</h2>
<span class="close-view-card">&times;</span>
</div>
<div>
<img src="./assets/modal1.png" alt="">
</div>
</div>
</div>
<!-- box2 -->
<div id="unproductive_div" class="modal">
<div id="uContent" class="popup_content">
<div class="span_div">
<h2>Most Unproductive</h2>
<span class="close-view-card">&times;</span>
</div>
<div>
<img src="./assets/upwork.png" alt="">
</div>
</div>
</div>
<!-- box3 -->
<div id="effect_div" class="modal">
<div id="eContent" class="popup_content">
<div class="span_div">
<h2>Most Effective</h2>
<span class="close-view-card">&times;</span>
</div>
<div>
<img src="./assets/effectiveWork.png" alt="">
</div>
</div>
</div>
<!-- box4 -->
<div id="desktime_div" class="modal">
<div id="dContent" class="popup_content">
<div class="span_div">
<h2>Total Desktime time</h2>
<span class="close-view-card">&times;</span>
</div>
<div>
<img src="./assets/desktimeSpend.png" alt="">
</div>
</div>
</div>
<div id="clientdata">
<div>
<img src="./assets/new.png" alt="">
<hr>
<p>VIEW ALL</p>
</div>
<div>
<img src="./assets/absence.png" alt="">
<hr>
<p>VIEW ALL</p>
</div>
<div>
<img src="./assets/third.png" alt="">
<hr>
<p>VIEW ALL</p>
</div>
</div>
<div id="product">
<div><img src="images1/product1.jpeg" alt=""></div>
<div><img src="images1/product2.jpeg" alt=""></div>
<div><img src="images1/product3.jpeg" alt=""></div>
</div>
</div>
<div id="footer"></div>`
}


export default report_comp
10 changes: 6 additions & 4 deletions danshboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="/styles/danshboard.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/styles/containerFun.css">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"> </script>
<link rel="stylesheet" href="/styles/utility.css">
<link rel="stylesheet" href="styles/time_always.css">
<link rel="stylesheet" href="/styles/footer.css">
<link rel="stylesheet" href="/styles/card.css">
<link rel="stylesheet" href="/styles/createCard.css">
<link rel="stylesheet" href="/styles/reports.css">
<link rel="stylesheet" href="/styles/exportPage.css">
<link rel="stylesheet" href="/styles/projects.css">
<script type="module" src="/scripts/containerFun.js"></script>
<script type = "module" src="/scripts/danshboard.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"> </script>
<script type="module" src="/scripts/containerFun.js"></script>
<script type = "module" src="/scripts/danshboard.js"></script>

<!-- <script id="ta" type="module" src="/scripts/time-always.js"></script> -->


Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,22 +119,22 @@ <h1>Things worth knowing about using a time tracker</h1>
<p id="ans1">This self-analysis will motivate both you and your employees to do better and avoid any unnecessary and unproductive actions like those well-known “fast and easy” 5-minute jobs many of us are often asked to do. Employees who track time can note how much these extra jobs actually take up their day and be able to make better decisions on whether it’s worth interrupting their workflow.</p>
</div>
<div>
<p id="q2">Can implementing DeskTime prevent burnout?</p>
<p id="q2">Can implementing Time Always prevent burnout?</p>
<p id="ans2">Yes! Using a time tracker can help highlight overachievers and spot team members who are struggling or might need some extra help. This is a great way to catch and prevent burnout, as well as rethink resource distribution.</p>
</div>
<div>
<p id="q3">Is my team's privacy safe when using a time tracker?</p>
<p id="ans3">First things first DeskTime is not an employee monitoring or spy tool, but its no secret that some might use this kind of software in ways that aren’t employee-friendly. Managers have the right to know how their employees get the job done, but it's imperative to also value your team's time and privacy. That's why DeskTime even has a Private time feature that disables the time tracker for when you have to take care of non-work-related tasks during office hours.</p>
<p id="ans3">First things first Time Always is not an employee monitoring or spy tool, but its no secret that some might use this kind of software in ways that aren’t employee-friendly. Managers have the right to know how their employees get the job done, but it's imperative to also value your team's time and privacy. That's why Time Always even has a Private time feature that disables the time tracker for when you have to take care of non-work-related tasks during office hours.</p>
</div>
<div>
<p id="q4">How to communicate using a time tracker with your team?</p>
<p id="ans4">You have to remember that time tracking is a two-way street of communication and lead by example. Yes, it gives managers an overview of what their employees are doing during the workday, but it’s also a tool to help employees show their progress and ask for help if needed. Be transparent and honest about implementing a time tracker and take the time to show its benefits. For example, DeskTime lets you set break reminders, encourage private time, and eliminate overworking so your team members feel rested, valued, and safe.</p>
<p id="ans4">You have to remember that time tracking is a two-way street of communication and lead by example. Yes, it gives managers an overview of what their employees are doing during the workday, but it’s also a tool to help employees show their progress and ask for help if needed. Be transparent and honest about implementing a time tracker and take the time to show its benefits. For example, Time Always lets you set break reminders, encourage private time, and eliminate overworking so your team members feel rested, valued, and safe.</p>
</div>
</div>
</div>
<div id="green">
<h1>Want to get the most out of your time?
Try DeskTime for free!</h1>
Try Time Always for free!</h1>
<div>
<input type="text" placeholder="Your work email">
<button>START FREE TRIAL</button>
Expand Down
95 changes: 95 additions & 0 deletions scripts/danshboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import exportPage from "../components/exportPage.js";

import fot from "../components/fot.js";
import project_comp from "../components/project-comp.js";
import report_comp from "../components/report-comp.js";
import ScriptLoader from "../components/script-loader.js";
import timeAlways from "../components/time-always-comp.js";
import utility from "../components/utility-tab.js";
Expand Down Expand Up @@ -103,6 +104,9 @@ document.querySelector("#desktime").onclick=(event)=>{

}
document.querySelector("#reports").onclick=(event)=>{

reports()

}
document.querySelector("#exports").onclick=(event)=>{
exports()
Expand Down Expand Up @@ -454,4 +458,95 @@ function enableLeftTime(){



}




function reports(){

content.innerHTML=""
content.innerHTML=report_comp()
let footer = document.getElementById("footer")
footer.innerHTML=fot()

//FIRST PRODUCTIVE WORK DIV

let Product_btn=document.getElementById('productive');
let pmodal=document.getElementById('productive_div');
let span=document.getElementsByClassName('close-view-card')[0];
Product_btn.onclick=function()
{
pmodal.style.display='block';
// console.log('go it');
}
span.onclick=function()
{
pmodal.style.display='none';
}
//SECOND UNPRODUCTIVE WORK DIV

let unproductive_btn=document.getElementById('unproductive');
let uModal=document.getElementById('unproductive_div');
let uSpan=document.getElementsByClassName('close-view-card')[1];
unproductive_btn.onclick=function()
{
uModal.style.display='block';
}
uSpan.onclick=function()
{
uModal.style.display='none';
}
//THIRD EFFECTIVE WORK DIV

let effect_btn=document.getElementById('effect');
let eModal=document.getElementById('effect_div');
let eSpan=document.getElementsByClassName('close-view-card')[2];

effect_btn.onclick=function()
{
eModal.style.display='block';
}
eSpan.onclick=function()
{
eModal.style.display='none';
console.log("clicked")
}
//FOURTH DESKTIME WORK DIV
let desk_btn=document.getElementById('desktime-card');
let dModal=document.getElementById('desktime_div');
let dSpan=document.getElementsByClassName('close-view-card')[3];

desk_btn.onclick=function()
{
dModal.style.display='block';
}
dSpan.onclick=function(){
dModal.style.display='none';
}
//CLOSE ONCLICKING WINDOW ANYWHERE EXCEPT BOX
window.onclick=function(event)
{
if(event.target == pmodal)
{
pmodal.style.display='none';
}
if(event.target == uModal)
{
uModal.style.display='none'
}
if(event.target == eModal)
{
eModal.style.display='none';
}
if(event.target == dModal)
{
dModal.style.display='none';
}
}





}
4 changes: 2 additions & 2 deletions styles/reports.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,15 +205,15 @@ padding-left: 2pc;
color: white;
/* margin-left: 1pc; */
}
.close{
.close-view-card{
color: white;
/* float: right; */
font-size: 30px;
margin-right: 1pc;
font-weight: bold;
margin-top: 1pc;
}
.close:hover,.close:focus{
.close-view-card:hover,.close-view-card:focus{
color: rgb(226, 222, 222);
text-decoration: none;
cursor: pointer;
Expand Down

0 comments on commit d42157b

Please sign in to comment.