File size: 5,129 Bytes
571f20f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
    <title>App Installation</title>

    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon.png') }}">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <script src="{{ url_for('serve_install_module', filename=app_folder~'/Info.js') }}"></script>

</head>
<style>
#form-container {
  display: grid;
  justify-content: center; /* Horizontally center */
}
</style>
<body>
    <div id="loader" class="loader"><div class="spinner"></div></div>
    <button class="done-button" onclick="window.close()">✖️</button>
    
    <h1 style="font-family: 'Roboto', sans-serif; font-size: 45px; font-weight: bold; font-style: bold; font-color: black; text-align: center;">「 ✦Card-Install✦ 」</h1>
    <h2 style="font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: bold; font-color:black; font-style: bold;text-align: center;">DARNA.HI</h2>

    <!-- Import pictures -->
    <div class="container">
        <ul>
            <li>
                <a href="#" class="flip">
                    <img src="{{ url_for('serve_install_module', filename=app_folder ~ '/pic1.png') }}" alt="App Image" class="responsive-img">
                </a>
            </li>
            <li>
                <a href="#" class="flip">
                    <img src="{{ url_for('serve_install_module', filename=app_folder ~ '/pic2.png') }}" alt="App Image" class="responsive-img">
                </a>
            </li>
            <!-- Add more image tiles as needed -->
        </ul>
    </div>

    <div class="form-container">
        <div id="app-info">
        <h3 style="font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: bold; color: black; font-style: bold; text-align: center;">App Information</h3>
        <div style="display: flex; flex-direction: column; justify-content: left; margin-top: 40px; padding: 5px; margin-left: 20px; margin-bottom:80px;">
        <p><strong>App Name:</strong> <span id="app-name">Loading...</span></p>
        <p><strong>Port:</strong> <span id="app-port">Loading...</span></p>
        <p><strong>Requirements:</strong> <span id="app-requirements">Loading...</span></p>
        <p><strong>Description:</strong> <span id="app-description">Loading...</span></p>
        </div>
       


            <!-- Button to install app -->
            <div class="form-container" style="position: fixed; left: 0; bottom: 1rem; width: 100%; text-align: center;">
            <button id="install-button" class="login__button">INSTALL</button>
            <button id="install-button-ghost" class="login__button-ghost"></button>
        </div>
    </div>

    <script>
    
        // Initialize page with animations from styles.css
            window.addEventListener('load', function() {
                document.body.classList.add('loaded');
        
         // Hide loader if it exists
                const loader = document.getElementById('loader');
                if (loader) {
                    setTimeout(() => {
                        loader.classList.add('hidden');
                    }, 100);
                }
            });
  
        document.addEventListener('DOMContentLoaded', function() {
            const installButton = document.getElementById('install-button');

            // Update app information on the page
            document.getElementById('app-name').textContent = `${appInfo.App_name}`;
            document.getElementById('app-port').textContent = `${appInfo.Port}`;
            document.getElementById('app-requirements').textContent = `${appInfo.Requirements}`;
            document.getElementById('app-description').textContent = `${appInfo.Description}`;

            

            // Add a click event handler to the link
            installButton.addEventListener('click', function() {
                installButton.style.display = 'none'; // Hide the button
            // Client-side logic to go from /install to /execute_script
            //window.location.href = "/get_sudo";
                fetch('/execute_script', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ app_name: appInfo.App_name }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Script executed successfully!');
                    } else {
                        alert('Error executing script: ' + data.error);
                    }
                })
                .finally(() => {
                    installButton.style.display = 'block'; // Show the button again
                });
            });
        });
    </script>
</body>
</html>