750 lines
22 KiB
HTML
750 lines
22 KiB
HTML
<style>
|
|
@font-face {
|
|
font-family: 'UniversalSans';
|
|
src: url('fonts/UniversalSans-800.woff');
|
|
font-weight: 800;
|
|
}
|
|
@font-face {
|
|
font-family: 'UniversalSans';
|
|
src: url('fonts/UniversalSans-680.woff');
|
|
font-weight: 680;
|
|
}
|
|
@font-face {
|
|
font-family: 'UniversalSans';
|
|
src: url('fonts/UniversalSans-480.woff');
|
|
font-weight: 480;
|
|
}
|
|
body {
|
|
background-color: #EEEFE9;
|
|
width: 420px;
|
|
padding: 16px;
|
|
margin: 0;
|
|
font-family: UniversalSans;
|
|
color: #262626;
|
|
font-weight: 680;
|
|
overflow: hidden;
|
|
}
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
#header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.close-icon:hover {
|
|
cursor: pointer;
|
|
}
|
|
.divider {
|
|
height: 0.5px;
|
|
background-color: #A6A6A1;
|
|
opacity: 0.3;
|
|
margin: 16px 0;
|
|
}
|
|
#menu-bar {
|
|
display: grid;
|
|
grid-template-columns: 25% 25% 25% 25%;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
.menu-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
.active {
|
|
border-bottom: 2px solid #262626
|
|
}
|
|
.active:hover {
|
|
cursor: pointer;
|
|
}
|
|
.inactive {
|
|
border-bottom: 0.5px solid #262626;
|
|
filter: invert(59%) sepia(0%) saturate(7425%) hue-rotate(72deg) brightness(110%) contrast(91%);
|
|
}
|
|
.inactive:hover {
|
|
cursor: pointer;
|
|
}
|
|
#coverage {
|
|
font-size: 14px;
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
#coverage-source {
|
|
font-weight: 800;
|
|
}
|
|
p {
|
|
margin: 16px 0;
|
|
}
|
|
#coverage-chart-container {
|
|
margin:8px 0;
|
|
display: flex;
|
|
column-gap: 5px;
|
|
justify-content: space-around;
|
|
}
|
|
.coverage-chart-bar-container {
|
|
background-color: #E6E8DE;
|
|
height: 240px;
|
|
width: 50px;
|
|
border-radius: 30px;
|
|
}
|
|
#coverage-chart {
|
|
width: 100%
|
|
}
|
|
.hidden {
|
|
display: none
|
|
}
|
|
.button {
|
|
width: 175px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
font-weight: 680;
|
|
background-color: #262626;
|
|
color: #EEEFE9;
|
|
margin: auto;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: 8px;
|
|
height: 40px;
|
|
}
|
|
.section {
|
|
padding: 16px 0;
|
|
overflow-y: scroll;
|
|
height: 400px
|
|
}
|
|
.save-article {
|
|
display: flex;
|
|
padding: 16px;
|
|
background-color: #E6E8DE;
|
|
}
|
|
.save-article-header {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
margin: 0 0 8px 8px
|
|
|
|
}
|
|
.save-article-subscript {
|
|
font-size: 12px;
|
|
font-weight: 680;
|
|
margin: 0 0 0 8px
|
|
}
|
|
.save-article-image {
|
|
border-radius: 50%;
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-top: 6px;
|
|
}
|
|
.save-article-button {
|
|
margin: 25px auto
|
|
}
|
|
.save-article-button-image {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.save-article-recently-saved-divider {
|
|
margin-top: 8px
|
|
}
|
|
.citations-section-default-citation {
|
|
background-color: #E6E8DE;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
padding: 16px;
|
|
align-items: flex-start;
|
|
column-gap: 14px;
|
|
}
|
|
.citations-section-default-citation-header {
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
font-weight: 480;
|
|
margin-top: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
.citations-section-default-citation-subscript {
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
color: #A6A6A1;
|
|
font-weight: 680;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.citations-section-default-citation-subscript > span {
|
|
color: #262626
|
|
}
|
|
.citations-sections-default-citation-image {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.view-all-button {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: #767774;
|
|
font-weight: 800;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: #EEEFE9;
|
|
margin: 0 auto;
|
|
padding: 16px 0;
|
|
opacity: 0.95;
|
|
cursor: pointer
|
|
}
|
|
.menu-item-paragraph {
|
|
margin-top: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.citation-section-create-form-header {
|
|
font-size: 12px;
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
line-height: 15px;
|
|
font-weight: 680;
|
|
}
|
|
.citation-section-create-form-field {
|
|
background-color: #E6E8DE;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
font-weight: 680;
|
|
line-height: 17px;
|
|
padding: 12px 16px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
font-family: UniversalSans;
|
|
border: 0.5px solid #A6A6A1;
|
|
color: #262626;
|
|
}
|
|
.citation-section-create-form-field::placeholder {
|
|
color: #262626;
|
|
opacity: 1;
|
|
}
|
|
.factuality-data-section-default-bias-bar {
|
|
height: 22px;
|
|
font-size: 10px;
|
|
line-height: 22px;
|
|
font-weight: 800;
|
|
color: #EEEFE9;
|
|
display: flex;
|
|
column-gap: 2px;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
.factuality-data-section-default-pill-bar {
|
|
height: 48px;
|
|
border-radius: 40px;
|
|
margin-bottom:16px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
.factuality-data-section-detailed-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 4px;
|
|
}
|
|
.factuality-data-section-detailed-legend-icon {
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
}
|
|
.citation-format-button {
|
|
cursor: pointer;
|
|
}
|
|
.citation-format-button-apa {
|
|
font-weight: 680;
|
|
}
|
|
.citation-format-button-mla {
|
|
font-weight: 480;
|
|
}
|
|
#dropdown-menu {
|
|
background-color: #EEEFE9;
|
|
right: 21px;
|
|
top: 26px;
|
|
z-index: 1;
|
|
width: 130px;
|
|
border: solid 1px #A6A6A1;
|
|
border-radius: 4px;
|
|
}
|
|
#dropdown-menu p {
|
|
padding: 5px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#dropdown-menu p:hover {
|
|
background-color:#262626;
|
|
color: #EEEFE9;
|
|
}
|
|
#loading-image {
|
|
transform: scale(1);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.section-header-container h2 {
|
|
font-size: 16px;
|
|
font-weight: 680;
|
|
line-height: 18px;
|
|
}
|
|
|
|
#blacklist-settings-section input {
|
|
width:335px;
|
|
height:40px;
|
|
background-color:#E6E8DE;
|
|
border-radius: 4px;
|
|
font-weight: 480;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
border: 1px solid #A6A6A1;
|
|
padding: 10px;
|
|
}
|
|
|
|
#blacklist-settings-section button {
|
|
width:70px;
|
|
height:40px;
|
|
background-color:#262626;
|
|
color: #EEEFE9;
|
|
border-radius: 4px;
|
|
font-weight: 480;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
border: 1px solid #262626;
|
|
padding: 10px;
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#blacklist-settings-section button:hover {
|
|
background-color: #D1BD91;
|
|
color: #262626;
|
|
}
|
|
|
|
.blacklisted-site-container {
|
|
display: flex;
|
|
padding: 10px;
|
|
background-color: #E6E8DE;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
margin-top:2.5px;
|
|
margin-bottom: 2.5px;
|
|
}
|
|
|
|
.blacklisted-site-container p {
|
|
font-size: 14px;
|
|
font-weight: 480;
|
|
margin: 0;
|
|
}
|
|
|
|
.blacklisted-site-container i {
|
|
font-weight: 480;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.blacklisted-site-container i:hover {
|
|
font-weight: 680;
|
|
}
|
|
|
|
.section-header-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
#blacklist-settings-input-container {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
#help-section h3 {
|
|
font-size: 14px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
#help-section-back-button {
|
|
font-size:24px;
|
|
cursor:pointer
|
|
}
|
|
|
|
.section-header-container i:hover {
|
|
font-weight: 680;
|
|
}
|
|
|
|
.dropdown-icon:hover {
|
|
font-weight: 680;
|
|
}
|
|
|
|
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.85);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!DOCTYPE html>
|
|
<head>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<img src="https://groundnews.b-cdn.net/assets/logo/ground_new_logo_header.svg?width=60px" alt="Ground Logo" style="width:60px"/>
|
|
<div style="display:flex;column-gap:10px;align-items:center;position:relative">
|
|
<div style="float:right;border-radius:4px;padding:5px;font-size:16px;line-height:24px;display:flex;align-items:center;column-gap:5px;font-weight:480;">
|
|
<i id="dropdown-button" class="ph ph-dots-three-circle dropdown-icon" style="cursor:pointer"></i>
|
|
<i class="ph ph-x close-icon dropdown-icon"></i>
|
|
</div>
|
|
<div style="font-size:14px;display:none;position:absolute" id="dropdown-menu">
|
|
<!-- Removing the Help Section since it is not yet ready
|
|
<p id="help-section-button">
|
|
Help
|
|
</p>
|
|
-->
|
|
<p id="blacklist-settings-button">
|
|
Hidden Sources
|
|
</p>
|
|
<p id="log-out-button">
|
|
Log Out
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="divider">
|
|
<div id="menu-bar">
|
|
<div class="active" id="bias-distribution-menu-item">
|
|
<img src="icons/bar-chart-2.svg" class="menu-icon">
|
|
<p class="menu-item-paragraph">
|
|
Bias Distribution
|
|
</p>
|
|
</div>
|
|
<div class="inactive" id="save-article-menu-item">
|
|
<img src="icons/bookmark-1-black.svg" class="menu-icon">
|
|
<p class="menu-item-paragraph">
|
|
Save Article
|
|
</p>
|
|
</div>
|
|
<div class="inactive" id="citations-menu-item">
|
|
<img src="icons/book-open-1-black.svg" class="menu-icon">
|
|
<p class="menu-item-paragraph">
|
|
Citations
|
|
</p>
|
|
</div>
|
|
<div class="inactive" id="factuality-data-menu-item">
|
|
<img src="icons/circle-dashed-black.svg" class="menu-icon">
|
|
<p class="menu-item-paragraph">
|
|
Factuality Data
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="loading-section" class="section">
|
|
<div style="display:flex;align-items:center;justify-content:center;height:80%;">
|
|
<img src="https://groundnews.b-cdn.net/assets/logo/ground_new_logo_header.svg" id="loading-image">
|
|
</div>
|
|
</div>
|
|
<div id="bias-distribution-section" class="section">
|
|
<div>
|
|
<p id="coverage">
|
|
Along with {sourceName}, this story has also been covered by {sourceCount} other news sources including {biasSrcCount} with bias reviews.
|
|
</p>
|
|
</div>
|
|
<hr class="divider">
|
|
<div id="coverage-chart-container">
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-farLeft">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-left">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-leanLeft">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-center">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-leanRight">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-right">
|
|
</div>
|
|
<div class="coverage-chart-bar-container" id="coverage-chart-bar-container-farRight">
|
|
</div>
|
|
</div>
|
|
<div class="button" id="coverage-link" style="margin-top: 30px;">
|
|
Full Coverage
|
|
</div>
|
|
</div>
|
|
<div id="save-article-section" class="section">
|
|
<div class="save-article" id="save-article-main">
|
|
<img class="save-article-image" id="save-article-img-main"/>
|
|
<div class="save-article-div">
|
|
<p class="save-article-header" id="save-article-header-main">
|
|
</p>
|
|
<p class="save-article-subscript" id="save-article-subscript-main">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="button save-article-button">
|
|
<div class="button-container" id="save-article-button">
|
|
<img src="icons/bookmark-1-white.svg" class="save-article-button-image"/>
|
|
<span>Save Article</span>
|
|
</div>
|
|
</div>
|
|
<div id="save-article-more">
|
|
<p style="font-size:16px;line-height:24px;font-weight:680;color:#767774;margin:0;">
|
|
Recently Saved
|
|
</p>
|
|
<hr class="divider save-article-recently-saved-divider">
|
|
<div id="save-article-empty">
|
|
You have no recently saved articles.
|
|
</div>
|
|
<div class="save-article" id="save-article-1">
|
|
<img class="save-article-image" id="save-article-img-sub-1"/>
|
|
<div class="save-article-div">
|
|
<p class="save-article-header" id="save-article-header-sub-1">
|
|
</p>
|
|
<p class="save-article-subscript" id="save-article-subscript-sub-1">
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr class="divider" id="save-article-divider-2">
|
|
<div class="save-article" id="save-article-2">
|
|
<img class="save-article-image" id="save-article-img-sub-2"/>
|
|
<div class="save-article-div">
|
|
<p class="save-article-header" id="save-article-header-sub-2">
|
|
</p>
|
|
<p class="save-article-subscript" id="save-article-subscript-sub-2">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr class="divider" id="save-article-divider-3">
|
|
<div class="save-article" id="save-article-3">
|
|
<img class="save-article-image" id="save-article-img-sub-3"/>
|
|
<div class="save-article-div">
|
|
<p class="save-article-header" id="save-article-header-sub-3">
|
|
</p>
|
|
<p class="save-article-subscript" id="save-article-subscript-sub-3">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="view-all-button" id="save-article-view-all-button" style="cursor:pointer;">
|
|
View all >
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="non-event-section" class="section">
|
|
<img src="icons/access-block.png" style="margin:58px auto 16px auto;display:block">
|
|
<p style="font-weight:800;font-size:22px;line-height:26px;text-align:center;margin-top:0" id="non-event-section-header">
|
|
Whoops
|
|
</p>
|
|
<p style="width:205px;font-weight:480;font-size:14px;line-height:17px;text-align:center;margin:0 auto 16px auto" id="non-event-section-text">
|
|
This doesn't look like a recognized news article.
|
|
</p>
|
|
</div>
|
|
<div id="save-article-section-signed-out" class="section">
|
|
<img src="icons/access-block.png" style="margin:58px auto 16px auto;display:block">
|
|
<p style="font-weight:800;font-size:22px;line-height:26px;text-align:center;margin-top:0">
|
|
Hold Up!
|
|
</p>
|
|
<p style="width:205px;font-weight:480;font-size:14px;line-height:17px;text-align:center;margin:0 auto 16px auto" id="sign-in-prompt">
|
|
Sign up or log in to Ground News to save this article
|
|
</p>
|
|
<div class="button" style="line-height:40px;">
|
|
Log in
|
|
</div>
|
|
</div>
|
|
<div id="citations-section-default" class="section">
|
|
<div class="button" id="citations-section-default-create-button">
|
|
Create New Citation
|
|
</div>
|
|
<p style="font-weight:680;font-size:14px;line-height:17px;margin-bottom:0;">
|
|
My citations
|
|
</p>
|
|
<div id="citations-container">
|
|
</div>
|
|
<p class="view-all-button" id="citation-view-all-button">
|
|
View all >
|
|
</p>
|
|
</div>
|
|
<div id="citations-section-create" class="section">
|
|
<div style="display:flex;column-gap:4px;padding:12px 16px;background-color:#D1BD91;">
|
|
<img src="icons/info.svg" style="width:16px;height:16px" />
|
|
<p style="font-size:12px;line-height:16px;font-weight:680;margin-top:0;margin-bottom:0">
|
|
Review the following information to check that this is the correct source and fill out any missing/additional
|
|
information.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top:24px;margin-bottom:16px">
|
|
<p class="citation-section-create-form-header">
|
|
Title
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="Title" id="citation-title">
|
|
</div>
|
|
<div style="margin-bottom:16px;display:flex;column-gap:24px;">
|
|
<div>
|
|
<p class="citation-section-create-form-header">
|
|
Date Published
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="January 1st 2022" id="citation-date-pub">
|
|
</div>
|
|
<div>
|
|
<p class="citation-section-create-form-header">
|
|
Date Accessed
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="January 1st 2022" id="citation-date-acc">
|
|
</div>
|
|
</div>
|
|
<div style="margin-bottom:16px;display:flex;column-gap:24px;">
|
|
<div>
|
|
<p class="citation-section-create-form-header">
|
|
Author
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="Author" id="citation-author">
|
|
</div>
|
|
<div>
|
|
<p class="citation-section-create-form-header">
|
|
Publisher
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="Publisher" id="citation-pub">
|
|
</div>
|
|
</div>
|
|
<div style="margin-bottom:16px;">
|
|
<p class="citation-section-create-form-header">
|
|
URL
|
|
</p>
|
|
<input type="text" class="citation-section-create-form-field" placeholder="URL" id="citation-url">
|
|
</div>
|
|
<div style="margin-bottom:24px;">
|
|
<p class="citation-section-create-form-header">
|
|
Notes
|
|
</p>
|
|
<textArea class="citation-section-create-form-field" rows="3" id="citation-notes"></textArea>
|
|
</div>
|
|
<div style="display:flex;column-gap:24px">
|
|
<div class="button" style="background-color:#A6A6A1;color:#EEEFE9" id="citation-save-button">
|
|
Save Changes
|
|
</div>
|
|
<div class="button" id="citations-section-create-view-button" style="background-color:#EEEFE9;color:#262626;border:1px solid #262626">
|
|
View Citations
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="factuality-data-section-default" class="section">
|
|
<p style="font-weight:800;font-size:18px;line-height:22px;margin-top:0;margin-bottom:16px">
|
|
Factuality Distribution
|
|
</p>
|
|
<p style="font-weight:680;font-size:14px;line-height:17px;">
|
|
Factuality reported across <span id="factuality-num-sources"></span> sources
|
|
</p>
|
|
<hr class="divider" />
|
|
<div class="factuality-data-section-default-bias-bar">
|
|
<div style="width:30%;background-color:#6e706b" id="factuality-bar-veryLow">
|
|
VERY LOW
|
|
</div>
|
|
<div style="width:15%;background-color:#A6A6A1" id="factuality-bar-low">
|
|
LOW
|
|
</div>
|
|
<div style="width:10%;background-color:#767774" id="factuality-bar-mixed">
|
|
MIXED
|
|
</div>
|
|
<div style="width:15%;background-color:#555555" id="factuality-bar-high">
|
|
HIGH
|
|
</div>
|
|
<div style="width:30%;background-color:#393938" id="factuality-bar-veryHigh">
|
|
VERY HIGH
|
|
</div>
|
|
</div>
|
|
<div class="factuality-data-section-default-pill-bar" id="factuality-data-section-pill-bar-veryHigh" style="background-color:#262626">
|
|
</div>
|
|
<div class="factuality-data-section-default-pill-bar" id="factuality-data-section-pill-bar-high" style="background-color:#262626">
|
|
</div>
|
|
<div class="factuality-data-section-default-pill-bar" id="factuality-data-section-pill-bar-mixed" style="background-color:#636361">
|
|
</div>
|
|
<div class="factuality-data-section-default-pill-bar" id="factuality-data-section-pill-bar-low" style="background-color:#9E9E9B">
|
|
</div>
|
|
<div class="factuality-data-section-default-pill-bar" id="factuality-data-section-pill-bar-veryLow" style="background-color:#9E9E9B">
|
|
</div>
|
|
<div class="button" id="factuality-data-section-default-view-more-button" style="margin-top:32px">
|
|
View Factuality Data
|
|
</div>
|
|
</div>
|
|
<div id="factuality-data-section-locked" class="section">
|
|
<img src="icons/lock.svg" style="width:48px;margin:100px auto 16px auto;display:block" />
|
|
<p style="font-weight:800;font-size:22px;line-height:27px;margin-top:0;margin-bottom:8px;text-align:center;">
|
|
Locked Feature
|
|
</p>
|
|
<p style="font-weight:480;font-size:14px;line-height:17px;margin:0 auto 16px auto;text-align:center;width:200px;">
|
|
You need a Premium subscription to view this feature.
|
|
</p>
|
|
<div class="button" id="factuality-data-subscribe-button">
|
|
Subscribe Now
|
|
</div>
|
|
</div>
|
|
<div id="blacklist-settings-section" class="section">
|
|
<div class="section-header-container">
|
|
<i class="ph ph-arrow-left" id="blacklist-settings-back-button" style="font-size:24px;cursor:pointer"></i>
|
|
<h2 style="margin:0">
|
|
Prevent the browser extension from appearing on certain websites.
|
|
</h2>
|
|
</div>
|
|
<div id="blacklist-settings-input-container">
|
|
<input type="text" placeholder="Enter a web address (ex. twitter.com)">
|
|
<button id="blacklist-settings-add-button">
|
|
Add
|
|
</button>
|
|
</div>
|
|
<h2>
|
|
The extension will not appear on the following websites.
|
|
</h2>
|
|
<div id="blacklisted-sites-container">
|
|
</div>
|
|
<div id="blacklist-placeholder">
|
|
<img style="display:block;margin:80px auto 0 auto" src="https://groundnews.b-cdn.net/extension/blacklist_null_state_2.png">
|
|
<p style="font-size: 18px; font-weight: 800; text-align: center;">
|
|
List currently empty
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="help-section" class="section">
|
|
<div class="section-header-container" style="align-items: center;">
|
|
<i class="ph ph-arrow-left" id="help-section-back-button"></i>
|
|
<h2 style="margin:0">
|
|
Help
|
|
</h2>
|
|
</div>
|
|
<h3>
|
|
Welcome to Ground News Help!
|
|
</h3>
|
|
<p style="font-weight: 480; font-size: 12px;">
|
|
We're here to assist you in getting the most out of our platform and ensuring you have a seamless experience while navigating the complex world of news. Below, you'll find a comprehensive guide to help answer any questions or concerns you may have. If you can't find what you're looking for, please don't hesitate to reach out to our dedicated support team.
|
|
</p>
|
|
<p style="font-weight: 480; font-size: 14px;">
|
|
If you're experiencing an issue that isn't covered in this guide, please contact our team at <a href="mailto:feedback@ground.news" style="color:inherit;">feedback@ground.news</a>.
|
|
</p>
|
|
</div>
|
|
<div id="alert" style="display:none;z-index:5;background-color:#EEEFE9;border:2px solid #D50000;font-size:16px;padding:15px;position:fixed;top:0;left:0;font-weight:680;width:90%;align-items:center">
|
|
</div>
|
|
<script src="js/menu.js"></script>
|
|
</body>
|
|
</html> |