[ 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.