splash page first draft

splash/app.R

@@ -2,92 +2,49 @@
 
 library(shiny)
 library(bslib)
+# library(shinyjs)
+library(readr)
+library(readtext)
 
-# Define theme using bslib::bs_theme()
+# Define theme
 theme <- bs_theme(
-    version = 5,
-    bg="blue",
-    fg="white"
+  version = 5,
+  bg="#08274d",
+  fg="white"
 )
 
-# Image carousel bootstrap
-carousel <- '
-<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-indicators">
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-  </div>
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img src="https://edit.co.uk/uploads/2016/12/Image-1-Alternatives-to-stock-photography-Thinkstock.jpg" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="https://media.istockphoto.com/photos/tasty-pepperoni-pizza-and-cooking-ingredients-tomatoes-basil-on-black-picture-id1083487948?k=20&m=1083487948&s=612x612&w=0&h=ROZ5t1K4Kjt5FQteVxTyzv_iqFcX8aqpl7YuA1Slm7w=" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" class="d-block w-100" alt="...">
-    </div>
-  </div>
-  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Previous</span>
-  </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Next</span>
-  </button>
-</div>
-'
-
+# HTML string used as body of Home page
+# index_html <- read_file("www/html_snippets/index_html.txt")
+index_body <- read_file("www/html_snippets/index_body.html")
 
 # Define UI for application
 ui <- navbarPage(
-    id = "splashNav",
-    theme = theme,
-    title='MarinEnergy',
-    windowTitle="MarineEnergy",
+  id = "splashNav",
+  theme = theme,
+  title = HTML('<a class="navbar-brand" href="#"><img src="images/logo-horizontal-white.svg" width="190px" height="24px" class="d-inline-block align-text-top"></a>'),
+  windowTitle="MarineEnergy",
+  collapsible = TRUE,
+  header = HTML('<link rel="stylesheet" type="text/css" href="styles.css">
+                   <script src="script.js"></script>'),
+  footer = HTML('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>'),
+  tabPanel(
+    title = "Home",
+    tags$body(HTML(index_body))
+  ),
+  tabPanel(
+    title = "Regulations"
+  ),
+  navbarMenu(
+    title = "More",
     tabPanel(
-        title = "Stuff",
-        fluidPage(
-            # Include custom CSS
-            includeCSS("www/styles.css"),
-
-            # Add jQuery
-            tags$head(HTML('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>')),
-            # includeScript("www/script.js"),
-
-            # Add a few HTML elements
-            tags$body(HTML('<h1>Hello!</h1>')),
-            tags$body(HTML('<a href="https://www.google.com" target="_blank">Test link</a><br>')),
-            tags$body(HTML('<div id="test-ele" class="test-box">Can even use jQuery</div><br>')),
-
-            # Add inline css
-            tags$head(tags$style(HTML("body { background-color: red; }"))),
-
-            # Add JavaScript
-            #   Inline
-            # tags$head(tags$script(HTML("$(document).ready(function() {$('.test-box').animate({height: '250px', width: '500px', opacity: 1}, 3000);});")))
-            #   As script
-            includeScript("www/script.js")
-        )
+      title = "About"
     ),
     tabPanel(
-        title = "Things",
-        tags$body(HTML(carousel))
-    ),
-    navbarMenu(
-        title = "More",
-        tabPanel(
-            title = "Option 1"
-        ),
-        tabPanel(
-            title = "Option 2"
-        )
+      title = "Help"
     )
+  )
 )
 
 server <- function(input, output, session) {}
 
-shinyApp(ui, server)
-
+shinyApp(ui, server)

splash/www/html_snippets/index_body.html

@@ -0,0 +1,69 @@
+<div id="wrapper" class="bootstrap">
+	<div id="WelcomeIndex">
+
+		<!-- Carousel -->
+		<div id="hero" class="homesection row">
+			<div id="hero-carousel" class="carousel slide" data-bs-ride="carousel">
+				<div class="carousel-inner" role="listbox">
+					<div class="carousel-item active">
+						<img src="images/logo-horizontal-full.svg" class="carousel-img d-block w-50" alt="...">
+						<div class="carousel-caption d-none d-md-block">
+							<a href="#" id="report-btn" class="btn btn-primary btn-lg" tabindex="-1" role="button">click here...</a>
+						</div>
+					</div>
+					<div class="carousel-item">
+						<img src="images/regs_not-grid_ak.svg" class="carousel-img d-block w-50" alt="...">
+					</div>
+					<div class="carousel-item">
+						<img src="images/logo.png" class="carousel-img d-block w-50" alt="...">
+					</div>
+				</div>
+
+				<button class="carousel-control-prev" type="button" data-bs-target="#hero-carousel" data-bs-slide="prev">
+					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+					<span class="visually-hidden">Previous</span>
+				</button>
+				<button class="carousel-control-next" type="button" data-bs-target="#hero-carousel" data-bs-slide="next">
+					<span class="carousel-control-next-icon" aria-hidden="true"></span>
+					<span class="visually-hidden">Next</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Body/info text -->
+		<div id="info" class="homesection row">
+
+			<div class="info-text">
+
+			  <a href="#" id="report-btn" class="btn btn-primary btn-lg" tabindex="-1" role="button">or here</a>
+
+				<p>Welcome to the Marine Energy Environmental Toolkit – a comprehensive compilation of existing environmental, spatial, regulatory, and scientific data relevant to the permitting and development of wave, tidal, river, and ocean
+					current energy-harvesting technologies.
+					<br>
+					<br>
+					The Toolkit was developed in collaboration with regulators and developers to create a useful and lasting permitting and licensing resource. The Toolkit was funded by the U.S. Department of Energy (DOE) and was built to complement
+					other DOE efforts, such as the <a href="https://openei.org/wiki/PRIMRE" target="_blank">Portal and Repository for Information on Marine Renewable Energy (PRIMRE)</a>. Information provided is primarly from <a
+						href="https://tethys.pnnl.gov/knowledge-base" target="_blank">Tethys Knowledge Base</a> and the <a href="https://elibrary.ferc.gov/eLibrary/search" target="_blank">FERC eLibrary</a>.
+				</p>
+			</div>
+		</div>
+
+    <div id="info-img" class="homesection row">
+			  <img id="wave-img" src="images/home-waves.png" />
+    </div>
+
+		<!-- Footer -->
+		<footer class="footer-container">
+			<div class="footer-content">
+				<div class="footer-left col">
+					<img src="images/logo-doe-eere.svg" class="footer-logo" />
+				</div>
+				<div class="footer-right col">
+					Copyright © 2021.<br>
+					<a href="/help.html#disclaimer">Disclaimer</a> & <a href="/help.html#who-funded-this-project">Acknowledgements</a>
+				</div>
+			</div>
+		</footer>
+
+  </div>
+</div>