komnumlab/app.py at main · mrbrightsides/komnumlab · 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
import streamlit as st
import streamlit.components.v1 as components

st.set_page_config(
    page_title="KomNumLab",
    page_icon="⚙️",
    layout="wide"
)

with st.sidebar:
    st.sidebar.image(
        "https://i.imgur.com/pwYe3ox.png",
        use_container_width=True
    )
    st.sidebar.markdown("📘 **About**")
    st.sidebar.markdown("""
    **Computational Analytics Studio** adalah laboratorium komputasi numerik untuk analisis data dan pengambilan keputusan. Mahasiswa dapat mengeksplorasi case study nyata melalui agregasi data, optimisasi, clustering, hingga fuzzy logic decision making, dengan output berupa visualisasi yang kaya dan insight yang siap diinterpretasi.

    ---
    #### 🔮 Vision Statement

    Mendorong mahasiswa untuk berpikir kritis dan analitis melalui komputasi numerik berbasis studi kasus, sehingga mampu menghubungkan teori dengan praktik nyata dalam pengambilan keputusan berbasis data.

    ---
    ### 🧩 Apps Showcase
    Lihat disini untuk semua tools yang kami kembangkan:
    [ELPEEF](https://showcase.elpeef.com/)

    ---
    #### 🙌 Dukungan & kontributor

    - ⭐ **Star / Fork**: [GitHub repo](https://github.com/mrbrightsides/komnumlab)
    - Built with 💙 by [Khudri](https://s.id/khudri)
    - Dukung pengembangan proyek ini melalui:
      [💖 GitHub Sponsors](https://github.com/sponsors/mrbrightsides) •
      [☕ Ko-fi](https://ko-fi.com/khudri) •
      [💵 PayPal](https://www.paypal.com/paypalme/akhmadkhudri) •
      [🍵 Trakteer](https://trakteer.id/akhmad_khudri)

    Versi UI: v1.0 • Streamlit • Theme Dark
    """)

import streamlit.components.v1 as components

def embed_iframe(src, hide_top_px=100, hide_bottom_px=0, height=800):
    components.html(f"""
    <style>
        @media (max-width: 768px) {{
            .hide-on-mobile {{
                display: none !important;
            }}
            .show-on-mobile {{
                display: block !important;
                padding: 24px 12px;
                background: #ffecec;
                color: #d10000;
                font-weight: bold;
                text-align: center;
                border-radius: 12px;
                font-size: 1.2em;
                margin-top: 24px;
                animation: fadeIn 0.6s ease-in-out;
                box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            }}
        }}
        @media (min-width: 769px) {{
            .show-on-mobile {{
                display: none !important;
            }}
        }}
        @keyframes fadeIn {{
            from {{ opacity: 0; transform: translateY(12px); }}
            to {{ opacity: 1; transform: translateY(0); }}
        }}
    </style>

    <!-- Desktop view -->
    <div class="hide-on-mobile" style="height:{height}px; overflow:hidden; position:relative;">
        <iframe src="{src}"
                style="width:100%; height:calc(100% + {hide_top_px + hide_bottom_px}px);
                       border:none; position:relative; top:-{hide_top_px}px;">
        </iframe>
    </div>

    <!-- Mobile fallback -->
    <div class="show-on-mobile">
        📱 Tampilan ini tidak tersedia di perangkat seluler.<br>
        Silakan buka lewat laptop atau desktop untuk pengalaman penuh 💻
    </div>
    """, height=height + hide_top_px + hide_bottom_px)

iframe_url = "https://komnumlab.elpeef.com/"

# Panggil fungsi
embed_iframe(iframe_url, hide_top_px=0, hide_bottom_px = -100, height=800)