search

Code-dig-ger / Backend

This is the Backend open-source API developed to provide data to our Frontend React Website. Codedigger aims at accumulating the data of competitive programming platforms into one platform.
https://api.codedigger.tech
Apache License 2.0
13 stars 16 forks source link

Enhancement: Rating Change Reminder Email HTML CSS #29

Closed ShivamSinghal1 closed 3 years ago

ShivamSinghal1 commented 3 years ago

Codedigger sends an email whenever participants participate in a Codeforces contest and rating changes.

It would be good if we can pretty the email using CSS or some animations. More ideas are welcomed.

Current Email Format - image

Sample Context Data (to be feed to HTML)- See Doc see how to use templates in Django.

{
    "rating_change": {
        "contestId": 1540,
        "contestName": "Codeforces Round #728 (Div. 1)",
        "handle": "shivamsinghal1012",
        "rank": 20,
        "ratingUpdateTimeSeconds": 1624643400,
        "oldRating": 1800,
        "newRating": 2000,
        "oldRank": "expert",
        "newRank": "candidate master",
        "oldcolor": "user-blue",
        "newcolor": "user-violet",
        "isoldlegendary": False,
        "isnewlegendary": False,
    },
    "cdata": {
        "contest": {
            "name": "Codeforces Round #728 (Div. 1)",
            "contestId": 1540,
            "duration": 8100,
            "startTime": 1624635300,
            "Type": "R",
            "participants": 1500,
        },
        "worldRank": 20,
        "countryRank": 2,
        "organizationRank": 1,
        "totalCountryParticipants": 100,
        "totalOrganizationParticipants": 20,
    },
}

You can assume, you will get the data, but only need to update codedigger/templates/codeforces/rating_reminder.html.

Requied - HTML, CSS knowledge.

To run your code at local -

Pull feat/codeforces/rating_reminder branch.

Run server as mentioned in the README.md file.

Visit http://127.0.0.1:8000/codeforces/rating-change-email

The codedigger/templates/codeforces/rating_reminder.html template is rendered from the codedigger/codeforces/views.py file rating_change_email function.

EMAIL Best Practice

  1. Make sure your HTML email is responsive for different screen sizes and devices.
  2. Make sure your styling works for different email clients.
  3. Be conscious of how long your HTML emails take to load.
mihir1739 commented 3 years ago

Please assign this issue to me..

ShivamSinghal1 commented 3 years ago

Okay

ShivamSinghal1 commented 3 years ago

Hi @mihir1739, are you working on this issue?

vishnu-sagubandi commented 3 years ago

Hey, I would like to work on this.

ShivamSinghal1 commented 3 years ago

Pull feat/codeforces/rating_reminder and work on this branch. Feel free to ask any type of doubt/ help.

vishnu-sagubandi commented 3 years ago

Pull feat/codeforces/rating_reminder and work on this branch. Feel free to ask any type of doubt/ help.

Yeah sure and thank You.

vishnu-sagubandi commented 3 years ago

Hey !! Please have look at the following screenshots from windows and Iphone 8. If you can finalize, I will create a PR.
Windows -


Iphone -

vishnu-sagubandi commented 3 years ago

Sorry for the typo. It is candid master(not expert master)😅

ShivamSinghal1 commented 3 years ago

Hi @vishnu-sagubandi,

The UI looks pretty amazing. But can we do something if someone's rating decreases? Something like a motivational theme.

Also, Standings would contain a number of participants too.

ShivamSinghal1 commented 3 years ago

Optional, can we develop a button to share this to social media/ LinkedIn.

vishnu-sagubandi commented 3 years ago

Hi @vishnu-sagubandi,

The UI looks pretty amazing. But can we do something if someone's rating decreases? Something like a motivational theme.

Also, Standings would contain a number of participants too.

Will try that and update you soon.

vishnu-sagubandi commented 3 years ago

Have a look at this @ShivamSinghal1
Increases
Decreases

ShivamSinghal1 commented 3 years ago

Both are Nice!

Amazing work!! Create a PR. If you face any issue. Please let me know.

vishnu-sagubandi commented 3 years ago

Hii @ShivamSinghal1 , Sorry for the delay. I went on a trip unexpectedly. Can you plz explain how the function islegendary() works??

ShivamSinghal1 commented 3 years ago

No issue @vishnu-sagubandi

Basically, islegendary function return true, if user rating is above 3000. That means the User is Legendary grandmaster and the color for that user, first letter black.