Skip to content

Commit a7a429f

Browse files
kemister85kemister85
committed
Update sign-up information and css.
1 parent ac12a94 commit a7a429f

File tree

7 files changed

+88
-41
lines changed

7 files changed

+88
-41
lines changed

‎modules/ROOT/pages/cloud-quick-start.adoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
:keywords: tinymce, script, textarea
66
:productSource: cloud
77

8-
include::partial$misc/admin-account-creation-and-social-option.adoc[]
9-
108
include::partial$install/basic-quickstart-base.adoc[]
9+
10+
include::partial$misc/admin-account-creation-and-social-option.adoc[]

‎modules/ROOT/pages/getting-started.adoc‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,4 @@ Learn how to install {productname} via {cloudname}, package managers, self-hoste
2323
// Empty cell to even out rows
2424
// |
2525

26-
|===
27-
28-
include::partial$misc/admin-account-creation-and-social-option.adoc[]
26+
|===

‎modules/ROOT/pages/introduction-to-tinymce.adoc‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22
:description: What is TinyMCE and how do I add it to my project.
33
:keywords: tinymce, script, textarea
44

5-
include::partial$what-is-tinymce.adoc[]
6-
7-
include::partial$misc/admin-account-creation-and-social-option.adoc[]
5+
include::partial$what-is-tinymce.adoc[]

‎modules/ROOT/pages/invalid-api-key.adoc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
Affected users will receive a xref:cloud-troubleshooting.adoc#A-valid-API-key-is-required-starting-2024-to-continue-using-TinyMCE.-Please-alert-your-admin-to-sign-up-to-get-your-free-API-key.[notification in their editor]. If you receive this notification, please contact the Administrator for your application/site. Admins will need to https://www.tiny.cloud/my-account/integrate/[get a valid API key] and paste it into the code to continue using {productname}.
1212
====
1313

14+
include::partial$misc/admin-account-creation-and-social-option.adoc[]
15+
1416
== How will I know if this change affects me?
1517

1618
If {productname} detects an invalid API key, it will display a notification. If you know or suspect you have been actively hiding or suppressing this notification, please remove these overrides. If you then see a notification, please follow the instructions to resolve the issue. If no notification appears, you are not affected.
@@ -64,6 +66,4 @@ You can view the list of approved domains by logging into https://www.tiny.cloud
6466
* If you plan to use only open-source {productname} features, the open-source version is available under the _GNU General Public License Version 2 or later license_.
6567
* If you want to self-host {productname} and use our Premium features, https://www.tiny.cloud/contact/[get in touch with our Sales team] for a custom quote.
6668

67-
TIP: For additional information on Troubleshooting Tiny Cloud visit: xref:cloud-troubleshooting.adoc[Cloud Troubleshooting].
68-
69-
include::partial$misc/admin-account-creation-and-social-option.adoc[]
69+
TIP: For additional information on Troubleshooting Tiny Cloud visit: xref:cloud-troubleshooting.adoc[Cloud Troubleshooting].

‎modules/ROOT/pages/usage-based-billing.adoc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66

77

88
[NOTE]
9-
The below information is only relevant to Tiny Cloud users. Users who self-host the open source version of {productname} are not subject to Usage-Based Billing terms, but are required to comply with the open source license terms.
9+
The below information is only relevant to Tiny Cloud users. Users who self-host the open source version of {productname} are not subject to Usage-Based Billing terms, but are required to comply with the open source license terms.
10+
11+
12+
include::partial$misc/admin-account-creation-and-social-option.adoc[]
1013

1114
== Definitions
1215

‎modules/ROOT/partials/misc/admin-account-creation-and-social-option.adoc‎

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,84 @@
11
++++
2-
<h1 style="color: #000000;">Quick Start</h1>
3-
<h2 style="color: #000000;">Create your free Tiny account</h2>
4-
<br>
5-
<p style="margin-bottom: 16px;">
6-
TinyMCE 7 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start guide covers how to add a TinyMCE editor to a web page using the Tiny Cloud.
7-
</p>
8-
<p style="margin-bottom: 16px;">
9-
Install TinyMCE to add a fully-featured, sleek, and intuitive rich text editor to your app—in just a few lines of code. After registration, you will find the personalized code snippet with your API key and a helpful guide that will walk you through the initial steps of your TinyMCE integration.
10-
</p>
11-
<p style="margin-bottom: 16px;">
2+
<div class="signup-promo">
3+
<p style="margin-bottom: 16px;">
124
It only takes 2 minutes to create your free Tiny account and get the API key:
13-
</p>
14-
<div class="account-creation-buttons" style="display: flex; gap: 10px; margin-bottom: 16px;">
15-
<a href="https://tiny.cloud/signup" title="Sign in with Google" style="text-decoration: none; padding: 8px 16px; background-color: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 4px; font-weight: bold; display: flex; align-items: center; transition: background-color 0.3s, color 0.3s;">
16-
<img src="https://www.tiny.cloud/images/icons/google.svg" alt="Google" width="24" height="24" style="margin-right: 8px;">
17-
Sign up with Google
18-
</a>
19-
<a href="https://tiny.cloud/signup" title="Sign in with Github" style="text-decoration: none; padding: 8px 16px; background-color: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 4px; font-weight: bold; display: flex; align-items: center; transition: background-color 0.3s, color 0.3s;">
20-
<img src="https://www.tiny.cloud/images/icons/github.svg" alt="GitHub" width="24" height="24" style="margin-right: 8px;">
21-
Sign up with Github
5+
</p>
6+
<div class="account-creation-buttons">
7+
<a href="https://tiny.cloud/signup?_gl=1*1m4fqt3*_ga*NDE5MTIxMjQwLjE3MzIxOTkwODE.*_ga_GQ50XYHWQZ*MTczMjI2OTAwMi4yLjEuMTczMjI2OTQwNy40LjAuMA..*_gcl_au*NTYyNTc2NTQyLjE3MzIxOTkwODE." class="account-creation-button" target="_blank" title="Sign up with Google">
8+
Sign up with email
9+
<span class="social-signup">
10+
<img src="https://www.tiny.cloud/images/icons/google.svg" alt="Google" width="24" height="24">
11+
<img src="https://www.tiny.cloud/images/icons/github.svg" alt="GitHub" width="24" height="24">
12+
</span>
13+
-&gt;
2214
</a>
15+
</div>
2316
</div>
2417
2518
<style>
26-
.account-creation-buttons a {
27-
transition: transform 0.3s ease;
28-
}
19+
.signup-promo {
20+
--radius: 3px;
21+
position: relative;
22+
padding: 16px;
23+
background: #f9f9fb;
24+
margin-bottom: 16px;
25+
border: 1px solid #e2e5ed;
26+
border-radius: var(--radius) 0 0 var(--radius)
27+
}
2928
30-
.account-creation-buttons a:hover {
31-
transform: scale(1.05);
32-
}
33-
</style>
29+
.signup-promo::before {
30+
content: '';
31+
position: absolute;
32+
top: -1px; bottom: -1px; left: -1px;
33+
width: 5px;
34+
background: linear-gradient(to bottom, #F66 15%, #4D66CB 85%);
35+
border-radius: var(--radius) 0 0 var(--radius)
36+
}
37+
38+
.signup-promo .account-creation-buttons {
39+
display: flex;
40+
gap: 10px;
41+
--options-gap: 10px;
42+
}
43+
44+
.signup-promo .account-creation-button {
45+
--shine-size: 120px;
46+
text-decoration: none !important;
47+
padding: 8px 16px;
48+
background: #0c132c linear-gradient(120deg, #0c132c 45%, #335dff 55%) 0 0 / calc(200% + var(--shine-size)) 100% no-repeat;
49+
color: #fff;
50+
border-radius: 2px;
51+
display: flex;
52+
align-items: center;
53+
transition: background-color 0.15s;
54+
font-family: Fira Code;
55+
font-variant-ligatures: common-ligatures;
56+
transition: background-position .15s;
57+
}
3458
35-
<p style="margin-bottom: 16px;">
36-
Or create your account on <a href="https://tiny.cloud/signup" style="color: #000000; text-decoration: none; border-bottom: 1px solid #000000;">https://tiny.cloud/signup</a>
37-
</p>
59+
.signup-promo .account-creation-button:hover {
60+
background-position: calc(-1 * var(--shine-size)) 0;
61+
color: #fff;
62+
}
63+
64+
.signup-promo .account-creation-button:active {
65+
background-position: 100% 0;
66+
color: #fff;
67+
}
68+
69+
.signup-promo .account-creation-button .social-signup {
70+
display: flex;
71+
margin: 0 12px 0 0;
72+
}
73+
74+
.signup-promo .account-creation-button .social-signup img {
75+
width: 16px;
76+
height: 16px;
77+
filter: invert(1) brightness(100);
78+
padding-left: var(--options-gap);
79+
margin-left: var(--options-gap);
80+
border-left: 1px solid #0008;
81+
box-sizing: content-box;
82+
}
83+
</style>
3884
++++

‎modules/ROOT/partials/what-is-tinymce.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
{productname} is a rich-text editor that allows users to create formatted content within a user-friendly interface.
22

3+
include::partial$misc/admin-account-creation-and-social-option.adoc[]
4+
35
liveDemo::default-editor[]
46

57
The output created is in HTML5 and can include lists, tables, and other useful elements, depending on your configuration. The functionality of the editor can be extended through plugins and customizations, or limited to suit your use-case. {productname} can also be customized to look and feel like part of your application or webpage by customizing the user interface. {productname} can be integrated into a range of frameworks and Content Management Systems (CMSs), and can be either:

0 commit comments

Comments
 (0)