PageSizer/AppScript/GuideDialog.html at main · AdamNatad/PageSizer · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #1a73e8;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      html, body {
        margin: 0;
        padding: 0;
        font-family: "Google Sans", Arial, sans-serif;
        background: #fff;
        color: #202124;
        box-sizing: border-box;
        animation: fadeIn 0.3s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
      }
      @keyframes fadeOut {
        to { opacity: 0; transform: scale(0.96); }
      }
      .container {
        padding: 24px;
        box-sizing: border-box;
      }
      .card-box {
        background-color: #f9f9f9;
        border: 1px solid #dadce0;
        border-radius: 4px;
        padding: 16px;
        margin-bottom: 20px;
      }
      .section-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 6px;
      }
      .getting-started .section-title {
        color: #1a73e8;
      }
      .export .section-title {
        color: #188038;
      }
      .default-page-setup .section-title {
        color: #d93025;
      }
      .section-desc {
        font-size: 14px;
        color: #5f6368;
        line-height: 1.6;
      }
      .section-desc strong {
        color: #202124;
        font-weight: 600;
      }
      .button-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
      }
      .button-left,
      .button-right {
        display: flex;
        gap: 0px;
      }
      .material-button {
        font-size: 13px;
        font-weight: 600;
        color: #1a73e8;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 20px;
        transition: background-color 0.2s;
        white-space: nowrap;
      }
      .material-button:hover {
        background-color: rgba(26, 115, 232, 0.1);
        text-decoration: none;
      }
    </style>
    <script>
      function closeDialog() {
        document.body.style.animation = "fadeOut 0.25s ease-in forwards";
        setTimeout(() => {
          google.script.host.close();
        }, 250);
      }
      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closeDialog();
      });
      window.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
          document.getElementById('spinner').style.display = 'none';
        }, 200); // Hide after 200ms (or match your fade-in speed)
      });
    </script>
  </head>
  <body>
    <div id="spinner" class="spinner-overlay" style="display: flex !important;">
      <div class="spinner"></div>
    </div>
    <div class="container">
      <div class="card-box getting-started">
        <div class="section-title">Getting Started</div>
        <div class="section-desc">
          Open the Custom Page Sizer by going to:<br>
          <strong>Extensions → Page Sizer by Adam Natad → Start</strong>
        </div>
      </div>
      <div class="card-box export">
        <div class="section-title">Export or Download Note</div>
        <div class="section-desc">
          <strong>NOTE:</strong> Do not export or download directly to PDF from Google Docs as this may cause incorrect page dimensions. Instead, export your document as a <strong>.docx</strong> file by selecting <em>File → Download → Microsoft Word (.docx)</em>. Open the file in MS Word, verify the page size via <em>Layout → Size → More Paper Sizes…</em>, and then convert it to PDF.
        </div>
      </div>
      <div class="card-box default-page-setup">
        <div class="section-title">Google Default Page Setup</div>
        <div class="section-desc">
          <strong>WARNING:</strong> Setting a custom page size that is not officially supported by Google Docs may cause the default
          <i>File → Page Setup</i> option to become unusable. To restore access, use this add-on to switch back to a Google-supported paper size.
        </div>
      </div>
      <div class="button-row">
        <div class="button-left">
          <a class="material-button" href="https://www.natadtech.com/adam-natad" target="_blank">Learn more</a>
          <!--<a class="material-button" href="#" target="_blank">View in store</a>-->
        </div>
        <div class="button-right">
          <a class="material-button" href="https://github.com/AdamNatad/PageSizer" target="_blank">View source code</a>
          <a class="material-button" href="https://github.com/AdamNatad/PageSizer/issues" target="_blank">Report an issue</a>
        </div>
      </div>
    </div>
  </body>
</html>