From 876ba3c8350d16adb6b54a9a4893605f05217f90 Mon Sep 17 00:00:00 2001 From: Aculix Technologies Date: Thu, 16 Oct 2025 14:16:01 +0530 Subject: [PATCH] first commit --- .gitignore | 3 + Dockerfile | 31 ++ LICENSE | 21 ++ README.md | 113 +++++++ assets/logo.svg | 8 + assets/lottie_empty_state.json | 1 + index.html | 31 ++ package.json | 28 ++ src/App.svelte | 371 +++++++++++++++++++++++ src/main.js | 7 + src/style.css | 521 +++++++++++++++++++++++++++++++++ vite.config.mjs | 14 + 12 files changed, 1149 insertions(+) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 LICENSE create mode 100644 README.md create mode 100644 assets/logo.svg create mode 100644 assets/lottie_empty_state.json create mode 100644 index.html create mode 100644 package.json create mode 100644 src/App.svelte create mode 100644 src/main.js create mode 100644 src/style.css create mode 100644 vite.config.mjs diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..384b91f --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/.DS_Store +/node_modules +/package-lock.json \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..0dc492d --- /dev/null +++ b/Dockerfile @@ -0,0 +1,31 @@ +# Build stage +FROM node:20-alpine AS builder + +WORKDIR /app + +# Copy package files +COPY package*.json ./ + +# Install dependencies with proper optional dependency handling for Alpine/musl +RUN npm install --include=optional + +# Copy source code +COPY . . + +# Build the application +RUN npm run build + +# Production stage +FROM nginx:alpine + +# Copy built files from builder stage +COPY --from=builder /app/dist /usr/share/nginx/html + +# Copy nginx configuration (if needed) +# COPY nginx.conf /etc/nginx/conf.d/default.conf + +# Expose port 80 +EXPOSE 80 + +# Start nginx +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..abcb4df --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Aculix Technologies LLP + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..37de7fc --- /dev/null +++ b/README.md @@ -0,0 +1,113 @@ +# Negotium + +A beautiful, minimal to-do list application featuring smooth animations, intelligent date management, and a modern design that helps you stay organized and productive. + +## 💭 Why Negotium? + +While powerful tools like Trello and Vikunja excel at managing complex projects and long-term planning, sometimes you just need a simple, focused space for your daily tasks. That's why I built Negotium, a straightforward to-do list for today and tomorrow. Nothing more, nothing less. + +Built with Svelte for speed and simplicity. No overwhelming features, no endless project boards, no complexity. Just a clean interface for your daily workflow. + +## ✨ Features + +### Core Functionality +- ✅ **Add, complete, and delete tasks** with smooth animations +- 📅 **Today & Tomorrow lists** - Plan ahead with separate task lists +- 🔄 **Automatic task migration** - Tomorrow's tasks automatically move to Today when a new day begins +- 🎯 **Drag and drop reordering** - Organize tasks by dragging them into position +- 💾 **Persistent storage** - All tasks saved locally in your browser +- 📊 **Task statistics** - See remaining and completed tasks at a glance + +## 🚀 Getting Started + +### Quick Start with Docker (Recommended) + +Pull and run the pre-built Docker image: + +```bash +# Pull the image +docker pull ghcr.io/aculix/negotium:main + +# Run the container +docker run -d -p 3000:80 --name negotium ghcr.io/aculix/negotium:main +``` + +Then open `http://localhost:3000` in your browser. + +To stop the container: +```bash +docker stop negotium +docker rm negotium +``` + +### Manual Installation + +If you prefer to run the application locally without Docker: + +1. Clone the repository: +```bash +git clone +cd negotium +``` + +2. Install dependencies: +```bash +npm install +``` + +3. Start the development server: +```bash +npm run dev +``` + +4. Open `http://localhost:3000` in your browser + +#### Build for Production + +```bash +npm run build +``` + +The optimized files will be in the `dist` directory. + +## 📖 How to Use + +### Managing Tasks +- **Add a task**: Type in the input field and press Enter +- **Complete a task**: Click the checkbox next to the task +- **Delete a task**: Hover over a task and click the delete icon +- **Reorder tasks**: Click and drag any task to a new position +- **Clear input**: Press Escape to clear the input field + +### Date Management +- **Switch between Today and Tomorrow**: Click the date button in the header +- **Plan ahead**: Add tasks to Tomorrow's list before you need them +- **Automatic migration**: When a new day begins, Tomorrow's tasks automatically become Today's tasks +- **Separate lists**: Today and Tomorrow maintain independent task lists + +### Theme Toggle +- Click the sun/moon icon in the header to switch themes +- Your preference is saved automatically and restored on reload +- Respects system dark mode preference on first visit + +### Keyboard Shortcuts +- **Enter**: Add task (when input is focused) +- **Escape**: Clear input field +- **Space/Enter**: Toggle task completion (when task is focused) +- **Delete/Backspace**: Delete task (when task is focused) + +## 💾 Data Storage + +All data is stored locally in your browser using localStorage: +- **Tasks**: Separate storage keys for each date (`negotium-tasks-`) +- **Theme**: Your theme preference (`negotium-theme`) +- **No server required**: Everything runs entirely client-side +- **Privacy first**: Your data never leaves your device + +## 📄 License + +MIT License - Free for personal and commercial use. + +## 🤝 Contributing + +Contributions are welcome! Feel free to submit issues and pull requests. diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..2f428a0 --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/lottie_empty_state.json b/assets/lottie_empty_state.json new file mode 100644 index 0000000..b57a266 --- /dev/null +++ b/assets/lottie_empty_state.json @@ -0,0 +1 @@ +{"nm":"empty state2","ddd":0,"h":800,"w":800,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":3,"nm":"Null 5","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[150,150,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[500,96,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":0,"ix":11}},"ef":[],"ind":1},{"ty":4,"nm":"fly mask","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[400,400,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[476,340],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.9725,0.0471,0.3725],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.8392,0.1412,0.1412],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[42,140],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":0,"nm":"Fly","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[53,34,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.335,"y":1},"s":[343.227,434.878,0],"t":0,"ti":[1.583,44.292,0],"to":[-1.583,-44.292,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[333.727,169.128,0],"t":11,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.208,"y":1},"s":[333.727,169.128,0],"t":24,"ti":[0,0,0],"to":[28.917,-11,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[507.227,103.128,0],"t":34,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.418,"y":1},"s":[507.227,103.128,0],"t":59,"ti":[-12.354,-16.313,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[581.352,201.003,0],"t":70,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.497,"y":0},"i":{"x":0.649,"y":1},"s":[581.352,201.003,0],"t":88,"ti":[-7.333,-36.333,0],"to":[7.333,36.333,0]},{"s":[625.352,419.003,0],"t":106}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":106,"h":68,"refId":"comp_0","ind":3},{"ty":4,"nm":"EYES","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[-26,227,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.707,"y":0},"i":{"x":0.667,"y":1},"s":[100,100,100],"t":18},{"o":{"x":0.333,"y":0},"i":{"x":1,"y":1},"s":[100,0,100],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":22},{"o":{"x":0.707,"y":0},"i":{"x":0.667,"y":1},"s":[100,100,100],"t":81},{"o":{"x":0.333,"y":0},"i":{"x":1,"y":1},"s":[100,0,100],"t":83},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":85},{"o":{"x":0.707,"y":0},"i":{"x":0.667,"y":1},"s":[100,100,100],"t":129},{"o":{"x":0.333,"y":0},"i":{"x":1,"y":1},"s":[100,0,100],"t":131},{"s":[100,100,100],"t":133}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-26.25,226.75,0],"t":12,"ti":[1.125,-0.042,0],"to":[-1.125,-0.458,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-33,224,0],"t":14,"ti":[0.246,-0.446,0],"to":[-0.398,0.015,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-34.04,224.799,0],"t":31,"ti":[0.031,-0.075,0],"to":[-0.039,0.07,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-24.144,224.683,0],"t":34,"ti":[0.031,-0.075,0],"to":[-0.326,0.791,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-24.144,224.683,0],"t":68,"ti":[-0.753,-0.22,0],"to":[-0.326,0.791,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-19.625,226,0],"t":71,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-19.625,226,0],"t":101,"ti":[-0.833,-0.389,0],"to":[0.833,0.389,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-14.625,228.333,0],"t":105,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-14.625,228.333,0],"t":117,"ti":[1.938,0.264,0],"to":[-1.938,-0.264,0]},{"s":[-26.25,226.75,0],"t":122}],"ix":2},"r":{"a":0,"k":-3,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 2","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[18.523,22.333],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.9608,0.1725,0.1725],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[25.298,230.606],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":2,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[18.5,22],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.9608,0.1725,0.1725],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-26,227],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4,"parent":1},{"ty":4,"nm":"box hole","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[98.129,36.885,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[498.129,436.885,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-16.249,-0.196],[0,0],[0.385,-16.332],[0,0],[16.242,0.444],[0,0],[0.582,14.942],[0,0]],"o":[[0,0],[16.336,0.197],[0,0],[-0.383,16.243],[0,0],[-14.947,-0.409],[0,0],[-0.632,-16.238]],"v":[[36.186,6.802],[159.822,8.291],[188.802,38.321],[188.802,38.321],[158.667,66.96],[35.068,63.581],[7.47,36.301],[7.47,36.301]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5},{"ty":4,"nm":"box","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[400,400,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":3,"it":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[6.437,0.489],[6.437,0.133],[6.437,-0.354],[6.437,-1.313],[0.211,-1.032],[-1.381,-0.282],[-6.437,-0.355],[-6.437,0.128],[-6.437,0.445],[-6.437,1.01],[-0.14,0.89],[1.105,0.173]],"o":[[-6.437,-0.445],[-6.437,-0.128],[-6.437,0.355],[-0.971,0.199],[-0.282,1.381],[6.437,1.313],[6.437,0.354],[6.437,-0.133],[6.437,-0.489],[0.844,-0.134],[0.173,-1.105],[-6.437,-1.01]],"v":[[6.363,249.511],[-12.949,248.661],[-32.261,248.837],[-51.572,251.062],[-53.562,253.052],[-51.572,256.062],[-32.261,258.287],[-12.949,258.464],[6.363,257.613],[25.674,255.562],[27.361,253.876],[25.674,251.562]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 2","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-9.837,1.086],[-0.132,1.193],[1.381,0.152],[9.837,0.411],[9.837,-0.049],[9.837,-0.292],[9.837,-0.701],[0.108,-1.512],[-1.657,-0.118],[-9.837,-0.332],[-9.837,-0.049],[-9.837,0.391]],"o":[[1.145,-0.126],[0.153,-1.381],[-9.837,-1.086],[-9.837,-0.391],[-9.837,0.049],[-9.837,0.332],[-1.47,0.103],[-0.118,1.657],[9.837,0.701],[9.837,0.292],[9.837,0.049],[9.837,-0.411]],"v":[[66.468,223.238],[68.692,221.014],[66.468,218.238],[36.958,216.208],[7.448,215.682],[-22.062,216.477],[-51.572,217.738],[-54.358,220.525],[-51.572,223.738],[-22.062,225],[7.448,225.795],[36.958,225.268]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 3","ix":3,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-0.171,-9.674]],"o":[[0,0],[0,0],[0,0],[0.073,9.674],[0,0]],"v":[[209.188,208.309],[233.886,135.43],[274.892,152.467],[275.323,210.055],[275.67,239.078]]},"ix":2}},{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":2,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[3.314,0],[0,0],[0,0],[0,0],[-0.074,-3.239],[-0.226,-14.094],[0,0],[-0.017,-28.187],[0.202,-28.187],[0,0],[0.19,-12.416],[0,0],[0,0],[0,0],[0.193,16.419],[0.275,16.419],[0,0],[0.287,8.209],[1.583,0.055],[0.058,-1.657],[0.226,-8.209],[0,0],[0.183,-16.419],[0.104,-16.419],[0,0],[0,0],[0,0],[0,0],[-3.294,0.02],[0,0],[-0.817,0.009],[0,0],[-15.784,0.073],[-15.784,-0.006],[0,0],[0,0],[0,0],[0,0],[-31.569,2.305],[-0.092,1.257],[1.381,0.101],[31.569,0.262],[0,0],[0,0],[0,0],[0,0],[15.784,0.074],[13.976,0.136],[0.151,12.276],[0,0],[-0.006,28.187],[-0.233,28.187],[0,0],[-0.241,12.094],[0,0],[0,0],[0,0],[0,0],[-0.119,-13.239],[0,0],[0,0],[0.068,0.026],[0.79,-2.021],[0,0],[0,0],[-2.969,-1.209],[0,0],[-0.761,-13.783],[-1.54,-0.085],[-0.091,1.657],[-0.199,26.478],[0,0],[-0.037,13.239],[0,0],[0,0]],"o":[[0,0],[0,-3.314],[0,0],[0,0],[0,0],[-3.239,0.074],[0.32,14.094],[0,0],[0.233,28.187],[0.006,28.187],[0,0],[-0.152,12.416],[0,0],[0,0],[0,0],[-0.104,-16.419],[-0.183,-16.419],[0,0],[-0.226,-8.209],[-0.058,-1.558],[-1.657,-0.058],[-0.287,8.209],[0,0],[-0.275,16.419],[-0.193,16.419],[0,0],[0,0],[0,0],[0,0],[0.02,3.294],[0,0],[0.698,0.317],[0,0],[15.784,-0.172],[15.784,-0.074],[0,0],[0,0],[0,0],[0,0],[31.569,-0.262],[1.221,-0.088],[0.101,-1.381],[-31.569,-2.305],[0,0],[0,0],[0,0],[0,0],[-15.784,0.006],[-13.976,-0.065],[-0.186,-12.276],[0,0],[-0.202,-28.187],[0.017,-28.187],[0,0],[0.194,-12.094],[0,0],[0,0],[0,0],[0,0],[0.037,13.239],[0,0],[0,0],[-0.065,-0.03],[-2.02,-0.79],[0,0],[0,0],[-1.163,2.976],[0,0],[0.311,13.783],[0.089,1.504],[1.657,0.091],[1.461,-26.478],[0,0],[0.119,-13.239],[0,0],[0,0],[0,0]],"v":[[286.398,-28.247],[286.398,-28.247],[280.398,-34.247],[-98.429,-34.247],[-98.592,-34.247],[-98.696,-34.246],[-104.429,-28.247],[-103.717,14.034],[-103.283,56.315],[-102.927,140.876],[-103.125,225.438],[-103.407,267.719],[-103.86,304.967],[-255.978,304.037],[-256.039,285.372],[-256.23,260.744],[-256.811,211.488],[-257.644,162.232],[-258.228,137.604],[-258.958,112.977],[-261.854,110.081],[-264.958,112.977],[-265.689,137.604],[-266.273,162.232],[-267.106,211.488],[-267.687,260.744],[-267.878,285.372],[-267.958,310],[-267.959,310.017],[-267.958,310.073],[-261.958,316],[-100.753,315.014],[-98.465,315.5],[-98.429,315.5],[-51.075,315.169],[-3.722,314.979],[90.985,314.935],[138.338,314.902],[162.015,314.861],[185.691,314.724],[280.398,312.5],[282.716,310.183],[280.398,307.5],[185.691,305.276],[162.015,305.139],[138.338,305.098],[90.985,305.065],[-3.722,305.021],[-51.075,304.831],[-93.003,304.546],[-93.45,267.719],[-93.733,225.438],[-93.931,140.876],[-93.575,56.315],[-93.14,14.034],[-92.55,-22.247],[274.388,-22.247],[274.333,11.47],[274.382,51.187],[274.521,90.904],[274.729,130.621],[274.841,145.648],[233.075,126.432],[232.864,126.342],[227.775,128.569],[227.714,128.725],[196.141,209.432],[199.385,216.991],[275.853,248.14],[277.398,289.489],[280.232,292.324],[283.398,289.489],[285.473,210.055],[286.067,130.621],[286.275,90.904],[286.414,51.187],[286.463,11.47]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 3","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-1.499,-2.274],[0,0],[0,0],[2.716,-1.788],[1.181,0.044],[0,0],[-0.069,1.933],[-1.815,0.07],[0,0],[0,0],[0,0],[-2.33,1.482]],"o":[[0,0],[0,0],[1.788,2.716],[-1.063,0.7],[0,0],[-1.933,-0.069],[0.066,-1.844],[0,0],[0,0],[0,0],[-1.482,-2.33],[2.307,-1.468]],"v":[[284.595,-30.964],[355.037,76.022],[355.128,76.162],[353.449,84.316],[350,85.283],[280.398,82.783],[277.024,79.157],[280.398,75.783],[350,73.283],[344.963,82.543],[276.201,-25.53],[277.735,-32.433]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 4","ix":3,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.348,-0.803],[4.437,-7.917],[2.33,-3.89],[0,0],[0,0],[0,0],[5.096,-7.512],[0,0],[1.279,-0.021],[0,0],[0,0],[0,0],[0.046,3.29],[-0.744,1.01],[0,0],[0,0],[0,0],[-1.517,0.001],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.055,-3.314],[3.314,-0.054],[0.057,0.001],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-4.655,7.783],[0,0],[0,0],[0,0],[-2.527,3.769],[-5.849,7.049],[-0.859,-0.712]],"o":[[-3.651,8.401],[-2.223,3.956],[0,0],[0,0],[0,0],[-4.844,7.667],[0,0],[-0.773,1.139],[0,0],[0,0],[0,0],[-3.29,0.046],[-0.019,-1.351],[0,0],[0,0],[0,0],[0.968,-1.316],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[3.314,-0.054],[0.055,3.314],[-0.057,0.001],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[4.403,-7.938],[0,0],[0,0],[0,0],[2.42,-3.835],[5.062,-7.533],[0.712,-0.859],[0.708,0.587]],"v":[[-114.312,1.404],[-126.638,25.762],[-133.496,37.513],[-140.478,49.188],[-147.562,60.801],[-154.761,72.343],[-169.605,95.152],[-169.688,95.275],[-173.013,97.057],[-261.506,97.917],[-305.753,98.439],[-350,99.057],[-356.041,93.183],[-354.883,89.57],[-354.856,89.533],[-266.005,-31.184],[-265.969,-31.233],[-261.958,-33.247],[-241.517,-33.134],[-221.076,-33.121],[-180.194,-33.295],[-139.311,-33.658],[-118.87,-33.911],[-98.429,-34.247],[-92.33,-28.346],[-98.231,-22.247],[-98.429,-22.247],[-118.87,-22.583],[-139.311,-22.836],[-180.194,-23.2],[-221.076,-23.373],[-241.517,-23.361],[-261.958,-23.247],[-257.912,-25.31],[-345.144,96.582],[-350,87.057],[-305.753,87.676],[-261.506,88.198],[-173.013,89.057],[-176.42,90.962],[-162.766,67.421],[-155.716,55.788],[-148.55,44.226],[-141.283,32.726],[-133.892,21.302],[-117.72,-0.691],[-114.875,-0.956]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":6}],"v":"5.6.10","fr":25,"op":142,"ip":0,"assets":[{"nm":"","id":"comp_0","layers":[{"ty":4,"nm":"wing-right","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[160.069,-169.199,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160.069,-169.199,0],"ix":2},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":12},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":14},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":16},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":26},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":32},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":34},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":36},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":38},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":42},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":44},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":46},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":48},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":52},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":54},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":56},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":58},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":62},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":66},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":68},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":70},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":72},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":74},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":76},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":78},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":80},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":82},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":84},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":86},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":88},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":90},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":92},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":94},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":96},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":98},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":100},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":102},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":104},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":106},{"s":[-20],"t":108}],"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-1.396,1.421],[-1.546,1.34],[-1.627,1.238],[-3.909,1.9],[-2.328,0.584],[-2.936,-0.554],[-1.367,-0.82],[-0.934,-1.158],[-0.569,-2.319],[-0.026,-2.138],[0.469,-2.326],[1.62,-2.282],[2.591,-0.728],[2.246,0.299],[1.987,0.715],[3.497,2.313],[-0.762,1.152],[-1.116,-0.563],[0,0],[-1.715,-0.64],[-1.739,-0.42],[-1.625,-0.043],[-1.102,0.492],[-0.528,0.988],[-0.115,1.518],[0.176,1.702],[0.404,1.436],[0.564,0.701],[0.912,0.209],[1.463,-0.333],[1.575,-0.675],[3.088,-2.029],[1.507,-1.109],[1.377,-1.093],[0,0],[1.375,1.732]],"o":[[1.501,-1.531],[1.53,-1.328],[3.264,-2.466],[1.965,-0.94],[2.31,-0.57],[1.453,0.275],[1.371,0.814],[1.892,2.342],[0.559,2.34],[0.018,2.184],[-0.49,2.313],[-1.588,2.292],[-2.6,0.76],[-2.255,-0.315],[-3.987,-1.458],[-1.152,-0.762],[0.707,-1.068],[0,0],[1.571,0.79],[1.732,0.647],[1.735,0.422],[1.619,0.045],[1.105,-0.504],[0.524,-0.989],[0.111,-1.527],[-0.18,-1.747],[-0.377,-1.442],[-0.581,-0.705],[-0.902,-0.189],[-1.464,0.314],[-3.163,1.375],[-1.544,1.022],[-1.489,1.099],[0,0],[-1.732,1.375],[-1.27,-1.6]],"v":[[160.463,-173.026],[164.951,-177.225],[169.67,-181.092],[180.296,-187.754],[186.671,-190.109],[194.544,-190.495],[198.875,-188.864],[202.373,-185.811],[205.735,-178.63],[206.509,-171.892],[205.915,-165.136],[203.02,-158.077],[196.257,-153.243],[188.94,-152.835],[182.615,-154.46],[171.6,-160.117],[170.894,-163.582],[174.102,-164.437],[174.206,-164.384],[179.265,-162.186],[184.48,-160.543],[189.573,-159.798],[193.803,-160.458],[196.119,-162.619],[197.085,-166.491],[196.936,-171.387],[196.108,-176.2],[194.606,-179.537],[192.644,-180.745],[188.94,-180.556],[184.331,-178.989],[174.91,-173.717],[170.314,-170.537],[165.908,-167.165],[165.811,-167.088],[160.186,-167.735]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1,"parent":3},{"ty":4,"nm":"wing-left","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[148.165,-167.194,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[148.165,-167.194,0],"ix":2},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":12},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":14},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":16},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":26},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":32},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":34},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":36},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":38},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":42},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":44},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":46},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":48},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":52},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":54},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":56},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":58},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":62},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":66},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":68},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":70},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":72},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":74},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":76},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":78},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":80},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":82},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":84},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":86},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":88},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":90},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":92},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":94},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":96},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":98},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":100},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":102},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":104},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-20],"t":106},{"s":[20],"t":108}],"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[3.078,-2.093],[3.372,-0.98],[2.224,0.957],[0.625,0.918],[0.219,1.495],[0.017,0.805],[-0.094,0.665],[-0.556,0.826],[-1.258,0.595],[-1.679,0.22],[-3.703,-0.664],[-3.459,-1.546],[0,0],[-0.272,-0.024],[0,0]],"o":[[-2.386,2.88],[-3.053,2.104],[-3.327,0.981],[-1.112,-0.468],[-0.616,-0.923],[-0.11,-0.743],[-0.023,-0.774],[0.185,-1.349],[0.564,-0.82],[1.249,-0.599],[3.385,-0.423],[3.705,0.701],[0,0],[0.257,0.115],[0,0],[0,0]],"v":[[143.545,-166.765],[135.306,-159.218],[125.559,-154.409],[116.517,-154.173],[114.026,-156.215],[112.746,-159.91],[112.561,-162.261],[112.685,-164.427],[113.841,-167.594],[116.528,-169.748],[121.023,-170.963],[131.873,-170.426],[142.742,-167.064],[142.801,-167.037],[143.6,-166.831],[143.599,-166.83]]},"ix":2}},{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":2,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.179,0.977],[0.685,-0.007],[1.089,0.811],[4.123,1.461],[4.743,-0.005],[2.552,-0.853],[1.95,-2.394],[0.317,-2.676],[-0.073,-1.256],[-0.252,-1.256],[-1.779,-2.375],[-1.225,-0.877],[-1.358,-0.454],[-2.474,0.253],[-2.164,0.822],[-4.729,7.437]],"o":[[-0.569,-0.471],[0.768,-1.108],[-3.523,-2.623],[-4.129,-1.457],[-2.372,0.017],[-2.526,0.861],[-1.958,2.382],[-0.167,1.35],[0.082,1.224],[0.507,2.491],[0.885,1.178],[1.225,0.881],[2.738,0.91],[2.486,-0.265],[8.574,-3.403],[0.802,-1.259]],"v":[[147.828,-167.228],[145.883,-167.904],[145.325,-171.345],[133.768,-177.365],[120.518,-179.769],[113.107,-178.597],[105.986,-173.763],[102.678,-165.744],[102.568,-161.827],[103.051,-158.124],[106.282,-150.603],[109.479,-147.466],[113.42,-145.482],[121.332,-144.742],[128.281,-146.487],[148.446,-163.304]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2,"parent":3},{"ty":4,"nm":"fly","sr":1,"st":0,"op":142,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[154.813,-169.683,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[53.274,32.644,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.507,-7.434],[7.1,0],[0,7.1],[-7.1,0]],"o":[[0.483,7.084],[-7.1,0],[0,-7.1],[7.1,0]],"v":[[167.462,-169.683],[154.605,-156.827],[142.138,-169.683],[154.605,-182.54]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3765,0.4784,0.9843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3}]}]} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a3968c5 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + Negotium - Your Productivity Companion + + + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..48e5a35 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "negotium-todo", + "version": "1.0.0", + "description": "A clean, minimal to-do list application with smooth animations and dark/light mode support", + "type": "module", + "main": "index.html", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "svelte": "^4.2.0", + "vite": "^5.0.0" + }, + "keywords": [ + "todo", + "svelte", + "productivity", + "minimal" + ], + "author": "Negotium", + "license": "MIT", + "dependencies": { + "lottie-web": "^5.13.0" + } +} diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..c3bedf8 --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,371 @@ + + + + +
+ {#if isLoading} +
+
+ +
Loading Negotium...
+
+
+ {:else} +
+
+
+ + + + + + + +

Negotium

+
+ +
+ + + +
+
+
+ +
+
+
+

To-dos

+
{getCurrentDate()}
+
+ +
+ +
+ +
0}> + + {remainingTasks} {remainingTasks === 1 ? 'task' : 'tasks'} remaining + + {#if completedTasks > 0} + + {/if} +
+ +
+ {#key selectedDate} + {#if tasks.length === 0} +
+
+

No tasks yet. Add one above to get started!

+
+ {:else} + {#each tasks as task, index (task.id)} +
handleDragStart(e, index)} + on:dragover={(e) => handleDragOver(e, index)} + on:dragend={handleDragEnd} + on:dragleave={handleDragLeave} + on:keydown={(e) => handleTaskKeydown(e, task.id)} + tabindex="0" + role="button" + aria-label={task.completed ? `Completed: ${task.text}` : `Incomplete: ${task.text}`} + > + + + {task.text} + + +
+ {/each} + {/if} + {/key} +
+
+
+ {/if} +
diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..7f13bc6 --- /dev/null +++ b/src/main.js @@ -0,0 +1,7 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..9408633 --- /dev/null +++ b/src/style.css @@ -0,0 +1,521 @@ +:root { + --bg-primary: #F8FAFB; + --bg-surface: #FFFFFF; + --text-primary: #1A1A1A; + --text-secondary: #666666; + --accent: #607afb; + --border: #E0E0E0; + --hover: #F5F5F5; + --completed-bg: #EEF1FF; + --completed-text: #4C5FD5; + --transition-speed: 300ms; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; +} + +.dark { + --bg-primary: #121212; + --bg-surface: #1E1E1E; + --text-primary: #E0E0E0; + --text-secondary: #999999; + --accent: #7B93FF; + --border: #333333; + --hover: #2A2A2A; + --completed-bg: rgba(96, 122, 251, 0.15); + --completed-text: #8FA5FF; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-family); + background-color: var(--bg-primary); + color: var(--text-primary); + transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; +} + +.app { + min-height: 100vh; + background-color: var(--bg-primary); + transition: background-color var(--transition-speed) ease; +} + +.header { + background-color: var(--bg-surface); + border-bottom: 1px solid var(--border); + padding: 24px 48px; + position: sticky; + top: 0; + z-index: 100; + transition: all var(--transition-speed) ease; +} + +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo-section { + display: flex; + align-items: center; + gap: 12px; +} + +.logo-icon { + width: 32px; + height: 32px; + color: var(--accent); +} + +.app-title { + font-size: 28px; + font-weight: bold; + color: var(--text-primary); + transition: color var(--transition-speed) ease; +} + +.header-actions { + display: flex; + align-items: center; + gap: 16px; +} + +.today-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + background: transparent; + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-secondary); + font-size: 14px; + cursor: pointer; + transition: all 200ms ease; + height: 40px; +} + +.today-btn:hover { + background-color: var(--hover); + border-color: var(--accent); + color: var(--accent); +} + +.today-btn svg { + width: 16px; + height: 16px; +} + +.theme-toggle { + padding: 8px 16px; + border-radius: 8px; + background: transparent; + border: 1px solid var(--border); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 200ms ease; + font-size: 14px; + height: 40px; +} + +.theme-toggle:hover { + background-color: var(--hover); + border-color: var(--accent); + color: var(--accent); + transform: scale(1.1); +} + +.theme-toggle:active { + transform: scale(0.95); +} + +.theme-icon { + width: 20px; + height: 20px; + transition: transform 500ms ease; +} + +.theme-icon.rotated { + transform: rotate(360deg); +} + +.main { + padding: 40px 0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 0 32px; +} + +.content-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; +} + +.section-title { + font-size: 32px; + font-weight: bold; + color: var(--text-primary); + transition: color var(--transition-speed) ease; +} + +.date-display { + font-size: 16px; + font-weight: 500; + color: var(--accent); +} + +.task-input-container { + margin-bottom: 24px; +} + +.task-input { + width: 100%; + padding: 16px 20px; + font-size: 16px; + border: 1px solid var(--border); + border-radius: 12px; + background-color: var(--bg-surface); + color: var(--text-primary); + transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); + font-family: var(--font-family); +} + +.task-input:focus { + outline: none; + border: 1px solid var(--border); + background-color: var(--bg-primary); + box-shadow: 0 8px 24px rgba(96, 122, 251, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); + transform: scale(1.01); +} + +.task-input::placeholder { + color: var(--text-secondary); +} + +.task-stats { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + opacity: 0; + transition: opacity 300ms ease; +} + +.task-stats.visible { + opacity: 1; +} + +.task-count { + font-size: 14px; + color: var(--text-secondary); + font-weight: 500; +} + +.clear-completed { + background: transparent; + border: none; + color: var(--text-secondary); + font-size: 14px; + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: all 200ms ease; +} + +.clear-completed:hover { + color: var(--accent); + background-color: var(--hover); +} + +.task-list { + display: flex; + flex-direction: column; + gap: 12px; + min-height: 400px; + position: relative; +} + +.task-item { + display: flex; + align-items: center; + gap: 16px; + padding: 16px 20px; + background-color: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 12px; + cursor: grab; + transition: all 300ms ease; + position: relative; +} + +.task-item:active { + cursor: grabbing; +} + +.task-item.dragging { + opacity: 0.4; + cursor: grabbing; +} + +.task-item.drag-over::before { + content: ''; + position: absolute; + top: -6px; + left: 0; + right: 0; + height: 3px; + background-color: var(--accent); + border-radius: 2px; + box-shadow: 0 0 8px rgba(96, 122, 251, 0.4); + z-index: 10; +} + +.task-item:hover { + background-color: var(--hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.task-item.completed { + background-color: var(--completed-bg); + opacity: 0.8; +} + +.checkbox { + width: 24px; + height: 24px; + border: 2px solid var(--border); + border-radius: 6px; + background: transparent; + cursor: pointer; + display: block; + transition: all 300ms ease; + flex-shrink: 0; + position: relative; +} + +.checkbox:hover { + border-color: var(--accent); + transform: scale(1.1); +} + +.checkbox.checked { + background-color: var(--accent); + border-color: var(--accent); + transform: scale(1.1); +} + +.checkbox.checked:hover { + transform: scale(1.2); +} + +.checkmark { + width: 16px; + height: 16px; + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.task-text { + flex: 1; + font-size: 16px; + color: var(--text-primary); + transition: all 300ms ease; + word-break: break-word; +} + +.task-item.completed .task-text { + text-decoration: line-through; + color: var(--completed-text); +} + +.delete-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 200ms ease; + flex-shrink: 0; +} + +.task-item:hover .delete-btn { + opacity: 1; +} + +.delete-btn:hover { + background-color: rgba(244, 67, 54, 0.1); + color: #f44336; + transform: scale(1.1); +} + +.delete-btn svg { + width: 16px; + height: 16px; +} + +.loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--bg-primary); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.loading { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.loading-logo { + width: 60px; + height: 60px; + color: var(--accent); + animation: pulse 1.5s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.5; + transform: scale(0.95); + } +} + +.loading-text { + color: var(--text-secondary); + font-size: 14px; + font-weight: 500; +} + +.empty-state { + text-align: center; + padding: 60px 20px; + color: var(--text-secondary); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.lottie-animation { + width: 200px; + height: 200px; + margin: 0 auto 24px; +} + +.empty-state p { + font-size: 16px; + margin: 0; +} + +@media (max-width: 768px) { + .header { + padding: 16px 24px; + } + + .header-content { + flex-direction: column; + gap: 16px; + align-items: flex-start; + } + + .header-actions { + width: 100%; + justify-content: space-between; + } + + .container { + padding: 0 24px; + } + + .content-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .section-title { + font-size: 28px; + } + + .task-item { + padding: 20px; + min-height: 48px; + } + + .task-input { + padding: 20px; + font-size: 18px; + } +} + +@media (max-width: 480px) { + .header { + padding: 12px 16px; + } + + .container { + padding: 0 16px; + } + + .task-item { + padding: 16px; + } + + .task-input { + padding: 16px; + } +} + +.checkbox:focus-visible, +.delete-btn:focus-visible, +.theme-toggle:focus-visible, +.today-btn:focus-visible, +.clear-completed:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +html { + scroll-behavior: smooth; +} + diff --git a/vite.config.mjs b/vite.config.mjs new file mode 100644 index 0000000..fbb4fc9 --- /dev/null +++ b/vite.config.mjs @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +export default defineConfig({ + plugins: [svelte()], + publicDir: 'assets', + server: { + port: 3000, + open: true + }, + optimizeDeps: { + exclude: ['@sveltejs/vite-plugin-svelte'] + } +})