index.html 2.71 KB
Newer Older
Kim Meiser's avatar
Kim Meiser committed
1
2
3
4
5
<!DOCTYPE html>
<html>
    <head>
        <title>tell.next</title>
        <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
6
        <script src="sketch.js" type="text/javascript"></script>
Kim Meiser's avatar
Kim Meiser committed
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
        <script type="text/javascript">
            var colors = ["#4169e1", "#b22222", "#bc8f8f", "#3D59AB", "#f5f5dc", "#b03060", "#cd853f", "#2f4f4f"];
            var messages = ["Male mit dem Finger oder hinterlasse eine Nachricht!"
                , "Was fehlt hier? Hast du eine Idee? Verbessere dieses Projekt @ git.hacksaar.de/hacksaar/schmierblatt"
                , "Kannst du es besser? Starte dein eigenes Projekt: http://getting-started.shared.local.hacksaar.de"
            ];

            function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)]; }
            function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)]; }
            function getRandomSize() { return Math.floor(Math.random() * 20 + 10); }

            function initialize() {
                initMessage();
                initCanvas();
            }

            function initMessage() { $('#message').text(messages[0]); }

            function initCanvas() {
                var jQcanvas = $('#simple_sketch');

                // Gre des Canvas auf aktuelle Bildschirmgre ziehen
                var canvas = jQcanvas[0];
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight - 30;

                // Sketch-Bibliothek initialisieren
                jQcanvas.sketch({ defaultColor: colors[0] });

                // Bei jedem Klick auf den Canvas wird Farbe und Gre des Zeichenwerkzeugs und der Hinweistext im Footer neu festgelegt
Tobi's avatar
Tobi committed
37
                function setRandomSettings() {
Kim Meiser's avatar
Kim Meiser committed
38
39
40
41
42
                    jQcanvas.sketch('color', getRandomColor());
                    jQcanvas.sketch('size', getRandomSize());
                    var message = getRandomMessage();
                    $('#message').text(message);
                };
Tobi's avatar
Tobi committed
43
44

		jQcanvas.bind('click touchstart', setRandomSettings);
Kim Meiser's avatar
Kim Meiser committed
45
46
47
48
49
50
51
52
            }

            // jQuery ruft initialize() auf, sobald das HTML-Dokument im Browser vollstndig geladen wurde
            $(function () { initialize(); });
        </script>
    </head>
    <body>
        <canvas id="simple_sketch" style="background-color: khaki; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></canvas>
Kim Meiser's avatar
Kim Meiser committed
53
54
        <div class="footer" style="background-color: gray; bottom: 0; height: 50px; left: 0; padding-top: 8px; position: absolute; right: 0;">
            <div id="message" style="color: white; font-family: Helvetica, Arial, sans-serif; font-size: 18px; position: relative; text-align: center;" />
Kim Meiser's avatar
Kim Meiser committed
55
56
        </div>
    </body>
57
</html>