# Project export: blossom.io This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 10.0 - Tagline: Blossomio represents the latest advancements in accessibility focused study spaces. By creating a pomodoro study timer with in-built "gameify" system, we introduce new and interactive ways to focus. - Devpost: https://devpost.com/software/blossom-io - GitHub: https://github.com/blossomio/blossomio.github.io - Demo: http://blossomio.github.io/ - Team: 2 GitHub contributor(s) — xiingrener (11 commits), blossomio (7 commits) ## Devpost submission (written by the team) ### Inspiration : Supporting individuals with learning disabilities such as ADHD and autism in academia and work scenarios. ### What it does : Blossom is a friendly pomodoro study space website. Pomodoro is a study technique where work and break time are separated into time intervals in order to boost productivity, combat procrastination and reduce stress. While maintaining our dedication to simplicity, fun, and efficiency, we gamified pomodoro to make work and study time appealing to our desired userbase. As the pomodoro counter goes down, your plant progressively grows and flourishes. Collect more plants to raise a garden/collection of 'Blossom'ing flowers! ### How we built it : Was built using HTML, CSS, and JS. ### Challenges we ran into : First time with JS ### Accomplishments we're proud of : First time in frontend and JS development. ### What's next : Including more accessible functions for Blossom such as colorblind mode, invite/study with friends, custom flashcards, data visualization on time usage and garden/collection elements. ## README (from the GitHub repository) # Blossomio Blossomio is a gamified pomodoro targeted for individuals with learning disabilities such as ADHD and autism who struggle with engaging in focused studying/working. Creating a gamified element to studying will provide users with fun, study oriented objectives associated with raising a lush, green collection of plants. The more you study with Blossom, the more plants you help 'Blossom'! ## Lessons Learned This is a project created by Berkeley freshman for CalHacks 10.0 using HTML, CSS, and JS. Future elements we hope to update are: - developing the plant collection game - adding colorblind customization - incorporation music player - Adding study with friends function - social chatbox with friends - custom flashcards ## Detected evidence (automated analysis) Indexed codebase: 24 recognized source files, 886 KB. - CSS (language) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code ## Codebase structure (from repository index) ### Files (39 of 39) ``` assets/css/icons/tabler-icons/tabler-icons.css assets/css/styles_counter.css assets/css/styles.css assets/css/styles.min.css assets/js/app.min.js assets/js/dashboard.js assets/js/sidebarmenu.js assets/plo assets/scss/component/_card.scss assets/scss/component/_reboot.scss assets/scss/layouts/_header.scss assets/scss/layouts/_layouts.scss assets/scss/layouts/_sidebar.scss assets/scss/pages/_dashboard1.scss assets/scss/prepros.config assets/scss/styles.scss assets/scss/utilities/_background.scss assets/scss/utilities/_icon-size.scss assets/scss/variables/_theme-variables.scss assets/scss/variables/_variables.scss authentication-login.html authentication-register.html checko.html icon-tabler.html index.html indexd.html.txt module_build_template.html notteepad.html package.json README.md sample-page.html script.js script1.js styles1.css ui-alerts.html ui-card.html ui-forms.html ui-typography.html ui-underconstructo.html ``` ### Dependencies - package.json: apexcharts@^3.37.0, bootstrap@^5.2.3, jquery@^3.6.3, sass@^1.54.8 ### Recent commits (newest first) - README.md - Add files via upload - Update script1.js - Update styles1.css - Update index.html - Add files via upload - Delete html directory - Add files via upload - Create plo - Add files via upload - Delete src directory - Delete README.md - Create pla - Add files via upload - Add files via upload - Create plo - Add files via upload - Create ple - Create place - Add files via upload ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "vite", "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Vite.", "version": "0.0.0", "private": true, "stackblitz": { "startCommand": "npm start" }, "devDependencies": { "sass": "^1.54.8" }, "dependencies": { "apexcharts": "^3.37.0", "bootstrap": "^5.2.3", "jquery": "^3.6.3" } } ``` ### notteepad.html ```html Notepad App
``` ### module_build_template.html ```html Notepad App
``` ### script.js ```javascript // Get all the checkboxes const checkboxes = document.querySelectorAll('input[type="checkbox"]'); // Add event listeners to each checkbox checkboxes.forEach((checkbox) => { checkbox.addEventListener('change', function() { const listItem = this.parentElement; // Get the parent
  • element if (this.checked) { listItem.classList.add('checked'); // Apply a 'checked' class for styling } else { listItem.classList.remove('checked'); // Remove the 'checked' class } }); }); ``` ### script1.js ```javascript const image = document.getElementById('scaling-image'); const container = document.getElementById('image-container'); const startButton = document.getElementById('start-button'); const stopButton = document.getElementById('stop-button'); const timerInput = document.getElementById('timer-input'); const countdownDisplay = document.getElementById('countdown1'); let timer; // A variable to hold the timer let remainingTime = 0; // Track the remaining time in seconds let timerDuration = 0; // The total duration of the timer in minutes function scaleImage() { const currentScale = parseFloat(image.style.transform.replace('scale(', '').replace(')', '')) || 0; if (remainingTime <= 0) { // If the timer has reached 0 or gone negative, set the image to full scale image.style.transform = `scale(1)`; clearInterval(timer); } else if (currentScale < 1) { // If we haven't reached full scale yet, scale proportionally const newScale = 1 - (remainingTime / (timerDuration * 60)); image.style.transform = `scale(${newScale})`; } } startButton.addEventListener('click', () => { // Start the timer when the "Start Scaling" button is clicked timerDuration = parseInt(timerInput.value); remainingTime = timerDuration * 60; // Convert minutes to seconds updateCountdownDisplay(); timer = setInterval(() => { scaleImage(); remainingTime -= 1; updateCountdownDisplay(); if (remainingTime <= 0) { clearInterval(timer); } }, 1000); // Run the timer every 1 second }); stopButton.addEventListener('click', () => { // Stop the timer when the "Stop Scaling" button is clicked clearInterval(timer); }); function updateCountdownDisplay() { countdownDisplay.textContent = `Time Remaining: ${remainingTime} seconds`; } ``` ### styles1.css ```css body { background-color: #ffffff; /* White background */ font-family: "Plus Jakarta Sans"; /* Use Plus Jakarta Sans font */ color: #71DA9E; /* Green text color */ text-align: left; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #container1 { background-color: #ffffff; /* White container background */ border: 2px solid #71DA9E; /* Green border */ padding: 20px; max-width: 600px; text-align: center; } h1 { color: #71DA9E; /* Green heading color */ font-family: "Plus Jakarta Sans"; /* Use Plus Jakarta Sans font for headings */ } #image-container { width: 100%; height: auto; overflow: hidden; text-align: center; margin: 20px 0; display: flex; justify-content: center; align-items: flex-end; /* Start at the bottom middle */ height: 21vh; /* Adjust the height for the image container */ } #scaling-image { width: 80%; /* Increase image size */ height: auto; transform-origin: center bottom; /* Start from the bottom middle */ transition: transform 1s; display: block; margin: 0 auto; transform: scale(0); /* Start with no scale */ } #controls { margin: 20px 0; } .jakarta_sans-font { font-family: "Plus Jakarta Sans"; /* Use Plus Jakarta Sans font for labels and buttons */ } input[type="number"], button { background-color: #71DA9E; /* Green background color */ color: #ffffff; /* White text color */ border: none; padding: 10px 20px; margin-right: 10px; cursor: pointer; border-radius: 5px; font-family: "Plus Jakarta Sans"; /* Use Plus Jakarta Sans font for input and buttons */ } button { font-weight: normal; } button:hover { background-color: #71DA9E; /* Darker green on hover */ } #countdown1 { color: #71DA9E; /* Green text color */ font-weight: bold; font-size: 1000; } ``` ### checko.html ```html
    ``` ### authentication-login.html ```html Modernize Free

    Your Social Campaigns

    Forgot Password ?
    Sign In

    New to Modernize?

    Create an account
    ``` ### authentication-register.html ```html Blossom.io
    cannot join other sprouts at the moment!   please come back another day :))

    ( under construction )

    ``` ### ui-card.html ```html Blossom.io
    this mode is currently photosynthesizing!   please come back another day :))

    ( under construction )

    ``` [11 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]