gallery/index.html at main · D-ScratchNinja/gallery · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self';
        img-src 'self' https://*.scratch.mit.edu/;
        object-src 'none';
      "
    />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    <title>D-ScratchNinja - Project Gallery</title>
    <link href="index.css" rel="stylesheet" />
    <script src="index.js" type="module"></script>
  </head>

  <template id="template-project_card">
    <div class="card">
      <a class="style_as_text" target="_blank">
        <img class="image-thumbn" decoding="async" loading="lazy">
        <span class="text-label_large">title</span>
      </a>
    </div>
  </template>

  <body>
    <button class="accent floating_button skip_button">Skip to content</button>

    <div id="main_container">
      <header>
        <div>
          <div>
            <h2><a href="https://scratch.mit.edu/users/D-ScratchNinja" class="pink">D-ScratchNinja</a>'s Scratch projects</h2>
          </div>
          <div>
            <a href="#about" title="Content, privacy, safety, and other info">About & Info</a>
            <a href="#" id="btn-random" title="Pick one for me" aria-label="Random project" class="style_as_text emoji_button">🎲</a>
            <button id="btn-filter" aria-controls="filters_row" aria-label="Show search and filters" aria-pressed="true">Search or filter...</button>
          </div>
        </div>
        <div id="filters_row">
          <div class="item-row full">
            <select title="Category">
              <option value="">All</option>
              <option value="featured">Featured</option>
              <option value="animation">Animations</option>
              <option value="art">Art</option>
              <option value="fun">Fun</option>
              <option value="game">Games</option>
              <option value="information">Information</option>
              <option value="learning">Learning & Tutorials</option>
              <option value="library">Libraries & Engines</option>
              <option value="music">Music</option>
              <option value="tool">Tools & Utilities</option>
            </select>
            <select data-hidden data-if="game" title="Genre">
              <option value="">All</option>
              <option value="action">Action</option>
              <!-- option value="adventure">Adventure</option -->
              <option value="arcade">Arcade</option>
              <!-- option value="board">Board Game</option -->
              <option value="casual">Casual</option>
              <option value="cozy">Cozy</option>
              <option value="educational">Educational</option>
              <option value="multiplayer">Multiplayer</option>
              <option value="party">Party</option>
              <option value="platformer">Platformer</option>
              <option value="puzzle">Puzzle</option>
              <option value="racing">Racing</option>
              <option value="simulation">Simulation</option>
              <option value="strategy">Strategy</option>
              <option value="trivia">Trivia</option>
              <option value="word">Word</option>
              <option value="fast">Fast-Paced</option>
              <option value="slow">Slow-Paced</option>
            </select>
          </div>
          <form><input placeholder="Search" type="text" autocomplete="off" maxlength="50" enterkeyhint="search" spellcheck="false"></form>
        </div>
      </header>

      <main>
        <h4 hidden="hidden" id="no_results" class="center" tabindex="0">No results.</h4>
        <div id="list" class="list-grid_results"></div>
      </main>

      <footer>
        <div class="disclaimer center" role="contentinfo" id="about">
          <p>
            This gallery is curated and updated by hand, so not all of my projects are shown here. You can find them all
            <a href="https://scratch.mit.edu/users/D-ScratchNinja/projects/">on Scratch</a>.
          </p>

          <p>
            Scratch is available for free at <a href="https://scratch.mit.edu/" target="_blank">scratch.mit.edu</a> and is
            developed by the <a href="https://www.scratchfoundation.org/" target="_blank">Scratch Foundation</a> and its
            partners and affiliates.
          </p>

          <p id="links">
            <a href="https://scratch.mit.edu/users/D-ScratchNinja">D-ScratchNinja</a> · <a href="#" data-action="modal-privacy">Privacy & Safety</a>
          </p>
        </div>
      </footer>
    </div>

    <button class="floating_button top_button">Back to top</button>

    <dialog class="center" closedby="any">
      <h2>Site Privacy</h2>
      <p>
        This site's host, GitHub, may collect some technical information for security and stability reasons. Other than that, this
        site does not collect or obtain any data from visitors.
      </p>
      <p>
        This site displays thumbnails from Scratch's content delivery network. See the
        <a href="https://mitscratch.freshdesk.com/en/support/solutions/articles/4000219339-scratch-privacy-policy" target="_blank">Scratch Privacy Policy</a> for more information.
      </p>
      <h2>Project Privacy</h2>
      <p>
        Some projects on Scratch connect to Scratch's Cloud Data service, which allows a limited set of data to be stored or
        exchanged between users, but only for Scratch users logged into an account with the "Scratcher" status.
        <a href="https://mitscratch.freshdesk.com/en/support/solutions/folders/4000040835" target="_blank">Learn more about Cloud
        Data on the Scratch Help Center</a>. When I use Cloud variables to collect data, I follow
        <a href="https://scratch.mit.edu/projects/964120169" target="_blank">my own set of privacy practices</a>.
      </p>
      <h2>Safety</h2>
      <p>
        This site follows the <a href="https://scratch.mit.edu/community_guidelines/" target="_blank">Scratch Community Guidelines</a>,
        which requires user submissions and interactions within Scratch to be safe and age-appropriate.
      </p>
      <p>
        Cloud Data can be used to allow for limited communication between users. Forms of free communication over Cloud Data such
        as writing messages to other users are prohibited by Scratch. Again, you can
        <a href="https://mitscratch.freshdesk.com/en/support/solutions/folders/4000040835" target="_blank">learn more about Cloud
        Data on the Scratch Help Center</a>.
      </p>
      <button autofocus>OK</button>
    </dialog>
  </body>
</html>