web/galeri.html at main · sdncitaleus2/web · GitHub

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
106
107
108
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dokumentasi SDN Citaleus 2</title>

<!-- LOGO DI TAB CHROME -->
<link rel="icon" type="image/png" href="aset/logo.png">

<style>
*{box-sizing:border-box;margin:0;font-family:system-ui,sans-serif}
body{
  background:#f4f6f8;
  color:#222;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* HEADER */
header{
  position:sticky;top:0;z-index:10;
  background:#0b3c5d;color:#fff;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{height:42px}
.brand span{font-weight:700}

.back-btn{
  background:#fff;
  color:#0b3c5d;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
}

/* TITLE */
.title{
  text-align:center;
  padding:18px 10px;
}

/* CONTENT */
.content{
  flex:1;
}

iframe{
  width:100%;
  height:calc(100vh - 220px);
  border:none;
}

/* FOOTER */
footer{
  background:#0b3c5d;
  color:#fff;
  text-align:center;
  padding:12px;
  font-size:14px;
  margin-top:auto;
}

/* MOBILE */
@media(max-width:480px){
  .brand span{display:none}
}
</style>
</head>

<body>

<header>
  <div class="brand">
    <img src="aset/logo.png" alt="Logo SDN Citaleus 2">
    <span>SDN Citaleus 2</span>
  </div>
  <button class="back-btn" onclick="history.back()">← Kembali</button>
</header>

<div class="title">
  <h1>Dokumentasi Kegiatan</h1>
</div>

<div class="content">
  <iframe
    src="https://drive.google.com/embeddedfolderview?id=1YxmohSvYXzZf03VNT56VSXrEknWs70IC#grid">
  </iframe>
</div>

<footer>
  <strong>SDN Citaleus 2</strong><br>
  © 2025 Dokumentasi Sekolah
</footer>

</body>
</html>