From 4b15e28ebd26f95700430024da6a32ed41204944 Mon Sep 17 00:00:00 2001 From: manvi255 Date: Thu, 30 Oct 2025 12:36:50 +0530 Subject: [PATCH 1/3] Added my CSS-only project: MyCSSProject --- MyCSSProject/README.md | 58 +++++++++ MyCSSProject/index.html | 114 +++++++++++++++++ MyCSSProject/style.css | 271 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 443 insertions(+) create mode 100644 MyCSSProject/README.md create mode 100644 MyCSSProject/index.html create mode 100644 MyCSSProject/style.css diff --git a/MyCSSProject/README.md b/MyCSSProject/README.md new file mode 100644 index 00000000..41b5517d --- /dev/null +++ b/MyCSSProject/README.md @@ -0,0 +1,58 @@ +# Glassmorphism Dashboard + +A modern, responsive dashboard built with HTML, CSS, and JavaScript featuring a beautiful glassmorphism design. + +## Features + +- 🎨 **Modern Glassmorphism Design**: Beautiful frosted glass effect with smooth animations +- 🌓 **Dark/Light Mode Toggle**: Switch between dark and light themes +- 📱 **Fully Responsive**: Works perfectly on all device sizes +- 📊 **Interactive Charts**: Real-time data visualization using Chart.js +- 🔄 **Live Updates**: Activity feed with real-time updates +- 📈 **Trend Indicators**: Shows performance trends with up/down arrows +- 🎯 **Status Cards**: Quick overview of important metrics +- 🎭 **Smooth Animations**: Elegant transitions and hover effects +- 📍 **Sidebar Navigation**: Easy access to different sections +- 👤 **Profile Section**: User profile integration + +## Enhancements Made + +1. Added Font Awesome icons for better visual hierarchy +2. Implemented dark/light mode toggle with CSS variables +3. Created a responsive sidebar with profile section +4. Added trend indicators to status cards +5. Integrated Chart.js for data visualization +6. Created a recent activities section +7. Enhanced hover effects and animations +8. Improved mobile responsiveness +9. Added CSS variables for better theme management +10. Implemented glassmorphism effects consistently + +## Setup + +1. Clone this repository +2. Open `index.html` in your browser +3. No additional setup required - it's all static files! + +## Technologies Used + +- HTML5 +- CSS3 (with CSS Variables) +- JavaScript (ES6+) +- Chart.js +- Font Awesome Icons + +## Contributing + +Feel free to fork this project and submit pull requests. Here are some ways you could help improve this dashboard: + +- Add more chart types and visualizations +- Implement data filters +- Add more themes +- Create additional components +- Improve accessibility +- Add more interactive features + +## License + +MIT License - feel free to use this in your projects! \ No newline at end of file diff --git a/MyCSSProject/index.html b/MyCSSProject/index.html new file mode 100644 index 00000000..0e65628a --- /dev/null +++ b/MyCSSProject/index.html @@ -0,0 +1,114 @@ + + + + + + + Glass Dashboard + + + + + + + + + + + + + + +
+
+

Glassmorphism Dashboard

+ +
+
+ +

Users

+

1,245

+
+ + 12% +
+
+
+ +

Revenue

+

$12,345

+
+ + 8% +
+
+
+ +

Tasks

+

87%

+
+ + 3% +
+
+
+ +

Messages

+

56

+
+ + 24% +
+
+
+ +
+

Recent Activities

+
+
+ +
+

New User Registration

+

John Smith joined the platform

+ 2 minutes ago +
+
+
+ +
+

New Sale

+

Product XYZ was purchased

+ 15 minutes ago +
+
+
+ +
+

New Report

+

Monthly report has been generated

+ 1 hour ago +
+
+
+
+ +
+
+ + + diff --git a/MyCSSProject/style.css b/MyCSSProject/style.css new file mode 100644 index 00000000..d9940846 --- /dev/null +++ b/MyCSSProject/style.css @@ -0,0 +1,271 @@ +/* ===== GOOGLE FONT ===== */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +/* ===== BODY & THEMES ===== */ +body { + background: linear-gradient(135deg, #00f260, #0575e6); + color: #fff; + min-height: 100vh; + transition: background 0.3s ease, color 0.3s ease; +} + +/* THEME TOGGLE USING CHECKBOX */ +.theme-checkbox { + display: none; +} + +.theme-checkbox:checked ~ .background, +.theme-checkbox:checked ~ .sidebar { + background: linear-gradient(135deg, #f0f0f0, #c0c0c0); + color: #111; +} + +.theme-checkbox:checked ~ .sidebar .nav-links li:hover, +.theme-checkbox:checked ~ .sidebar .nav-links li.active { + background: rgba(0,0,0,0.1); +} + +.theme-switch { + position: fixed; + top: 20px; + right: 20px; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + z-index: 1000; +} + +.theme-switch i { + font-size: 1.2rem; + color: #fff; +} + +/* ===== SIDEBAR ===== */ +.sidebar { + position: fixed; + top: 0; + left: 0; + width: 220px; + height: 100%; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); + padding: 30px 20px; + display: flex; + flex-direction: column; + gap: 40px; + box-shadow: 2px 0 15px rgba(0,0,0,0.2); + transition: all 0.3s ease; +} + +.profile { + text-align: center; +} + +.profile-img { + width: 80px; + height: 80px; + border-radius: 50%; + margin-bottom: 10px; + border: 2px solid #fff; +} + +.profile h3 { + margin-bottom: 5px; +} + +.nav-links { + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; +} + +.nav-links li { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + padding: 10px; + border-radius: 10px; + transition: background 0.3s ease; +} + +.nav-links li:hover, +.nav-links li.active { + background: rgba(255,255,255,0.2); +} + +/* ===== MAIN CONTENT ===== */ +.background { + margin-left: 240px; + padding: 40px; + transition: all 0.3s ease; +} + +.container { + max-width: 1200px; + margin: auto; +} + +/* ===== TITLE ===== */ +.title { + font-size: 2.5rem; + margin-bottom: 50px; + text-align: center; + text-shadow: 0 2px 10px rgba(0,0,0,0.3); +} + +/* ===== CARDS ===== */ +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 30px; + margin-bottom: 50px; +} + +.card { + position: relative; + background: rgba(255,255,255,0.1); + backdrop-filter: blur(15px); + border-radius: 20px; + padding: 30px 20px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 12px 40px rgba(0,0,0,0.4); +} + +.card-icon { + font-size: 2rem; + margin-bottom: 15px; + color: #ffeb3b; +} + +.card h2 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +.card p { + font-size: 2rem; + font-weight: 700; + color: #fff; + text-shadow: 0 2px 8px rgba(0,0,0,0.4); +} + +.card-trend { + position: absolute; + bottom: 15px; + right: 20px; + display: flex; + align-items: center; + gap: 5px; + font-weight: 500; +} + +.card-trend.up i { + color: #0f0; +} + +.card-trend.down i { + color: #f00; +} + +/* ===== RECENT ACTIVITIES ===== */ +.recent-activities h2 { + margin-bottom: 20px; +} + +.activity-list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.activity-item { + display: flex; + gap: 20px; + background: rgba(255,255,255,0.1); + backdrop-filter: blur(15px); + padding: 15px; + border-radius: 15px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.activity-item:hover { + transform: translateY(-5px); + box-shadow: 0 6px 20px rgba(0,0,0,0.3); +} + +.activity-item i { + font-size: 1.5rem; + margin-top: 5px; + color: #00bcd4; +} + +.activity-content h3 { + font-size: 1rem; + margin-bottom: 5px; +} + +.activity-content p { + font-size: 0.9rem; + margin-bottom: 5px; +} + +.activity-content .time { + font-size: 0.8rem; + color: #ccc; +} + +/* ===== RESPONSIVE ===== */ +@media (max-width: 1024px) { + .background { + margin-left: 0; + padding: 20px; + } + + .sidebar { + width: 200px; + padding: 20px; + } + + .cards { + gap: 20px; + } +} + +@media (max-width: 768px) { + .cards { + grid-template-columns: 1fr 1fr; + } + + .activity-list { + gap: 15px; + } +} + +@media (max-width: 480px) { + .cards { + grid-template-columns: 1fr; + } + + .title { + font-size: 2rem; + } + + .card p { + font-size: 1.5rem; + } +} From a5f5f162c5cbbb20649472222df822f27bb1ba05 Mon Sep 17 00:00:00 2001 From: Manvi Gupta Date: Thu, 30 Oct 2025 18:23:36 +0530 Subject: [PATCH 2/3] Update index.html --- MyCSSProject/index.html | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/MyCSSProject/index.html b/MyCSSProject/index.html index 0e65628a..bc3d91d9 100644 --- a/MyCSSProject/index.html +++ b/MyCSSProject/index.html @@ -1,6 +1,5 @@ - @@ -10,14 +9,19 @@ - - + + + + +