Blob: index.etlua

Blob id: 520792bb356e3f7b5cc164f3f99a85332f73d96e

Size: 3.8 KB

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">Koivuhaan Asuntolat</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	  <span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
	  <ul class="navbar-nav">
	    <li class="nav-item">
	      <a class="nav-link" href="#asunnot">Asunnot</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#tiimi">Tietoa meistä</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#tiimi">Ota yhteyttä</a>
	    </li>
		<% if session.user then %>
		<li class="nav-item">
	      <a class="nav-link" href="/kirjaudu-ulos">Kirjaudu ulos</a>
	    </li>
	    <% else %>
	    <li class="nav-item">
	      <a class="nav-link" href="/kirjaudu">Kirjaudu</a>
	    </li>
	    <% end %>
	  </ul>
	</div>
  </div>
</nav>
<div class="mb-5 container-fluid px-0 position-relative" style="height: 500px; overflow: hidden">
    <img class="w-100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/2010s_residential_area_near_Peltolantie_and_Tikkurilantie_in_Koivuhaka%2C_Vantaa%2C_Finland%2C_2021_September.jpg/2560px-2010s_residential_area_near_Peltolantie_and_Tikkurilantie_in_Koivuhaka%2C_Vantaa%2C_Finland%2C_2021_September.jpg" class="img-fluid">
    <h1 class="position-absolute top-50 start-50 translate-middle text-white bg-dark px-4 py-2 fw-bold display-6">Koivuhaan Asuntolat</h1>
</div>

<div class="container">
    <h2 class="mb-4" id="asunnot">Asuntolat</h2>
    <div class="row row-cols-3 g-3 mb-5">
	<% for i, asunto in pairs(asunnot) do %>
	    <div class="col">
		<div class="card">
		    <img class="card-img-top" src="<%= asunto["kuva"] %>" alt="kuva asunnosta">
		    <div class="card-body">
			<h4 class="card-title">
			    <%= asunto["osoite"] %>
			</h4>
			<div class="d-inline-flex gap-2">
			    <small class="text-body-secondary"><%= asunto["hinta"]%> €</small>
			</div>
		    </div>
		</div>
	    </div>
	<% end %>
    </div>
    <h2 class="mb-3" id="tiimi">Tietoa meistä</h2>
    <div class="d-inline-flex align-items-center mb-4 gap-1">
	<p id="team-desc" style="margin: 0;">
	    <% if team_desc then %>
	    <%= team_desc %>
	    <% else %>
	    Ota rohkeasti yhteyttä!
	    <% end %>
	</p>
	<% if session.user then %>
	<button style="background: none; border: none;" id="edit-btn" onclick="changeToEditMode()"><img src="/static/pen.svg" /></button>
	<% end %>
	<form class="row g-3" id="edit-form" style="display: none" action="/edit-description" method="post">
	    <div class="col-auto">
		<input type="text" class="form-control" id="edit-input" name="description" placeholder="">
	    </div>
	    <div class="col-auto">
		<button type="submit" class="btn btn-secondary">Vahvista</button>
	    </div>
	</form>
    </div>
    <div class="row row-cols-5 g-5 mb-5">
	<% for i=5,1,-1 do %>
	<div class="col">
	    <div class="card border-0">
		<img class="card-img-top rounded-circle object-fit-cover" style="aspect-ratio: 1 / 1;" src="https://cataas.com/cat/fQCYUQNMnhPBN4jb?position=center" alt="jäsen">
		<div class="card-body">
		    <h5 class="card-title text-center">
			Matti Meikäläinen
		    </h5>
		</div>
	    </div>
	</div>
	<% end %>
    </div>
</div>
<script>
    const editForm =  document.getElementById("edit-form")
    const editBtn = document.getElementById("edit-btn")
    const editInput = document.getElementById("edit-input")
    const teamDesc = document.getElementById("team-desc")

    function changeToEditMode() {
	editBtn.style = "display: none";
	editForm.style = "";
	teamDesc.style = "display: none"
	editInput.value = teamDesc.innerText.trim()
    }


</script>