views/layout.erb

<!doctype html>

<html lang="en">
  <head>
  	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<link rel="stylesheet" href="/stylesheet.css">
  	<script type="text/javascript" src="/script.js"></script>
  	<title>Teatree</title>
  	<meta property="og:title" content="Teatree" />
  	<meta property="og:url" content="https://teatr.ee" />
  	<meta property="og:type" content="website" />
  	<meta property="og:description" content="A landing page for your online world" />
  </head>
  <body>
    <header id="site-header">
			<a class="nodecoration" href="/">
				<h1>Teatree</h1>
			</a>
			<span>
				<% if logged_in? %>
					<a href="/logout">Log out</a>
				<% else %>
					<a href="/login">Log in</a> or <a href="/signup">sign up</a>
				<% end %>
			</span>
    </header>
    <main id="site-content">
      <%= yield %>
    </main>
    <footer id="site-footer">
      <small>
        This software is free and open-source &mdash; <a href="https://github.com/aronlebani/teatree" target="_blank">view source</a>.
        <br />
        If you find Teatree useful, please consider making a <a href="https://www.paypal.com/donate/?hosted_button_id=WDXMN26JPFAXL" target="_blank">small donation</a>.
        <br />
				<a href="/terms">Terms of service</a> and <a href="/privacy">privacy policy</a>
      </small>
    </footer>
  </body>
  <script>
    const image = document.getElementById("image")
    if (image) {
      image.onchange = function () {
        const src = URL.createObjectURL(this.files[0]);
        document.getElementById("profile-image-preview").src = src
      }
    }
  </script>
</html>