TumblrTextTint/index.html at 64ef60a37cfb5b898c1a40f1f60b4fe3d3a578bc · izzycodes02/TumblrTextTint · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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>
          <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 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 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>