diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0871e33 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "livePreview.defaultPreviewPath": "/index.html", + "markdown.validate.enabled": true +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9c13794 --- /dev/null +++ b/LICENSE @@ -0,0 +1,8 @@ +The MIT License (MIT) +Copyright © 2025 Linux UPC + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index b83aed3..3d3463b 100644 --- a/README.md +++ b/README.md @@ -1 +1,45 @@ -# linux_website \ No newline at end of file +# LinuxUPC Website + +This is the website of LinuxUPC, a community at the UPC dedicated to Free Software. + +## Project Structure + +The project is organized as follows: + +- `assets/css/`: Contains CSS files. +- `assets/js/`: Contains JavaScript files. +- `assets/fonts`: Contains the font files. +- `assets/icons/`: Contains icon files used in the project. +- `assets/img/`: Contains image files used in the project. +- `components/`: Contains HTML files for components. +- `index.html`: The main page and the entry point of the website. + +## Running the Project Locally + +To avoid issues with `fetch` and `file://`, the project should be served from a local server. Here are some options: + +### Using Python + +```sh +python -m http.server 8000 +``` + +### Using Node.js + +```sh +npx http-server -p 8000 +``` + +### Using PHP + +```sh +php -S localhost:8000 +``` + +## Contributing + +Contributions are welcome! Feel free to open an issue or submit a pull request. + +## License + +This project is licensed under the [MIT License](LICENSE). \ No newline at end of file diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 0000000..e1fe488 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,112 @@ +.about-component { + position: relative; + padding: 0.5em; + font-size: clamp(1rem, 0.481rem + 2.374vw, 2rem); + + /* Establecer maxima altura */ + max-height: 100%; + overflow-y: hidden; +} + +.about-component .window-component { + position: absolute; + top: 0; + left: 0; +} + +.about { + position: relative; + pointer-events: none; + z-index: 1; + display: flex; + flex-direction: column; + align-items: start; + gap: 0.3em; + + /* Establecer maxima altura */ + max-height: 100%; + overflow-y: hidden; +} + +.about > .title { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.2em; + width: fit-content; +} + +.about > .title img { + height: 2em; + object-fit: contain; +} + +.about > .title h3 { + font-family: Ubuntu; + font-style: normal; + font-size: 1em; + font-weight: 600; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + color: #fff; + margin: 0; + padding: 0; + text-align: start; + align-self: center; +} + +.about p, .about li { + font-family: Ubuntu; + font-style: normal; + font-size: 0.6em; + font-weight: 400; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + color: #fff; + margin: 0; + padding: 0; + text-align: justify; + width: fit-content; +} + +.about > :not(.title) { + margin-left: 0.5em; +} + +.about > .list { + display: flex; + flex: 1; + pointer-events: all; + flex-direction: column; + gap: 0.25em; + list-style: decimal inside; +} + +.about > .list li { + background: rgba(105, 105, 105, 0.65); + border-radius: 0.75em; + padding: 0.5em; +} + +/* Estilos para la barra de scroll */ +/* .about > .list::-webkit-scrollbar { + width: 10px; +} + +.about > .list::-webkit-scrollbar-track { + background: rgba(29, 29, 29, 1); + border-radius: 8px; +} + +.about > .list::-webkit-scrollbar-thumb { + background: rgba(105, 105, 105, 0.65); + border-radius: 8px; + border: 2px solid rgba(29, 29, 29, 1); +} + +.about > .list::-webkit-scrollbar-thumb:hover { + background: rgba(150, 150, 150, 0.75); +} */ \ No newline at end of file diff --git a/assets/css/activities.css b/assets/css/activities.css new file mode 100644 index 0000000..0af76c0 --- /dev/null +++ b/assets/css/activities.css @@ -0,0 +1,183 @@ +.activities-component { + position: relative; + font-size: clamp(1rem, 0.481rem + 2.374vw, 2rem); + padding: 0.5em; + max-width: 48rem; + height: fit-content; +} + +.activities-component .window-component { + position: absolute; + top: 0; + left: 0; +} + +.activities { + position: relative; + pointer-events: none; + z-index: 1; + display: flex; + flex-direction: column; + align-items: start; + gap: 0.4em; +} + +.activities > .title { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.25em; + width: fit-content; +} + +.activities > .title img { + height: 2em; + object-fit: contain; +} + +.activities > .title h3 { + font-family: Ubuntu; + font-style: normal; + font-size: 1em; + font-weight: 600; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + color: #fff; + margin: 0; + padding: 0; + text-align: start; + align-self: center; +} + +.activities p, .activities li { + font-family: Ubuntu; + font-style: normal; + font-size: 0.55em; + font-weight: 400; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + color: #fff; + margin: 0; + padding: 0; + text-align: justify; + width: fit-content; +} + +.activities > .cards { + flex: 1; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + gap: 0.5em; +} + +.activities > .cards > .card { + flex: 1 0; + background: #171718; + border-radius: 12px; + overflow: hidden; + + display: flex; + flex-direction: column; +} + +.activities > .cards > .card img { + height: 5em; + object-fit: cover; + object-position: center -155px; +} + +.activities > .cards .card-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: start; + gap: 12px; + padding: 10px; +} + +.activities > .cards .card-content button { + flex: 0; + pointer-events: all; + background: #3C7EAE; + border-radius: 10px; + border: none; + font-size: 0.8em; + font-weight: 600; + color: #ffffff; + + padding: 5px; + margin-top: auto; +} + +.activities > .cards .card-content button:hover { + background: #5d95bd; +} + +.activities h4 { + font-family: Ubuntu; + font-style: normal; + font-size: 0.8em; + font-weight: 500; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + color: #fff; + padding: 0; +} + +.dots { + flex: 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.25em; +} + +.dots span { + width: 0.45em; + height: 0.45em; + background-color: rgb(255, 255, 255); + border-radius: 50%; + display: inline-block; +} + +/* Media querry for medium size +@media (max-height: 905px) { + .dots { + display: none; + } +} */ + +/* Media querry for small size */ +@media (max-height: 925px) or (max-width: 1650px) { + .dots { + flex: 0 1 1em; + display: flex; + } + + .activities > .cards > .card:not(:first-child) { + display: none; + } + + .activities > .cards > .card { + flex: 1; + flex-direction: row; + } + + .activities > .cards > .card img { + height: 100%; + width: 30%; + object-position: center center; + } +} + +@media (max-width: 425px) { + .activities > .cards > .card img { + display: none; + } +} \ No newline at end of file diff --git a/assets/css/normalize.css b/assets/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/assets/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..a7fc05a --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,235 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap'); + +/* Reseteo básico */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Hacer que la página ocupe toda la pantalla sin scroll */ +html, body { + width: 100vw; + height: 100dvh; + overflow: hidden; + font-family: Ubuntu, sans-serif; + display: flex; + flex-direction: column; +} + +body { + background-image: url('../img/bg.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +/* 🔹 Barra Superior */ +.top-bar { + display: flex; + justify-content: space-between; + font-size: clamp(1.1rem, 0.972rem + 0.587vw, 1.5rem); /* min 350px | max 1440px*/ + align-items: center; + background-color: #131313; + color: white; + padding: 0.3em; +} + +.top-bar > .left { + display: flex; + height: 100%; + gap: 0.4em; + flex-direction: row; + align-items: center; +} + +.left > img { + height: 1.5em; + aspect-ratio: 1; + border-radius: 50%; +} + +.left > h1 { + margin: 0px; + font-style: normal; + font-size: 1em; + font-weight: 400; + line-height: 1.2; + letter-spacing: 0.5; +} + +@media (max-width: 380px) { + .left > h1 { + display: none; + } +} + +.center > p { + font-style: normal; + font-size: 0.9em; + font-weight: 400; + line-height: 1.2; + letter-spacing: 0.5; +} + +.right { + display: flex; + height: 1.7em; + gap: 0.5em; + align-items: center; + align-content: stretch; + flex-wrap: nowrap; + flex-direction: row-reverse; + justify-content: start; +} + +.right a { + height: 100%; + border-radius: 0.4em; + background: #3F3F3F; + padding: 0.1em; +} + +.right a:hover { + background: #5a5858; +} + +.right a img { + height: 100%; + aspect-ratio: 1; +} + +/* Contenedor Principal */ +.container { + flex-grow: 1; + max-height: calc(100dvh - clamp(1.1rem, 0.972rem + 0.587vw, 1.5rem)*2.3); /* chapuza total, no se como hacerlo bien*/ + display: flex; +} + +/* Barra Lateral */ +.sidebar { + min-width: clamp(50px, 8dvw, 90px); + background: rgba(29, 29, 29, 0.75); + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.3rem; + padding: 0.3rem; +} + +/* Elementos apilados en la barra lateral */ +.sidebar > * { + display: flex; + justify-content: center; + align-items: center; + background: rgba(67, 58, 67, 0.9); + border-radius: 0.5rem; + cursor: pointer; + transition: background 0.3s; + padding: 0.1rem; + width: 100%; +} + +.sidebar > *:hover { + background-color: #555; +} + +.sidebar img { + width: 100%; + aspect-ratio: 1; + object-fit: cover; +} + +@media (max-width: 425px) { + .sidebar { + align-self: self-start; + margin-top: 0.5rem; + border-radius: 0 0.5rem 0.5rem 0; + min-width: 1.65rem; + min-height: 2.5rem; + position: relative; + cursor: pointer; + } + + .sidebar::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background: url('../icons/chevron_right_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg') no-repeat center; + background-size: contain; + } + + .sidebar:hover { + background-color: rgba(17, 17, 17, 0.75);; + } + + .sidebar * { + display: none; + } +} + +/* Contenido Principal */ +.content { + flex: 1; + display: grid; + overflow-x: hidden; + overflow-y: auto; + grid-template-rows: auto 1fr; /* Define la altura de la primera columna*/ + gap: 0.5em; + padding: 0.5em; +} + +.content::-webkit-scrollbar { + width: 0.5em; +} + +.content::-webkit-scrollbar-track { + background: rgba(29, 29, 29, 1); +} + +.content::-webkit-scrollbar-thumb { + background: rgba(105, 105, 105, 0.65); + border-radius: 8px; + border: 2px solid rgba(29, 29, 29, 1); +} + +.content::-webkit-scrollbar-thumb:hover { + background: rgba(150, 150, 150, 0.75); +} + +/* Primera fila */ +.row:first-child { + display: flex; + justify-content: center; + flex-wrap: nowrap; +} + +/* Segunda fila */ +.row:last-child { + display: grid; + grid-template-columns: 1fr 1fr; + width: 100%; + gap: 0.5em; + align-items: center; +} + +@media (max-width: 1275px) or (max-height: 850px) { + .row:last-child { + display: flex; + flex-direction: column; + } +} + +/* Segunda fila primera columna */ +.row:last-child > *:first-child { + justify-self: end; +} + +/* Segunda fila segunda columna */ +.row:last-child > *:last-child:not(:first-child) { + justify-self: start; +} \ No newline at end of file diff --git a/assets/css/title.css b/assets/css/title.css new file mode 100644 index 0000000..81f630b --- /dev/null +++ b/assets/css/title.css @@ -0,0 +1,64 @@ +.title-component { + position: relative; + font-size: clamp(1.25rem, 0.861rem + 1.78vw, 2rem); + padding: 0.5em; +} + +.title-component .window-component { + position: absolute; + top: 0; + left: 0; +} + +.title { + position: relative; + z-index: 1; + + display: flex; + pointer-events: none; + flex-direction: column; + align-items: center; + gap: 0.2em; +} + +.title > div:first-child { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + gap: 0.3em; +} + +.title > div:first-child h1 { + font-family: Ubuntu; + font-style: normal; + font-size: 2.5em; + font-weight: 700; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: unset; + color: #fff; + margin: 0; + padding: 0; + text-align: center; + align-self: center; +} + +.title > div:first-child img { + height: 1.65em; + object-fit: contain; +} + +.title > h2 { + font-family: Ubuntu; + font-style: normal; + font-size: 1em; + font-weight: 500; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: unset; + color: #fff; + margin: 0; + padding: 0; + text-align: center; +} \ No newline at end of file diff --git a/assets/css/window.css b/assets/css/window.css new file mode 100644 index 0000000..91a3912 --- /dev/null +++ b/assets/css/window.css @@ -0,0 +1,50 @@ +.window-component { + background: rgba(29, 29, 29, 0.75); + font-size: clamp(1.25rem, 0.861rem + 1.78vw, 2rem); + width: 100%; + height: 100%; + border-radius: 0.2em; + position: relative; +} + +.window-controls { + position: absolute; + top: 0.2em; + right: 0.2em; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: start; + gap: 0.2em; +} + +.window-controls > .win-control { + width: 0.6em; + height: 0.6em; + border-radius: 50%; + background: #131313; + display: flex; + justify-content: center; + align-items: center; +} + +.window-controls > .win-control img { + width: 100%; + height: 100%; +} + +.win-control + .maximize-icon { + padding: 0.12em; +} + +.window-controls > .win-control:hover { + background: #3F3F3F; +} + +.window-controls > .win-control + .close-icon { + background: #EA5322; +} + +.window-controls > .win-control + .close-icon:hover { + background: #f78f62; +} \ No newline at end of file diff --git a/assets/fonts/.gitkeep b/assets/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/assets/icons/.gitkeep b/assets/icons/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/assets/icons/chevron_right_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/chevron_right_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..0603448 --- /dev/null +++ b/assets/icons/chevron_right_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/close-button.svg b/assets/icons/close-button.svg new file mode 100644 index 0000000..ce3e25c --- /dev/null +++ b/assets/icons/close-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..fd03116 --- /dev/null +++ b/assets/icons/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/event_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/event_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..94b67fe --- /dev/null +++ b/assets/icons/event_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..ef54108 --- /dev/null +++ b/assets/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/info_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/info_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..0d4efd1 --- /dev/null +++ b/assets/icons/info_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/assets/icons/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..4210bd0 --- /dev/null +++ b/assets/icons/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/maximize-button.svg b/assets/icons/maximize-button.svg new file mode 100644 index 0000000..6575552 --- /dev/null +++ b/assets/icons/maximize-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mdi--instagram.svg b/assets/icons/mdi--instagram.svg new file mode 100644 index 0000000..69f460a --- /dev/null +++ b/assets/icons/mdi--instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mdi--twitter.svg b/assets/icons/mdi--twitter.svg new file mode 100644 index 0000000..a2e276b --- /dev/null +++ b/assets/icons/mdi--twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/minimize-button.svg b/assets/icons/minimize-button.svg new file mode 100644 index 0000000..7c01249 --- /dev/null +++ b/assets/icons/minimize-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/bg.png b/assets/img/bg.png new file mode 100644 index 0000000..96c553a Binary files /dev/null and b/assets/img/bg.png differ diff --git a/assets/img/install_party.jpeg b/assets/img/install_party.jpeg new file mode 100644 index 0000000..9e9b65b Binary files /dev/null and b/assets/img/install_party.jpeg differ diff --git a/assets/img/linuxupc-logo.png b/assets/img/linuxupc-logo.png new file mode 100644 index 0000000..6c83678 Binary files /dev/null and b/assets/img/linuxupc-logo.png differ diff --git a/assets/js/.gitkeep b/assets/js/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/components.js b/assets/js/components.js new file mode 100644 index 0000000..2194d96 --- /dev/null +++ b/assets/js/components.js @@ -0,0 +1,24 @@ +// Load a component into a selector +function loadComponent(selector, file) { + return fetch(file) + .then((response) => response.text()) + .then((data) => { + document.querySelectorAll(selector).forEach((element) => { + element.innerHTML = data; + }); + }) + .catch((error) => + console.error(`Error loading component in ${file}:`, error) + ); +} + +// Load components on page load event +document.addEventListener("DOMContentLoaded", () => { + Promise.all([ + loadComponent(".title-component", "./components/title.html"), + loadComponent(".about-component", "./components/about.html"), + loadComponent(".activities-component", "./components/activities.html"), + ]).then(() => { + loadComponent(".window-component", "./components/window.html"); + }); +}); \ No newline at end of file diff --git a/components/.gitkeep b/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/components/about.html b/components/about.html new file mode 100644 index 0000000..90b718e --- /dev/null +++ b/components/about.html @@ -0,0 +1,27 @@ +
+
+
+ info +

¿Qué es LinuxUPC?

+
+

+ LinuxUPC es una asociación sin ánimo de lucro, dedicada al estudio y difusión del Software Libre en el seno de la Universitat Politècnica de Catalunya. +

+

+ Los objetivos de la asociación son: +

+
    +
  1. + Promover y formar en el uso de la cultura, las redes y hardware libre en todos los estamentos de la universidad. +
    2. +
  2. + Promover, como actividad de extensión universitaria, la participación en proyectos de software, cultura, redes y hardware libres. +
    3. +
  3. + Promover buenas prácticas en las actividades de especificación, diseño, implementación, implantación y gestión de proyectos de software libre. +
    4. +
  4. + Promover el uso y la colaboración con proyectos de software libre en las actividades de especificación, implementación, implantación y gestión de proyectos de software libre. +
    5. +
+
\ No newline at end of file diff --git a/components/activities.html b/components/activities.html new file mode 100644 index 0000000..8fa3166 --- /dev/null +++ b/components/activities.html @@ -0,0 +1,38 @@ +
+
+
+ icon +

Actividades

+
+

+ Aprende, experimenta y colabora en nuestra comunidad. ¡Únete a nuestros eventos y mejora tus habilidades!" 🚀 +

+
+
+ event +
+

📌Install Party

+

¡Instala Linux con nuestra ayuda! Trae tu portátil y te guiaremos en el proceso. Aprenderás los primeros pasos para moverte en este nuevo entorno y aprovechar todo su potencial. 🚀

+

📅Fecha: 15 de Marzo, 2025

+

📍Lugar: X

+ +
+
+
+ event +
+

📌Stream - Linux Basics

+

Te enseñamos desde cero lo que necesitas saber para empezar: gestionar la terminal, archivos, instalar programas y entender la estructura del sistema.

+

📅Fecha: 15 de Marzo, 2025

+

📍Lugar: X

+ +
+
+
+ + + +
+
+ +
\ No newline at end of file diff --git a/components/title.html b/components/title.html new file mode 100644 index 0000000..5d4ca02 --- /dev/null +++ b/components/title.html @@ -0,0 +1,8 @@ +
+
+
+ logo +

LinuxUPC

+
+

Explora, aprende y crea con Software Libre en la UPC

+
\ No newline at end of file diff --git a/components/window.html b/components/window.html new file mode 100644 index 0000000..62f2780 --- /dev/null +++ b/components/window.html @@ -0,0 +1,11 @@ +
+
+ minimize +
+
+ maximize +
+
+ close +
+
\ No newline at end of file diff --git a/index.html b/index.html index a7769da..ec8a0d4 100644 --- a/index.html +++ b/index.html @@ -2,47 +2,77 @@ Linux UPC - - - - - + + + + + + + + + -

Linux UPC

-

~ lloc en construcció ~

+ +
+ + MENU +

LinuxUPC

+ + +

2 Feb 10:01

+ + + + LIGHT MODE + + + X + + + INSTA + + +
+ +
+ + + +
+
+
+
+
+
+
+
+
+
+ + + diff --git a/lib/.gitkeep b/lib/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/pages/.gitkeep b/pages/.gitkeep new file mode 100644 index 0000000..e69de29