[ code ] cr chart: notebook

[laenavesse]

the notebook

Little Notebook
For CR or Something
idk what are examples

»»

"My sword is my life. That's just the kind of daemon I am."

● ● ● ○ ○
☼ ♥ ♪ ✦ ✖

Name: Rokurou Rangetsu
Canon: Tales of Berseria
Game: empatheias, forgottentales
Notes: A daemon swordsman with a love for swords, fighting, and alcohol. A chill, carefree guy, but he's a daemon for a reason with various insecurities and complexes that he strives hard to overcome. Capable of dual wielding both short swords and great swords.
About the code: V1: Quote + Double Static Rating
This version features space for two rating bars, such as an affinity/strength or use of symbols for different meanings. They will always be at the bottom of the bookmark no matter how long or short the quote is. If you want one bar, go to version 2.
(now a fully filled sheet, extra will cut off)

««

»»

"I hate violence."

● ● ● ○ ○

Name: Shizuo Heiwajima
Canon: Durarara!!
Birthday: January 28
Age: 25
Favorite things: Sweets
Notes: I don't know I'm just filling this out in various ways to show what could be done in here and not be too boring herp.
About the code: V2: Quote + Single Static Rating.
The rating bar will always be at the bottom of the bookmark no matter how long or short the quote is. Showing the "rating" bar, but can be used for symbols or whatever you want.

««

»»

"I long for peace and quiet."

☼ ♥ ♪ ✦ ✖
☼ ♥ ♪ ✦ ✖

Name: Eustace
Canon: Granblue Fantasy
Active? forgottentales
Muse Strength: ■ ■ ■ □ □
Plotting Potential: ■ ■ ■ □ □
Shipping Potential: ■ ■ □ □ □
Likelihood to Drop: ■ ■ □ □ □
Notes: Didn't we used to do these kind of survey memes back in the day...
About the code: V3: All in One
In this version, the rating bars are always at the end of the quote, so there is a bit more fluctuation. Because of that, you can actually have multiple lines if you wanted. This is how it looks with a short quote. A longer version is next, followed by a quote only.

««

»»

"My maiden had always been right in front of me."

☼ ♥ ♪ ✦ ✖

Name: Helios
Canon: Sailor Moon
Trust: ◆◆◆◆◆
Support: ◆◆◆◆◆
Attraction: ◆◆◆◆◇
Affection: ◆◆◆◆◆
Strength: ◆◆◆◆◇
Notes: Uh, cheat way to have symbols and then multiple rating bars???
About the code: V3: All in One
Same as the previous page but with longer quote and a single rating bar. Next page is full quote only.

««

»»

"I'm going to keep at it. I'll protect all that you've given me."

Name: Alvin
Canon: Tales of Xillia 1/2
Journals: selfmotivations / opportunitycosts
Occupation: Business, ex-mercenary, ex-traitor
Relationship: Single
Notes: Okay I've ran out of ideas of what else I could throw in here I THINK YOU GOT SOME IDEAS BY NOW
About the code: V3: All in One
Same as the previous pages but it's a quote only. ...All right might not have been the best choice for this particular one but you get the idea how it looks. Like the notebook pages, any overflow text is automatically cut (hidden), so that's pretty much it right there. No rating bars.

««

»»

"Ah, so this is the end, huh? Farewell, all my dear fans the world over."

Name: Raven
Canon: Tales of Vesperia
Nickname: "Old Man," "Fishy Old Man"
Notes: Feeling like the old man right now...so tired...grant me sweet release...
About the code: V3: All in One
Just showing off how it looks if you change the bookmark (and quote) color!

This is the last page of the notebook! There is a navigation bar below so you can jump to any character. Everyone past Raven is a lie. /dumps random muses to fill space

««

☼	♥	♪	✦	✖
one	two	three	four	five

about
This CR Chart is in a cute notebook style and could be used for other purposes, like keeping notes or a diary of sorts.

There are three total versions of the code, and each one is described and shown in the above example. Just "flip" through the notebook by clicking on the »» links to see how it all works. There is also a "navigation bar" beneath it, allowing you to "jump" to a specific character. Only up to Della works, the rest are slotted in for visual representation.

Although the code is straightforward and easy to update, keeping up with links, especially for the previous and next pages, can be annoying. So for those interested, I have made an automated script for this particular chart. I've made it as easy to use as possible so that all anyone has to do is input their data and run it, but there are ways to customize it a little more.

Further instructions are detailed below within the cuts.

A small credit code is included, but any credit goes to laenavesse @ efryndiel, and major credit to DimensionSlip for providing a base and concept for the automation.

raw code instructions

» Here are the pastebin links to each version of the raw code. You can save or c/p the code and edit it as you see fit:

• Version 1: Quote + Double Static Rating
  
• Version 2: Quote + Single Static Rating
  
• Version 3: All in One

» Code for the symbol legend is here (stick it above the </raw-code>:

<!--SYMBOL LEGEND--> <div style="margin: auto; margin-top: 20px; width: 350px; height: 75px;"> <div style="background-color: #d3cec0; width: 350px; height: 50px; clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);"></div> <table style="margin: auto; width: 300px; position: relative; margin-top: -40px; color: #73604b;; font-family: tahoma, sans serif; text-align: center; font-size: 10pt; line-height: 0.8;"><tr> <td><b>☼</b></td> <td><b>♥</b></td> <td><b>♪</b></td> <td><b>✦</b></td> <td><b>✖</b></td></tr> <tr> <td>one</td> <td>two</td> <td>three</td> <td>four</td> <td>five</td></tr> </tr></table> </div>

» The colors are:

• #7d6f62: cover background
  
• #d3cec0: cover border right; cover subtitle color; bookmark background; divider background
  
• #473c2f: cover border left
  
• #ccc496: cover title
  
• #804024: quote text; links
  
• #3e2f22: note text
  
• #ac3b25: circle symbols
  
• #73604b: other symbols

» As mentioned the text will automatically "cut" or "hide" once it hits the limit.
» The symbols provided are completely random and can be whatever you want.
» To add more "Character Pages" use the code between "CHARACTER START" and "END CHARACTER". For the last character of the book, just delete the "NEXT PAGE" div code.
» When adding or removing characters, make sure the anchor tag (<a name="char#">) matches the links for the navigation links (previous, next, and navigation bar).
» Use <br /> tags for line breaks!
» The navigation bar is default to center the icons, but if you have more than nine and want it to look like the example shown, delete the <center> tags.

automated script and instructions

After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Spreadsheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. If you're just going to use the template as is as a CR chart, CR notetaking, or even a comprehensive muselist, this is the easiest and fastest thing you can use to maintain the code. If you want to make certain modifications, it's not difficult and quite easy, but it does require a few extra steps that those unfamiliar with how spreadsheets and coding work might find a little daunting at first. But the payoff is worth it.

There is even a script to let you preview the code within the spreadsheet! Handy.

Also, the generated code doesn't have any line breaks so it's...one giant mess. But since you're c/ping everything it shouldn't matter too much, ah ha... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

NOTE: The symbol legend is not included, so you'll have to add that to the page manually and inside the </raw-code>. You can just paste any updated generated code above it, just be sure to delete the </raw-code> at the end of the code so that the legend is back inside.

Here are the spreadsheets. To save, Make a Copy of it for your own use:

• Version 1
  
• Version 2
  
• Version 3

For a live example of how it would look like filled out, here is a modified version of Rokurou I did for a game with the final product.

I have included detailed instructions on how to do practically everything you could possibly do with the code with minimum risk. But if you have any questions or need help with modifications, just comment and I'll take a poke, even customize it for you if possible. However, I am not a professional, so my own abilities are limited.

Comments

[withmeinparadise]

Hey, I just wanted to say that this is the easiest CR chart I've ever used. Thank you so much for putting it together!

[makelove]

Hello! Absolutely adore both the look and the ease of use for this. Years later but thank you!

[eyediot]

I'm not sure if you're still receiving notifications of comments on here, but I wanted to let you know! The automated script version of this code is now blocked by google app authorization. I've tried just about every workaround I know of and other ways I could find online but nothing. So I'm not sure if something needs to be updated on the origin side or not. Wanted to let you (and others looking at it) know!

[laenavesse]

Hey! Yeah that happens because it's a homemade script and it's mentioned in the "Instructions" sheet. But in case it wasn't clear, when the pop up happens, click on the Advanced link and then click on Go to CR Chart Automation (Unsafe). For reassurance, the script is safe as it does not pull any data outside of what you put in your spreadsheet and it doesn't go anywhere. It remains local to the sheet. After that, click on the Allow button and you'll be good to go!

[eyediot]

Unfortunately, there's no longer any "advanced" link on the popup anywhere as Google's removed it. It is just straight up "this app is blocked" with no link to... anything now haha.

[laenavesse]

Thaaat's weird because I had tested it before I replied just to be sure and it was all the same for me. I was using Firefox if that might make a difference? Or if you might have some kind of ad or pop up blocker that could be affecting it. I also know some others have used the scripts (the tracker ones) recently without issue.

Edit: the pop up should look like this, and I tested it again just now so I could get the screencap. I had already clicked on the "Advance" link but it would be where "Hide Advanced" is.

[eyediot]

I hadn't thought about that on my end (tried chrome and firefox with the same pop up blocker extensions) so I tried both browsers with all my popup blockers disabled for it and got the same block response. So no idea what's up with my google account since it seems to be localized to me LMAO. I'll keep using the raw code for now and fiddle with it more when I wake up again.

[laenavesse]

So I was curious and just did a quick google. You've probably read this thread, too, but maybe try this? Or at least read and see if it's the same situation. Some things from there you could maybe try is if you created or had another gmail account to see if it would work (something they suggest there) or see if you can run any of the other automated scripts I have (the thread trackers).

Hrgh sorry this is happening!

[eyediot]

It's all right, google overlords are just! Being weird!

For the sake of anyone else running into this issue: What I got working finally just now was making a copy on a different google account. Then loading that version in an incognito window and running the automation from there.

[laenavesse]

Glad you got it to work! I'm sorry you had to go through all that though 😭 I'll be sure to remember this if someone else brings it up without seeing this.

[eyediot]

Thank you for troubleshooting it! Google trying to implement the Google Cloud Workspace Synergy Buzzwords Here has made trying to find workarounds a little more difficult. I appreciate it though and this CR chart is probably my favorite I've used for this little weird guy. So thank you for making it!