Skip to content

Commit 496c517

Browse files
piratepirate
committed
styling and design improvements
1 parent 4b99750 commit 496c517

File tree

3 files changed

+59
-33
lines changed

3 files changed

+59
-33
lines changed

‎example-diagram-old.png

70.8 KB
Loading

‎example-diagram.png

24.3 KB
Loading

‎index.html

Lines changed: 59 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@
2525
.module > .fas {
2626
float: right;
2727
}
28+
.module .hidden-area {
29+
height: 0px;
30+
overflow: hidden;
31+
transition: height 500ms ease-in-out;
32+
}
33+
#output-pane:hover .module .hidden-area {
34+
height: 50px;
35+
}
2836
#input-area img.favicon {
2937
display: inline-block;
3038
width: 36px;
@@ -45,6 +53,8 @@
4553
.intro-description {
4654
font-size: 22px;
4755
font-family: 'Ibarra Real Nova', serif;
56+
text-shadow: 4px 4px 4px rgba(0,0,0,0.02);
57+
color: #ffdada;
4858
}
4959
.module h3 {
5060
border-bottom: 1px dashed rgba(0,0,0,0.05);
@@ -57,43 +67,47 @@
5767
font-size: 24px;
5868
font-family: 'Ibarra Real Nova', serif;
5969
}
70+
button:hover, a.button:hover {
71+
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
72+
}
6073
</style>
6174
</head>
6275
<body class="bg-gray-100 h-screen flex flex-col">
63-
<header class="bg-red-600 text-white py-6 shadow-md text-center">
64-
<h1 class="text-center text-6xl font-bold" style="margin-bottom: 22px">DigestBox</h1>
76+
<header class="py-6 shadow-md text-center">
77+
<h1 class="text-center text-5xl font-bold" style="margin-bottom: 22px">DigestBox</h1>
6578

66-
<img src="logo.png" style="width: 110px; display: inline-block; margin-bottom: 10px; opacity: 0.7"/><br/>
67-
<i class="text-center" style="color: #333; opacity: 0.6">A free tool brought to you by <a href="https://archivebox.io" target="_blank">ArchiveBox.io</a></i>
79+
80+
<i class="text-center" style="color: #333; opacity: 0.6">A free tool brought to you by <a href="https://archivebox.io" target="_blank" class="hover:shadow-md">ArchiveBox.io</a></i>
6881
</header>
6982
<main class="flex-1 p-4 md:p-8">
7083
<div class="max-w-6xl mx-auto">
71-
<div class="text-center">
84+
<div class="text-center bg-red-600 text-white rounded" style="color: #e0efef">
7285
<br/>
73-
<b class="intro-description">DigestBox takes <u>any webpage</u> (news article, video page, comment thread, etc.) and extracts the <u>juicy content</u> within.</b>
74-
<br/><br/>
86+
<b class="intro-description">Get all the <u>juicy content</u> from <u>any webpage</u> in 1 click.</b>
87+
88+
7589

90+
<br/><br/>
91+
<center>
92+
<img src="example-diagram.png" style="height: 250px; display: inline; opacity: 0.8"/>
93+
</center>
94+
<br/>
7695

96+
<div id="progress-bar" class="w-full bg-red-200 rounded overflow-hidden" style="opacity: 0.7">
97+
<div class="h-2 bg-red-600"></div>
98+
</div>
7799
<div id="input-area" class="rounded bg-gray-200 p-6">
78100
<i class="fas fa-globe py-2 text-3xl align-center"></i>
79101
<img src="data:," class="favicon"/> &nbsp;
80-
<textarea id="url-input" class="w-2/3 p-2 border rounded align-top text-xl" placeholder="https://example.com/webpage/or/article.html" rows="1" style="display: inline-block; min-height: 50px; margin-top: -1px"></textarea>
81-
<button id="digest-btn" class="w-1/4 bg-red-600 text-xl text-white py-2 rounded align-top shadow-md hover:shadow-lg hover:bg-red-700 hover:border-white border-solid border-2 border-black">
102+
<textarea id="url-input" class="w-2/3 p-2 border rounded align-top text-xl" placeholder="https://example.com/paste-a-URL-here.html" rows="1" style="display: inline-block; min-height: 50px; margin-top: -1px; color: #1a1a1a"></textarea>
103+
<button id="digest-btn" class="w-1/4 bg-red-600 text-xl text-white py-2 rounded align-top shadow-md hover:bg-red-700 hover:border-white border-solid border-2" style="border-color: #9e0000">
82104
Digest &nbsp; &nbsp;<i class="fas fa-cutlery"></i>
83105
</button>
84106
</div>
85107

86-
<div id="progress-bar" class="w-full bg-red-200 rounded overflow-hidden" style="opacity: 0.7">
87-
<div class="h-2 bg-red-600"></div>
88-
</div>
89108
</div>
90109

91110

92-
<br/><br/>
93-
<center>
94-
<img src="example-diagram.png" style="height: 260px; display: inline; opacity: 0.8"/>
95-
</center>
96-
<br/><br/>
97111

98112
<div class="w-full bg-red-200 rounded mb-4 overflow-hidden" style="opacity: 0.8">
99113
<div class="h-2 bg-red-600"></div>
@@ -104,37 +118,45 @@ <h1 class="text-center text-6xl font-bold" style="margin-bottom: 22px">DigestBox
104118
<div class="module p-4 bg-white rounded shadow-md relative opacity-50" id="title-pane">
105119
<i class="fas fa-heading mb-2"></i>
106120
<h3 class="font-bold">Title</h3>
107-
<p>The title of the page will be displayed here.</p>
108-
<div class="text-right">
109-
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
121+
<div class="hidden-area">
122+
<p>The title of the page will be displayed here.</p>
123+
<div class="text-right">
124+
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
125+
</div>
110126
</div>
111127
</div>
112128
<!-- Favicon Module -->
113129
<div class="module p-4 bg-white rounded shadow-md relative opacity-50" id="favicon-pane">
114130
<i class="fas fa-image mb-2"></i>
115131
<h3 class="font-bold">Favicon</h3>
116-
<p>Favicon will be displayed here.</p>
132+
<div class="hidden-area">
133+
<p>Favicon will be displayed here.</p>
117134

118-
<div class="text-right">
119-
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
135+
<div class="text-right">
136+
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
137+
</div>
120138
</div>
121139
</div>
122140

123141
<div class="module p-4 bg-white rounded shadow-md relative opacity-50" id="screenshot-pane">
124142
<i class="fas fa-camera mb-2"></i>
125143
<h3 class="font-bold">Screenshot</h3>
126-
<p>A screenshot of the page will be displayed here.</p>
127-
<div class="text-right">
128-
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
144+
<div class="hidden-area">
145+
<p>A screenshot of the page will be displayed here.</p>
146+
<div class="text-right">
147+
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
148+
</div>
129149
</div>
130150
</div>
131151
<!-- PDF Module -->
132152
<div class="module p-4 bg-white rounded shadow-md relative opacity-50" id="pdf-pane">
133153
<i class="fas fa-file-pdf mb-2"></i>
134154
<h3 class="font-bold">PDF</h3>
135-
<p>A PDF of the page will be displayed here.</p>
136-
<div class="text-right">
137-
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
155+
<div class="hidden-area">
156+
<p>A PDF of the page will be displayed here.</p>
157+
<div class="text-right">
158+
<button class="text-black px-4 py-1 rounded mt-2"><i class="fas fa-download"></i></button>
159+
</div>
138160
</div>
139161
</div>
140162

@@ -258,7 +280,6 @@ <h3 class="font-bold">3rd-Party Archives</h3>
258280
<!-- ... add similar blocks for each module you have ... -->
259281
</div>
260282
<br/>
261-
<hr/>
262283
<br/>
263284
<div id="download-section" class="text-center">
264285
<button id="digest-btn" class="bg-blue-900 text-white py-2 rounded mb-4 px-4 mx-5">View results as spreadsheet <img src="sheets-icon.png" alt="" style="height: 20px; display: inline-block; margin-left: 4px; vertical-align: -4px"/></button>
@@ -269,13 +290,14 @@ <h3 class="font-bold">3rd-Party Archives</h3>
269290

270291
<br/><br/>
271292
<hr/>
272-
<br/>
293+
<br/><br/><br/>
273294
<div class="max-w-6xl mx-auto border-3 rounded p-10" style="font-size: 1.1em; border: 3px solid gold; background-color: #ffeaea">
274295
<i>Want more? Pay just 1¢ per URL to use DigestBox PRO:</i>
275-
<br/><br/>
276-
<a href="#" class="button text-3xl bg-gray-900 text-white rounded p-4" style="display: block; float: right; margin-right: 20px">
296+
<br/>
297+
<a href="#" class="button text-3xl bg-gray-900 text-white rounded p-4" style="display: block; float: right; margin: 20px">
277298
Use PRO for 1¢/URL<i class="fas fa-arrow-right" style="color: gold"></i>
278299
</a>
300+
<br/>
279301
<ul style="list-style: circle">
280302
<li>Crawl entire sites/domains with advanced configuration options</li>
281303
<li>Set up repeating snapshots of sites on a schedule & auto-import from RSS/social media</li>
@@ -284,6 +306,10 @@ <h3 class="font-bold">3rd-Party Archives</h3>
284306
<li><i>And more...</i></li>
285307
</ul>
286308
</div>
309+
<br/><br/><br/>
310+
<center>
311+
<img src="logo.png" style="width: 90px; display: inline-block; margin-bottom: 10px; opacity: 0.7;"/><br/><br/>
312+
</center>
287313
</main>
288314
<footer class="py-4 bg-gray-800 text-white text-center">
289315
<a href="https://github.com/ArchiveBox/ArchiveBox" target="_blank" class="mx-2">GitHub</a>

0 commit comments

Comments
 (0)