modulostk/index.html at main · LeanxModulostk/modulostk · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MAGISK REPOSITORY [ModulosTk]</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" href="icon1.png">
</head>
<body>
<div class="col align-items-center content">
  <div id="listingInfo" class="col mb-4 w-300 align-items-center">
      <img width="100%" src="portada.jpg">

      <div class="col align-items-center content" >
        <!--p class="MODULOSTK_MAGISK_REPOSITORY grad">
          <span class="align-items-center" id="repoName"></span>
        </p-->
        <p id="resultado" class="gradb" style="font-size: 20px;"><!--b>VERSION:</b> <span id="version"></span--></p>
    <strong class="gradb">LAST UPDATE:</strong> <span class="gradr" id="timestamp"></span>
    <b class="gradb">REPOSITORY LINK</b>
        <div class="caption1" id="publishedByText">
          <span class="gradr" style="font-size: 25px;" id="baseurl"></span>
        </div>
    </div>
  </div>

  <div class="searchBlock">
    <fluent-text-field id="searchInput" oninput="searchModules()" placeholder="search modules..." type="text" autofocus="" class="outline" current-value="" appearance="outline"></fluent-text-field>
  </div>
  <fluent-card class="packages">
    <fluent-data-grid id="packageGrid" role="grid" grid-template-columns="1fr 100px 220px" tabindex="0" generate-header="default">

  <!--h2>Listado de Módulos</h2-->
  <ul id="modulesList"></ul>
  <!----></fluent-data-grid>
</fluent-card>


<script>
  const jsonConf = 'json/config.json'

  fetch(jsonConf)
    .then(response => response.json())
    .then(jsonDate => {
      document.getElementById('baseurl').textContent = jsonDate.BASE_URL
    })

var span = document.getElementById('baseurl');
span.addEventListener('click', function() {
    var valor = this.textContent;
    var tempInput = document.createElement('input');
    tempInput.value = valor;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    alert('El enlace del repositorio ha sido copiado: ' + valor);
});
</script>

<script>
  // URL del archivo JSON
  const jsonUrl = 'json/modules.json';

  // Función para mostrar los módulos que coinciden con el término de búsqueda
  function searchModules() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const modulesList = document.getElementById('modulesList');
    const modules = modulesList.getElementsByTagName('li');

    for (const module of modules) {
      const name = module.querySelector('strong').textContent.toLowerCase();
      const description = module.querySelector('em').textContent.toLowerCase();

      if (name.includes(searchTerm) || description.includes(searchTerm)) {
        module.style.display = 'block';
      } else {
        module.style.display = 'none';
      }
    }
  }

  // Obtener el JSON desde la URL utilizando fetch
  fetch(jsonUrl)
    .then(response => response.json())
    .then(jsonData => {
      // Mostrar la información del repositorio
      //document.getElementById('repoName').textContent = jsonData.name;
      document.getElementById('timestamp').textContent = new Date(jsonData.metadata.timestamp * 1000).toLocaleString();
      //document.getElementById('version').textContent = jsonData.metadata.version;
      // Obtener el elemento HTML donde se mostrará el resultado
      var resultado = document.getElementById("resultado");
      // Crear una variable para almacenar el conteo
      var conteo = 0;
      // Recorrer el arreglo de objetos del JSON
      for (var i = 0; i < jsonData.modules.length; i++) {
        // Incrementar el conteo en uno por cada objeto
        conteo++;
      }
      // Mostrar el conteo en el elemento HTML
      resultado.innerHTML = "The repository contains " + conteo + " modules.";

      // Mostrar el listado de módulos
      const modulesList = document.getElementById('modulesList');
      jsonData.modules.forEach(module => {
        const listItem = document.createElement('span');
        listItem.innerHTML = `
        <fluent-data-grid-row data-package-name="${module.name}" data-package-id="com.vrchat.udonsharp" role="row" row-type="default">
          <a href="${module.versions[0].zipUrl}"><fluent-data-grid-cell grid-column="1" role="gridcell" style="grid-column: 1;" cell-type="default">
              <div class="packageName grad">${module.name} (${module.version})</div>
              <div class="caption1 gradb">${module.description}</div>
              <div class="caption2 gradr">${module.author}</div>
          </fluent-data-grid-cell></a>
          <!--fluent-data-grid-cell grid-column="2" class="row align-items-center" tabindex="-1" role="gridcell" style="grid-column: 2;" cell-type="default">
            (${module.version})
          </fluent-data-grid-cell-->
          <!--fluent-data-grid-cell grid-column="3" class="row align-items-center justify-content-end" tabindex="-1" role="gridcell" style="grid-column: 3;" cell-type="default">
            <a href="${module.versions[0].zipUrl}"><fluent-button appearance="accent" class="rowAddToVccButton accent"  current-value="">Descargar ZIP</fluent-button></a>
          </fluent-data-grid-cell-->`;
        modulesList.appendChild(listItem);
      });
    })
    .catch(error => {
      console.error('Error al obtener el JSON:', error);
    });
</script>


  <script type="module" src="script.js"></script>
  <div class="caption1 mb-2 gradz" >By <a href="https://t.me/modulostk" target="_blank"><b>Modulostk</b></a></div>
</body>
</html>