Code Monkey home page Code Monkey logo

cardbox's Introduction

卡片盒子 - CardBox

卡片可以将知识拆解到最小颗粒度,是最小的存储和输出单位。本项目旨在将实体卡片进行电子化,并借助盒子进行存储。

视频演示

  1. 注册登录修改资料
  2. 查看用户信息-关注用户
  3. 卡盒管理
  4. 卡片管理
  5. 邮件管理
  6. 搜索功能

截图展示

概览

主页面

卡片盒子进来的主页面设为“我的卡盒”,可以直观的看到自己拥有的所有盒子。上方黄色栏目显示了当前用户的头像、用户名、盒子数、关注人数、粉丝人数。点击头像可以进入资料编辑界面。点击关注和粉丝可以看到具体的关注人列表以及粉丝列表。

菜单

卡片盒子使用了侧滑栏菜单。

用户管理功能

注册

第一次打开卡片盒子时会显示登录界面,若没有账号则进行注册。注册时若账号已被注册或者不符合其他要求时会报错,不允许注册。

登录

登录时可以选择记住密码选项。

修改资料

登录成功后可以修改个人资料。

查看用户信息

可以任意查看其他用户的信息,以及可以看到其他用户设置为公开的盒子。点击右边的星星按钮可以关注该用户。点击左边的信封按钮可以给该用户发邮件。

查看关注的人/粉丝

关注人列表以及粉丝列表布局相同。

盒子管理功能

添加盒子

点击主页面右下方的悬浮按钮会弹出菜单,用户可以选择创建单面卡盒或者双面卡盒,单面卡盒只可以存放单面卡片,双面卡盒只可以存放双面卡片。

查看盒子

点击盒子进入盒子详情界面,再次点击标题栏的对话框按钮可以弹出盒子的具体信息。点击右下角的悬浮按钮可以添加卡片。

查看其他用户的盒子时可以点击红心表示喜欢,再次点击红心可以取消喜欢。

编辑盒子

点击标题栏的修改卡盒可以进行盒子信息的编辑。

查看我喜欢的卡盒

在[我喜欢的卡盒]中可以查看所有喜欢过的卡盒,并且可以看到卡盒作者对该卡盒的最近更新时间。

卡片管理功能

添加卡片

添加卡片时可以进行批量添加,每填写完一张卡片就点击保存按钮进行保存,再点击右上角的加号添加下一张卡片。填写完所有想添加的卡片之后,点击右上角完成添加。

查看卡片

查看卡片时,若卡片是双面卡片,可以进行翻转查看,若卡片是单面卡片,则无法进行翻转。点击右上角的筛子按钮可以将卡片顺序随机打乱进行查看。

编辑卡片

编辑完成点击右上角确认,若想删除该卡片,点击垃圾桶按钮即可。

邮件管理功能

发送邮件

在查看他人信息界面时可以点击信封按钮给该用户发送邮件。

查看发件箱

进入发件箱可以看到自己发出的所有邮件,邮件内容下方有邮件的发送时间以及发送对象。

查看收件箱

进入收件箱可以看到自己收到的所有邮件,邮件内容左方可以看到邮件的发件人,邮件内容下方有收到邮件的时间。

搜索功能模块

搜索盒子

搜索盒子时可以按盒子类型进行搜索,也可以直接在[所有]分类里直接搜索。点击[所有]会弹出对话框,用户可以选择自己想要查询的盒子类型。此处采用模糊搜索,只要盒子名称包含用户搜索的关键词即会被搜索出来。

搜索用户

搜索用户时可以按需根据昵称或者账号进行搜索。按照昵称进行搜索时为模糊搜索,只要用户昵称包含输入的关键词即可搜索出来。按照账号进行搜索时,为精确搜索,一个账号对应一个用户。

cardbox's People

Contributors

hishark avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

sakurafisch

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.