Skip to content

Commit

Permalink
html modality
Browse files Browse the repository at this point in the history
  • Loading branch information
@zi78494umbcedu
zi78494umbcedu committed Oct 31, 2023
1 parent a277fb1 commit 52da661
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 1 deletion.
7 changes: 6 additions & 1 deletion functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,14 @@ function label(){
if(mods.indexOf(app.value)===0){
document.write('<div style="text-align:center"><img src="/Users/ashwingupta/eclipse-workspace/NutriApp-Feedback-Website/labels/default.png" style="width:300px;height:1000px;" alt="Google Chrome Linear Design"></div>');
//minimum and html modality
}else if(mods.indexOf(app.value)=== 1||mods.indexOf(app.value)===3){
}else if(mods.indexOf(app.value)=== 1){
document.write('<div style="text-align:center"><img src="/Users/ashwingupta/eclipse-workspace/NutriApp-Feedback-Website/labels/minimum.png" style="width:300px;height:700px;" alt="Google Chrome Linear Design"></div>');
}
else if(mods.indexOf(app.value)===3){
//document.write('');
var url="/Users/ashwingupta/Downloads/main.html"
document.write("<a href='"+url+"'>LINK</a>");
}
//application name allowed and linear label design selected
else{
document.write('<div style="text-align:center"><img src="/Users/ashwingupta/eclipse-workspace/NutriApp-Feedback-Website/labels/linear.png" style="width:750px;height:300px;" alt="Google Chrome Linear Design"></div>');
Expand Down
191 changes: 191 additions & 0 deletions main.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!doctype html>
<html>
<head>
<link href="./style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<article class="label">
<h1 class="title">Digital Nutrition Facts</h1>
<div class="flex">
<div class="flex" style="flex-direction: column; gap: 4px">
<span>
Google Chrome
</span>
<div>
<span class="small-font">
Version: 94.4.068,
</span>
<span class="small-font">
Platform: Android
</span>
</div>
</div>
<span style="margin-left:auto;">For ages 12+</span>
</div>
<hr class="big-divider">
<details class="notifications">
<summary>
<span>Average Daily Interruptions</span>
<span style="margin-left:25%; font-size: 18px;">8</span>
<hr class="small-divider">
</summary>
<div class="content">
<div class="flex">
<span style="margin-left:auto" class="small-font"># Avg Daily Value</span>
</div>
<hr>
<div class="flex">
<span class="bold">Notifications</span>
<span style="margin-left:auto">3</span>
</div>
<hr>
<div class="flex">
<span class="bold">Popups</span>
<span style="margin-left:auto">4</span>
</div>
<hr>
<div class="flex">
<span class="bold">Emails/SMS</span>
<span style="margin-left:auto">1</span>
</div>
<hr class="small-divider">
</div>
</details>
<div class="digital-footptint">
<div class="flex">
<span class="bold">Digital Footprint</span>
</div>
<hr class="small-divider">
<div class="content">
<div class="flex">
<span class="bold">Storage Footprint</span>
<span style="margin-left:auto">250 <span class="small-font">MB</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Battery Impact</span>
<span style="margin-left:auto">8% <span class="small-font">per hour</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Internet Requirement</span>
<span style="margin-left:auto">Yes <span class="small-font">(50 MB/hr)</span></span>
</div>
<hr class="small-divider">
</div>
</div>
<div class="Permissions & Privacy">
<div class="content">
<div class="flex">
<span class="bold">Permissions & Privacy</span>
</div>
<hr class="small-divider">
<details class="permissions">
<summary>
<span style="font-weight: 400;">Access to</span>
<span style="margin-left: auto;" class="small-font">(Camera, Mic, Photos, ...)</span>
<hr>
</summary>
<div class="content">
<div class="flex">
<span class="bold">Camera</span>
<span style="margin-left:auto">Yes <span class="small-font">(with prompt)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Microphone</span>
<span style="margin-left:auto">Yes <span class="small-font">(with prompt)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Photos</span>
<span style="margin-left:auto">Yes <span class="small-font">(with prompt)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Location</span>
<span style="margin-left:auto">Yes <span class="small-font">(with prompt)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Contacts</span>
<span style="margin-left:auto">No</span>
</div>
<hr>
<div class="flex">
<span class="bold">Biometrics</span>
<span style="margin-left:auto">Yes</span>
</div>
<hr>
<div class="flex">
<span class="bold">Storage</span>
<span style="margin-left:auto">Yes <span class="small-font">(with prompt)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Health Data</span>
<span style="margin-left:auto">No</span>
</div>
<hr class="xsmall-divider">
</div>
</details>
<div class="flex">
<span class="bold">Data Collection</span>
<span style="margin-left:auto">Yes</span>
</div>
<hr>
<div class="flex">
<span class="bold">Data Transmission Freq</span>
<span style="margin-left:auto">Always</span>
</div>
<hr>
<div class="flex">
<span class="bold">Third Party Sharing</span>
<span style="margin-left:auto">Yes <span class="small-font">(with consent)</span></span>
</div>
<hr class="small-divider">
</div>
<div class="User Rights">
<div class="flex">
<span class="bold">User Rights</span>
</div>
<hr class="small-divider">
<div class="content">
<div class="flex">
<span class="bold">Account Deletion</span>
<span style="margin-left:auto">Permitted</span>
</div>
<hr>
<div class="flex">
<span class="bold">User Data Export</span>
<span style="margin-left:auto">Restricted</span>
</div>
<hr class="small-divider">
</div>
</div>
<div class="Miscellaneous">
<div class="flex">
<span class="bold">Miscellaneous</span>
</div>
<hr class="small-divider">
<div class="content">
<div class="flex">
<span class="bold">Monetization</span>
<span style="margin-left:auto">Free <span class="small-font">(with ads)</span></span>
</div>
<hr>
<div class="flex">
<span class="bold">Accessibility</span>
<span style="margin-left:auto">Yes</span>
</div>
<hr class="small-divider">
</div>
</div>
<div class="footer">
<span class="small-font">Evaluated on: January 1, 2023</span>
</div>
</div>
</article>
</body>
</html>
49 changes: 49 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,52 @@ div {
background-size:cover;
}

* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
}
.label{
font-size: 16px;
font-family: "Arial";
width: 25%;
border: 2px solid black;
padding: 8px;
}
.flex{
display: flex;
justify-content: flex-start;
gap: 4px;
}
.title{
font-size: 26px;
margin: 4px 0;
text-align: justify;
}
.big-divider{
border-top: 14px solid #000;
}
.small-divider{
border-top: 6px solid #000;
}
.xsmall-divider{
border-top: 3px solid #000;
}
.small-font{
font-size: 12px;
}
.bold{
font-weight: bold;
}
summary {
cursor: pointer;
font-weight: bold;
}
summary::-webkit-details-marker {
display: none;
}
.content div{
padding: 0 10px;
}

0 comments on commit 52da661

Please sign in to comment.