crossword/index.html at master · jeffbcole/crossword · 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
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Crossword Solver</title>
	<meta charset="utf-8">
	<meta name="description" content="Play a crossword puzzle or create your own.">
	<meta name="author" content="Jeff Cole">

    <link rel="stylesheet" href="solver.css">
    <link rel="stylesheet" href="shared.css">

	<script>
		window.onload = function () {
            Initialize();
		};
	</script>

    <script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
    <script type="text/javascript" src="solver.js"></script>
    <script type="text/javascript" src="coop.js"></script>
</head>

<body>

    <div id="CoOpHeader">
        <div id="CoOpStatusText">Share id: </div>
    </div>

    <div id="ButtonsRegion">
        <label id="CoopConnectIDLabel" for="CoopConnectID">Peer Puzzle ID</label>
        <input type="text" name="CoopConnectID" id="CoopConnectID"/>

        <input type="file" name="file" id="OpenPuzzleButton" accept=".puz,.json"/>
        <label for="OpenPuzzleButton">Open</label>

        <button id="CoopConnectButton" class="CoOpButton" onclick="JoinPuzzle()">Join</button>
        <button  name="CoOpShareButton" class="CoOpButton" onclick="SharePuzzle()">Share</button>


    </div>

    <div class="TitleInfo">
        <div class="Title" id="Title"></div>
    </div>

    <article class="PuzzleLayout">

        <section class="BoardAndClueBar">
            <div class="ClueBar">
                <div id="ClueBarNumber"></div>
                <div id="ClueBarText"></div>
            </div>
            <svg id="Board" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.00 501.00" onmousedown="OnBoardClick(evt)">
                <g id="BoardCells">
                    <g>
                        <rect class="Cell" x="3.0" y="3.0" width="33.0" height="33.0" fill="none"></rect>
                        <text x="5.0" y="14.5" text-anchor="start" font-size="11.0">1</text>
                        <text x="19.5" y="33.25" text-anchor="middle" font-size="22.0">A</text>
                    </g>
                </g>
                <g id="BoardGrid">
                    <path d="M3.00,36.00 l495.00,0.00 M3.00,69.00 l495.00,0.00 M3.00,102.00 l495.00,0.00 M3.00,135.00 l495.00,0.00 M3.00,168.00 l495.00,0.00 M3.00,201.00 l495.00,0.00 M3.00,234.00 l495.00,0.00 M3.00,267.00 l495.00,0.00 M3.00,300.00 l495.00,0.00 M3.00,333.00 l495.00,0.00 M3.00,366.00 l495.00,0.00 M3.00,399.00 l495.00,0.00 M3.00,432.00 l495.00,0.00 M3.00,465.00 l495.00,0.00 M36.00,3.00 l0.00,495.00 M69.00,3.00 l0.00,495.00 M102.00,3.00 l0.00,495.00 M135.00,3.00 l0.00,495.00 M168.00,3.00 l0.00,495.00 M201.00,3.00 l0.00,495.00 M234.00,3.00 l0.00,495.00 M267.00,3.00 l0.00,495.00 M300.00,3.00 l0.00,495.00 M333.00,3.00 l0.00,495.00 M366.00,3.00 l0.00,495.00 M399.00,3.00 l0.00,495.00 M432.00,3.00 l0.00,495.00 M465.00,3.00 l0.00,495.00" fill="none" vector-effect="non-scaling-stroke" stroke="dimgray"></path>
                    <rect x="1.50" y="1.50" width="498.00" height="498.00" fill="none" stroke-width="3.00" stroke="black"></rect>
                </g>
            </svg>
        </section>

        <section class="CluesLayout">
            <div class="ClueList">
                <h3 class="ClueTitle">Across</h3>
                <ol id="CluesListAcross" class="ClueListList">
                    <li class="ClueLI">
                        <span class="ClueLabel">1</span>
                        <input class="ClueText" type="text">
                    </li>
                </ol>
            </div>
            <div class="ClueList">
                <h3 class="ClueTitle">Down</h3>
                <ol id="CluesListDown" class="ClueListList">
                    <li class="ClueLI">
                        <span class="ClueLabel">1</span>
                        <span class="ClueText">Clue one</span>
                    </li>
                    <li class="ClueLI">
                        <span class="ClueLabel">1</span>
                        <span class="ClueText">This is a clue text here with many letters</span>
                    </li>
                    <li class="ClueLI">
                        <span class="ClueLabel">1</span>
                        <span class="ClueText">This is a clue text</span>
                    </li>
                </ol>
            </div>
        </section>
    </article>
</body>

</html>