feat: Implement the home page

2 files changed, 100 insertions, 3 deletions

diff --git a/views/home/index.php b/views/home/index.php
new file mode 100644
index 0000000..33f123d
--- /dev/null
+++ b/views/home/index.php
@@ -0,0 +1,38 @@
+<?php
+    include '../meta.php';
+?>
+
+<section class="highlight separate-margin">
+    <h2>Explore the archives or add a new page</h2>
+    <form action="/sample_archive/index.php" method="POST" class="font-125 flex-row width-100 center-margin">
+        <input type="text" name="page_url" placeholder="Enter a URL" class="flex-expand">
+        <input type="submit" name="archive_page_button" value="Search">
+    </form>
+</section>
+
+<hr class="new-section"/>
+
+<h1>Most popular archives</h1>
+
+<?php foreach(Database\Webpage::mostVisited(10) as $page): ?>
+    <section class="card">
+        <section class="quickinfo">
+            <a href="<?php echo $page->URL ?>"><?php echo $page->URL ?></a>
+            <span class="float-right"><?php echo $page->Date ?></span>
+        </section>
+        <section>
+            <span><!-- Favicon --></span>
+            <span><!-- Title --></span>
+        </section>
+        <section>
+            <strong>Visits: <?php echo $page->Visits ?></strong>
+            <strong><!-- Archives count --></strong>
+        </section>
+    </section>
+<?php endforeach; ?>
+<h1>...</h1>
+
+<div class="card-blank-afterspace"></div>
+
+<?php end_page(); ?>
+
diff --git a/views/styles.css b/views/styles.css
index cbfc3b8..9ace7bf 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -5,6 +5,8 @@
   --highlight-border-color: #cecec9;
   --orange: #cc7000;
   --cherry: #703d46;
+
+  --card-expand-with: 6em;
 }
 
 /* Global */
@@ -16,6 +18,7 @@ body {
   color: var(--foreground-color);
 
   width: 100vw;
+  max-width: 100%;
   height: 100vh;
 
   margin: 0;
@@ -32,7 +35,7 @@ strong {
   color: #ff7233;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1 {
   text-align: center;
 }
 
@@ -46,6 +49,8 @@ input {
 
   border: none;
   border-radius: 0.25em;
+
+  min-width: 1em;
 }
 
 input[type=text]:focus {
@@ -56,6 +61,48 @@ input[type=submit]:hover {
   cursor: pointer;
 }
 
+/* Generic */
+
+.float-right {
+  float: right;
+}
+
+.width-80 {
+  width: 80%;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.font-125 {
+  font-size: 1.25em;
+}
+
+.font-150 {
+  font-size: 1.5em;
+}
+
+.center-margin {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.separate-margin {
+  margin-top: 5em;
+  margin-bottom: 8em;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+}
+
+.flex-expand {
+  flex: 1;
+}
+
 /* Main containers */
 header, article {
   max-width: 60rem;
@@ -78,7 +125,7 @@ nav > * {
 
   width: fit-content;
 
-  color: color(--foreground-color);
+  color: white;
   background-color: var(--orange);
   text-decoration: none;
 
@@ -100,6 +147,14 @@ article > * {
 }
 
 /* Page elements */
+hr.new-section {
+  height: 3px;
+  border-width: 0;
+  color: var(--orange);
+  background-color: var(--orange);
+  margin-bottom: 5em;
+}
+
 .card {
   display: flex;
   flex-direction: column;
@@ -128,7 +183,7 @@ article > * {
 
 .card:hover {
   cursor: pointer;
-  height: 12.5em;
+  height: calc(6.5em + var(--card-expand-with));
 }
 
 .card > .quickinfo {
@@ -136,3 +191,7 @@ article > * {
   padding-bottom: 0.5em;
   border-bottom: 3px dotted #909090;
 }
+
+.card-blank-afterspace {
+  height: var(--card-expand-with);
+}