Skip to content

Adding Onboarding Page! #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
izzycodes02 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Adding Onboarding Page! #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
47845da
Added the files needed for the onboarding page!
izzycodes02 Apr 3, 2023
f226985
Finished adding the CSS styling of the onboarding page!
izzycodes02 Apr 3, 2023
0bdb1a8
Attempt to added the code to redirect the user to the onboarding page…
izzycodes02 Apr 4, 2023
64ef60a
Added changes to the manifest and firefox ext. styling
izzycodes02 Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions firefox extension/extension-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,3 +124,25 @@ function showMessage(text, input) {
}
}, 1700);
}

// ---------------------------------------------------------------- //
// >> When installed, direct user to the onboarding page

// browser.runtime.onInstalled.addListener(async ({ reason }) => {
// switch (reason) {
// case "install":
// {
// const url = browser.runtime.getURL("installed/installed.html");
// await browser.tabs.create({ url });
// }
// break;
// // see below
// }
// });

browser.runtime.onInstalled.addListener(onInstalled);
function onInstalled(details) {
if (details.reason === "install" || details.reason === "temporary") {
console.log(browser.extension.getURL("installed/installed.html"));
}
}
2 changes: 1 addition & 1 deletion firefox extension/extension-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ body {
display: flex;
flex-direction: column;
padding: 0 20px;
height: 305px;
height: 323px;
}

/* WRAPPERS */
Expand Down
74 changes: 74 additions & 0 deletions firefox extension/installed/installed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="TumblrTextTint is a free and user-friendly web application that enables you to customize the colour of your text on Tumblr. With a wide range of colour options, you can enhance the aesthetic appeal of your blog posts and add a personal touch to your content. This open-source tool generates HTML code for a span tag with a style attribute that sets the colour of your text. Whether you're a blogger, writer or simply looking to enhance your Tumblr posts, TumblrTextTint is the perfect tool for you."
/>
<meta name="author" content="Isabelle 'Loariya-Fiaba' Zennah"">
<meta
name="keywords"
content="TumblrTextTint, Tumblr, text formatting, custom colours, web application, code generator, installed"
/>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="../../src/styles.css" />
<title>Installed! | TumblrTextTint</title>
</head>
<body>
<div class="installed_wrapper">
<div class="content installed_content">
<header>
<a
href="https://xiacodes.github.io/TumblrTextTint/"
title="The Official Web App"
><img
src="../../images/logo2.png"
alt="application logo"
id="logo"
class="hover"
/></a>
</header>
<main class="center-text">
<h1>Success! You're now using TumblrTextTint on your browser!</h1>
<p class="installed_text">
Instructions of how to insert the generated code into your Tumblr
post you can find
<a
href="https://github.com/xiacodes/TumblrTextTint/blob/main/instructions/instructions.md"
title="Link to the instructions page!"
id="instructions_link"
target="_blank"
>here</a
>!
</p>
</main>
</div>
</div>
<footer>
<i class="fa-solid fa-code"></i> © 2023 TumblrTextTint. All rights
reserved. Coded by Loariya-Fiaba -
<a
href="https://github.com/xiacodes"
target="_blank"
rel="noopener noreferrer"
>GitHub</a
>
|
<a
href="https://xiacodes.tumblr.com/"
target="_blank"
rel="noopener noreferrer"
>Tumblr</a
>
</footer>
<script src="src/script.js"></script>
</body>
</html>
25 changes: 13 additions & 12 deletions firefox extension/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"manifest_version": 2,
"name": "TumblrTextTint",
"version": "1.0",
"description": "The TumblrTextTint extension that enables you to format your Tumblr blog posts with a custom colour for your text.",
"icons": {
"48": "icon48.png"
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"scripts": ["script.js"]
"manifest_version": 2,
"name": "TumblrTextTint",
"version": "1.2",
"description": "The TumblrTextTint extension that enables you to format your Tumblr blog posts with a custom colour for your text.",
"icons": {
"48": "icon48.png"
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["tabs"],
"scripts": ["extension-script.js"]
}
185 changes: 125 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="TumblrTextTint is a free and user-friendly web application that enables you to customize the colour of your text on Tumblr. With a wide range of colour options, you can enhance the aesthetic appeal of your blog posts and add a personal touch to your content. This open-source tool generates HTML code for a span tag with a style attribute that sets the colour of your text. Whether you're a blogger, writer or simply looking to enhance your Tumblr posts, TumblrTextTint is the perfect tool for you."
/>
<meta name="author" content="Isabelle 'Loariya-Fiaba' Zennah"">
<meta name="keywords" content="TumblrTextTint, Tumblr, text formatting, custom colours, web application, code generator" />
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="src/styles.css" />
<title>TumblrTextTint</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<header>
<img src="images/logo2.png" alt="application logo" id="logo" />
</header>
<main>
<!-- The user input -->
<input type="text" name="user-input" id="user-input" placeholder="Enter your text here..." autocomplete="off" />
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="TumblrTextTint is a free and user-friendly web application that enables you to customize the colour of your text on Tumblr. With a wide range of colour options, you can enhance the aesthetic appeal of your blog posts and add a personal touch to your content. This open-source tool generates HTML code for a span tag with a style attribute that sets the colour of your text. Whether you're a blogger, writer or simply looking to enhance your Tumblr posts, TumblrTextTint is the perfect tool for you."
/>
<meta name="author" content="Isabelle 'Loariya-Fiaba' Zennah" />
<meta
name="keywords"
content="TumblrTextTint, Tumblr, text formatting, custom colours, web application, code generator"
/>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="src/styles.css" />
<title>TumblrTextTint</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<header>
<a
href="https://xiacodes.github.io/TumblrTextTint/"
title="The Official Web App"
><img
src="images/logo2.png"
alt="application logo"
id="logo"
class="hover"
/></a>
</header>
<main>
<!-- The user input -->
<input
type="text"
name="user-input"
id="user-input"
placeholder="Enter your text here..."
autocomplete="off"
/>

<!-- The radio button choices -->
<section id="radio-buttons">
<div class="align-center"><input type="radio" name="choice" id="colour-picker-choice" /><label for="colour-picker-choice">Colour-picker</label></div>
<div class="align-center"><input type="radio" name="choice" id="hex-code-choice" /><label for="hex-code-choice">Hex code</label></div>
</section>
<!-- The radio button choices -->
<section id="radio-buttons">
<div class="align-center">
<input
type="radio"
name="choice"
id="colour-picker-choice"
/><label for="colour-picker-choice">Colour-picker</label>
</div>
<div class="align-center">
<input type="radio" name="choice" id="hex-code-choice" /><label
for="hex-code-choice"
>Hex code</label
>
</div>
</section>

<!-- The actual choices to pop-up -->
<section class="hide" id="colour-picker-section">
<input type="color" value="#ff9933" name="colour-picker" id="colour-picker" />
</section>
<section class="hide" id="hex-code-section">
<input type="text" name="" id="hex-code" placeholder="Enter HEX code including the #" autocomplete="off" maxlength="7" />
</section>
<!-- The actual choices to pop-up -->
<section class="hide" id="colour-picker-section">
<input
type="color"
value="#ff9933"
name="colour-picker"
id="colour-picker"
/>
</section>
<section class="hide" id="hex-code-section">
<input
type="text"
name=""
id="hex-code"
placeholder="Enter HEX code including the #"
autocomplete="off"
maxlength="7"
/>
</section>

<!-- The button -->
<div class="first-btn-section">
<button type="button" id="generate-btn" class="">Tint my text!</button>
<p id="error-message" class="hide"></p>
</div>
<!-- The button -->
<div class="first-btn-section">
<button type="button" id="generate-btn" class="">
Tint my text!
</button>
<p id="error-message" class="hide"></p>
</div>

<!-- The textarea that the code will appear + buttons -->
<section class="bottom-section">
<textarea name="final-code-textarea" id="final-code-textarea" cols="40" rows="3" placeholder="Your code will be generated here..." readonly></textarea>
<div class="button-group">
<button id="copy-btn">Copy</button>
<button id="reset-btn">Reset</button>
</div>
<p id="copy-message"></p>
</section>
</main>
</div>
</div>
<footer>
<i class="fa-solid fa-code"></i> © 2023 TumblrTextTint. All rights reserved. Coded by Loariya-Fiaba - <a href="https://github.com/xiacodes" target="_blank" rel="noopener noreferrer">GitHub</a> |
<a href="https://xiacodes.tumblr.com/" target="_blank" rel="noopener noreferrer">Tumblr</a>
</footer>
<script src="src/script.js"></script>
</body>
<!-- The textarea that the code will appear + buttons -->
<section class="bottom-section">
<textarea
name="final-code-textarea"
id="final-code-textarea"
cols="40"
rows="3"
placeholder="Your code will be generated here..."
readonly
></textarea>
<div class="button-group">
<button id="copy-btn">Copy</button>
<button id="reset-btn">Reset</button>
</div>
<p id="copy-message"></p>
</section>
</main>
</div>
</div>
<footer>
<i class="fa-solid fa-code"></i> © 2023 TumblrTextTint. All rights
reserved. Coded by Loariya-Fiaba -
<a
href="https://github.com/xiacodes"
target="_blank"
rel="noopener noreferrer"
>GitHub</a
>
|
<a
href="https://xiacodes.tumblr.com/"
target="_blank"
rel="noopener noreferrer"
>Tumblr</a
>
</footer>
<script src="src/script.js"></script>
</body>
</html>
Loading