Codestin Search App

Thanks to visit codestin.com
Credit goes to github.com

171 lines (164 loc) · 10.1 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

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

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<title>Precios PAMI - Buscador de Medicamentos</title>

<meta name="description" content="Buscador de medicamentos con precios actualizados de PAMI. Consultá coberturas y copagos de forma rápida, gratuita y sin publicidad.">

<meta name="keywords" content="PAMI, medicamentos, precios, cobertura, copago, farmacia, salud">

<meta name="author" content="Pablo Bella">

<link rel="stylesheet" href="style.css">

<link rel="preload" href="medicamentos.json" as="fetch" crossorigin="anonymous">

<link rel="icon" type="image/svg+xml" href="img/favicon.svg">

<link rel="shortcut icon" href="img/favicon.svg">

<meta property="og:title" content="Buscador de Medicamentos PAMI">

<meta property="og:description" content="Buscá precios de medicamentos con cobertura PAMI. Gratuito, rápido y sin publicidad.">

<meta property="og:image" content="https://psbella.github.io/pami/img/logo_banner.svg">

<meta property="og:url" content="https://psbella.github.io/pami/">

<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">

</head>

<body>

<div class="container">

<div style="display: none;">

<svg xmlns="http://www.w3.org/2000/svg">

<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<circle cx="10" cy="10" r="7"/><line x1="15" y1="15" x2="21" y2="21"/>

</symbol>

<symbol id="icon-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>

<line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/>

<line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>

</symbol>

<symbol id="icon-lab" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<path d="M20 7h-4.18A3 3 0 0 0 16 5.18V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4"/>

<line x1="17" y1="3" x2="21" y2="7"/><line x1="21" y1="3" x2="17" y2="7"/>

<circle cx="7" cy="11" r="1"/><circle cx="7" cy="7" r="1"/><circle cx="7" cy="15" r="1"/>

</symbol>

<symbol id="icon-price" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<line x1="12" y1="1" x2="12" y2="23"/>

<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>

</symbol>

<symbol id="icon-clear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<polyline points="3 6 5 6 21 6"/>

<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>

<line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>

</symbol>

<symbol id="icon-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

<circle cx="12" cy="12" r="10"/>

<line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>

</symbol>

<symbol id="icon-update" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

<circle cx="12" cy="12" r="10"/>

<polyline points="12 6 12 12 16 14"/>

</symbol>

<symbol id="icon-cc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<path d="M4 4v16h16V4H4z M8 9h8M8 13h6M8 17h4"/>

</symbol>

<symbol id="icon-privacy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>

<line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/>

</symbol>

<symbol id="icon-terms" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<path d="M4 4v16h16V4H4z M8 9h8M8 13h6M8 17h4"/>

</symbol>

<symbol id="icon-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>

<polyline points="22,6 12,13 2,6"/>

</symbol>

<symbol id="icon-github" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>

</symbol>

<symbol id="icon-copyright" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

<circle cx="12" cy="12" r="10"/>

<path d="M12 8v8M8 12h8"/>

</symbol>

</svg>

</div>

<div class="header">

<div class="header-contenido">

<img src="img/logo_banner.svg" alt="Buscador de Medicamentos PAMI" class="header-logo" width="71" height="71" loading="eager" decoding="async">

<div class="header-texto">

<h1>Buscador de Medicamentos PAMI</h1>

<p>Precios de medicamentos con descuento de PAMI</p>

</div>

</div>

</div>

<div class="busqueda-section">

<div class="busqueda-container">

<div class="input-icon">

<svg width="20" height="20"><use href="#icon-search"/></svg>

<input type="text" id="buscador" placeholder="ingresá al menos tres caracteres">

</div>

<button id="btnBuscar">

<svg width="18" height="18"><use href="#icon-search"/></svg>

Buscar

</button>

</div>

<div class="contador-base">

<span id="totalMedicamentos">0</span> medicamentos y presentaciones en el listado

</div>

</div>

<div class="filtros-section">

<div class="filtros-container">

<div class="filtro-grupo">

<label><svg width="14" height="14"><use href="#icon-filter"/></svg>Presentación</label>

<select id="filtroPresentacion"><option value="">Todas</option></select>

</div>

<div class="filtro-grupo">

<label><svg width="14" height="14"><use href="#icon-lab"/></svg>Laboratorio</label>

<select id="filtroLaboratorio"><option value="">Todos</option></select>

</div>

<div class="filtro-grupo">

<label><svg width="14" height="14"><use href="#icon-price"/></svg>Ordenar por precio</label>

<select id="ordenPrecio">

<option value="">Sin orden</option>

<option value="asc">$ ↑ Más barato primero</option>

<option value="desc">$ ↓ Más caro primero</option>

</select>

</div>

</div>

<div class="limpiar-container">

<button id="btnLimpiarFiltros" class="btn-limpiar">

<svg width="16" height="16"><use href="#icon-clear"/></svg>

Limpiar filtros

</button>

</div>

</div>

<div id="contador" class="contador"></div>

<div id="resultados" class="resultados"></div>

<footer class="footer">

<div class="footer-contenido">

<div class="footer-aviso">

<svg width="16" height="16"><use href="#icon-info"/></svg>

<span>Fuente oficial: <strong>datos.pami.org.ar</strong>. Los precios son orientativos y pueden cambiar sin previo aviso.</span>

</div>

<div class="footer-actualizacion">

<svg width="14" height="14"><use href="#icon-update"/></svg>

<span>Última actualización del dataset: <strong id="fecha-actualizacion">Cargando...</strong></span>

</div>

<div class="footer-links">

<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank"><svg width="14" height="14"><use href="#icon-cc"/></svg>CC BY-NC 4.0</a>

<a href="privacidad.html"><svg width="14" height="14"><use href="#icon-privacy"/></svg>Política de Privacidad</a>

<a href="terminos.html"><svg width="14" height="14"><use href="#icon-terms"/></svg>Términos y Condiciones</a>

<a href="mailto:[email protected]?subject=Web%20Precios%20PAMI"><svg width="14" height="14"><use href="#icon-mail"/></svg>Contacto</a>

</div>

<div class="footer-mis-proyectos">

<a href="https://github.com/psbella?tab=repositories" target="_blank"><svg width="18" height="18"><use href="#icon-github"/></svg>Mis otros proyectos en GitHub</a>

</div>

<div class="footer-copyright">

<svg width="14" height="14"><use href="#icon-copyright"/></svg>

<span>© 2025 - Buscador de Medicamentos PAMI</span>

</div>

</div>

</footer>

</div>

<script type="module" src="js/main.js" defer></script>

</body>

</html>