From 95f731a063243a8cd1da59fea34ed6f67367bef3 Mon Sep 17 00:00:00 2001 From: Manurbhav Date: Sun, 21 Apr 2024 01:27:03 +0530 Subject: Completed Resources page and changes in responsiveness --- package-lock.json | 19 +++ package.json | 2 + src/components/Accordion.astro | 204 ++++++++++++++++++++++++++ src/components/Carousel.astro | 68 +++++++++ src/components/Footer.astro | 22 +-- src/components/Header.astro | 14 +- src/components/HomeBody.astro | 283 +++++++++++++++++++++++++++++++++++++ src/components/HomeContent.astro | 261 ---------------------------------- src/components/IconBar.astro | 88 ++++++++++++ src/components/Navbar.astro | 2 +- src/components/ResourcesBody.astro | 34 +++++ src/components/TopBar.astro | 17 ++- src/pages/index.astro | 16 ++- src/pages/resources.astro | 4 + src/pages/schedule.astro | 2 + 15 files changed, 755 insertions(+), 281 deletions(-) create mode 100644 src/components/Accordion.astro create mode 100644 src/components/Carousel.astro create mode 100644 src/components/HomeBody.astro delete mode 100644 src/components/HomeContent.astro create mode 100644 src/components/IconBar.astro create mode 100644 src/components/ResourcesBody.astro diff --git a/package-lock.json b/package-lock.json index 25538b7..abcf7a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "@astrojs/check": "^0.5.10", "@astrojs/tailwind": "^5.1.0", "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", "@popperjs/core": "^2.11.8", "@types/bootstrap": "^5.2.10", + "@xexiu/astro-accordion": "^0.0.10", "astro": "^4.6.2", "astro-bootstrap": "^0.6.2", "bootstrap": "^5.3.3", @@ -914,6 +916,18 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", + "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1484,6 +1498,11 @@ "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.16.tgz", "integrity": "sha512-JT5CvrIYYCrmB+dCana8sUqJEcGB1ZDXNLMQ2+42bW995WmNoenijWMUdZfwmuQUTQcEVVIa2OecZzTYWUW9Cg==" }, + "node_modules/@xexiu/astro-accordion": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/@xexiu/astro-accordion/-/astro-accordion-0.0.10.tgz", + "integrity": "sha512-fuA4z7LUuYJf24s4jtqi3VXPDgTG0wcTWZaa15jd54rXYfqsLKjsT1P9Q+W4+IAHSP9vdLmA5xVlujCYmMjcjw==" + }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", diff --git a/package.json b/package.json index bf3baca..58bf389 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,10 @@ "@astrojs/check": "^0.5.10", "@astrojs/tailwind": "^5.1.0", "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", "@popperjs/core": "^2.11.8", "@types/bootstrap": "^5.2.10", + "@xexiu/astro-accordion": "^0.0.10", "astro": "^4.6.2", "astro-bootstrap": "^0.6.2", "bootstrap": "^5.3.3", diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro new file mode 100644 index 0000000..5f1f061 --- /dev/null +++ b/src/components/Accordion.astro @@ -0,0 +1,204 @@ +--- +interface BodyLine { + text: string; + link?: string +} +interface AccordionItem{ + heading : string; + body : BodyLine[]; +} + +const accordionItems: AccordionItem[] = [ + { + heading: "FOSSEE and Spoken Tutorial", + body: [ + {text:"1. Arduino Tutorial Series by Spoken Tutorial", link:'https://spoken-tutorial.org/tutorial-search/?search_foss=Arduino&search_language=English'}, + {text:"2. FLOSS-Arduino books teach Arduino control via open-source software", link : 'https://floss-arduino.fossee.in/'}, + ], + }, + { + heading: "Soil Nutrients Monitoring and Precision Agriculture", + body: [ + {text:"1. Water Your Garden with IoT - Soil Moisture Sensors", link:'https://www.youtube.com/watch?v=pgGpuws7f9o'}, + {text:"2. New Blynk IOT Smart Plant Monitoring System", link : 'https://www.youtube.com/watch?v=PTJ9sAk2c2I'}, + ], + }, + { + heading: "Weather Station", + body: [ + {text:"1. DIY Smart Home Weather Station - Wind, Rain, Temperature, Pressure, Humidity, Ligh", link:'https://www.youtube.com/watch?v=snCp0TqrER4'}, + {text:"2. Arduino Wireless Weather Station Project", link : 'https://www.youtube.com/watch?v=l3-y371RlI4'}, + {text:"3. LoRa Based Wireless Weather Station using Arduino and ESP32", link : 'https://www.youtube.com/watch?v=Nw392q1Sg4M'} + ], + }, + { + heading: "Air Quality and Noise Pollution Level", + body: [ + {text:"1. Air Quality Monitoring and Alert System using Arduino with MQ135", link:'https://www.youtube.com/watch?v=SCXteaUVICw'}, + {text:"2. IoT based Noise & Air quality Monitoring using blynk IoT | New Automation Tab update in Blynk", link : 'https://www.youtube.com/watch?v=p3-0mWkOFBk'}, + ], + }, + { + heading: "Asset Tracking", + body: [ + {text:"1. IOT Asset Tracking System", link:'https://www.youtube.com/watch?v=zFn487G2pY8'}, + {text:"2. Arduino Gps And Gsm Based location Tracking System | Women Safety Device Small Version", link : 'https://www.youtube.com/watch?v=rdvZpwV9A18'}, + ], + }, + { + heading: "Global Warming", + body: [ + {text:"1. Smart Grid: How IoT fights climate change (Kelsey Breseman)", link : 'https://www.youtube.com/watch?v=0SulU4QM334'}, + ], + }, + { + heading: "Disaster Management", + body: [ + {text:"1. Geospatial data for disaster management at ITC", link : 'https://www.youtube.com/watch?v=dYG7GsqcCMM'}, + ], + }, + { + heading: "Vehicle Detection and Intelligent Transportation", + body: [ + {text:"1. Intelligent Transport Systems made in KOREA English Version 22\'", link:'https://www.youtube.com/watch?v=H_JhcBTgwPo'}, + {text:"2. Connected Vehicle: The Future of Transportation", link : 'https://www.youtube.com/watch?v=Q8Cn47L8FRQ'}, + ], + }, + ]; +--- +
+{ + accordionItems.map((accordion)=>( +
+
+

{accordion.heading}

+ + + +
+
+ { + accordion.body.map((bodyLine) => ( +

+ {bodyLine.text} +

+ )) + } +
+
+ )) + } +
+ + + + + + + + diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro new file mode 100644 index 0000000..c0be475 --- /dev/null +++ b/src/components/Carousel.astro @@ -0,0 +1,68 @@ +--- +import { Carousel } from 'astro-bootstrap'; +import type { CarouselSlideType } from 'astro-bootstrap'; + +const slides: CarouselSlideType[] = [ + { + img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/rudra-logo.png', + alt: 'Rudra', + active:true, + link : 'http://www.rudra.iitb.ac.in/', + }, + { img: 'https://iot-gis-hackathon.fossee.in/static/cms/uploads/images/icfoss-logo.png', alt: 'icfoss', active: true }, + { img: 'https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/NM-ICPS-logo1.png', alt: 'NMICPS' ,active:true, link:'https://nmicps.in/'}, + { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/navavishkaar.png', alt: 'IITTNiF' ,active:true, link:'https://iittnif.com/'}, + { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iit-tirupati.png', alt: 'IIT Tirupati' ,active:true, link:'https://www.iittp.ac.in/'}, + { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png', alt: 'IITB' ,active:true, link:'http://iitb.ac.in/'}, + { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/fossee-logo.png', alt: 'FOSSEE' ,active:true, link:'https://fossee.in/'}, + { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/st-logo.png', alt: 'Spoken Tutorial' ,active:true, link:'https://spoken-tutorial.org/'}, +]; + + +const id = 'carouselExampleBasic'; +--- + + + + + + { + slides.map((slide) => ( + + + {slide.alt} + + + )) + } + + + + + + \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 04deac5..600f61f 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,26 +1,28 @@ --- -import 'bootstrap/dist/css/bootstrap.css' +// import 'bootstrap/dist/css/bootstrap.css' ---
- Creative Commons License + + Creative Commons License +

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License .

@@ -47,6 +49,10 @@ import 'bootstrap/dist/css/bootstrap.css' li{ font-size: 2.3vh; } + .footer-links{ + text-decoration: none; + color: aliceblue + } .license-container{ padding: 3vw; diff --git a/src/components/Header.astro b/src/components/Header.astro index 445feac..a21a969 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,7 +9,7 @@ import 'bootstrap/dist/css/bootstrap.css'

IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF &
ICFOSS presents

-
+
@@ -23,8 +23,10 @@ import 'bootstrap/dist/css/bootstrap.css' height: 80vh; padding: 1vh; background-color: rgb(252, 230, 188); + animation: zoomIn 1.5s; + z-index: 10; } - .map img{ + .map img { height: 60vh; width: 90%; margin-top: 20px; @@ -73,6 +75,14 @@ import 'bootstrap/dist/css/bootstrap.css' border-radius: 12px; font-family: "Lucida Console", Monaco, } + @keyframes zoomIn { + from { + transform: scale(1.3); + } + to { + transform: scale(1); + } + } @media screen and (max-width: 613px) { .head{ diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro new file mode 100644 index 0000000..71698cd --- /dev/null +++ b/src/components/HomeBody.astro @@ -0,0 +1,283 @@ +--- +import 'bootstrap/dist/css/bootstrap.css' +import Carousel from './Carousel.astro' +const props = Astro.props + +--- + + +
+

Introducing the Hackathon: Unlocking Innovation for a Better World

+ +

Welcome to the Open Source Hardware IoT GIS Hackathon!

+

Welcome to the National Level Open Hardware-IoT Geospatial Hackathon, a stage where innovation knows no boundaries. This premier event brings together visionaries, tech enthusiasts, and problem solvers from across the nation to harness the power of open hardware, the Internet of Things (IoT), and geospatial technology. Get ready to explore uncharted possibilities, collaborate on real-world challenges, and make a significant impact on our world.

+

Significance:

+ +

Join us on this extraordinary journey, where innovation knows no bounds. Together, let's turn ideas into actions and make a lasting impact on society and the environment. The Open Source Hardware IoT GIS Hackathon is your stage to shine, and the world is waiting to witness your brilliance.

+
+
+

Purpose

+

This hackathon is more than just a competition; it's a platform for innovators, creators, and visionaries to come together and pioneer solutions for a brighter future. Our purpose is to harness the power of open source hardware, the Internet of Things (IoT), and Geographic Information Systems (GIS) to address some of the world's most pressing challenges..

+

The FOSSEE project, IIT Bombay promotes the use of Free/ Libre Open Source Software in academia and Industry. The FOSSEE project is funded through the National Mission on Education through ICT (NMEICT), Ministry of Education, Government of India. The FOSSEE-GIS team manages the overall coordination of the "IIT Bombay FOSSEE GIS Internship in Geospatial Dashboard Design and Implementation".

+
+
+

Registration

+

Please click on the following button to register yourself for the Hackathon

+
+
+
+

Partner and Organisers

+

+ Technical Partner: + The Rural Data Research and Analysis (RuDRA) Lab, IIT Bombay is India's first HPC-powered data center dedicated to Rural Development. +

+
+ + +
+

+ Organizing Partner: + The IIT Tirupati Navavishkar I-Hub Foundation is the Technology Innovation Hub specializing in Positioning and Precision Technologies, funded through the National Mission on Interdisciplinary Cyber-Physical System (NM-ICPS), Department of Science and Technology, Government of India. +

+
+ +
+

Core Team and Contact Us + +

+
+
+

Prof. Kannan Moudgalya

+

P.I., FOSSEE

+

Indian Institute of Technology Bombay

+
+
+

Prof. Pennan Chinnasamy

+

Co.P.I., FOSSEE & PiC, The Rural Data Research & Analysis (RuDRA) Lab, IIT Bombay

+

Indian Institute of Technology Bombay

+
+
+

Prof. Roshan Srivastav

+

Project Director, IIT Tirupati Navavishkar I-Hub Foundation (NM-ICPS, DST)

+

Indian Institute of Technology Tirupati

+
+
+

Mr. Rajesh Kushalkar

+

Senior Manager, FOSSEE-Open Hardware

+

Indian Institute of Technology Bombay

+
+
+

Mr. Mohamed Kasim Khan

+

National Coordinator, FOSSEE-GIS

+

National Mission on Education through ICT, Ministry of Education, Government of India

+

Indian Institute of Technology Bombay

+
+
+

+ + Please write to us in case of any queries regarding the Hackathon at: +

+

+ + Email : + contact-oshw[at]fossee[dot]in +

+
+ + + diff --git a/src/components/HomeContent.astro b/src/components/HomeContent.astro deleted file mode 100644 index d4575d4..0000000 --- a/src/components/HomeContent.astro +++ /dev/null @@ -1,261 +0,0 @@ ---- -import 'bootstrap/dist/css/bootstrap.css' -const props = Astro.props ---- - - -
-

Introducing the Hackathon: Unlocking Innovation for a Better World

- -

Welcome to the Open Source Hardware IoT GIS Hackathon!

-

Welcome to the National Level Open Hardware-IoT Geospatial Hackathon, a stage where innovation knows no boundaries. This premier event brings together visionaries, tech enthusiasts, and problem solvers from across the nation to harness the power of open hardware, the Internet of Things (IoT), and geospatial technology. Get ready to explore uncharted possibilities, collaborate on real-world challenges, and make a significant impact on our world.

-

Significance:

- -

Join us on this extraordinary journey, where innovation knows no bounds. Together, let's turn ideas into actions and make a lasting impact on society and the environment. The Open Source Hardware IoT GIS Hackathon is your stage to shine, and the world is waiting to witness your brilliance.

-
-
-

Purpose

-

This hackathon is more than just a competition; it's a platform for innovators, creators, and visionaries to come together and pioneer solutions for a brighter future. Our purpose is to harness the power of open source hardware, the Internet of Things (IoT), and Geographic Information Systems (GIS) to address some of the world's most pressing challenges..

-

The FOSSEE project, IIT Bombay promotes the use of Free/ Libre Open Source Software in academia and Industry. The FOSSEE project is funded through the National Mission on Education through ICT (NMEICT), Ministry of Education, Government of India. The FOSSEE-GIS team manages the overall coordination of the "IIT Bombay FOSSEE GIS Internship in Geospatial Dashboard Design and Implementation".

-
-
-

Registration

-

Please click on the following button to register yourself for the Hackathon

-
-
-
-

Partner and Organisers

-

- Technical Partner: - The Rural Data Research and Analysis (RuDRA) Lab, IIT Bombay is India's first HPC-powered data center dedicated to Rural Development. -

-
- - -
-

- Organizing Partner: - The IIT Tirupati Navavishkar I-Hub Foundation is the Technology Innovation Hub specializing in Positioning and Precision Technologies, funded through the National Mission on Interdisciplinary Cyber-Physical System (NM-ICPS), Department of Science and Technology, Government of India. -

-
- -
-

Core Team and Contact Us - -

-
-
-

Prof. Kannan Moudgalya

-

P.I., FOSSEE

-

Indian Institute of Technology Bombay

-
-
-

Prof. Pennan Chinnasamy

-

Co.P.I., FOSSEE & PiC, The Rural Data Research & Analysis (RuDRA) Lab, IIT Bombay

-

Indian Institute of Technology Bombay

-
-
-

Prof. Roshan Srivastav

-

Project Director, IIT Tirupati Navavishkar I-Hub Foundation (NM-ICPS, DST)

-

Indian Institute of Technology Tirupati

-
-
-

Mr. Rajesh Kushalkar

-

Senior Manager, FOSSEE-Open Hardware

-

Indian Institute of Technology Bombay

-
-
-

Mr. Mohamed Kasim Khan

-

National Coordinator, FOSSEE-GIS

-

National Mission on Education through ICT, Ministry of Education, Government of India

-

Indian Institute of Technology Bombay

-
-
-

- - Please write to us in case of any queries regarding the Hackathon at: -

-

- - Email : - contact-oshw[at]fossee[dot]in -

-
- - - diff --git a/src/components/IconBar.astro b/src/components/IconBar.astro new file mode 100644 index 0000000..ac2c917 --- /dev/null +++ b/src/components/IconBar.astro @@ -0,0 +1,88 @@ +--- +const props = Astro.props +--- + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 26891e8..4b6c639 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -23,7 +23,7 @@ import 'bootstrap/dist/css/bootstrap.css' z-index: 1000; } .navbar a { - font-size: 2.2vh; + font-size: 2.4vh; font-weight:600; text-decoration: none; padding: 18px; diff --git a/src/components/ResourcesBody.astro b/src/components/ResourcesBody.astro new file mode 100644 index 0000000..b1204c3 --- /dev/null +++ b/src/components/ResourcesBody.astro @@ -0,0 +1,34 @@ +--- +import Accordion from './Accordion.astro' +--- + +
+
+

Resources

+
+ +
+ + diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro index 52478c6..ad29a4e 100644 --- a/src/components/TopBar.astro +++ b/src/components/TopBar.astro @@ -7,7 +7,7 @@ import 'bootstrap/dist/css/bootstrap.css'
- IITB + IITB
@@ -47,10 +47,21 @@ import 'bootstrap/dist/css/bootstrap.css' diff --git a/src/pages/index.astro b/src/pages/index.astro index 61c826e..95d8b7b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,16 +4,20 @@ import TopBar from '../components/TopBar.astro'; import Navbar from '../components/Navbar.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; -import HomeContent from '../components/HomeContent.astro'; +import HomeBody from '../components/HomeBody.astro'; +import IconBar from '../components/IconBar.astro'; ---
- - -
- -
+
+ + +
+ + +
+
diff --git a/src/pages/resources.astro b/src/pages/resources.astro index 064519b..e511d63 100644 --- a/src/pages/resources.astro +++ b/src/pages/resources.astro @@ -3,12 +3,16 @@ import Layout from '../layouts/Layout.astro'; import TopBar from '../components/TopBar.astro'; import Navbar from '../components/Navbar.astro'; import Footer from '../components/Footer.astro'; +import ResourcesBody from '../components/ResourcesBody.astro'; +import IconBar from '../components/IconBar.astro'; ---
+ +
diff --git a/src/pages/schedule.astro b/src/pages/schedule.astro index ab2f5a4..9320471 100644 --- a/src/pages/schedule.astro +++ b/src/pages/schedule.astro @@ -4,12 +4,14 @@ import TopBar from '../components/TopBar.astro'; import Navbar from '../components/Navbar.astro'; import Footer from '../components/Footer.astro'; import ScheduleBody from '../components/ScheduleBody.astro'; +import IconBar from '../components/IconBar.astro'; ---
+
-- cgit